Reading/Web/Projects/Print Styles

From MediaWiki.org
< Reading‎ | Web‎ | Projects
Jump to navigation Jump to search

Currently, desktop and mobile print styles have a number of known issues:

  • Tables do not print correctly.
  • Typography uses lots of ink to print.
  • Saving an article as a PDF on mobile presents the desktop version of the article.
  • Branding information for Wikipedia and the other projects (e.g., Wikivoyage and Wikiversity) is not present, causing confusion around the source of the content.

The reading web team will be updating the browser print styles on desktop and mobile to address these issues.

Solutions[edit]

Mobile Printing[edit]

The most common use cases of printing on mobile devices is to save articles as PDFs for later reading. Currently, the styles delivered for PDFs reflect desktop print styles and are thus difficult to read on a mobile. We will be creating mobile styles that are simpler and easier to read and well-fitted for the context of users reading articles offline or in places with low connectivity.

Problems with current implementation[edit]

  • Text is unreadable without zooming in
  • Missing elements like article title, images etc
  • No branding or indication the content came from Wikipedia or sister sites
  • Bad typography

Solution[edit]

Design details can be found here[edit]

Desktop Printing[edit]

The current print styles have issues printing tables and do not contain proper wikipedia branding. We will be updating these styles with improved branding and typography and a focus on: - saving paper while printing - reducing the number of pages printed by 20-25% - better headings - project-specific branding - book-like styling similar to our current book rendering option - clear printing of tables and infoboxes More info on the exact specifications can be found in the corresponding phabricator task

We are planning on deploying these styles in September 2017. Below is a side-by-side sample of our old versus new styles for printing. Note that the new styles result in 28 pages of text versus the previous 38 pages:

Development and deployment plan for desktop print styles[edit]

  • Develop new styles and deploy to the beta cluster for internal testing (July 2017)
  • Perform qualitative and/or quantitative tests to gauge print styles improvements (July 2017)
    • Because the effects of printing will be best gauged over time, our short-term tests will be focused on determining whether the styles are appropriate for users and preferred over the previous styles.
  • Inform communities of upcoming changes (July 2017)
  • Roll out styles to all projects (August - September 2017)

Limitations[edit]

  • Articles containing charts or tables created using templates that use the CSS rule "background-color" will not print with the colors intact (T173909). This was also the case with the previous print styles.
    • The "Download as PDF" feature does include the proper colors.
    • A possible suggestion is to use the Extension:Graph to generate tables and charts instead of using templates and div elements and CSS.
  • Articles which make use of overflow: scroll and max-width to limit content should make use of Extension:TemplateStyles to make their content compatible with print mode (see phab:T197032)
{"cc_re__cc_re__cc_by_sa_3_0": ["-add wb-langlinks-link\"><a href=\"https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&amp;page=Reading%2FWeb%2FProjects%2FPrint+Styles\" title=\"Add interlanguage links\" class=\"wbc-editpage\">Add links</a></span></div>\t\t\t</div>\n\t\t</div>\n\t\t\t\t</div>\n\t\t</div>\n\t\t\t\t<div id=\"footer\" role=\"contentinfo\">\n\t\t\t\t\t\t<ul id=\"footer-info\">\n\t\t\t\t\t\t\t\t<li id=\"footer-info-lastmod\"> This page was last edited on 16 August 2018, at 21:48.</li>\n\t\t\t\t\t\t\t\t<li id=\"footer-info-copyright\">Text is available under the <a href=\"https://creativecommons.org/licenses/by-sa/3.0/\">Creative Commons Attribution-ShareAlike License</a>;\nadditional terms may apply.\nSee <a href=\"https://foundation.wikimedia.org/wiki/Terms_of_Use\">Terms of Use</a> for details.</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t<ul id=\"footer-places\">\n\t\t\t\t\t\t\t\t<li id=\"footer-places-privacy\"><a href=\"https://foundation.wikimedia.org/wiki/Privacy_policy\" class=\"extiw\" title=\"wmf:Privacy policy\">Privacy policy</a></li>\n\t\t\t\t\t\t\t\t<li id=\"footer-places-about\"><a href=\"/wiki/Project:About\" title=\"Project:About\">About MediaWiki.org<"], "copyright__copyright__copyright": ["l not print with the colors intact (T173909). This was also the case with the previous print styles.\n    \u2022 The \"Download as PDF\" feature does include the proper colors.\n    \u2022 A possible suggestion is to use the Extension:Graph to generate tables and charts instead of using templates and div elements and CSS.\n  \u2022 Articles which make use of overflow: scroll and max-width to limit content should make use of Extension:TemplateStyles to make their content compatible with print mode (see phab:T197032)", "l not print with the colors intact (T173909). This was also the case with the previous print styles.\n    \u2022 The \"Download as PDF\" feature does include the proper colors.\n    \u2022 A possible suggestion is to use the Extension:Graph to generate tables and charts instead of using templates and div elements and CSS.\n  \u2022 Articles which make use of overflow: scroll and max-width to limit content should make use of Extension:TemplateStyles to make their content compatible with print mode (see phab:T197032)"]}