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:
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
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.
All comments are moderated. If your comment is generic enough to apply to any post, it will be assumed to be spam. Borderline comments will have their URL field erased before being approved.
About the Author
I'm Stephan, a Linux user with a passion for open-source, UI/UX design, and exploring what makes fiction work.
In my spare time, I focus on (and write about):
Programming (mainly in Python and Rust)
Retrocomputing (mostly DOS but, as of January 2023, I also own a machine running Mac OS 9.2)
Reading and Reviewing Fiction
The odd bit of UI/UX design or literary theory
For notification of significant updates to existing posts, consider following me on Mastodon.
Tuning TiddlyWiki for Polished Prints by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
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.