Tuning TiddlyWiki for Polished Prints

This morning, in typical distracted fashion, I got the urge to start experimenting with using CSS to style a website for printing and decided to use the copy of TiddlyWiki I use for personal organization as the test bed.

I was so impressed by how nicely the results printed out that I just had to share them. The particular pages that most impressed me are private stuff, so I can’t share them, but here’s the TiddlyWiki markup reference:

TiddlyWiki: Screen versus Print

Here’s the full PDF. (Note: There is actually a visible difference between reading the PDF on-screen and printing it. DPI makes all the difference. I was also going to experiment with page margins, but I liked the results so much that I didn’t want to change anything.)

The CSS below works perfectly with a completely un-modified default TiddlyWiki theme… though it does also include a couple of tweaks that only really have an effect if you’ve got certain plugins installed. (eg. CheckboxPlugin)

Depending on how you use TiddlyWiki, you may want to skip the “Hide tag-related floats” or “Page break before each tiddler” lines in your copy. I made sure that, before I hid them, the floats didn’t look too horrifying.

To really exercise the stylesheet, print out a stream of several tiddlers with at least one outline list full of checkboxes and at least one span of text similar to an O’Reilly book. (Roughly a page worth of paragraphs with some technical nouns marked up in italic here and preformatted text there)

UPDATE: After sleeping on my results, several improvements occurred to me:

  • Fixed table heading color in Chrome (Not sure how I missed this one)
  • Adjust things to look good when printing of background colors and/or images is enabled.
  • Create a CSS class that can be applied using {{checkList{ ... }}} to hide bullets if your list starts each entry with a checkbox anyway. (Much prettier TODO lists both on-screen and in printouts)
  • Switch to vertical-align: bottom for checkboxes after more eyeball-testing with Firefox and Chrome

CC BY-SA 4.0 Tuning TiddlyWiki for Polished Prints by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

This entry was posted in Geek Stuff. Bookmark the permalink.

One Response to Tuning TiddlyWiki for Polished Prints

  1. JCupp says:

    Nice. I adapted this to allow page breaks in tiddlers when printing them out.
    put .pageBreak{page-break-after: always; } in the stylesheet tiddler

    and
    {{pageBreak{Force a page break after this line.}}} in the tiddler.

Leave a Reply

Your email address will not be published. Required fields are marked *

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution under the same terms as the associated post.       Also, please be aware that non-constructive comments will have their URL field erased before being approved in order to combat SEO spam.