Check “header and footer” in print dialog will add a lot of unnecessary infos to the generated pdf-file.
Therefore it would be a nice addon to have “Page 1 of 3” or “1/3”.
How can that be done?
Thanks,
Stefan
It is not possible for the preview window to know the total number of pages that will actually result when the output printed. However, it is possible to use a CSS “counter” variable and @page rules to automatically display the current page number in the margin area of each page. Thus, while “Page n of 3” or “n/3” cannot be displayed, “Page n” can be shown.
I’ve updated TiddlyTools/PrintTiddler to add the following controls in the preview window:
- a
$checkboxwidget to optionally display the page number in the bottom-right margin of each output page. - a “layout”
$selectwidget to choose between “portrait” and “landscape” output. This setting is only applied to the TiddlyTools/PrintTiddler output and does not affect the current layout setting of the general system print dialog.
enjoy,
-e
Note:
In order to display the print preview window, TiddlyTools/PrintTiddler creates a separate “template” tiddler named $:/print. As a result, invoking the “print this tiddler” tiddler toolbar button causes the TWCore to consider the file as being “dirty” and will give a “Changes you made may not be saved” warning when closing the browser window.
To avoid this, you can edit the default $:/config/SaverFilter shadow tiddler and add -[[$:/print]] to the list of tiddlers to be ignored. After a save-and-reload, printing tiddlers will no longer cause the file to become “dirty”.
In addition to avoiding the “unsaved changes” warning, you can also prevent the $:/print tiddler from ever being saved in the file. To do this, create a tiddler (e.g., $:/config/PublishFilter) tagged with $:/tags/Global, containing the following macro:
\define publishFilter() -[[$:/print]]
This will cause the $:/print tiddler to automatically be omitted whenever the usual “Save Changes” sidebar button or TWCore auto saver is triggered.
-e
An idea, what if an open in new window preview would allow a click to add or remove page breaks before handing it to the print driver eg pdf. an option to save back in the source tiddlers, or not would be wonderful, but I don’t underestimate the complexity I do think it is achievable.
- on print we can review the print preview and identify where additional page breaks are needed, return to the window, insert or remove page break, print preview again until happy.
- we could also have CSS activated to avoid break on all practical html elements, including paragraphs and optional repeating headings on next page for tables. this will address 80% of all page breaks.
All the real rendering work of TiddlyTools/PrintTiddler occurs in the last line:
<$transclude tiddler={{{ [[$:/core/ui/ViewTemplate]addsuffix{$:/print!!template}] }}}/>
which transcludes either
-
$:/core/ui/ViewTemplateto render the entire tiddler including the tc-tiddler-frame and titlebar
or -
$:/core/ui/ViewTemplate/bodyto render just the tiddler’s body content.
By transcluding these templates, the rendering automatically applies all relevant cascades (as defined in the $:/ControlPanel > Info > Advanced > Cascades section.
What you are suggesting would be a completely different approach that would need to “pre-render” the content and then parse it to allow the interactive insertion of page breaks. In comparison to the single line of code shown above, this would be an enormously complex and brittle bit of coding that is unlikely to reliably achieve the kind of results you would want.
Your second suggestion (using CSS rules to force or avoid page breaks on specific HTML elements) is more achievable, but this should be implemented as a separate stylesheet tiddler, entirely independent of the TiddlyTools/PrintTiddler coding.
You could use any suitable combination of
-
break-before:always;orbreak-before:avoid; -
break-after:always;orbreak-after:avoid; break-inside:avoid;
applied to the desired HTML elements, and then wrap those CSS rules within @media print { ... } to ensure they are only applied when printing.
My first thought is: What browser are you using? Perhaps the @bottom-right CSS rules aren’t supported there?
See "@bottom-right" | Can I use... Support tables for HTML5, CSS3, etc
My second thought is: Your first snapshot shows a title of “$:/print” for the preview window. This isn’t what I would expect. The title should be the name of the tiddler you are trying to print. You shouldn’t ever need to directly view the $:/print tiddler… it exists as a separate tiddler only so it can be used as a template for the preview window.
-e
I’m using TiddlyDesktop version 0.0.18 - is based on Goggle Chrome as far as I know.
→ checked it direct with Chrome browser (v140…):
→ aboutblank → title of tiddler is not used
→ save as: $__print.pdf
→ created / add also this tiddlers (as you mentioned):
<$vars layout={{{ [[$:/print]get[layout]] ~portrait }}}>
<style>
.tt-printtoolbar {
position:fixed;top:0;left:0;width:100%;z-index:1;text-align:center;font-size: 70%;background-image: linear-gradient(45deg, transparent 15%, rgba(255,201,102,0.3), transparent 85%);padding:4px;
*[type=range] { width:5em;vertical-align:middle; }
@media print { display:none; }
}
.tt-print {
.tc-tiddler-controls { display:none; }
counter-reset:num;
}
@page {
size:<<layout>>;
<$list filter="[[$:/print]numbers[yes]]">
counter-increment:num; @bottom-right { content:"Seite " counter(num); }
</$list>
}
.print-button {
color: rgb(150, 204, 255);
margin: 0 5px;
border: 1px solid rgba(150, 204, 255, 0.5); }
button.print-button:hover {
color: rgb(150 204 255);
background-image: linear-gradient(to right, rgb(150, 204, 255, 0.35), rgb(150, 204, 255, 0.55), rgb(150, 204, 255, 0.35));
border: 1px solid rgba(150, 204, 255, 0.5);
transition: 0.3s; }
</style>
@@.tt-printtoolbar
<$select field=layout default=portrait><option>portrait</option><option>landscape</option></$select> 
<$checkbox field=numbers checked=yes> Anzahl Seiten</$checkbox> 
<$checkbox field=template checked="/body"> nur den Inhalt drucken</$checkbox> 
Zoom: <$range field=zoom/> {{!!zoom}}% 
<$button class=print-button message=tm-close-window param=<<windowID>>>
{{$:/core/images/print-single-tiddler}} Jetzt drucken<$action-sendmessage $message=tm-print/>
</$button>@@
@@.tt-print
<$list filter="[<windowID>!match[]]">
<div style={{{ [[padding-top:0.5em;zoom:]] [{$:/print!!zoom}] [[%]] +[join[]] }}}>
<$transclude tiddler={{{ [[$:/core/ui/ViewTemplate]addsuffix{$:/print!!template}] }}}/>
regarding TiddlyDesktop v0.0.18…
According to Releases · TiddlyWiki/TiddlyDesktop · GitHub, v0.0.18 was published on Jun 29, 2023.
However, "@bottom-right" | Can I use... Support tables for HTML5, CSS3, etc indicates that support for @bottom-right was first available in Chrome v131, published on Nov 11, 2024. Thus, TiddlyDesktop v0.0.18 is too old for this feature. Unfortunately, the latest version of TiddlyDesktop (v0.0.21) was published on March 3, 2024, so that is also too old to support @bottom-right.
regarding testing in Chrome v140…
I am also using Chrome v140.0.7339.128 (the latest published revision), and page numbers DO appear when I use the TiddlyTools/PrintTiddler tiddler toolbar button.
It looks like you’ve made quite a few “cosmetic” and language changes to TiddlyTools/PrintTiddler. Perhaps you broke something in the process. Try re-importing the unmodified code from TiddlyTools and see if the page numbers appear in the output. If they don’t, then we still have a mystery to solve.
If the page numbers DO appear, then carefully make your changes, one at a time, and test after each change until something breaks.
-e
You are right, Eric.
With the Chrome browser it works - also with my changes:
→ Therefore it is related to TiddlyDesktop SW. I’ll update to latest version - but as you mentioned it is too old…
Is TiddlyDesktop still being developed and updated?
My wiki with “TiddlyTools/PrintTiddler” (=orig) or my modified version of “TiddlyTools/PrintTiddler” takes “$__print.pdf” instead of the tiddlername for storing:
Test on https://tiddlywiki.com/ with “TiddlyTools/PrintTiddler” works fine.
Any idea?
Thanks, Stefan
This is fantastic. It solves a problem for me: Chrome either prints a whole bunch of stuff in the headers and footers, or nothing. This gives me a more customizable option.
Question: how would I get the stylesheets and Google fonts to be included in this?
1 Like
Please provide a link to an online TW where your stylesheets and Google fonts are not being applied in the print preview window, so I can test and experiment with a real-world example.
-e
You’ll still have to tell Chrome to print nothing from the print-preview window. Iit seems to remember that choice for a while. I’m pretty sure there’s no way to do that from within TW.
https://giffmex.org/experiments/nt3.course.packet.essentials.html
Use the tiddler at the top of the recent tab.
Thanks for being willing to look at this.
Yeah I didn’t mention I had hid that first.
I don’t see any stylesheet or font differences… but what I DO see is a language difference!
The main window is showing me English text, but the preview window is showing Spanish text.
I assume you are doing some kind of language detection logic in the main window but that same logic is not being applied to the ViewTemplate being rendered in the preview window.
Can you tell me how you are handling the language difference?
-e
I am not sure what you are talking about. If you open Hebreos-Apocalipsis: materiales para el STP and then click the print button in the viewtoolbar of the tiddler, both are in Spanish.
There is no language detection going on.
OK… it seems I have my Chrome browser’s “translate…” setting to “always translate spanish”… so it is just happening automagically. But this setting doesn’t seem to apply to the preview window, so that just appears as untranslated Spanish.
-e
I haven’t yet given the TiddlyTools version a spin, but have spent some time looking at the button code as posted on the other thread (We need a core macro similar to the toc macro to transclude all hierarchical content - #3 by EricShulman)… and tweaking it to accommodate various additional needs.
Disclaimer: I’m not the target market for this plugin (since I already have complex solutions for various print-oriented workflows), but I’ll share my notes in case it’s helpful for others.
Still, I thought I’d follow up with the point that under some conditions, it may be more effective to set up a sequence to replace the story-river with your desired filter-set of tiddlers/nodes, hide the sidebar, and print from there. In particular, a solution that relies on packing content into a separate window may not be ideal if…
- If you need tiddlers to be differentially responsive to body template cascade (for example, being responsive to
code-body[yes]condition) - If you need to see caption rather than title (or otherwise render title with csacade)
- If you need tiddlers to print with templates beyond the basic body template (such as automatic tag templates showing content for
[<currentTiddler>tagging[]]even if it’s a virtual node), subtitle (could be important for printouts of documents where the modifier/modified fields need to be present for easily checking whether this printout really has the most up-to-date version of Tiddler XYZ), introduction/warning template that would appear above body, or feedback/notes/comments in a special view template that would normally appear below student work, etc. - If you rely on webfonts or other css-based solutions that (by default) would not appear in the separate window.
I hope all this is not taken to detract from the work by @EricShulman!
I think it simply shows how much “print a list of tiddlers” is not necessarily as straightforward as it sounds!
Although it’s not at all perfect, I’ll share the variant I was tinkering with. It surely is missing all the print-oriented goodies that show up in Eric’s thorough solution. The main difference (from the button-version in earlier post today) is that I’ve opted to transclude with {{||$:/core/ui/ViewTemplate/body}} and to add in some other (conditionally-framed) view templates. I also tucked each tiddler’s content into a details widget so that user can collapse a verbose or non-needed tiddler prior to printing (though it still has a page break before each tiddler, so it saves paper only if the collapsed tiddler is a multi-pager).
I’ve updated TiddlyTools/PrintTiddler with a new feature:
- Added a “date”
$checkboxto optionally display the current time/date in the bottom-left margin of each output page
-e
2 Likes