Apply new mobile print styles based on the following:
during development we will work on a feature branch *printstyles*. As part of acceptance criteria this will be merged to master.
Design Spec
https://app.zeplin.io/project.html#pid=58b5f95e7b103f89913c25de&dashboard
Note: what to look for
- font sizes
- line heights
- padding around the pages
- treatment to images
- infobox treatment
- Feature flagging https://gerrit.wikimedia.org/r/343757
- Regular text, links https://gerrit.wikimedia.org/r/343930
- Chrome header, title and wiki data description https://gerrit.wikimedia.org/r/343976
- H2 should not have border-bottom in print mode https://gerrit.wikimedia.org/r/#/c/348458/
- article headers e.g. h1,h2... https://gerrit.wikimedia.org/r/343986
- Infobox https://gerrit.wikimedia.org/r/346659
- Image treatment https://gerrit.wikimedia.org/r/346931
- Quotation ~~https://gerrit.wikimedia.org/r/#/c/347019/~~~ and https://gerrit.wikimedia.org/r/347793
- References https://gerrit.wikimedia.org/r/#/c/346824/
- Footer https://gerrit.wikimedia.org/r/347028
- Large tables Retain the styles for all <tables> and wikitables as is.
- Switch sub headings to san-serifs in both screen and print view https://gerrit.wikimedia.org/r/347890
- Force legal print size https://gerrit.wikimedia.org/r/347533
- Currently the paddings are optimized for "Legal" page size which looks great. but if we are unable to force Legal as a default option, we will have to optimize for "letter" page size which is the default on Android and many other devices. choice is based on our constraints https://gerrit.wikimedia.org/r/#/c/347533/
Descoped
- Disable lazy loading images in print mode (https://gerrit.wikimedia.org/r/343975)
(This is trickier than we first assumed)
Acceptance criteria
- print styles should not impact the normal site display
- Print styles should be feature flagged. Disabled by default and enabled in beta.
- Conditionally add a skins.minerva.printstyles ResourceLoader module that will only be added when the feature flag is true
- Do not use @when as the content would differ in beta/stable
Each printed article must contain the following:
- Title
- Wiki wordmark
- Images
- If an image has not yet been loaded due to lazy loading - no GAP must appear where the image is expected to be
- Page number
- Last edited date
- Licensing
- All tables in a readable format (readable as determined by Nirzar in the mockups)
- Link to desktop version of print
- Link to original article
- Be in legal size format
- Mobilefrontend on tablet should use desktop print styles. not the mobile print styles
Articles must not contain:
**This must be feature-flagged and off by default (testing will be done on the beta cluster)
- Disambiguation notes (ex: This article is about 2-dimensional Euclidean space. For the general theory of 2D objects, see Surface (mathematics))
- Article notes (ex: main article, see also, further information, redirects, etc - these are currently stripped from the desktop print version)
- Links to other articles appearing in black, styled as normal text
- Every template currently stripped in desktop printing should be stripped for the mobile version
Testing Criteria
Style must be available (and tested on) for phones and tables on (at least) the following browsers:
- Chrome (iOS and Android)
- Android browser
- Safari
- Firefox (iOS and Android)
- IE Mobile
- Microsoft Edge
- Opera Mobile
- Opera Mini
- UC Browser