Attributes of HTML elements and widgets can be specified in several different ways:
- a literal string
- a transclusion of a textReference
- a transclusion of a macro/variable
- as the result of a filter expression
- New in v5.3.0 as the result of performing filter and variable substitutions on the given string
| attribute type | syntax |
| literal | single, double or triple quotes or no quotes for values without spaces |
| transcluded | double curly braces around a text reference |
| variable | double angle brackets around a macro or variable invocation |
| filtered | triple curly braces around a filter expression |
| substituted | single or triple backticks around the text to be processed for substitutions |
Literal attribute values can use several different styles of quoting:
- Single quotes (eg
attr='value') - Double quotes (eg
attr="value") - Tripe double quotes (eg
attr="""value""") - No quoting is necessary for values that do not contain spaces (eg
attr=value)
Literal attribute values can include line breaks. For example:
<div data-address="Mouse House,
Mouse Lane,
Rodentville,
Ratland."/>By using triple-double quotes you can specify attribute values that contain single double quotes. For example:
<div data-address="""Mouse House,
"Mouse" Lane,
Rodentville,
Ratland."""/>Transcluded Attribute Values
Transcluded attribute values are indicated with double curly braces around a TextReference. For example:
attr={{tiddler}}
attr={{!!field}}
attr={{tiddler!!field}}Variable Attribute Values
Variable attribute values are indicated with double angle brackets around a macro invocation. For example:
<div title=<<MyMacro "Brian">>>
...
</div>The behaviour of variables invoked via widget attributes is not the same as when they are invoked via normal wikitext. In addition, the behaviour depends on how the variable is declared:
| how declared | behaviour |
|---|---|
| \define | Textual substitution of parameters is performed on the body text. No further processing takes place. The result after textual substitution is used as the attribute's value |
$set, $let, $vars, \procedure, \widget | Body text is retrieved as-is and used as the attribute's value. |
| \function | When a function is invoked as <div class=<<macro>>/>, it is a synonym for <div class={{{[function[macro]]}}}/>. As with any filtered transclusion (i.e. triple curly braces), all results except the first are discarded. That first result is used as the attribute's value. Note that functions are recursively processed even when invoked in this form. In other words a filter expression in a function can invoke another function and the processing will continue |
Filtered Attribute Values
Filtered attribute values are indicated with triple curly braces around a Filter Expression. The value will be the first item in the resulting list, or the empty string if the list is empty.
Introduced in v5.2.2 To improve readability, newlines can be included anywhere that whitespace is allowed within filtered attributes.
This example shows how to add a prefix to a value:
<$text text={{{ [<currentTiddler>addprefix[$:/myprefix/]] }}} />Substituted Attribute Values
New in v5.3.0Substituted attribute values can use two different styles of quoting:
- Single backticks
attr=`value` - Triple backticks
attr=```value```
The value of the attribute will be the text denoted by the backticks with any of the placeholders for filter expressions and variables substituted with their corresponding values. Filter expression placeholders are substituted before variable placeholders, allowing for further variable substitution in their returned value.
| placeholder syntax | description |
$(varname)$ | Text substitution of a variable. Undefined variables are replaced with an empty string. |
${ filter expression }$ | Text substitution with the first result of evaluating the filter expression. |
Examples
Substituting a variable value into a string
<$text text=`Hello there this is the tiddler "$(currentTiddler)$"`/>That renders as:
Hello there this is the tiddler "Substituted Attribute Values"
Substituting a variable value and the result of evaluating a filter expression into a string
<$text text=`This tiddler is titled "$(currentTiddler)$" and was last modified on ${[{!!modified}format:date[DDth MMM YYYY]]}$`/>That renders as:
This tiddler is titled "Substituted Attribute Values" and was last modified on 15th June 2023
Concatenating strings and variables to create a URL
<$let hash={{{ [<currentTiddler>encodeuricomponent[]] }}}>
<a href=`http://tiddlywiki.com/#$(hash)$`>this tiddler on tiddlywiki.com</a>
</$let>That renders as:
Concatenating variables and a text reference to create a URL
<$let hash={{{ [<currentTiddler>encodeuricomponent[]] }}}>
<a href=`${ [{!!base-url}] }$#$(hash)$`>this tiddler on tiddlywiki.com</a>
</$let>That renders as: