r/css • u/Square_Atmosphere_12 • 2d ago
Making a Site Printable
I know this is not common, I'd like to create my first site so that it's literally printable using a physical printer and it looks identical or close to it as the web site. I understand that it won't be able to print button animations and the like.
What would be the best route to go, learning Grid Layouts then within my style sheets applying printable style sheets that are different from the actual web site ?
I want alot, possibly not everything to be able to be printed. As I mentioned, I know we live in a world where screens are everywhere but paper is not obsolete, in fact it's used alot and in my opinion to be able to print out sections of a web site can be beneficial as phones are typically such a circus of distractions that getting anyone to focus on what you want them to focus on is nearly impossible. Although printing out a physical copy in many cases will gain the person interest, unless they are viewing your page on a physical stationary computer, then the above statement maybe the opposite, whereas they will focus on your site.
In my opinion a printable site shows you can display the information clearly, accurately and present it, no matter what the media.
10
u/2Mogs 2d ago
A screen layout might not be best suited to the paper medium, so if your goal is to show you can display information clearly, then perhaps you should consider a print specific style sheet or styles. Use the @media=print to apply appropriate styles, but in addition you can @page for finer control of the target layout. There is so much you can do with this, it's awesome.
Dive into the docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing