printing pages
dedicated print styles
Should not come as a surprise that my pages won't look the same on paper as they do on screens. They are styled for each media in turn, and many details that work well on screens work badly or not at all on paper.
Navigation doesn't work on paper – naturally enough – so all that is hidden. Much of the decoration, or “web design”, doesn't work well on paper either, so all that is gone or replaced for print also.
What you get on paper is all the content lined up in sequence over a number of pages, for each web page you choose to print out. All seen in the side-column on larger screens, is on separate page(s) or below the stuff from the main column on paper. The “addendum” completes it all for most web pages, spread out on one or more print pages.
Text is set to be printed in '14pt/1.35' with a 'serif' font, for paragraphs, lists and most other elements. That should provide your software/hardware with enough information to print readable size and well spaced text, without further adjustments.
print basics…
- Preferred (tested) format: A4 - Portrait.
- Preferred (tested) color: Full color or Black on White.
- Preset margins: top:5%, right:5%, bottom:5%, left:15%
- Paging: page-breaks and content-groups (mostly) tailored for print.
images in print
Images very much affect print layout, as they are the elements requiring most
space. Images are limited in width to fit available page width, but image-height
is limited to a max-height in px which does not always
produce optimal results.
Large images may appear to waste paper, as they are defined not to be printed across page-breaks and may instead cause page-breaks. This may result in lots of “leftover” white space on some pages.
I know there are some “accidents” – text not lineing up as intended with related images in print. In most cases such misalignments are the result of how text behaves around floats, and I'll fix these cases as/when I discover them.
added information…
I have made good use of ::before and ::after
to get somewhat important content and design elements through to print. This
method only works flawless in the latest browser versions, so some details may
be missing or slightly messed up in older versions.
I have added link addresses after all off-site links, since that's the only way to make them available on paper. Some end-users like to have them there while others don't, and I unfortunately cannot differentiate. On this site it doesn't make sense to show local (on-site) link addresses on paper, so they are only marked with “(*)”.
Note also that there's no background-images or -color declared for print, so apart from what color there may be in pictures it is all black text on white paper – if your paper is white. No need to set browser to print background, since there isn't much background to print.
your browser controls print-out
The better the browser the better the print-out – naturally. Latest
versions of the main browsers have acceptable support for “paged
media” – W3C
style, so should not be any real problems in those.
Older browser versions may lose a print detail here and there, or
simply place them wrong on pages. Usually no big deal, but I can in no way
guarantee that older browsers do a decent print job for all pages on my
site.
You can see a list over browsers I have tested print-out in, in the “side-notes” on this page. Those, and most not too old versions and variants of them, are expected to do OK most of the time.
Later browser versions are likely to do equally good or better than the ones tested, but print-out is not prioritized as high as screen presentation in browsers so progress is not guaranteed.
sincerely 
Hageland 03.mar.2011
04.may.2012 - minor revision.
18.jun.2012 - minor revision.
19.jun.2012 - minor revision.
20.sep.2013 - added screen capture note.
12.feb.2014 - minor revisions here and there, and added test of Opera 19.
26.aug.2016 - updated with new images.
27.aug.2016 - major revision.
27.sep.2020 - switched headline image. Updated tests.
last rev: 27.sep.2020
side notes.
print-out tested in these browsers…
- IE11:
Not very good print-standards support.
- Firefox 81:
Not very good print-standards support, and the same old bugs as it showed 10 years ago. Worst in class.
- Google Chrome 85:
Quite good print-standards support and for the most part excellent print-outs.
There is no such thing as a perfect browser, so take the above to mean that the “excellent” results are “just good enough”. There is also a print standard that is not quite there yet.
I will of course keep an eye on how major browsers progress in W3C print standard support as new browser versions are released. Will then over time also correct any sub-optimal parts in my own styles to go with revised print-standards.
Older browser versions may not pick up and use any print-styles. But, since most of these browsers are unlikely to falsely apply screen-styles for print, the print-out should be the browser's own black-on-white default print-styles with all content intact and more or less in the right places.
This is in line with my policy of focusing on progress across browser-land and more or less ignore old and obsolete browsers. I will make few changes to achieve better backwards-compatibility, no matter how bad old browsers treat, and print, pages on this site.
want hard‐copy of screen‐layout?
That some prefer web pages to look the same on paper as on screens, is fine with me. Web standards do not have that option in addition to print styles though, so here end‐users have to find their own solution.
Use PrintScreen function on your computer, or add one of the
many extensions found on the web that will capture screen‐layout for parts
of or entire pages, in your favorite browser.
Some may prefer SSR (Small Screen Rendering) screenshots…
… which are not far from print styles, but with navigation and other unnecessary extras.
Others may prefer full-screen screenshots with two-column layout…
… where only some fixed objects may be incomplete or out of place.
All one has to do is vary the width of the browser window to choose which styles that'll kick in. It is good to have options.