Printing Recommendations

Tips & Tricks
#1

Styles For Printer-Friendly Pages

Here are the key styles that can be applied for creating printer-friendly pages:

  • Simplify the Layout: Remove unnecessary elements like sidebars, navigation menus, advertisement sections and interactive content by setting display as none
  • Remove Background Colors: It is recommended to remove background color (or set light color) and set text color as black for printable version of pages. This helps to save ink.
  • Adjust Font Sizes and Styles: Use readable font sizes and styles, typically larger and more legible fonts like serif fonts.
  • Display URLs for Links: When you print a page containing hyperlinks, the exact URL for that will not be visible. So you need to replace this with exact link on printable version.
  • Manage Page Breaks: Make sure to control where content breaks between pages to avoid splitting important sections or headings across pages.

Ref: CSS Printing Techniques

Below are CSS examples. If you want to include them in your TiddlyWiki, add them to a stylesheet tiddler or create a new tiddler tagged with $:/tags/Stylesheet .

Hide TiddlyWiki Elements

@media print {
	/* hide extra element */
	.tc-titlebar,       /* hide title and icons on title */
	.tc-subtitle,       /* hide subtitle including date */
	.tc-tags-wrapper,   /* hide tags */
	.kk-utility-details /* hide source button  - Utility plugin*/
	{ display:none; } 
}

Add Page Size and Margin

@page {
    size: A4 portrait; /* A4 size, portrait orientation */
    margin: 2cm; /* 2cm margins on all sides */
}

/* First page has different styling */
@page :first {
    margin: 5cm; 
}

Page Background and Color

If you print with a black and white printer use below CSS.

@media print {
    body{
        background-color: white;
        color: black;
    }

Page Breaks

You may like start every tiddler in a new page, so use proper page breaks.

/* https://talk.tiddlywiki.org/t/print-css-for-tiddlers/12489/9 */
@media print {
    .tc-tiddler-frame { break-after: page; }
    .tc-tiddler-frame:last-of-type { break-after: avoid; }
}

Show URLs of links

Turn links like “Transclusion” into “Transclusion (https꞉//en.wikipedia.org/wiki/Transclusion)”. This does not transform internal links.

@media print {
    a[href]:not([href^="#"]):after {
        content: " (" attr(href) ") "; 
        /* text-decoration: underline; */  /* if you want those links to be underlined in the print */
    }
}

References

For advanced users. If you wish to explore further, you may consider reviewing the references provided below.

This CSS module specifies how pages are generated and laid out to hold fragmented content in a paged presentation. It adds functionality for controlling page margins, page size and orientation, and headers and footers, and extends generated content to enable page numbering and running headers / footers.

7 Likes
Proposal: A TiddlyWiki Print Dialog
#2

Working Example Style Sheet

Below is an example stylesheet for printing used the at rules ( CSS Paged Media Module Level 3):

  • Display each tiddler on its own page
  • Hide the title bar and tags wrapper
  • Use modern CSS Paged Media features for print output
    • Add a header and footer
      • Use specific page margin boxes e.g. left, center, and right
    • Include page numbers
    • Use TiddlyWiki macros or procedures, for example to insert the current date

This example can be used to generate a PDF suitable for articles or book chapters.

To try it out:

  • Open Edge, Chrome, or another Chromium-based browser (Firefox does not support all features. It has implemented partial features of CSS Paged Media by May 2025)
  • Download print_with_at_page_rules.json (3.3 KB)
    and import the file into https://tiddlywiki.com
  • Print the page by clicking the Print button (found in the Sidebar under Tools), or right-click and select “Print” from the browser menu

Output

Sample output

image
image825Ă—1015 14.9 KB

3 Likes
#3

That is fantastic!. I’m going to have to study this closely. I do a fair bit with print stylesheets, but this one does things I didn’t know were possible!

1 Like
#4

Absolutly fabulous! I dreamt of this for a long time. Thank you.
Is it possible to affect the size of the tiddler titles and/or text with those printing stylesheets ? The titles tends to be huge on printing but fine on screen.

#5

You can use and set properties of desired element for example

@media print {

h2.tc-title{
 font-size: 14px;
font-weight: normal;
}

}

In the example I shared, I have removed title from printing.

#6

I think the comment here is not necessary for running this in TW, at least so long as you don’t change the default tiddler type:

@bottom-left {
	content: "Printed on:<<now>> " /* You cannot use dynamic date here yet */;
	font-size: 9pt;
	color: #666;
}

The current date is working properly in this.

1 Like
#7

That’s right! It was before I used a dynamic stylesheet!
Images, tables, and codeblocks also need to be properly formatted to ensure a functional print stylesheet.