p5.js-web-editor icon indicating copy to clipboard operation
p5.js-web-editor copied to clipboard

Add @media print CSS statements to be able to get usefull pdf formatting

Open valueerrorx opened this issue 1 year ago • 6 comments

In order to document the work of my students it sometimes makes sense to use the webbrowsers print to pdf feature

unfortunately the cookie banner is always visible, the code is cut off and the rest doesn't fit either. adding some css statements would help a lot

@media print { //this controls how the view is printed (to pdf) #cookiebanner { display: none !important; } }

thank you!

valueerrorx avatar Jun 05 '24 10:06 valueerrorx

Hi @valueerrorx, could you provide more context on the use case you are asking for? Screenshots will be helpful. Just to confirm, is this issue related a p5.js website (https://p5js.org) or p5.js website editor (https://editor.p5js.org)?

Qianqianye avatar Jun 05 '24 17:06 Qianqianye

Screenshot_20240611_082455

talking about the editor. it would be really nice if the @media print would change the css in a way that the code and the result are shown.

valueerrorx avatar Jun 11 '24 06:06 valueerrorx

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

welcome[bot] avatar Jun 15 '24 01:06 welcome[bot]

Hi @Qianqianye @raclim Could you please clarify the expectations for this issue? Specifically, when utilizing landscape orientation in a PDF printout, all the code becomes visible. image

Chaitanya1672 avatar Jun 15 '24 13:06 Chaitanya1672

ok thank you... landscape is a little bit better. but because the code element is integrated in the sourrounding page it will be clipped.

if the editor component is set fit content and the sourrounding divs are set to overflow-y visible the whole code would be printed. the cookie bannner (and the console) need to be set to display:none

Screenshot_20240616_122649

valueerrorx avatar Jun 16 '24 10:06 valueerrorx

ok @valueerrorx, I also think it is a good idea to include only the code and its solution in the PDF. I will work on this. In the meantime, you can check my PR if you haven't already. I have added preview image.

Chaitanya1672 avatar Jun 16 '24 13:06 Chaitanya1672