View and Print tiddlers with page handling - help requested

232 views
Skip to first unread message

TonyM

unread,
Jul 26, 2019, 11:48:56 PM7/26/19
to TiddlyWiki
Folks,

I was building some complex logic to display a table such that when printed I would have a page header and footer and the table would overflow on to a new page with new page header and footer, and ideally a new table header row as well. I found some pure HTML solutions that look promising such as here, suggesting with the right method this may actually be quite easy.

However I thought perhaps someone here may have taken this path before and would be prepared to share some tips.

To be clear ideally I would have a tiddler that displays Page header, Items table, Page Footer where the items table can appear on multiple pages. When opening this in a new window we could then print it and the footer will appear at a fixed position at the bottom and real page breaks occur so it can be printed "Professionally" to PDF.

When I work this out myself I will share back, but if you have full or partial solutions please let me know.

This is a good case where the wisdom of the crowd can produce great results.

Regards
Tony

Joshua Fontany

unread,
Jul 31, 2019, 6:06:41 PM7/31/19
to TiddlyWiki
Commenting to be notified. This is an overlooked but very key feature for some people/use cases. A generalized TW solution would be good.


Best,
Joshua F

TonyM

unread,
Jul 31, 2019, 7:25:30 PM7/31/19
to TiddlyWiki
I need to resolve this soon. So I thought I would BUMP it.

HTML EXPERTS?

PMario

unread,
Aug 1, 2019, 1:13:55 PM8/1/19
to TiddlyWiki
Hi Tony,

see: http://print-tiddler.tiddlyspot.com/ ... Not exactly what you want, but still cool stuff.

-m

PMario

unread,
Aug 1, 2019, 1:54:51 PM8/1/19
to TiddlyWiki
Hi,

Some time ago, I did stumble upon this: http://pdfmake.org/playground.html  github: https://github.com/bpampuch/pdfmake

I think TW could use this library. ... I'm not sure, since I didn't do any tests but I do like the possibilities of the library.

-m

Mohammad

unread,
Aug 1, 2019, 2:26:31 PM8/1/19
to TiddlyWiki
Mario,
 TW really needs to have such a tool!

BTC has introduced the great Print River plugin, and it is really helpful!

I think  having a tool such as pdfmake to create pdfs, books and control
what it is needed in which order is so important!

--Mohammad

Mark S.

unread,
Aug 1, 2019, 3:07:03 PM8/1/19
to TiddlyWiki
TW stores tiddlers as JSON internally, right? So the plugin/macro would need to take existing tiddler JSON, convert it
to JSON used by library, and feed it to the library. Additional tasks would include converting images to the data format the
library wants. It kind of looks like the font set is very limited, so even after all that people might not be happy.

That sounds like a solid month of programming for someone.

The best way I've found for converting HTML in general to PDF is to copy the text, paste it into a blank Word document,
tweak for page breaks, and then export as PDF. Word has a great PDF exporter these days. This way you're
leveraging 20 years of word processing technology.

Mohammad

unread,
Aug 1, 2019, 3:26:57 PM8/1/19
to TiddlyWiki
Mark,
 Printing into pdf from a browser is a straightforward job! There are many tools over there!
The problem is there is no good toold in TW lets you control what you want to print in what order
in which size with border, gutter, page numebr, ....

PrintRiver is good starting point! It needs improvement and may address these issues.

--Mohammad

Mark S.

unread,
Aug 1, 2019, 4:01:49 PM8/1/19
to TiddlyWiki
I just remembered! There's a browser extension for FF and Chrome called "Print Edit WE". (PEWE)

The problem with printing to PDF is that the pagination will occur ANYWHERE -- in the middle of paragraphs, lines, images -- anywhere at all.

With PEWE you can edit out elements that you don't want to appear. You can preview. If the page break isn't where you want it to be, you can insert your own.
When you're ready, you can save as PDF. Coupled with something like Print River, you should be able to get 95% of what Tony wants (the 5% being
the page-break tweaking).

Attached is a sample from TiddlyWiki.com. I edited out the control objects, the tag,  and told it to page break just before the big quotes.
TiddlyWiki - a non-linear personal web notebook.pdf

TonyM

unread,
Aug 1, 2019, 5:16:01 PM8/1/19
to TiddlyWiki
Thanks all, I have just started looking into the details you have provided.

I will need to finish this by the end of the weekend, so I looks like a bit of  roller coaster for me. Its the cherry on the top of my first commissioned TiddlyWiki. A project I expect to deliver lots back to the community. Hopefully this will be one of them.

A Quick observation - we can display almost anything the way we want with tiddlywiki.  When it comes to printing we can easily embed content and page breaks programmatically. The single most difficult issue is the page footer, getting it to appear on the bottom. 

I will inform you of my progress.

Regards
Tony


On Saturday, July 27, 2019 at 1:48:56 PM UTC+10, TonyM wrote:

TonyM

unread,
Aug 1, 2019, 5:44:11 PM8/1/19
to TiddlyWiki
Mario et al

http://print-tiddler.tiddlyspot.com/ .is cool, I do not need to tell people how to ctrl-p from a new window. However I am not even sure what it is so I can install it on my wiki. 
I searched plugins, buttons, recent toolbars and more.
Any tips?

The print river plugin has not come up in my searching yet.

Regards
Tony

PMario

unread,
Aug 1, 2019, 9:23:12 PM8/1/19
to TiddlyWiki
Hi, 

It seems, it is not a plugin atm. ... I did search for shadow-tiddlers "print", "images/pagebreak" and exported 6 tiddlers, including the core PageTemplate tiddler. ... Which imo is the reason, why it isn't a plugin atm.

There is no license info at the TW.

So we need to ask BTC, if he can create a plugin or a bundle, which would be the best case.

Be aware that this stuff will overwrite the core PageTemplate, which can have side effects!!!!! The TW version used for the page is 5.1.17 so you really need to double-check this tiddler.

-m

PMario

unread,
Aug 1, 2019, 9:25:28 PM8/1/19
to TiddlyWiki
On Thursday, August 1, 2019 at 11:16:01 PM UTC+2, TonyM wrote:

The single most difficult issue is the page footer, getting it to appear on the bottom. 

You can adjust this in the browser settings.

-m

TonyM

unread,
Aug 1, 2019, 11:06:46 PM8/1/19
to TiddlyWiki
Mario,

I am not sure what you mean.
You can adjust this in the browser settings. 
 
I will have variable content in the body of each printed page. I want the footer to be at a fixed location at the bottom containing content I want there. I have seen a fixed footer using online pages, just not in the print output (yet)

Thanks for your help

Tony

PMario

unread,
Aug 2, 2019, 2:12:32 AM8/2/19
to TiddlyWiki
Hi,

I'm using FireFox. If you print a page, you can define, how the header and the footer looks like. The settings are very rudimentary, but at least you can have the "page numbers", the "date", the "title" or some customized text.

This header is also used with BTCs print settings.

-m


TonyM

unread,
Aug 2, 2019, 2:18:50 AM8/2/19
to TiddlyWiki
Mario,

Thanks but I was aware of that. I am converting documents and spreadsheets to a publishing method from within TiddlyWiki. The Headers and footers change there contyent by document so this is not practical, and Its other users who use this not me.

Thanks for what I have so far.

Tony

PMario

unread,
Aug 2, 2019, 5:46:39 AM8/2/19
to TiddlyWiki
Hi Tony,

I did think about your OP again and had a look about the "table based" implementation, that you linked to. ... It should be possible, to use it, together with BTCs solution.

Instead of reusing the existing PageTemplate that overwrites the core, we create a new one that is table based and includes the header and footer CSS settings from your first link. We still can re-use the elements of the core PageTemplate, but it would be independent.

have fun!
mario

BurningTreeC

unread,
Aug 2, 2019, 6:05:53 AM8/2/19
to TiddlyWiki
Hi Tony, hi pmario,

there's also my printriver.tiddlyspot.com which is a plugin, but I like http://print-tiddler.tiddlyspot.com/ more. The PageTemplate isn't needed for the latter

I think the print-tiddler would be a nice-to-have feature for the core, what do you think?

Mat

unread,
Aug 2, 2019, 7:00:21 AM8/2/19
to TiddlyWiki
BurningTreeC wrote:
I think the print-tiddler would be a nice-to-have feature for the core, what do you think?

Printing as a core feature is very reasonable but not limited to only current tiddler.

IMO printing is closely related to exporting.
And for this I have the following proposal: https://github.com/Jermolene/TiddlyWiki5/issues/1687

<:-)
 

Mohammad

unread,
Aug 2, 2019, 7:26:05 AM8/2/19
to TiddlyWiki
I support this!

PMario

unread,
Aug 2, 2019, 7:44:50 AM8/2/19
to TiddlyWiki
On Friday, August 2, 2019 at 12:05:53 PM UTC+2, BurningTreeC wrote:
...
I think the print-tiddler would be a nice-to-have feature for the core, what do you think?

I'd support a PR.

-m

PMario

unread,
Aug 2, 2019, 7:45:50 AM8/2/19
to TiddlyWiki
On Friday, August 2, 2019 at 12:05:53 PM UTC+2, BurningTreeC wrote:
... The PageTemplate isn't needed for the latter

That's even better. ... I thought I needed it. ... May be a testing error.

-m


BurningTreeC

unread,
Aug 2, 2019, 8:48:04 AM8/2/19
to TiddlyWiki



On Friday, August 2, 2019 at 12:05:53 PM UTC+2, BurningTreeC wrote:
... The PageTemplate isn't needed for the latter

That's even better. ... I thought I needed it. ... May be a testing error.

Oh, my bad, it's needed for the "sort" dropdown to work

-m


TonyM

unread,
Aug 2, 2019, 8:54:42 AM8/2/19
to TiddlyWiki
Eveyone

This sounds great because I think tiddlywiki would be ideal for both use as a smart document but also a document generator from web sites to pages and to print. Making it seemless would be nice.

I have a real world case I am working on so I can establish the key requirements. I think the most important is to handle the page layouts and the transition to print. The same is true for in browser lists and tiddlywiki is good at lists. We need to take control of the bottom of our lists which are prone to running long on the screen when keeping them in a tiddler, and one visible screen with scroll is often better.

An interesting observation I made recently for those who understand document management systems is tiddly wiki smart documents could operate as independant documents that have the document management system, standards, tools etc. . built in. Move the server management side into the documents themselves. It allows independence of your data while complying with standards to support collaboration and effective document management.

Tony

TonyM

unread,
Aug 10, 2019, 4:26:57 AM8/10/19
to TiddlyWiki
Folks,

I am just bumping this thread. I will be working tomorrow on this, in 14+ Hours. 

I have one tiddlywiki specific question arising.
We can use style="width: 100%;" to display content across the full width of a tiddler. But as you know tiddlers can be an indefinite length. I imagine if we wanted to limit this length by using scrollable sections we may want  to set a vertical size of some sort. Of course 100% is not relevant but has anyone given some thought to what would be an appropriate way to determine a suitable height of a tiddler in which the content was scrollable?.

My research so far on print
A lot of people suggest tables are not appropriate in page handling but all my data is already in tables. CSS and or w3.css seems to have all I need to do this but I need to have a broad understanding before I can use it to retrofit lengthless tiddlywiki tables. Although I do prefer to construct my tables with html. It also looks like its easy to generate a footer at the bottom of the page and decide which content can or can not break across pages.

The below basic example works on tiddlywiki.com

I want to have a number of tables, print on a number of pages and with reoccuring heading for each page the same table appears on.

So It seems I need the following
  • The various sections that define each page, perhaps with a first and subsequent pages, and possibly odd and even pages (Left and Right)
  • Then a way to define tables within the page that overflow to the next page with internal heading and footers.
I am trying to find a basic code snipit I can use to do this but only find part of it in any given place. So If anyone has a good reference please share.

Example
<style>
@page {
    size
: A4 landscape;
}
    table
{ page-break-inside:auto }
    div  
{ page-break-inside:avoid; } /* This is the key */
    thead
{ display:table-header-group }
    tfoot
{ display:table-footer-group }
</style>


   
<table>
       
<thead>
           
<tr>
           
<th>heading</th>
           
</tr>
       
</thead>
       
<tbody>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="A Gentle Guide to TiddlyWiki" mode="block"/></div></td>
       
</tr>
       
<tr>
           
<td><div><$transclude tiddler="Some of the things you can do with TiddlyWiki"  mode="block"/></div></td>
       
</tr>
       
<!-- 500 more rows -->
       
<tr>
           
<td>x</td>
       
</tr>
   
</tbody>
       
<tfoot>
           
<tr><td>notes</td></tr>
       
</tfoot>


   
</table>


Regards
Tony
Reply all
Reply to author
Forward
0 new messages