== Problem
For better readability, we need to make default print styles for desktop more printer friendly and reader friendly.
This work involves changes to typography and layout.
This task is for us to make the design changes to the styles so we can move towards resolving the EPIC at T154965
These changes also speak to T142207 which involves community consultation done by WMDE
== Patches to review
[x] Fix css rule in print stylesheet [Vector] https://gerrit.wikimedia.org/r/367627~~
[X] Fix font size and backgrounds in gallery [core] - https://gerrit.wikimedia.org/r/366967
[] Border bottom of headings should not overlap infoboxes [vector] https://gerrit.wikimedia.org/r/367817 Print styles
[] Print styles: footer [vector] https://gerrit.wikimedia.org/r/366738
[x] Print mode: Define when to use serif and when to use sans-serif [vector] https://gerrit.wikimedia.org/r/367812
[] Adjustments to printed table styles [core] - https://gerrit.wikimedia.org/r/366968
[] Adjust print styles for thumb [core] - https://gerrit.wikimedia.org/r/366970
[] Adjustments to floating elements in print styles [core] - https://gerrit.wikimedia.org/r/366971
[x] Print styles: Apply padding and margins to ol as well as ul - https://gerrit.wikimedia.org/r/367814
[] Print styles: Border bottom of headings should not overlap infoboxes - https://gerrit.wikimedia.org/r/#/c/367817/
== Design changes
[x] Omit certain elements
Various elements should be hidden in the display.
[] Typography
** Justify ** is captured in T171330
**Better headings**
Right now, headings get diluted in the body content and are difficult to spot. They also have uneven spacing between its own content block vs last content <p>
**Spacing**
Spacing between headings and <p> is a big issue. with new styles, we will have clear ownership of <p>s with its heading
**Hyperlink underline**
This is a community requested feature. We do not use color in print styles because it's printer friendly. Because of this, it is not possible to indicate blue links in articles. If a user wants to know if this article exists on wikipedia, it's not possible given solution. We would like to underline the <a> tags in print styles. it's better for accessibility as well.
**Body typography**
We would like to match Latex style body typography with single column. The new styles will reduce the number of pages by around 20-25%
That means, an article which takes 100 pages to print will take around 80 pages to print.
~~https://gerrit.wikimedia.org/r/366173~~
[x] TOC
Right now, table of contents looks broken in print styles. It looks unstyled and has no sense of hierarchy
~~https://gerrit.wikimedia.org/r/366618~~
[x] Hiding unwanted elements**
We would also like to hide unwanted elements on print styles, such as protect icons, hatnotes, buttons without content etc. the list is in CSS.
[] editor styles: (references and infoboxes)
http://reading-web-staging.wmflabs.org/w/index.php?title=MediaWiki:Print.css&action=edit
(to be ported to production once we've worked them out)
== Design spec
All of the above changes have been incorporated in this print.css file.
https://gist.github.com/jdlrobson/111b3fbf1e0e41fd5468ab5a5be9e969
(do not copy and paste verbatim - make sure you use LESS variables, reuse existing rules where it makes sense and do not add redundant CSS rules)
Zeplin spec for printing
First page + body text - https://zpl.io/UFmH3
H2-h3-h4 - https://zpl.io/1tywav
TOC - https://zpl.io/ZCn2Yv
= Implementation notes
[x] Nirzar's original stylesheet added overflow: hidden to h2s but it's not clear why. Check if there is a reason this is needed. We worked out why (see patches to review)
[x] Nirzar's original stylesheet both hid and added styling for #siteSub
https://gist.github.com/jdlrobson/712e6860ddf8a5dddcb55d7c164a2d1a - which is the prefered solution? Checked with Nirzar.. it's hiding it.
[x] I'm not sure what #administrator is needed for. Any idea? Nirzar says he doesn't know.
[x] It seems .play-btn-large is [[ https://github.com/wikimedia/mediawiki-extensions-TimedMediaHandler/blob/36a496fce0ceff59e24565488a05e1d65952a9a9/MwEmbedModules/EmbedPlayer/resources/skins/kskin/PlayerSkinKskin.css#L31 | already hidden by TimedMediaHandler in print mode ]].
[x] #coordinates .image is handled by a noprint class on the image in the template.
[x] The hiding of .hatnote, .mbox-small, and .navbox for print styles already happens in [[ https://en.m.wikipedia.org/wiki/MediaWiki:Print.css | MediaWiki:Print.css ]] albeit only for namespace 0.
[x] Baha pointed out some issues in https://phabricator.wikimedia.org/T169823#3461814 with infobox and heading overlapped
[] Baha pointed out in https://phabricator.wikimedia.org/T169823#3461814 with page breaks.. not clear how to fix.
[x] References and infoboxes shipped. IF there is a problem with this interim state we can scope to .vector-experimental-print-styles https://en.wikipedia.org/w/index.php?title=MediaWiki%3APrint.css&type=revision&diff=792334405&oldid=792184808
= Acceptance criteria
[] This should be feature flagged, defaulting to false
[] We will enable the print styles on the beta cluster and reading web staging