Specifying Style Properties on HTML Element in WikiText

From Tiddlywiki 5.2.2

Support for directly specifying style properties on HTML elements (for example, <div style.color={{!!color}}> ) was added to Tiddlywiki 5.2.2.

This is a nice feature, has got less attention. To demystify here is an example.

Example i

Develop a template to display the tiddler text in color specified by color field.

  1. First write your template: I call it direct-style/template
<div style.color={{!!color}} >

''<$text text=<<currentTiddler>> />''

><$transclude mode="block"/>
<div>

Note how the style is set directly from the color field: style.color={{!!color}}

  1. Now use a $list widget with above template. For example list tiddlers tagged with dstyle (here we have two sample tiddlers). I put this code in a tiddler callled direct-style/example
<$list filter="[tag[dstyle]]" template="direct-style/template"/>
  1. For demo purpose, create two samle tiddlers tagged with dstyle with the content you like, each have a color field with color of your choice. In this demo, red and blue color were used.

This will results in:

References

  1. Add support for directly setting style.* attributes on HTML elements by Jermolene · Pull Request #6388 · Jermolene/TiddlyWiki5 (github.com)
  2. https://tiddlywiki.com/#HTML%20in%20WikiText

Please add more examples and usecases.

3 Likes