PrintingWithStyle

Summary: How to create a style for printing
Version:
Prerequisites:
Status:
Maintainer:
Categories: Publishing, CSS

Printing webpages is often a pain; if you are lucky half the page gets on paper and you can print the entire page using the landscape mode. Colors either drink your cartridge or make the page unreadable. This problem is not specific for PmWiki.

Many websites -including the ones created with PmWiki- have a special link to get a more printable version of the page.

I discovered that quite a few people using the wikis I run do not use the print-link. They don’t see it, or don’t like the special print version (sorry Pm).

Never the less, the print link is a extra bit of clutter on your webpage.

The good thing is that with modern browsers the whole thing can be solved using style. This solution is not specific for pmwiki.

Simple try it, add the following bit to the bottom of pmwiki.css

@media print {
#wikilogo,#wikihead,#wikicmds,#wikifoot,#wikileft {display:none}
#wikitext {margin:.5em}
body {width:auto;font-family:serif;font-size:14px;margin:.5em}
}

Now load your page and from the File menu take the Print Preview (or whatever it is called in your language)

  • The example above assumes that you are using the default pmwiki skin
  • The trick is in the display:none, use it for appropriate sections in your own skin
  • It is probably better to leave the pmwiki.css untouched. The style can be added using HTMLStylesFmt in your (farm)config.php
  • there are several good sources google on stylesheet ccs media, a nice one is http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html
  • All modern browsers support ccs2 and therefore the mediatype; some older browsers like netscape 4 don’t, well changes are that old browsers will not display your site correctly so why bother about printing

Example

A working example is on http://www.brambring.nl , do the print preview to see the difference with style only.

Contributors