Print specific template for public lab content

[Tlazypanda]

Please describe the desired behavior.
Currently the publiclab website uses a set of css hiding strategies to only print important content from a note or wiki. We need to replace this with print specific template for public lab content.

This print specific template can make use of js manipulation to only pull important part of content from the note and add css styling accordingly.

[Tlazypanda]

Hey @jywarren @cesswairimu pulling all printability related discussions here from #7883 😅
I had been researching on this for a while and have created a basic js script for this for now. Here is an example page printed using this - I have here pulled only the content div in notes, added styling for tables, blockquotes etc, page break strategy for ul,ol,table etc and some header and footer content that we can add. Haven't opened a pr yet since it is a work in progress.
mozillla.pdf

As we had discussed once can you share some content from the publiclab team that they had trouble printing 😅 so I can get an idea of what all content I have to deal with and how I can accordingly modify my js script. Thanks a ton!! 🎉

Also for now I have just added it as another option in the sidebar along with the already existing print options so where should we place this now and what should this option be called? 😅 Thanks ✌️

Edit: The comment in the pdf is not the comment getting printed it is actually an image that I had added so sorry for any confusion caused 😅

[Tlazypanda]

@ebarry Since you have been working alongside the public lab team your insights and feedback much appreciated on this 🙏 🚀

The pdf right now is just a work in progress so I have just implemented some basic features so it doesn't look that good right now 😂 😅

[Tlazypanda]

@jywarren @cesswairimu @ebarry Updated print design 😅 Please have a look and provide feedback. Thanks ✌️
🎈 Public Lab_ My work so far on the print proposal thing.pdf

[ebarry]

super! This looks really really nice!!!!!!!!! Overall the flow and balance of headings looks great!

Couple observations:

• I wonder if there's a helpful way to show if this is a note or a wiki by the way the author's byline is depicted?
• Could the author byline show all authors and co-authors for notes?
• Could the author byline show all authors of non-spam revisions of wikis?
• I like the display of links. All of the emphasis together -- bold, underlined, and with no space between the link text and the URL -- is a little much, i wonder if this might be scaled back in emphasis?
• what is the font that is being used? Are there several fonts being used?

[Tlazypanda]

Hey @jywarren @cesswairimu @ebarry while working on the wiki side of it I noticed that we are using iframe for showing videos 😅 since it is not possible to manipulate iframes from css/js due to CORS and other issues I was thinking of setting the display to none for that 😅 I can get the src and add it to the top of the doc but not at the place where the frame is since manipulation is not allowed (tried with insertBefore/append/contentWindow.document.title/css::after/before but getting blocked by CORS) 😅 Let me know how I should proceed with this?

Also noticed buttons like Share research note and alerts, I suppose we can add some sort of styling to differentiate them in the print doc or do you think we should display them? Not sure about this 😅

[Tlazypanda]

Hey @ebarry Thanks so much for looking into this and for being honest if anything looks off 🎉 (i am not a design person as you would have figured 😂 )and I have added some more queries that I have with this above can you please answer them too 😅

• For the wiki side of it I am actually coming up with a different layout working on it 😅
• Sure, let me look into it 😄 (one more query here I am showing the profile pic of the author then the name so incase of multiple names should I just display the pic of the primary author or just lose this feature at all)
• Yup, will look into it ✌️
• Sure, thanks so much for being so clear on the requirements, I will modify it lose some of the emphasis 😅
• The font used is Arial since upon researching on best fonts for print documents ✌️ For the tables I have used the font Calibri since it suits tables more and the header text (i.e the the date at the top) is set by the browser itself 😅

Also here I have tried to avoid colors for the most part and kept text black for ink efficiency that works right? 😅 or should I make it more appealing?

[ebarry]

Super -- when showing the profile pic of the author followed by the name, please show all authors like this (both profile pic and name) even if it takes more than one line. Attribution is very important!

[Tlazypanda]

@ebarry Ohh cool gotcha!! 🎉

[jywarren]

Hi! For interactive content that doesn't make sense in print, like YouTube, perhaps we could add a "fallback" content inside that says YouTube video or just Embedded content with a box around it? I'm not sure, but maybe see what that looks like. I think some elements allow HTML inside as "what shows when it doesn't load properly", you know?

And, i think i remember you saying you'd be trying to generate these PDFs from a Rails template; how did you make them? Would you mind sharing a PR link (or sorry if I missed it and you have already).

Thanks! This is very exciting!

[Tlazypanda]

Hey @jywarren Actually at that time I was thinking of using wkhtmltopdf gem for that but as you had pointed out that we won't be requiring a lot of its functionalities and its better to have a home grown tool so I wrote a javascript file and created a dom structure from it only keeping the essential and scraping of the rest 😅 I have created a wip pr now as I get more and more idea about the styling and how to display different things in this I will keep adding commits ✌️ can you please review #8149 ? since I have just started on this have some refactoring and code cleaning to do 😅

[Tlazypanda]

Hey @ebarry @jywarren regarding the wiki layout should we display the date created (asking since it is not there on the original wiki template that we use) also sharing screenshots for

• The author change adding coauthors (notes):-

• The author change adding coauthors (wiki) also notice that I have kept the heading centered here to differentiate layout from notes :-

• The link styling (remove extra emphasis) :-

can you please review these and let me know if any changes are required? Thanks you ❤️

[Tlazypanda]

Hey @ebarry @jywarren can you kindly review the above changes if they are alright? 😅
Also can you please answer these queries? Thank you ❤️

• Should we have a date created for wiki since we dont have it on the original template?
• Should we have the number of edits of wiki in the print template?
• Can you please share some wikis/notes that were having issues with printing so I can test them out and fix if anything is not working?
• Currently the sidebar print options have two options of print without links and in 3-column form so are there any specific options that I should be adding along with this print template? if yes then exactly what specifications are required ?
• Also [WIP]: add print preview #8149 is completely based on a js script should I add tests for it and the tests should just be assertion for what elements are present on the print template ?

Thanks a ton 💯

[ebarry]

Should we have a date created for wiki since we dont have it on the original template?
Yes (but am still asking other people if they have opinions)

Should we have the number of edits of wiki in the print template?
Yes

Can you please share some wikis/notes that were having issues with printing so I can test them out and fix if anything is not working?
I'll ask people!

Currently the sidebar print options have two options of print without links and in 3-column form so are there any specific options that I should be adding along with this print template? if yes then exactly what specifications are required ?
Having the two options of print seems fine. I haven't thought of any others! I will ask some people however.

[Tlazypanda]

Thanks @ebarry ❤️ also can you review my above message as well where I have shared the modified design? Thanks ✌️

[ebarry]

From your designs above, i see there are some graphic design choices like:

• Notes have left-justified titles with co-authors shown in a vertical stack
• Wiki titles are centered with co-authors listed horizontally
• links appear in the text in parentheses, in slightly lighter color

These all look great!
Can you describe how images are handled? Do they print in the same way they are displayed on the wiki page, as in, bound by a maximum height or width?

[ebarry]

You can also jump on https://pad.publiclab.org/p/opencall https://zoom.us/j/934187763 right now to talk to @steviepubliclab

[Tlazypanda]

Hey @ebarry I am sorry I totally missed this since it was quite late in India at that time and fell asleep 😴 I would love to know if there's a next call I can jump on ✌️

To answer your question about the images they will be displayed the same way they are on the wiki 😅

Muchas gracias for the review ❤️

[ebarry]

Great! There is an open call every Tuesday at 3pm ET / 12:30AM midnight for India time -- which is not great - sorry! https://pad.publiclab.org/p/opencall
Here are the pages that Mimi highlighted as having difficulty printing because of having so many images:

• https://publiclab.org/notes/bronwen/05-07-2018/microscope-webcam-conversion
• https://publiclab.org/notes/warren/12-13-2017/assembling-the-public-lab-lego-spectrometer

[Tlazypanda]

Hey Liz! @ebarry @jywarren Thanks so much for the invite but I am afraid it's a bit too late and I have some college work in the morning so I won't be able to join 😅 Can you please review the following changes? Thanks ❤️

As for these pages here are some changes I have made to make the images printing better: -

And as per the discussion on wiki to add the no. of revisions and the created at date here is the changes made:-

[Tlazypanda]

Hey @ebarry Can you please review? Thanks ✌️ Please let me know how I can improve 🙌