Smart columns to make use of wide screens

Hey all, for folks attracted by this thread’s title – but who would love a ready-made solution – please check out the Shiraz multicolumn feature. With Shiraz plugin installed, setting the tiddler’s class field to multicol results in a flexible layout that uses available story-river width for columns, taking into account text display size as well.

2 Likes

@Springer yes Shiraz is a great collection, I just revisited it but unfortunately it needs specific application to a tiddler, I was looking at having it respond only when needed, unfortunately it also has the problem with my own method of columnizing even very short tiddlers which looks terrible.

The key is to find a way to get the columns to occur depending on the width (we have that) it will create a columns for every 600px of width, and only if the content goes beyond the current Hight of the View Windows 100vw (100% of View Window), the problem is so far that it will always display on 100vw even with almost no content in a short tiddler when no columns needed. And across 2-3 columns even with only a few sentences.

This is why I and @Alvaro can we do the impossible and estimate the rendered size, or use CSS in a different way.

Try my css in the original post on tiddlywiki.com and zoom in and out on wide screen, open large and small tiddler to see the problem.

Tony, as a “shorthand” mnemonic, you might call vw viewport-width. Similarly for vh – viewport-height.

vw

Equal to 1% of the width of the viewport’s initial containing block.

<length> - CSS: Cascading Style Sheets | MDN

So the number you supply, say 50, in 50vw amounts to 50 x 1% or 50% of the viewport width.

HTH.