[x] Refine preview/print view layouts

[amberreeves]

With 250 words written and four supporting items (photos and quotes), either the right or left column of the final newspaper view is always almost empty. The body text appears in one column only, and often extra text is pushed to a second page in the same column. You get the same result with both styles and fewer words. The page preview and print preview look different.

[mtedeschi]

I will try to reconcile them a bit more, but it won't ever be 100% the same all the time.

[mtedeschi]

I got this a bit closer. Some of this is controlled individually on the browser when you print, so they way a printed page is different in Safari as it is in Chrome. That said, I fine tuned the size of things to make more stuff fit on the page and tried to optimize this a bit so its consistent between the preview and print. It's nearly perfect in Chrome and Firefox, but slightly off in Safari.

[amberreeves]

Print Preview is still not quite aligned, too much free space

[mtedeschi]

This seems to be working a lot better now. I now create the layout instead of relying on CSS to do it for us, so it will always fill all three columns (if you put in at least a minimum amount of content). Let me know if you see issues.

[amberreeves]

looks good

[amberreeves]

This has improved a little, but the result is still not quite there. We have done multiple tests and understand that different browser treat the preview and print differently. Chrome and IE see, to have the best result. Safari runs to 2 pages when printing.

https://www.dropbox.com/sh/vy9kk8pkxqghu4c/AACJCCFI7fW6Z4lgArB34r6ma?dl=0

In this Dropbox you will see examples of the differences produced by different browsers.

File: News-Preview-LChrome-RSafari-180124 Shows the same content displayed in the on-screen preview with Chrome on the left and Safari on the right.

File: News-pdf-Safari-180124 Shows the same content as above in a PDF file generated from Safari.

News-pdf-Chrome-180124.pdf Shows the same content as above in a PDF file generated from Chrome.

WHAT ARE THE OPTIONS TO MINIMIZE THE WHITE SPACE AND STAY ON 1 PAGE?

• If the featured image scanned two columns, the space would almost be full.
• Should we add a footer or widen the margins to help fill space?
• You are the experts, so we want to hear your creative ideas. Should we discuss?

[mtedeschi]

Mike to add comment on what's currently happening and what we will/will not address.

[mtedeschi]

@amberreeves: We can work on addressing the Safari specific issue that breaks the newspaper to two pages.

With the last update, we changed the way that we create the newspaper to better allow the content to fill all three columns. It currently collects all quotes, images, and your article (by paragraph) and distributes them into three columns. This allows the columns to each have some content (avoiding the blank column issues that was previously sent over). That said, the columns won't necessarily be even or won't be able to fill the page (especially not in every scenario).

Since the objective is to try to fill as much of the page as possible at 250 words and 4 big images/quotes, we can experiment with changing the font sizes and gutters between columns to allow the content to fill more space.

[mtedeschi]

I've gotten this as close as I can get it.

The safari page break issue is resolved (tested multiple ways, not encountering it again). Safari and chrome are looking identical now. Not observing any issues. Chrome-Sample.pdf Safari-Sample.pdf

I made the font sizes a bit bigger, but it started to throw off breaking to a second page which isn't the behavior we want. The only way to resolve that is to break paragraphs based on their word count, which enters into out-of-scope territory (processing each paragraph for number of words and finding the proper formula to split paragraphs logically based on word count is bananas). I hope this is a satisfactory solution.

[amberreeves]

looks great on chrome and safari.

[amberreeves]

The title issue is resolved in IE Edge, but is still occurs in PC Chrome. - we let her know that we could not recreate the issue, it's looking good on our device. she sent a screenshot showing us the issue on her end.

Headline – when it is only one line, the words are closer to the masthead than the byline and story. Can the one line headline be moved down a little so that it is visually connected to the story? Maybe center vertically, so the fix works for one and two lines. - we let her know that we would review/address this issue after we delivered annotator fixes today.