Best Practice: Tiddlywiki and Structure of Long Note

Just to the tiddler. One section per tiddler. If you need to get any closer, you can use Ctrl+F in your browser.

I don’t think it’s currently possible in TW to scroll directly to a heading. This has come up before, and the issue is that we already use #anchors to point to full tiddlers.

Thank you Soren! Yes, I know, and to follow tiddler philosophy your method is the good practice!

Apparently it is possible: https://tiddlywiki.com/#Anchor%20Links%20using%20HTML

My conclusion has been to embrace “lots of tiddlers” and just make the umbrella tiddlers easier to find, and the “part” tiddlers less visible.

I use the evolution of my Omnibus plugin to compose longer texts. It uses lists to generate a hierarchy.

So even a simple brainstorming session might end up with a large number of not-particularly-reusable tiddlers. If I don’t give them titles, they get timestamp titles.

I end up having many, many tiddlers. They don’t all have meaningful titles. I can exclude timestamp titles from searches and tables of contents if I want to.

I do have my search results customised using (basically) Daniel Rodríguez Rivero’s Context plugin so if a tiddler’s title is uninformative I can see what caused the search hit.

@sobjornstad I really appreciate your account and wisdom from producing a tiddlywiki document. It provides great insight into dealing with such “complexity”.

I don’t think it’s currently possible in TW to scroll directly to a heading. This has come up before, and the issue is that we already use #anchors to point to full tiddlers.

As @saqimtiaz references. Here is a shorter overview.

There is a method that has being discovered some time ago, the key is the standard HTML approach is;

TOC
<a href="#section2">Go to Section 2</a>

<h2 id="section2">Section 2</h2>
content with anchor

If you can ensure you are using unique ID’s in the whole wiki, (because tiddlywiki is only 1 HTML document) then use an extra hash “#”.

TOC
<a href="##section2">Go to Section 2</a>


<h2 id="#section2">Section 2</h2>
content with anchor
  • This stops it attempting to create a tiddler when clicking the TOC link, and moves to the anchor. However in my test just now it is somewhat fragile
  • The destination must be visible, perhaps even in the same tiddler.
  • I have experimented with automation of ids or selectors for anchors and there is great potential.
  • I understand this # and ## method depends possibly on an undocumented “bug/feature” in HTML and it’s implementation in tiddlywiki, so browsers may one day behave differently.
  • I believe we can craft a good solution here for authors. Headings tend to be unique, and we could test to make sure they are and have a method to slugify titles into automatic section ID’s. @pmario and the custom wikitext plugin underdevelopment can automate this somewhat.

As a few have suggested tiddlywiki does allow us to create “smart documents” which means we can develop solutions to almost any content or presentation issue. Collecting key workflows and issues in creating larger content to inform the tools we develop is critical to creating tools to ease this process. I believe strongly that tiddlywiki can one day be the best content development and presentation platform “ever” (not to mention publishing and distribution).

I just want to remind readers of this thread on the value of separating presentation from content. CSS was developed for HTML for this very reason. Whist we can cross these boarders in TiddlyWiki it is worth keeping presentation and content separate to retain power over the results.

Personally, I prefer that when reading online, tiddlers are not too long (since openning many long tiddlers will slow down the website.) I provide a navigation bar at the bottom (similar to GTW) so readers can go to the next pages as they want.

I also provide a button with $message="tm-open-window" that opens a new window and transclude all relevant tiddlers via a custom template so readers can print the whole topic to pdf.

@Pak - do you use any customized stylesheet for printing tiddlers?

Yes, a little bit. I actually use YOUR css framework from http://w3css.tiddlyspot.com/ (which is awesome, thanks!).

In my wiki, I have the tiddler called NotePrinter which takes my inputs (Title, list of tiddlers, etc). Then when I click “Show Notes” I have a new window with contents from the parameters I set, transcluded via a template (NotePrinterTemplate in this case). Then on this new window, I can right click and print to pdf if I want).

Here’s the code for the Show Notes button

<$button>
<$action-sendmessage $message="tm-open-window" $param="NotePrinterTemplate" 
shownote="true"
windowTitle={{$:/temp/noteprinter##windowtitle}}
noteTitle={{$:/temp/noteprinter##notetitle}}
noteSubTitle={{$:/temp/noteprinter##notesubtitle}}
noteFilter={{$:/temp/noteprinter##filter}}
width="900"
height="900"
/>
Show Notes
</$button>

And here are the contents from NotePrinterTemplate. It’s quite basic and I’m no css expert!

<$list filter="[<shownote>!match[true]]">
No notes
</$list>
<$list filter="[<shownote>match[true]]">
<div class="w3-center">

! <<noteTitle>>
<<noteSubTitle>>
</div>

<$list filter=<<noteFilter>>>
<div class="py-2 w3-container">
<h2 class="note-title-line"><$view field="caption">{{!!title}}</$view></h2>

<$transclude field="text" mode="block"/>

</div>

</$list>
</$list>

<style>
.note-title-line {
margin-top: 0.4in;
padding-bottom: 5px;
border-bottom: 0.05px solid <<color foreground>>;
}
</style>
2 Likes

Many thanks Pak! Very interesting and useful!
Thank you for sharing the code! It worth to be published! :wink:

Side note: I see you use TW for academic texts (full of math, diagrams, …)

1 Like

Thanks! Yep, I use TW for my math class and I use KaTeX extensively :slight_smile:

@Pak I like the idea that you kind of have a print preparation step. I imagine its best for an occasional print more than if you had to do a lot.

  • I suppose you could pull that information from each note tiddlers fields as well.
  • Do you make any attempt to handle page breaks?
  • Is it even possible to print PDF’s without page breaks?
  • Do you make any attempt to handle page breaks?

No. The new window is simply one webpage with long text. I let the pdf printer handle the page breaks itself (which depend on the paper size setting). This is the same as when you compile a LaTeX document.

But if I want to force a page break after every transcluded tiddler I can define a css class

.section-page-break {
page-break-after: always;
}

and transclude every tiddler (or even selectively) with this class.

Here I exported my two tiddlers so you can try in on https://tiddlywiki.com/

noteprinter.json (2.5 KB)

Anyway, I guess my method didn’t quite answer @Mohammad 's original question of how to handle long note Tiddlywiki-way, sorry.

Thank you! We learn from different approaches, your method shows how build a pdf from long tiddlers or a compound tiddler built from many tiddlers at print time!
Thank you!

1 Like

I do this ALL the time, though I call them author-elements and I don’t use the technique at the chapter level. In my world, a chapter is a grouping of tiddlers.

A chapter-section (chapsec) is a tiddler. Chapsecs belonging to the same chapter have the same number/name in their chapter field.

A chapsec might contain zero or more author-elements:

<about-fission>
Stuff about nuclear fission
</about-fission>

<about-bilbo-baggins>
Stuff about Bilbo Baggins
</about-bilbo-baggins>

Another tiddler might be used to pull together (transclude) all the about-bilbo-baggins blocks to present them as one tiddler. Same with about-fission.

To answer @Mohammad’s question:

I favor both patterns and techniques.

Some chapter section tiddlers are small, 100 words or even less. Some contain thousands of words. Basically, however many words (and images) it contains, a chapsec covers a topic, beginning to end.

If a given block of text is likely to be reused in another context, it becomes either:

  1. its own tiddler which I can transclude in its entirety
  2. an <author-element> which I can transclude using a regex macro that splits on the author-element

For #2, I try to conjure text that is self supporting, aiding its use in different contexts. Without doing that, you can end up with “patchwork text” that doesn’t read so well.

1 Like

Thanks @CodaCoder! I like your terminology a chapsec.

Yes, it is a section sometimes is a compound/composite tiddler!

If I understand correctly, you do not use tag to show chpater-tiddler relation! instead you use field chapter.
Do you freely name such sub tiddlers or have some naming rules?

That is correct. I might use tagging for other reasons, but the chapter<>section relationship is as you said, purely a manual process. (The add new chapsec button defaults to adding 10 to the last known chapsec - see below.)

Chapsecs have a title which includes the chapter. So,

  • 1-010 is chapter 1, section 10.
  • REF-125 is chapter “reference”, section 125.

A screenshot might help:

1 Like

There are times when I miss the edit section feature of mediawiki and docuwiki.

Described here: section_editing [DokuWiki]

@CodaCoder - many thanks for detailed explanation!
While there are some manual parts, but the procedure powerful to create real e-books with many chapter!

I don’t understand how this works. I feel like I must be missing something important.

What is the mechanism you’re using to pull these in? Regexp ? If you’re gathering blocks into tiddlers, how do you know in which order?

And does this solve the problem of creating a long document? Are you doing step-wise excision as you work ?

Thanks!