Syntax for filtered css attribute value

[twMat]

I was hoping the following would color the dot (which is indeed colorable - EDIT: it isn’t. This is the colorable one: ⬤ ).
What am I misunderstanding?

@@color:{{{ [<currentTiddler>get[status]] :map[[DictionaryMatchingStatusWithColor]getindex<currentTiddler>] }}}; ⚫@@

…also no cigar with ${...}$:

@@color:${ [<currentTiddler>get[status]] :map[[DictionaryMatchingStatusWithColor]getindex<currentTiddler>] }$; ⚫@@

I’ve also tried it with backticks around the value… but not even a cigar butt.

What am I misunderstanding?

Thank you!

[EricShulman]

The @@ inline style syntax doesn’t wikify the specified styles.

To specify a color attribute value using wiki syntax, try this:
<span style.color={{{ [<currentTiddler>get[status]] :map[[DictionaryMatchingStatusWithColor]getindex<currentTiddler>] }}}> ⚫</span>

Note that this could be simplified, like this:
<span style.color={{{ [[DictionaryMatchingStatusWithColor]getindex{!!status}] }}}> ⚫</span>

-e

[Springer]

@EricShulman

<span style.color={{{ [[DictionaryMatchingStatusWithColor]getindex{!!status}] }}}>

@twMat

I was hoping the following would color the dot (which is indeed colorable).

Tried to replicate solution by @EricShulman, and hit bad luck!

That dot — at least as it copies/pastes online — is actually rigidly black!

But it does work for the other (properly colorable) shapes.

[twMat]

@EricShulman - hahaaa, thank you, no wonder I didn’t figure that out!

@Springer - Oupsie, thanks, my bad! I took the wrong dot. This should be the colorable one: ⬤

[Justin_H]

Just out of curiousity, I’m nit familiar with using style.color, is this valid html syntax or is it a tiddlywiki feature I’m unaware of??

[CodaCoder]

It’s TiddlyWiki widget syntax which, in this case, is close to JavaScript syntax. Try this in the JavaScript console in your browser:

document.body.style.color = "red"

[Justin_H]

Thats frickin cool lol

I usually just play with HTML and CSS, JavaScript always seems so foreign, I didn’t realise you could pass JS when making html elements in tiddlywiki.

[CodaCoder]

With apologies to Matt for the detour…

document.body.style.fontFamily = "cursive"

[EricShulman]

@Justin_H

I didn’t realise you could pass JS when making html elements in tiddlywiki.

You CAN’T use JS code in HTML elements in TiddlyWiki, as that could open up a potential security hole by executing code within the local file context. TiddlyWiki automatically removes any inline JS code (e.g., onClick="...", onChange=“…”, etc.) to protect against, for example, imported 3rd-party tiddlers that might try to inject code into your environment.

While it resembles JS syntax, the use of style.attribute="value" is actually just a TiddlyWiki extended syntax to make it easier to apply inline styles to HTML and most (but not all) widgets without needing to define a separate CSS class (usually in a tiddler tagged with $:/tags/Stylesheet).

-e

[Justin_H]

huh, alright- sorry bout the misinterpretation, but I think I’m getting it, so you would use this if you want to use other tiddlywiki functionality such as filtered transclusion as opposed to just using <span style="color: red;"> since that doesn’t go off of the palette, and using widgets in place of red wouldn’t work because it’s not wikified, right?

[EricShulman]

@Justin_H

<span style="color: red;">

To use a palette-defined color, you can write:

<... style.color={{{ [{$:/palette}getindex[foreground]] }}}>

In contrast, before support for style.attribute="value" was added, you would need to construct a full style=... attribute, like this:

<... style={{{ [[color:]] [{$:/palette}getindex[foreground]] [[;]] +[join[]] }}}>

While this syntax is only a little more complicated when specifying a single attribute, it can get really messy (and more error-prone) when multiple palette-defined attributes are needed.

-e