Page MenuHomePhabricator

Articles with tables larger than page will shrink aspect ratio and adjust font-size
Closed, DuplicatePublic

Description

Background

Font sizes are not consistent across articles

Steps to recreate

  1. go to http://reading-web-staging.wmflabs.org/wiki/Barium_nitrate and print article
  2. go to http://reading-web-staging.wmflabs.org/wiki/Barium_oxide and print article or http://reading-web-staging.wmflabs.org/wiki/Barium

Expected behavior Font sizes should be consistent
Observed behavior Font sizes vary

Developer notes

The table "Salts and covalent derivatives of the " at the bottom of http://reading-web-staging.wmflabs.org/wiki/Barium_nitrate defines a max-width:1300px; - this is too big for the printed medium so what happens here is the entire page aspect ratio is shrunk to accommodate the table (like resizing an image) leading to the smaller font size.

When hiding this the font-size reverts back to normal at the expense of clipping the table:

Possible solutions

We must choose between showing all content inside the page or losing control of font-size. This seems like a product and designer decision.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 5 2017, 11:28 AM
ovasileva triaged this task as High priority.Sep 5 2017, 11:28 AM

There's no reason the font size should differ unless the print mode is optimising the content. Are we sure this is not the browser doing "print to fit on page"?

ovasileva updated the task description. (Show Details)Sep 5 2017, 2:53 PM

@Jdlrobson - my bad, left this out of the task description: https://phabricator.wikimedia.org/T172184#3567800

Jdlrobson added subscribers: Nirzar, bmansurov.EditedSep 5 2017, 2:59 PM

Small font size seems to be caused by the wide table at the end of the article. Adding #content { overflow: hidden; } seems to fix the issue.
The infobox is giant because it contains long lines of text. I don't think we're styling the infobox much. @Nirzar, should we set the maximum limit for the infobox width?

There is a question for nirzar there.

I still find this strange. A table should not impact overall font size so I suspect the browser is doing something to optimise the printed version. @bmansurov do you know why this fixed the problem? Overflow hidden could easily result in hiding some content that should be printed and we should avoid using it imo.

I haven't looked into why the fix works. I'll leave it to whoever works on the task.

ovasileva updated the task description. (Show Details)Sep 5 2017, 4:34 PM
ovasileva updated the task description. (Show Details)Sep 5 2017, 4:40 PM

@ovasileva to provide more examples

Jdlrobson updated the task description. (Show Details)Sep 5 2017, 4:48 PM
Niedzielski renamed this task from New print styles displaying articles with varying font size to [6 Hours] New print styles displaying articles with varying font size.Sep 5 2017, 4:50 PM
Niedzielski added a project: Spike.
Jdlrobson updated the task description. (Show Details)

@ovasileva @Nirzar see "Developer notes". There is a decision to be made here.

Jdlrobson updated the task description. (Show Details)

Let's decline or stall and add to backlog. This is the behavior on production with existing styles.

@Nirzar - are you sure? I'm seeing irregular/smaller font sizes on about 1/2 of all articles:

Compare:
http://reading-web-staging.wmflabs.org/wiki/Mexico_City
http://reading-web-staging.wmflabs.org/wiki/Barcelona
To:
http://reading-web-staging.wmflabs.org/wiki/Dog
http://reading-web-staging.wmflabs.org/wiki/Canis

Agree that this is currently happening on production, so I wouldn't consider it a blocker for the current styles, but I think it's a fairly significant readability issue. Is there any way we can only shrink content in tables?

ovasileva moved this task from Triage to Needs Analysis on the Proton board.Sep 6 2017, 6:59 PM

Possible solutions

  1. Clip tables/hide content where it overspills. This is an editorial decision and not recommended.
  2. Do nothing and live with the aspect ratio shrink - the font size does decrease for these pages but you can also see all the content.
  3. Decrease table font-size - this will make tables harder to read, but in some cases may improve things with respect to the rest of the article however will not fix certain situations such as http://reading-web-staging.wmflabs.org/wiki/Barium_nitrate

As @Nirzar points out this is a problem with the existing styles. If content is too wide for the page the entire page will be resized to fit the page.

Let's make a decision.

TheDJ added a subscriber: TheDJ.Sep 7 2017, 2:39 PM

This is also browser specific behaviour isn't it ?

This is also browser specific behaviour isn't it ?

Is it?

I still say we keep it in tracking or backlog.

I still say we keep it in tracking or backlog.

What is the goal at doing this?
See also https://phabricator.wikimedia.org/T174955#3588362 from @phuedx
Phabricator is not a great place for tracking things that cannot be fixed or we don't know how to fix. It makes it harder to actually find things that should be worked on.

What is the goal at doing this?

that we know this is an issue but it needs more work to understand the issue and more work to fix. but all of that if we decide to fix this.
just saying, we should decide not to work on this right now and put it in a bucket where put things that needs analysis or more work. aka backlog :)

What is the goal at doing this?

that we know this is an issue but it needs more work to understand the issue and more work to fix. but all of that if we decide to fix this.
just saying, we should decide not to work on this right now and put it in a bucket where put things that needs analysis or more work. aka backlog :)

ditto on this. I've been grooming the proton board regularly and I think it's a good place to keep track of this work. In terms of the suggestion in https://phabricator.wikimedia.org/T174955#3588362 - I think we can (should) do both. I'll make a note to add both of these to the documentation.

Jdlrobson renamed this task from [6 Hours] New print styles displaying articles with varying font size to Articles with tables larger than page will shrink aspect ratio and adjust font-size.Sep 8 2017, 12:11 PM
Jdlrobson updated the task description. (Show Details)
ovasileva moved this task from Needs Analysis to Backlog on the Proton board.Sep 11 2017, 11:59 AM

Confirmed as same bug.
@Nirzar the developer notes outline the options here that we have thought of so far. Let me know if I can help you understand the problem more and have any other ideas about how to solve.

Unsure if it's only tables. Here's an example with very small font, a lot of math present here however

Yeh it's not just tables- it's any element which has a width bigger than the page width. In the example above the maths images are to blame yes. We should update the description to make that clearer.

I tried a bunch of ways to break the table in print mode as well as all the @page props but none of it works. tried zoom and transforms as well. there has to be a way we break up the table instead of scaling the entire article. the description has possible 2 options but @ovasileva we should explore a third option. breaking tables somehow.