CSS custom properies issue

Authoring Twine
1

Twine Version: 2.11.1

I have a widget that prints an NPC’s name, when given a one or two letter code for the character. Each character also has its own custom color, which is changed by setting the –text-bubble-color CSS custom property. When I use the widget to print the names of several characters who appear in the same passage (from a for loop) the names of the characters are printed correctly, but they all get the same color. I’ve tried adding in a “Capture” macro, to preserve the state of the color variable, but the CSS variable is not preserved by this method. Any thoughts?

<<widget "name">>
	
	<<set _char=_args[0]>>
    <<set _charColor=setup.getCharColor(State.temporary.char)>>
    <<capture _charColor>>
    <<script>>
		document.documentElement.style.setProperty('--text-bubble-color', State.temporary.charColor);
	<</script>>
	
	<<switch  _args[0]>>
    	<<case "m">>@@.interogee;characterM@@
        <<case "b">>@@.interogee;characterB@@
        <<case "cp">>@@.interogee;characterCP@@
        <<case "j">>@@.interogee;characterJ@@
        <<case "c">>@@.interogee;characterC@@
        <<case "s">>@@.interogee;characterS@@
	<</switch>>
    
    <</capture>>
<</widget>>
2

It looks like you’re setting the --text-bubble-color property (variable) on the document element? That can only have one value, and you’ll just overwrite it each time, so all the characters will end up having the same color. Unless I’m missing something…

3

I believe I’m setting it to a different color every time the widget is called (with the getCharColor() function) , but that it ends up only assigning the color from the final call.

Is there a different way I should be assigning the bubble-color value, or a different way to organize the logic so the correct color variable is set (and preserved until display) each time the widgit is called?

“@@.interogee; “ Is an in-line styling function which, in other contexts, correctly sets the text color value to the —text-bubble-color value

4

Right, but aren’t you doing the equivalent of setting the stylesheet to:

html {
    --text-bubble-color: #XXXXXX;
}

So you’re overwriting that same single CSS property every time you set it. I’m pretty sure?

I would be looking at something like having different variable names for each characterX maybe? (Incidentally, you might be missing a period before those in your switch statement). Or just put color:_charColor in the @@ declarations in the switch statement?

Hmm. I’m guessing the problem with that method is that the element you want to style is something higher up the tree, containing the characterM element, which, yeah, is a tricky problem.

1 Like
5

As @JoshGrams says, you are repeatedly overwriting the same property multiple times, and since all CSS code is applied in a single pass, you just get the last value.

What you need to do is apply the custom property to an element closer to the actual text, ideally a wrapper around it.

<<widget "name">>
    <<switch  _args[0]>>
    	<<case "m">><<set _name = "characterM">>
        <<case "b">><<set _name = "characterM">>
        <<case "cp">><<set _name = "characterM">>
        <<case "j">><<set _name = "characterM">>
        <<case "c">><<set _name = "characterC">>
        <<case "s">><<set _name = "characterS">>
    <</switch>>
    <span @style="setup.getCharColor(_args[0])">_name</span>
<</widget>>
6

Thanks to Josh and David

This was my code on the final the final two lines, based on Hituro’s suggestion

<<set _myColor= setup.getCharColor(_args[0])>>  
 <span @style="'font-weight:bold; color: ' + _myColor" >_name</span>
1 Like