Plots2: Refinements to CSS/styling of Beta print templates

[Tlazypanda]

Please describe the problem (or idea)

After the addition of the Printable (Beta) Version to the print options, it is now time to test it out and report bugs so that we can solve them and provide users with good experience with Printing.

Please show us where to look

Inviting the Public Lab team to test the Print view and report bugs found so we can correct them. Let this issue act as a main issue/thread for reporting bugs with print view.

[Tlazypanda]

Hey @jywarren after we get the tests merged and the changes are pushed live will tag Liz and other community members to test this out and hopefully figure out the shortcomings of the print option :sweat_smile: Will need some extensive testing with different types of content to understand where this might be failing

[Tlazypanda]

Hey @jywarren can we get the work till now published if there are no bugs :sweat_smile: so that we can get this tested out with Liz and others ...with their feedback I can then make more changes to the template :tada:

[ebarry]

Super! Thanks for all your work on this. I realize the Fellowship Period is already closed, so no pressure. I'm just going to use this issue to continue documenting:

Surprisingly, the width printed on the PDF page depends on the width of the monitor you were looking at the wiki page on! See this PDF exported from my 1280 px laptop screen, where all the text is cut off on the righthand side, and some HTML cards were cut in half too:

🎈 Public Lab_ sandbox-microplastics.pdf

See this PDF exported from Jeanette's wide external monitor screen width:
🎈 Public Lab_ sandbox-microplastics (1).pdf

@jywarren this is also documented on: https://publiclab.slack.com/archives/CV7KG8MFT/p1600479414001300

[Tlazypanda]

Hey @ebarry I just looked at the pdfs they seem to be printed from the old print option :sweat_smile: and not the new printable(beta) option ...can you cross check once :sweat_smile:

This is how it looks on the new print option -
🎈 Public Lab_ Print.pdf

can you check this print option once on the widescreen and let me know how it goes? Thanks :v:

[Tlazypanda]

Also with the new printable(beta) option here I noticed the cards part is breaking on page change so I will try to fix it so that it stays in the entire card stays in a single page :sweat_smile:

[ebarry]

Thank you! I think the issue is that your great work has not yet been integrated all the way onto publiclab.org yet, so my comment was a bit hasty <3

[Tlazypanda]

Ohh no issues :v: Thanks for pointing this out @ebarry since I corrected the card page-break in #8415 after noticing this :sweat_smile: please keep on sending more bugs my way :smile:

[jywarren]

Hi all! For reference, here is a snap of the current PDF styling (top of first page) on the left, vs. the previous one which is a little broken but has fonts that are a little closer to the online version of the page:

I think the current one is looking great! Perhaps a little more vertical line spacing, and the use of Junction Light, could be nice?

Also, a Q for @ebarry and other staff, do you want things like the # of revisions, last edited, shown at the top?

Finally, what about removing the black lines around the images... i'm not set on it but it might look a little more spacious!

Thanks @Tlazypanda !!! This is tremendous. If we are comfortable with this being better than the existing function, perhaps we should deprecate the old one already?

[ebarry]

+1 those ideas would be great @jywarren: change text to Junction Light, add more vertical line spacing, and removing the black outlines around images.

As far as the information shown at the top, i tend to like to keep the evidence of "collaborative editing" even when using the content as simple printed handouts. I would vote to keep the "Last edited by" and "## revisions" but maybe lay them out more elegantly? Jeff, maybe you could advise here a bit?

[Tlazypanda]

Hey @jywarren let's keep this open since @ebarry 's suggestion is still left to implement 😅

[Tlazypanda]

@jywarren Can you help me out with how should we go about @ebarry suggestion? 😅 Thanks I don't have an eye for design so help appreciated 💯

[steffnat]

Hi,
first also a big thank you for your work :-)
On my Chrome browser the printable(beta) option also is dependent on the screen size and not printing the complete phrases in portrait mode - you have to use landscape mode.
In Microsoft Edge and Firefox it works normally.
But what I´m missing most is that you cannot print the valuable comments neither selecting it nor using the print version!
This comments are so useful and help a lot and printing them adds a great value to the pdf especially for research!
It would be very nice t implement the possibility to print the comments together with the notes.
Thanks and best regards!
Steffen

[steffnat]

Just on thing more - copy & paste in a Word.docx works, but ... ;-)

[jywarren]

Hi, I'm really sorry @Tlazypanda to have missed your comment here. I think @ebarry is referring to some of the "Standard" typographic styles we use at Public Lab and I think it's a great idea. We don't have to do all the font sizes the same but you can see the standard usage of the Junction Light font in our print style guide here:

https://publiclab.org/wiki/style-guide#Print+documents

@steffnat aha, a really good point. Are the comments completely missing? I think we may need to add them to the print template, here:

https://github.com/publiclab/plots2/blob/main/app/views/notes/print.html.erb

That's also where our print-friendly stylesheets for this new print system are kept. We could move those to their own separate stylesheet file in something like print2.css if we want.

Finally, it sounds like the clipping of text you're describing means we need to continue to tweak those stylesheets to get good consistent printing working. Are you at all interested in trying some of this out, @steffnat?

Thanks all!

[jywarren]

Also just noting some fabulous features in https://evanbrooks.info/bindery/ which we should explore.

Implementation looks really easy, too:

const { makeBook, PageBreak, Footnote } = Bindery;

makeBook({
  content: '#content',
  rules: [
    PageBreak({ selector: 'h2', position: 'before', continue: 'right' }),
    Footnote({
      selector: 'p > a',
      render: (el, num) => `${num}: Link to ${el.getAttribute('href')}`;
    }),
  ],
});

[steffnat]

@steffnat aha, a really good point. Are the comments completely missing? I think we may need to add them to the print template, here:

https://github.com/publiclab/plots2/blob/main/app/views/notes/print.html.erb

That's also where our print-friendly stylesheets for this new print system are kept. We could move those to their own separate stylesheet file in something like print2.css if we want.

Finally, it sounds like the clipping of text you're describing means we need to continue to tweak those stylesheets to get good consistent printing working. Are you at all interested in trying some of this out, @steffnat?

Hi @jywarren,
yes the comments are completely missing.
The clipping seems to happen especially in Chrome depending of the screen size.
When you change something I can try it out (betatesting) but better I don´t tweak the style sheets myself 😉
Thanks and best regards!
Steffen

[jywarren]

Hi, thank you. I am not 100% sure where we are on the idea of including comments. Maybe @ebarry has input on this? I'll also ask some other @publiclab/community-reps. Maybe eventually we could include them optionally via a checkbox?