How to Create a Muliti Column List Using a CSS Macro

Tips & Tricks
,
#1

I had titled this post " Code sample: a macro for generating a multi-column list". The current title is not my creation and does not reflect the intention of my post.

To be clear: I am not attempting to teach how to write such a macro. This is just a code sample meant for you to study and experiment with.

Copy and paste the following into a new tiddler using TiddlyWiki.com

\define colList(fv f cw i)
<!-- 📒 fv=filter variable; f=filter; cw=column width; i=line item content -->
@@display:block;-moz-column-count:auto;-webkit-column-count:auto;-moz-column-width:$cw$em;-webkit-column-width:$cw$em;-moz-column-gap:0.5em;-webkit-column-gap:0.5em;-moz-column-break-inside: avoid;-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid-column;
<ul style="list-style-type:none; padding:0; margin:0;">
<$list variable="$fv$" filter="$f$">
<li style="border-left:1px solid lightgray;">$i$</li>
</$list>
</ul>
@@
\end

<<colList "wt" "[tag[HelloThere]sort[]]" 23 "<<wt>>">>

Result for some random Web browser window size:

image
image1134×245 21.2 KB

4 Likes
#2

In all of my TiddlyWiki instances, I’ve got a CSS tiddler with CSS for various column width sizes.

It just dawned on me today (hence that macro I shared) that I’ve been copy-pasting a lot of code every time I want a list. Code that looks like the following:

@@.multicol_keywords
<ul style="list-style-type:none; padding:0; margin:0;">
<$list filter=🟠whatever filter🟠>
<li style="border-left:1px solid lightgray;">
🟠whatever content🟠
</li>
</$list>
</ul>
@@

That’s a fair chunk of code, duplicate code, all over the place (I use a lot of multi-column lists).

And a lot of CSS classes defined (multicol_keywords being one instance of many.)

MIgrating all of my list instances to use a macro instead will simplify a whole bunch of code, and allow me to get rid of the CSS for those multicolumn classes.

BTW, an example instance (one of many instances) of a CSS class for one width of multicolumn instance:

.multicol_keywords {
   display:block;
   -moz-column-count:auto;
   -webkit-column-count:auto;
   -moz-column-width:13.7em;
   -webkit-column-width:13.7em;
   -moz-column-gap:0.25em;
   -webkit-column-gap:0.25em;
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
#3

If you check on https://caniuse.com (an invaluable resource for web developers!), you will find that column-count, column-width, column-gap, and break-inside:avoid-column are now supported by all major browsers, and you no longer need to use the browser specific -moz- and -webkit- prefixes on those attributes.

Thus, you can simplify your CSS rule to:

.multicol_keywords {
   display:block;
   column-count:auto;
   column-width:13.7em;
   column-gap:0.25em;
   page-break-inside: avoid;
   break-inside: avoid-column;
}

enjoy,
-e

1 Like
#4

Cool. However …

Do we know of any Web browsers not on that list with which TiddlyWiki still works A-1 ?

CSS for backward compatibility with older Web browsers is a waste if we already know that TW will not work with browsers needing the backward compatibility for that specific CSS.

I have no idea how to measure the cost/benefit.