Example: Repurposing HTML "Definition" lists for "Note" blocks

Reference: https://tiddlywiki.com/#Definitions%20in%20WikiText

With the following CSS applied (in a stylesheet tiddler):
dl {background-color:#fffff0;border:2px solid yellow;font-style:italic;margin:10px 10px;}

2 Likes

this could be delivered on the DL wikitext with a class name

;.classname note

single character like .n for notes or .s for steps etc … including a tooltip

As an alternative you could use the procedures we use at tiddlywiki.com.

See the Textbox macros described at Documentation Macros
The implementation can be found at: doc-macros
Style definitions can be found at: doc-styles

1 Like

Of course, there are all kinds of other fancier (more elaborate) approaches that can be used for a buffet of note-like things (whatever color and other CSS attributes to pick from.)

The point here is to have low-footprint-quick-to-key-in (no fuss, no muss) “notes”.

So with just a quick tap of a semi-colon and a line followed by a quick tap of a colon for the next line:

One gets a good-enough note:

I’ve been tempted to do this, and in personal-use wikis I think this shorthand is fine and convenient.

We should just note that for public-facing wikis this isn’t ideal, because screen-readers will read definition tags “semantically”, so the result will be confusing to folks accessing your wiki with such assistance.

Although I’d like to say that’s a great point, without a case example of how that could lead somebody astray or confuse anything, this feels like a non-issue.

If anybody could show an example of a problem it would cause, that would be pretty awesome.

A “note” being treated semantically like a definition doesn’t seem so bad. Notes are just a type of definition. Like defining an exception, or defining a heads-up item, etc.

I did test it with Narrator the Windows built in screen reader. – It does announce it as a list and reads it as if it would be a bulleted list.

So in this case if used for “notes”, it is no real problem.


While testing I found out, that our “Note” and “Tip” boxes also have room for improvements.

The same is true for the whole TW UI. – We would need somebody, which really uses a screen reader and is willing to tell us, what works well and what does not work well.

2 Likes