Investigate which styling quick fixes could be made to the print style
Closed, ResolvedPublic5 Story Points

Description

Since we are probably going to create a browser based rendering version for pdfs[1], we should think about at least some quick fixes we could do to remove the worst styling behaviors of the printable version. This ticket is not about getting the perfect design just yet, it is more about what are the issues that should definitely be fixed when we deploy the browser based rendering version.

In detail this means:

  • What are the most painful problems of the current design of the printable version, and how could they be fixed?
  • Would there be any way to include local print.css files and if yes, how would they interact with the global file?

Related ticket about the long term vision of printable version layout: T135022

Background:
One of the wishes of the 2015 German-speaking community wishlist as well as the international community wishlist was the support of tables in pdfs: T135643.
It would take an enormous engineering effort to add tables to the current latex layout in a way that 80%-90% of the tables display correctly. 10%-20% would always be off due to the different capabilities of the two media (printed, layouted page versus HTML). Therefore the idea is to offer another way of rendering pdfs. The new browser-based rendering version will not have the well designed latex layout (at least for the start), but look like the printed website - not perfect for print, but at least complete. The community consensus is still ongoing as of August 3, 2016.

[1] If the community agrees to the suggestions, which looks very promising so far: https://de.wikipedia.org/wiki/Wikipedia_Diskussion:Technische_W%C3%BCnsche/Topw%C3%BCnsche#Wunsch_Tabellen_in_PDF_darstellen_-_Stimmungsbild_zum_L.C3.B6sungsvorschlag

Restricted Application added a project: Design. · View Herald TranscriptAug 5 2016, 2:19 PM
Lea_WMDE moved this task from Incoming to Tables in pdfs on the TCB-Team board.Aug 8 2016, 3:01 PM

What are the most painful problems of the current design of the printable version, and how could they be fixed?

Brief suggestions:

  • Smaller font, more line spacing will result in better readability while using the same space.
  • Headlines have the same space above and below; visually, they can be grouped with either adjacent paragraph, but they should be grouped with the one below. (The same problem exists in the web stylesheet, so I wonder if there is a particular reason)

@Nirzar , @Volker_E: Do you think that above mentioned change would make sense as a small improvement of the printing stylesheet?

@Jan_Dittrich Are you speaking about smaller font in connection with a two column as proposed in the linked discussion page.
Print styles don't currently define a general font-size and leave it up to the browser's default (which is in most cases 12pt. I'd rather oppose going for a size smaller than that given our broad spectrum of users – think visual impairments.
The headlines margin is definitely an issue worth trying from my point of view.

Jan_Dittrich added a comment.EditedAug 26 2016, 7:32 AM

@Volker_E:
Yes, visually impaired readers are a concern of mine, too. I just assume that the line spacing is currently so small (basically none) that it probably does more damage than a reduced font size. It makes finding the start of the next line hard (likely also, and particularly, for visually impaired readers) , since everything visually blurs together when "jumping" there.

↓as example, the phabricator texts with the Wikipedia print font settings.

If we have a 2 column layout it would make the influence of too few spacing less severe (since the distance at which one’s line can get "lost" is shorter) still, for all I know about typography, there should be at least a bit

I'm totally fine leaving the font size like it is, it will just take more space.

Jan_Dittrich moved this task from Incoming to Done on the WMDE-Design board.Aug 30 2016, 12:18 PM

I'd suggest the following changes in the stylesheet of pages with the parameter…&printable=yes:

  • line-spacing for the body text: 135% (slight increase, since if printed, we have overly long line length)
  • use the following spacing for the headlines being added to the headlines h2-h6 : margin-top: 1.8em;

@Volker_E: does that make sense to you?

Should we attempt to move forward here or wait for some final confirmations?

Hmm – would it make sense to make the two changes in the css in a branch so that others can have a look at them easily? I assume the change itself might just take 10min (we could do that together over hangout)

@Lea_WMDE @Addshore @Jan_Dittrich please consider adding your thoughts on design-specifics at T135022, maybe we could split some of the changes proposed from there and fulfill them early-on by addressing this ticket in a patch.

@Volker_E I agree! This ticket should be realizing the easy-to-make fast changes of T135022 . As far as I can see, so far the other ticket has incorporated all suggestions from here :)

atgo added a subscriber: atgo.Oct 11 2016, 9:44 AM

Can we close this?

Change 320720 had a related patch set uploaded (by VolkerE):
[WIP] Improve print styles

https://gerrit.wikimedia.org/r/320720

line-height and margins are both discussed over at T135022 with the early patch provided (maybe split only those properties out again from the patch if other things are disputed).

I don't know if this is the correct place to put this, but in PDF like https://en.wikipedia.org/api/rest_v1/page/pdf/Berlin, you often have section titles at the end of a page. Those section titles should be moved to the next page. That is

Instead of


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section

Subsection

<page break>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


You should have


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<page break>

Section

Subsection

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


If this should be filed as a separate ticket, let me know.

@Headbomb Thanks, this is an important typographic issue. The wanted behavior is already included in our code,

h1,h2,h3,h4,h5,h6 {
		font-weight:bold;
		page-break-after:avoid
	}

…but it seems not to work in all cases. CSS support for the "page-" properties is a bit sparse, maybe that’s why.

Some additional example what doesn't work well at the moment:

e.g. if you want to print https://de.wikipedia.org/wiki/Benutzer:TMg/advancedSearch which includes some overly long strings, the line is not breaking and thus text is cut off. This should be easy to avoid by improving the stylesheet.

@Tobi_WMDE_SW: You could put it in a new issue. Two remarks:

  1. It seems not to be easy. One could try with " overflow-wrap: break-word; word-wrap: break-word;" but they could also break in cases in which it is not essential.
  2. It is sadly a common problem that also exists in LaTex etc.
mb removed a subscriber: mb.Jun 8 2017, 1:10 AM
TheDJ added a subscriber: TheDJ.Jun 15 2017, 12:02 PM
Volker_E closed this task as Resolved.
Volker_E edited subscribers, added: Lea_Lacroix_WMDE; removed: gerritbot.

@Lea_Lacroix_WMDE @Jan_Dittrich This task should be closed now with T135022/T154965/T169823 fully under way. As @Lea_Lacroix_WMDE has already stated above, suggestions here got included into those tasks. Feel free to re-open if you think there's something missing out.