Print.CSS for Tiddlers

#1

Is there any print.css allow you to print a river of tiddlers each in separate page with a customizable header footer?

I am aware of @BurningTreeC print plugin. But Here I just want a simple stylesheet to allow this.

#2

This is a section in my custom CSS tiddler which handles everything including print, the file has a tag

$:/tags/Stylesheet so that it gets picked up by TW as CSS.

/* I would like tags to be printed when I print out a tiddler but not the more details bit*/
@media print {.tc-tags-wrapper {display: block ! important;}} 
@media print {.tc-btn-invisible {display: block ! important;}}
@media print { details[open] > summary { display: none; }}
@media print {.tc-subtitle {display: none;}}   /* not the date */ 
@media print {.tc-rating {display: none;}}   /* not the star rating */
@media print {.viewtemplatebigtext {display: none;}}   /* not backlinks */
4 Likes
#3

Much appreciated. Can I use CSS and include a standard header to printed pages (tiddlers)?
For example a header like

Course Content                                                                       McMaster Uni
--------------------------------------------------------------------------------------------------
#4

There are probably better CSS experts than me for this one, firstly though the purist view was/is that CSS is intended to alter the appearance of content not actually add additional content but there is a CSS device you can possibly use, here is a rough and ready attempt, I very much doubt it will be exactly what you want but it might be a useful starting point.


@media print {

div.tc-tiddler-body::before{
   content: "Course content";
   font-family: Georgia;
   font-size: 1.5rem;
   text-decoration: underline;
   margin: 0 0 1.0rem 0;
   position: absolute;
   opacity: 1.0;
   color:#ff6a2b;
  background-color:#fff 
}}

This CSS adds content in this case the title ā€œCourse contentā€ at the start of every tiddler, if memory serves me correct you can only inject text you cannot inject html so if you want it underlined you will need to find a way to do this with the CSS that styles the injected text - you cannot use


"Course content <br><br>"

as far as I know.

The CSS acts conditionally only if you are printing.

Another solution would be to find a non-CSS way to add a few lines of content at the start of every tiddler and then use CSS to make it invisible if it was not being printed but I think that would open up a whole lot of issues to be solved when you come to edit the content of the tiddler because it would appear in the editor window but this is already sounding very messy to me.

I think the CSS method to inject extra content only when you are printing is the tidier solution if you can get it to work as you want it.

1 Like
#5

You might need to play around and remove the position:absolute part of the CSS, I use this code to add fancy quotation marks around pearls of wisdom from experts in my field. I used absolute positioning for this purpose. I took the CSS I use and deleted lines not necessary for your use, you may need to explore positioning - there might be clashes with other elements in some cases, try it and see.

#6

In my quick and dirty testing, this css fragment looks like it forces a new page after each tiddler (I dont know if .tc-tiddler-frame is the best class for all cases though)

@media print {
    .tc-tiddler-frame { break-after: page; }
}
2 Likes
#7

It appears that this solution generates a blank page at the end. How can one prevent such a blank page?

#8

no idea Iā€™m afraid. both my TW and CSS skills are at the ā€œpoke around till I get the basics working the way I wantā€, and for my skill level, I dont see an obvious way to stop that effect. I feel like the solution would be for the story river to have a div inserted between items, and the break-after could be applied to that div, rather than after each tidbit itself. But if thatā€™s doable, it eludes my basic ā€˜poking aroundā€™. It might be something possible in a custom theme or layout?

fwiw, I didnā€™t notice this as my own TW installs always get an item tagged $:/tags/BelowStory - and that appears on the final page of printing for me.

#9

Untested, but I would expect something like this to work:

@media print {
    .tc-tiddler-frame { break-after: page; }
    .tc-tiddler-frame:last-of-type { break-after: avoid; }
}

Perhaps last-child or some other variant would be better.

2 Likes