TiddlyPDF Plugin Design Discussion

Plugins
#1

I recently started developing the plugin, TiddlyPDF, which allows you to export tiddlers as a pdf.

The main goal is to be able to export a tiddlywiki into a notebook-like format, or even exporting a wki into a business report or whatever. I’m currently at the point where I have an MVP, and some basic functionality like the basic conversion, and CSS-akin styling.

Example:

Tiddlywiki
image

PDF
image

I’m making this post for two reasons, one is to gauge interest in this plugin, and the other is to talk about design from a user’s perspective.

I want to know how you would use this, and how the interface would have to work to allow you it to its fullest potential.

5 Likes
Proposal: A TiddlyWiki Print Dialog
#2

Question: Why not use @media print css, and then just print your report AS a PDF? I do that all the time, and love that @media print already helps me with page-breaks and such…

(For my use case, it wouldn’t make sense to bake in the one-tiddler-per-page format. That works for many purposes, but not all.)

#3

The main advantage of something like this is you can set up custom formatting for the pdf, as many things that look good as a wiki don’t work as well as a page. Additional things like page numbering and a dynamic table of contents become possible this way, so it has some advantages.

Those last two things are part of why I made this. I’m not sure how to make them sufficiently customizable for users in a decently simple way.

While this isn’t always the case, print as pdf and things like it tend to just take images instead of doing a full conversion, losing much of pdfs functionality.

Also, the one tiddler per page thing is not required, but optional. I shouldn’t have put emphasis on that.

#4

This corresponds exactly to what I’m doing when I print — using @media print { ... } css so that I take out stuff that is only appropriate for screen, and put in things that make sense for paginated documents…

#5

I don’t meant to shoot down the idea. It’s just that in my case (and perhaps others) what I want in a PDF maps onto what would I want for printing.

And since browser and OS interfaces allow me to redirect print-jobs so that they instead make a PDF, that’s been the solution route for my purposes so far.

I’ll bow out so others can respond, since there may well be folks who would want a PDF-specific solution that takes a different path!

#6

I didn’t know that media print was a thing. I admit that for a lot of this functionality, you could do that. This is just an alternative way to do that, which should be easier for the end user.

This also allows for the use of filters to collect and order all of the pages, while allowing for dynamic changes to everything as more pages are added, so I think this is better suited for larger projects.

And no, I don’t think you shot it down, just provided valuable information :slight_smile:. Is there anything you dislike about the current way you do things that you would want to be improved?

#7

I think such a tool would be helpful but to support the various outcomes people want it needs a degree of customisability. I too have taken @Springer’s approach, triggered by Open in new window to print, reports window as about:blank where I cant control the print drivers headers and footers, thus I revert to page composition back in the wiki.

  • I actually produced a commercial solution in tiddlywiki to generate PDF’s from a database in the past but the fragility and complexity is why I am looking for a better solution.
  • The key issues are
    • Automatically or manually setting page breaks
    • Headers and footers with page number awareness

Happy to collaborate.

Here is some recent work tyo look at addressing every location on a page, I want to include left and right vertical margins as well

<style>
.container {
  position: relative; /* or any other positioned value */
  padding: 15px; margin: 5px;
  --in-value: 20%;
}
.content { 
  border: 1px solid green; 
  border-style: dotted; 
  padding: .4em;
  margin: .4em;
}
.top-centre {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -50%);
}
.bottom-centre {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, -50%);
}

.top-left { position: absolute; top: 0; left: 0; }
.top-left-in { position: absolute; top: 0; left: 20%; }
.top-right { position: absolute; top: 0; right: 0; }
.top-right-in { position: absolute; top: 0; right: 20%; }
.bottom-left { position: absolute; bottom: 0; left: 0; }
.bottom-left-in { position: absolute; bottom: 0; left: 20%; }
.bottom-right { position: absolute; bottom: 0; right: 0; }
.bottom-right-in { position: absolute; bottom: 0; right: 20%; }
</style>
<!--         content below -->
<div class="container" style=";">
<span>
<span class="top-centre">top center</span>
<span class="top-left">top left</span>
<span class="top-left-in">top left in</span>
<span class="top-right-in">top right in</span>
<span class="top-right">top right</span>
</span>
<span class="bottom-left">bottom left</span>
<span class="bottom-right">bottom right</span>
<span class="bottom-left-in">bottom left in</span>
<span class="bottom-right-in">bottom right in</span>
<span class="bottom-centre">bottom centre</span>
<div class="content">
{{About}}
</div>
</div>
1 Like
#8

The way I did it, the two key issues you mentioned actually end up being trivial, but I hit other issues instead. I’m using PDF make to do the final rendering, and it has limitations to how far you can take the CSS. Additionally, it can render most things you can to do a tiddler, but I’m not sure about the best way to let someone do the customization.

#9

In my TiddlyWiki to PDF so far I open the tiddler in a new window and ctrl-p from there. Perhaps if the save or export to PDF were simplified to only the current tiddler, as in my above example it would keep it flexible. Because we can easily construct a tiddler containing the contents of multiple tiddlers to be the content to save as PDF, ie a compound tiddler.

#10

I think that this would be a great addition.

I’ve done some pretty deep dives into precisely controlling page layout with @media print and it comes up short in ways that PDF export may help.

As mentioned, precise control of margins, footers and headers would be an area where PDF export would be necessary. Right now there are ways to do so in CSS but differences between browsers make it a pain to do anything beyond the basic layout or not precise enough (without manual tweaking) for instance to print on pre-cut labels. Anyone who has printed out a boarding pass can probably attest to how inconsistent browser printing is vs the PDF attachment that they often send in an email.

Repeating/unique headers and footers across pages is more complicated than it needs to be and it’s likely trivial to set up in PDF formatting also.

Good luck and I look forward to you sharing your plugin.
/Mike

1 Like
#11

Wow, printing onto labels (& cardstock for precise cutting of business cards, MTG proxies, etc.) is something I still fire up Filemaker to do, because of its fine-grained layout controls. …

If tiddlywiki with a plug-in could achieve such precise layout control, it might be another missing link in my gradual conversion to handling nearly all tasks in TW5.

I wouldn’t have expected to do labels and cards via a PDF export step, but this path would offer the added benefit of making sure the overall layout is exactly as desired before wasting expensive print media…

In the short term, fantastic print options are possible on some browsers. I use Chrome on mac (probably with a plug-in or two), and enjoy being able to rescale, tweak margins, toggle background color use, toggle url/date header/footers… all on the fly while in print step.

Between @media print css, and the print dialog, I already have almost everything I could want… but NOT precise n-up printing of multiple tiddlers.

So that’s my request!

#12

Good idea. But this name may be misleading, I thought it is something like https://github.com/burtonator/polar-bookshelf , a pdf reader with note taking and marker…

1 Like
#13

Right. Tiddly-to-PDF, PDF-out, Tiddly2PDF would help avoid confusion.

1 Like
#14

I might make it Tiddly2PDF then, as it’s a really small change, and makes more sense.

2 Likes
#15

The plugin is still under heavy development, but it is now visible for anyone curious or wanting to make suggestions.

Github: GitHub - GameDungeon/Tiddly2PDF
Pages: Tiddly2PDF Docs

2 Likes
#16

TiddlyPDF Plugin Design Discussion
TiddlyPDF Plugin Design Discussion1564×560 59.6 KB

#17

If you were using JSPDF I have to assume you used the built-in HTML to PDF conversion. If so, that’s what your problem was. Internally JSPDF just takes an image of the HTML and puts it into the pdf. Like you said that does not work very well. Here I’m doing a “true” conversion so I don’t face the same issues. I get features like text wrapping and stuff that makes pdfs look nice.

Also as you said, images vs pdfs have different uses, and mine falls on the latter. While I’m making this as accessible and useful as possible, my motivation is a problem that leans heavily toward the pdf side. Additionally, images lose things like page numbers. I’m designing something for making said documents.

It’s unfortunate to hear that there is another plugin with a very similar name though. Does it actually do the pdf conversion or does it only do images after you made the change?

#18

I just got fully customizable Headers and Footers done. I was worried those would end up being an issue, but I like how they turned out.

2 Likes
#19

Just an example, the exported image or pdf will take up a little bit, and the two libraries of jdpdf and html2canvas are also hundreds of kb

#20

Why named tid2pdf/png ? Can there be a version that only exports png? This might solve 类似 flomo 那种感觉，然后还有搞个导出条目为好看截图的按钮，提供一些背景图模板，方便把想法发朋友圈，类似 https://judouapp.com/ · Issue #58 · tiddly-gittly/tiddlywiki-plugins · GitHub that I always want.