Limiting floated left/right elements to a certain amount of space e.g. 50% of the screen / 33% of the screen

I like this. let's use display blocks if the elements take up more than 50%

but that wouldn't solve this problem, would it? since this is 2 elements together taking up more than 50%

but that wouldn't solve this problem, would it? since this is 2 elements together taking up more than 50%

What I'm saying is we can restrict it to a max width of 50% -- at least for infobox, table of contents and thumbnail.

Change 376266 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Do not allow certain content to span entire page

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

If I understand correctly, this is the issue specifically:

That is, the wrapping behavior under certain widths on certain articles is undesirable because it leaves orphans. I tried changing the clear: left behavior with the idea that we could do this with media queries:

Wide (off):

But I guess this would be problematic across a diversity of articles.

Why has this and T174957 been moved to do? The work has been done (so this probably should be code review), but I'm reluctant to seek review for this until https://phabricator.wikimedia.org/T174957#3585819) has some clearer answers. @MBinder_WMF how would we capture this on a kanban board?

Thanks for flagging, @Jdlrobson. It's possible Olga moved it from Upcoming ("getting ready") to To Do ("obviously ready") because work was already being done, and left it to the discretion of the team to columnize (I'm speculating). It seems sensible that if "the work has been done" then it is, in fact, in progress, and #readers-web-kanban-board is the appropriate place for it while we try to figure out the review approach.

@ovasileva Should the team estimate this before it enters To Do? If not, it would be useful to have an explanation in a comment saying that it is ready anyway. :)

@MBinder_WMF, @Jdlrobson exactly. We had a pause during sprint planning before estimation, but agreed that the work would go into this sprint. Thus - moving to to-do. I agree that we should have an estimate on this and T174957: Infobox breaking toc in new print styles.

@Nirzar Readers-Web-Backlog (Design)

Change 377317 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/skins/Vector@master] Print styles: set minimum width for paragraphs

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

I've pushed an alternative solution, which I think is cleaner and scales to all problematic articles. ^

@Nirzar, do you think the minimum width of 120pt is enough for paragraphs in this situation? If not, can you give a number so that I can update the above patch?

@bmansurov
is the solution to clear both sides of paragraphs? or we can jump on a call if this is a lot of back and forth

When the space is less than 120pt:

When the space is more than 120pt:

@Nirzar, ping.

@bmansurov's change looks fine (and has been +1'ed by @Volker_E) but we're waiting on @Nirzar to OK the 120 pt constant AFAICT.

coming up the magic number would be difficult, let's go with 120 for now.

Change 377317 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Print styles: set minimum width for paragraphs

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

Hello, I took a quick look and noticed a few things that I wanted to share. I tried a couple articles on Staging. Here is what I found:

Mini-Hatch

Chrome	Firefox
Differences
On Chrome there is text between the images pg2	On Firefox the infobox borders do not extend on infoboxes longer than one page pg3

Cassini-Huygens

Chrome	Firefox
Differences
Text is squished next to info boxes on both	Same border issue as above, but a little more visible with the wide infobox

Looks good to me. The first issues is tracked under T174955: Infobox styling disappears in firefox. For the second I believe @bmansurov suggested a fix by limiting the width of the infobox in https://phabricator.wikimedia.org/T172184#3567800 - I think this should be tracked separately though. I think for this one, we're ready for signoff. I'll let @Nirzar and @bmansurov confirm.

/me is bold per T175008#3614356.

Mostly looks good. I'm curious why in the first scenario the text doesn't appear in between the image and the infobox in Firefox. From the screenshots it looks like the Firefox is reserving bigger margins, thus reducing the space for text.

@ABorbaWMF could we re-do the first scenario with the same margins for PDFs? Could we also remove the header/footer added by the browsers?

@bmansurov I'm not sure I understand. I can change the margins a bit by choosing different options while printing. Are you looking for something like 'actual size'? I am also not sure how to remove the header/footer from my end. Admittedly, I don't know much about PDF generation, so please forgive me if I am missing something obvious. Thanks

@ABorbaWMF thanks. There are a couple of options in Firefox's Options tab of the print dialog. I've tweaked them to remove the header/footer (things like date, URL, etc.). I also set the page size to US Letter (without changing the margins -- unlike what I asked for). I still see the problem, but I think that's because the infobox is unusually large. And that issue is tracked in another task. So I think we're good here.

Edit:
^ Was on my development environment. I've used the staging environment to create PDFs using the same page size and same margins (0.26, 0.24, 0.24, 0.26 inches). Firefox still ignores these settings and outputs large margins. When I set to ignore scaling and fit everything in one page, Firefox behaved correctly. Here are the results:

• Chrome

• Firefox

• Firefox (scaling ignored):

So, as far as we're concerned, the solution given to the problem works. However, Firefox has issues with margins and causes all kinds of discrepancies when a page is printed.

Looks good to me too. @bmansurov - to double-check, the default for firefox would be the scaling ignored version, right? Over to @Nirzar for signoff

I don't think the default is to fit everything on the page (i.e. scaling ignored).

Change 376266 abandoned by Jdlrobson:
Do not allow certain content to span entire page

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