Using TiddlyWiki to write a book, in this case non-fiction

#10

You might find this thread interesting. It describes a flexible way of combining block/outline tiddlers into larger components.

However, I’m still in the early stages of designing an edit UI for the components that uses. It’s not proving particularly easy. The closest analogy would be to Streams, but my use-case is different enough that I can’t use it, nor likely even hack my own choices atop it. I may go back to adding content instead, for a while and mull this over some more; the edit UI is something I don’t really need myself. But eventually this would be taken over by someone with no prior TW experience, and it would have to be simple to use, and fairly self-explanatory. That’s hard work! :slight_smile:

1 Like
#11

IIRC @CodaCoder uses TW for long-form writing. I think he’s discussed his approach in various threads here over the years, but perhaps he can give you some more targeted advice?

2 Likes
#12

Very much so. For the longest time I called it BK-TW. Then, just a few months ago, “TiddlyBook” arrived in my brain :man_shrugging:. I know. Too slow to catch a cold.

It uses (and expects to use) multiple monitors. It is completely unusable on a single monitor setup.

One day (:roll_eyes:) I may get to the point where it’s sharable. It’s not that it’s “unfinished” (much like TW, it never will be), it’s just bloated with seemed-like-a-good-idea-at-the-time stuff that really (no, I mean, REALLY) needs to be purged, culled, whatever.

A few years back (2015/16-ish @TiddlyTitch?) I dumped the whole of Lord of the Rings into it (yes, in its entirety) just to see how it would stand up. Worked really well and led me to extend its “analysis” tools and annotations capabilities. For example, once a work is suitably “marked up” it’s easy to list every utterance of a specific character, e.g. every word spoken, or thought shared, by Frodo. Vital if you want to ensure consistent “voice”, etc.

Now I use it for everything, just because of the tooling.

Regarding document production:

In Firefox, I’ve printed tiddlers to PDF. Works really well.

In TiddlyBook’s “BookView”, I can export HTML and use Caliber to produce EPUBs. Though I haven’t done that in a while…

4 Likes
#13

Thanks @CodaCoder if you are not in a position to publish an edition yet, I know thats a big ask, is there an example online?

Or could you share any specific structural or key plugins you can advise made it?

My version currently has;

  • Projectify for book, wiki, and other related todo items
  • Streams and some useful customisation 1 stream tiddler per chapter
    • including set to create non-system tiddler nodes, often renamed.
    • Although writting it may be quite heirachical I plan to flatten that to produce the readable book.
  • Relink

Thanks in advance, if you can suggest some of your “best ideas”.

#14

I neglected to address that, above…

Numero uno thing is, the story river does not lend itself well long form document/book construction. Endless scrolling to look for stuff? No thank you.

In TiddlyBook, the story river (and sidebar) is only used for infrastructure development (macros, css, templates, etc) on monitor 4.

Production text (the book chapters) are written in standalone editors spread across the remaining 3 monitors. They sit where they’re placed and stay there.

1 Like
#15

It’s not available online. As a wiki, it would be pointless/useless to host it somewhere (multiple monitors!)

Key plugins:
CM6 (@BurningTreeC’s version, it’s the best).
regexps (@Mark_S)
Bundler (@pmario)
EditorCounter (@telmiger but customized)
debug-log-filter (@Yaisog)
action-timeout (@EricShulman)

Truly, regexps is the “busiest” yet most invisible of them all. TiddlyBook wouldn’t be where it is today without it.

FWIW, I don’t use any of the things you listed.

1 Like
Credit where it's due -- attention Mark_S
#16

There was a French website (i think it was French) which had started to publish ebooks in TW format. Can’t find a link here (not had a comprehensive search) might be on Google groups?
I appreciate that’s all a bit vague news…

And there are a few Bibles around.

#17

I think it is worth, at least in this thread, to distinguish between what TW actually “features” and what “might be possible” and perhaps “what we want”. I think an official “TW book writing edition” would be an appealing use case to some potential users butthe fact that we don’t have one is an indication that it’s not so simple to create one.

But there is another critical aspect to it, which is why I gave up the book writing on TW, as exemplified with my sample page here above: I may not be overly difficult to achieve such a page - if it was “one page”. But my need is for hundreds of such pages where the task for me as the author should be the authoring, not the tiddly fiddling. One specific example of what I refer to is images; they need correct size, at right place, probably caption, etc. That must all be super simple to set. (In the end I settled for Google Slides, basically Powerpoint, to create my books, which obviously is not a proper “book writing tool” but its ease of use is what sealed the deal, and I’m still happy with it… but I wish it could be TW as that would bring other superior possibilities… )

1 Like
#18

I think general-purpose editions are a hard problem in general (or I would have completed a recipe one ages ago! :frowning: ). My suggestion about your page was that if you could lay this out in a tiddler using your usual TW tools and CSS, then this would be easy enough to incorporate into a book.

To create a book edition, we would need tools to combine small parts into larger wholes (or, streams-fashion, split large parts into bite-size editable pieces. I think we could, if we wanted, find a convention to allow us such an ability:

  • a parent field for any content, with an additional ordering mechanism
  • a children list field
  • a tiddler naming convention that incorporates the hierarchy.

The second one is probably most flexible, but any of them would do.

We could easily write a page-break procedure/macro that allows us to customize pagination, and use the CSS techniques discussed above to handle the rest of it.

But I have no current need for book-writing edition, and, while I would be willing to help, I certainly wouldn’t lead the charge. I am invested in method 3 above, but it’s for a related, but not identical use case.

#19

I don’t quite know what those “usual” tools would be, but I can imagine that such could be created albeit with quite a bit of experimenting. Again, I’m not talking about “a page” but hundreds of different pages, (possibly closer to a thousand come to think of it) so to set up the pages must be minimal effort. To again use “images” as an example it would have to be something that, first, easily gets the images into the TW. I know that importing of images to TW has been substantially improved but I don’t recall the specifics at the moment. But, OK, let’s say all the images were somehow easily imported, as links. This I would actually expect to be rather simple but I’ve never done it so maybe it is not. Then those image-links actually have end up on the book pages tiddlers, easily. They must be easily resized and exactly positioned. Some images should be bigger, some smaller. “Smooth resizing” would probably reqire some flexible drag-the-edges-to-resize feature, so there’s one non-trivial tool to create. Second, I have no idea how it would easily be positioned at arbitrary places, in a smooth way. Manual xy-coordinates is probably out of the question… or possubly acceptable if there’s some kind of directly seen grid on the page? That’s yet another non-existing tool. And how about the text flowing around the image, or not. More features to create. And how about annotations on the images? And, and…

…OK, I think my point should be clear. I gave up pretty quickly.

1 Like
#20

Although it may not be suitable for creating any entire book of pages, see https://tiddlytools.com/#SamplePasteUp for an example of a grid layout tool for creating free-form “paste up” tiddler content.

It uses macro code from TiddlyTools/PasteUp and a ViewTemplate from TiddlyTools/PasteUp/View to provide an interactive grid layout tool. Using this tool, you can place any literal field values, transclusions, widgets or macro output at any arbitrary grid position, and apply CSS to each of those elements to add extra styles to the output. It also supports “layers” so that elements can overlap each other.

To try it, view the above “SamplePasteUp” tiddler and click on the “lock” button (upper-left, above the grid layout). Then, just click on any element displayed in the grid to show a modal dialog to edit that element. The grid also handles drag-and-drop to move/resize elements.

You can also click on the “This is a Sample PasteUp >>” heading above the grid to view a table containing a summary of all the field value definitions, top/left/bottom/right/layer coordinates and added CSS styles. The table cells are directly editable to make changes to the layout, which are immediately refreshed in the grid display.

enjoy,
-e

2 Likes
The Amazing PasteUp of @EricShulman
#21

I meant mostly wikitext markup and CSS. If you could share a full-size image of that page, I could show you how I might try it. If you have the two images from it in separate files, it would be even easier – but that’s not essential.

However, it sounds like you’re interested in much more precision than I was imagining, and perhaps what I would come up with would not be nearly enough for your needs. I think it’s worth a try, though.

Just drag an image onto your wiki. That’s it. You can include them in other content with a transclusion or the $img widget. Others will have to explain external images as I haven’t had any real need for them yet. I know how to use the _canonical_uri field, but not if there’s some slick TW way to import and image and then move it externally. (Possibly in Node? Maybe not in single-file mode? I don’t know.)

Most of those sound like things that can be handled with CSS.

1 Like
#22

Thanks all for your contributions, sad that this not already a mature use of tiddlywiki, I expected it was :frowning_face:

You see during writing I would insert a description/sketch of an image example and move on. I would only think about the visual aspects at the very end. There an economy or effort worring about the whole books visual apperance at once. So for now at least its not importiant.

I have systems like Streams, tags etc… that can manage the heirachy, for me the title is just meaningful searchable text that is not included in the book. It may be different if my content needed a lot of cross referencing.

  • I expect a lot of it will be moved and expanded as I write, so I cant start with the full structure known.

Now you can drop images into the text field and it will place, the image there and save it in the wiki. One could later apply CSS to control its relationship to the text. Even single file wikis, can be used while later exporting the images to a local folder, externalising them, and linking to them.

Most importiant?

Being able to write and develop written content, specifically ideas, is the most importiant thing to me.

  • I think book marks inside text may be importiant so I can flag areas needing review or rewrite :thinking:
  • Ways to raise index references, footnotes etc… whilst writing without too much destraction.
  • Perhaps tools for others to review and edit etc… will be important even before visual considerations.

I have in the past rendered content into html and saved it, then imported it into word, which I understand is XML under the covers, and may use Word for the final layout, review and preperation. But I would only do this when 99% completed.

#23

WHAAAT!? I need to explore this at depth but that is fantastic @EricShulman !!! Even snap-to-grid. And ingenious use of fields here. A somewhat simpler use case, for me, than a full book is to create “worksheets” or “exam tests” and this could very well be what makes that possible. (A difference between those and a book, is that those things are more about crafting than authoring.)

#24

@TW_Tones I read the thread with interest. I’ve worked in editing, DTP & commercial publishing.

What Authors do is highly variable. Some methodical (outline first then write every section); some using the “bucket” method (just record fragments and let the structure emerge).

My own particular approach is to “work backwards” (envision the final output physical form and structure work to that).

It is easiest, for instance, in writing Screenplays, to understand their standard format and tweak your wiki to follow it.

But you seem to have a good grasp of a methodology for you!

TW can be bent any which way to help that.

What I don’t think you’ll get is any universal answer. I don’t think there is one for authoring.

Just side comments
TT

1 Like
#25

Footnote #362: I can attest @CodaCoder did it. I saw it. Phenomenal!

2 Likes
#26

It has been going on a while.

Some many years back (CSS 3) a commercial product, Prince, was in commercial publishing trying to replace older systems of Typographic markup (laTeX et. al.) with CSS.

That struggle is over.

Now it is easy. You can do most anything with CSS.

TT

#27

A little bit of usage and “behind the scenes” info about TiddlyTools PasteUp:

  • Rather than tracking the mouse X,Y pixel coordinates, the PasteUp layout grid is actually built from an array of $button widgets. It is these $button widgets that create the “snap-to-grid” effect. Each button is wrapped in a $draggable and $droppable widget to handle mouse interactions for moving and sizing “field rectangles” as well as the usual click handler to invoke the modal field editor interface.

  • The fields are drawn as rectangles on top of the button array and then a secondary button array (the “field grid”) is drawn on top of each field. This allows you to grab the field from any button inside it and drag to move the entire field.

  • Each field also has “drag handles” that appear in the top-left, top-right, bottom-left, and bottom-right of each field. You can use these handles to resize a field, rather than moving it. You can also use alt-click to change the field’s “layer” (bring-to-front, send-to-back), and ctrl-click to copy the field’s value to the clipboard.

  • To add a new field to the PasteUp layout, just place the mouse over an empty grid button and drag to highlight a desired target rectangle for the new field. Then click anywhere in the highlighted area to open a modal field editor and enter the new field’s name, value, and optional styles. You can also adjust the fields top,left,bottom and right coordinates. Click in the empty space in the middle of the layout inputs to set the field’s layer

  • In addition to direct mouse interaction with the PasteUp button grids, you can also perform all the same field creation and editing activities by using the “field table” that can be shown above the grid. Click on the PasteUp caption (e.g., “This is a Sample PasteUp”) to show the field table.

  • The gear icon (upper-right above the grid layout and field table) shows a “settings” popup that lets you select an image or X11 color value to use for the background of the grid, as well as inputs to specify the size of the grid array (width x height).

  • The settings popup also lets you select how many button grid “pages” are available in a tiddler’s PasteUp layout. To move a field to a different “page”, you can use drag-and-drop or use the modal grid editor or the field table to enter a page number. When printing the PasteUp layout, each page button grid is automatically printed on a separate physical page of the output.

There’s more features I could describe, but the above should be enough to get you started.

enjoy,
-e

1 Like
The Amazing PasteUp of @EricShulman
#28

Well yes. I meant here on TW, specifically. I’m sure there have been discussion threads in the past, but there seem to have been a lot of them in the last six or eight months, and @Mohammad especially has been demoing very useful print techniques.

As specified, yes. But as implemented in common browsers, there are still some gaps.

  • Widow and orphan control is not yet available in Firefox.
  • Links to page number was specified and then dropped. It’s hard to build a useful print table of contents without this.
  • In my testing, I couldn’t get break-before: right to work properly, so there seems to be no way to ensure chapters start on a right-hand page. (That may be just me. I’ve read that this is fully implemented in most browsers.)

and I’m sure there are others. However, you’re certainly correct that CSS has gotten most of the way there.

1 Like
#29

Thanks, I might get back on that. I’ll see what I can do with Erics SamplePasteUp.

As for images…

Just drag an image onto your wiki. That’s it.

Well, no, as you hint it needs to be _canonical_uri images because it’s hundreds of images.

Here’s a hypothetical workflow that would work for creating the types of image heavy books I refer to: Drag an image onto a page (i.e a tiddler) and it is added as a _canonical_uri tiddler, and its transclusion is somehow automatically injected at the position it is dropped on the tiddler text. For us tiddlywikians this may sound totally unrealistic but it is probably totally basic features for any “page making” software.

[ … ] text flowing around the image, or not… annotations

Most of those sound like things that can be handled with CSS.

Yes, I’m sure it can, it’s just that we don’t. And even if we did, for realistic use there would need to be a UI to set e.g the text flow around the image, not something like @@.textflow.floatright {{theimage}}@@ when there are several hundred pages and several images per page.