Two Issues that I am not sure if anyone can help with.

I am trying to print a Twitter page capture that was downloaded. I acnnot get the formatting quite right. If you view the original html pages in browser they look fine. Including all the files I am using as a sample.

1. Making a css entry to hide the content in the noscript tag doesn't seem to work. The Meta content still prints
2. The Twitter top bar doesn't get formatted correctly. As you will see in the PDF attached the images don't expand to fit in the correct width.

I have tried overriding some twitter elements and have had no luck in getting a nicely formatted webpage.

I am guessing there may be some javascript or other formatting issues that are not executing but I have been unable to get them to work.

(Included is the html file, a css file I am using to format, and the resulting pdf file)

1. tweets.html‎ 221.3 kB
2. twitter.css‎ 0.3 kB
3. twitterout.pdf‎ 61.5 kB

Edited 13 Oct 2016 by nineohnine

Does anyone have any ideas on how to fix this auto scaling issue? The original html source is responsive to the page size it is being printed to, but something is throwing off the header sizing (plus other elements) and throwing the paging and the formatting off.

I put in a hack to wrap the <noscript> tag inside a div that I could hide and that will work for now.

I'm looking.. Seems the main issue here is the top navigation not floating correctly up there, but scattering the various elements across the top half of the page. If I hide the navigation with

.global-nav-inner .container {display: none;!important}

The rest looks OK to me. There are numerous errors that might be related, Prince warns about unsupported flexbox properties being used as well as the CSS calc() function - however, so far I haven't found the smoking gun. I'll keep looking, perhaps there is a better solution..

Announcement: repos for tests/utils

Edited 19 Oct 2016 by hallvord

One of Twitter's quirks is that ALL the CSS code using media queries to adapt to different widths specifies

@media screen and ...

effectively cancelling out all the styling that would adapts to a narrower width when Prince applies styles for print media. It would be nice if they would use

@media all and ...

instead. This fixes some of the problems as Prince's output now also will have the smaller icons, text like "Home" removed if necessary - but for some reason, Prince still refuses to obey the float:left instruction to put those icons in a row horizontally..

Announcement: repos for tests/utils

Run Prince with the argument --media=screen and apply this CSS to fix it:

.nav>li {
    display: inline-block;
}
ul.right-actions,
.global-nav [role=search] {
    display: inline-block;
}

Explanation (gets a bit CSS-nerdy): Twitter is laying out the top navigation items as floating elements inside inline-block elements that are themselves floated left or right. Not a bad idea, but while web browsers don't seem to mind that some of those floating inner elements are not themselves inlines, Prince does mind. So if you want floating inline-blocks inside floating inline-blocks you had better tell Prince explicitly that the inner elements are also to be rendered as inline-blocks and not leave them as list-items or blocks or some such.

I haven't dived into the spec to figure out if this is something Prince should change. I have submitted a test case here:
https://github.com/yeslogic/miscellaneous-testcases/blob/master/layout/floating-list-items-inside-floating-inline-blocks-001.htm
in case they want to fix it - if Prince's behaviour is the right one, the wording of that test needs to be fixed

Announcement: repos for tests/utils

You my friend are awesome. My programming skills are good, but I suck at css