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

[valueerrorx]

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!

[Qianqianye]

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)?

[valueerrorx]

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.

[welcome]

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.

[Chaitanya1672]

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.

[valueerrorx]

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

[Chaitanya1672]

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.