Once upon a time, Snazzy Susan came to the horrifying realisation that she was an entirely one-dimensional character created to illustrate a minor feature of Twine, an open source tool for creating games and interactive fiction.
In her case, that feature was the ability to style text. For example, the option of //italicising// text by writing it within `//double forward slashes//` or making it appear ''bold'' by writing it within `''double apostrophes''`.
After a brief existential crisis, she decided to just go with it and look at either [[how to change text colour]] or [[how to add cool effects]].Snazzy Susan looked at some prettiful coloured text. It really helped take her mind off the revelation that she was in fact a fictional character, and not a very interesting one at that.
(text-colour:"red")[red]
(text-colour:"blue")[blue]
(text-colour:"green")[green]
(text-colour:"purple")[purple]
(text-colour:"transparent")[transparent] <-(This one says "transparent")
(text-colour: "cyan")[cyan]
(text-colour: "blanchedalmond")[blanchedalmond]
(text-colour: "darkolivegreen")[darkolivegreen]
(text-colour: "lightgoldenrodyellow")[lightgoldenrodyellow]
She found a token reason to consider that all these were achieved by writing:
''`(text-colour: "ANY COLOUR YOU LIKE")[WHATEVER TEXT YOU WANT TO APPEAR IN THAT COLOUR]`''
At this point, she figured she could either look into [[how to add cool effects]] or possibly [[more advanced use of colour]].Snazzy Susan looked at all the wonderful effects that Twine offered. How they delighted her with their textual whimsy! There sure were a lot of them...
(text-style: "none")[none]
(text-style: "bold")[bold]
(text-style: "italic")[italic]
(text-style: "underline")[underline]
(text-style: "strike")[strike]
(text-style: "superscript")[superscript]
(text-style: "mark")[mark]
(text-style: "outline")[outline]
(text-style: "shadow")[shadow]
(text-style: "emboss")[emboss]
(text-style: "condense")[condense]
(text-style: "expand")[expand]
(text-style: "blur")[blur]
(text-style: "blurrier")[blurrier]
(text-style: "smear")[smear]
(text-style: "mirror")[mirror]
(text-style: "upside-down")[upside-down]
(text-style: "blink")[blink]
(text-style: "fade-in-out")[fade-in-out]
(text-style: "rumble")[rumble]
(text-style: "shudder")[shudder]
Marvellous, thought Susan, how all of these had been produced by writing:
''`(text-style: "ANY OF THE ABOVE STYLES")[WHATEVER TEXT YOU WANT TO APPEAR IN THAT STYLE]`''
She thought this might be a good time to either investigate [[how to change text colour]] or [[how to combine text effects with colour]].Susan considered that some method of setting colours beyond simply typing their names might offer more options for doing interesting things with them. Sure enough, she realised that she could specify exact shades by using ''`(rgb: RED, GREEN, BLUE)`'' to provide colour values instead of colour names:
(text-colour: (rgb: 255, 0, 0))[255, 0, 0]
(text-colour: (rgb: 0, 255, 0))[0, 255, 0]
(text-colour: (rgb: 0, 0, 255))[0, 0, 255]
She considered also that those numbers could be replaced with variables, so that
''`{
(live: 1s)[
(set: $randomRed to (random: 0, 255))
(set: $randomGreen to (random: 0, 255))
(set: $randomBlue to (random: 0, 255))
(text-colour: (rgb: $randomRed, $randomGreen, $randomBlue))[DANCE PARTY!!!]
]
}`''
would produce a random colour every second:
{
(live: 1s)[
(set: $randomRed to (random: 0, 255))
(set: $randomGreen to (random: 0, 255))
(set: $randomBlue to (random: 0, 255))
(text-colour: (rgb: $randomRed, $randomGreen, $randomBlue))[DANCE PARTY!!!]
]
}
If it weren't for that very recent existential crisis, she totally would have got her groove on. Instead, she resolved to think about either [[even more advanced use of colour]] or [[how to add cool effects]].Snazzy Susan tried throwing a few things together, just to see how they turned out.
''`(text-colour: "cyan")[(text-style: "outline")[TEXT WITH OUTLINE]]
(text-style: "outline")[(text-colour: "cyan")[TEXT WITH OUTLINE]]
(text-colour: "cyan")[(text-style: "outline")[(text-colour: "red")[TEXT WITH OUTLINE]]]
(text-colour: "red")[(text-style: "outline")[(text-colour: "cyan")[TEXT WITH OUTLINE]]]`''
The results were somewhat unexpected:
(text-colour: "cyan")[(text-style: "outline")[TEXT WITH OUTLINE]]
(text-style: "outline")[(text-colour: "cyan")[TEXT WITH OUTLINE]]
(text-colour: "cyan")[(text-style: "outline")[(text-colour: "red")[TEXT WITH OUTLINE]]]
(text-colour: "red")[(text-style: "outline")[(text-colour: "cyan")[TEXT WITH OUTLINE]]]
Snazzy Susan considered that the same thing would probably work with:
''`(text-colour: "red")[(text-style: "smear")[(text-colour: "cyan")[MULTICOLOUR SMEARED TEXT]]]`''
(text-colour: "red")[(text-style: "smear")[(text-colour: "cyan")[MULTICOLOUR SMEARED TEXT]]]
Snazzy Susan decided that this was enough text tomfoolery for one day. All there was left to do, she considered, was to provide some sort of [[table of contents]] so that readers could skip to whatever information they wanted in future.Snazzy Susan considered that there was another way of producing colours using numbers: ''`(hsl: HUE, SATURATION, LIGHTNESS)`''. This one made it possible to change the colour by altering just one variable:
''`{
(set: $hue to 0)
(live: 1s)[
(set: $hue to it + 10)
(text-colour: (hsl: $hue, 1, 0.5))[NOVELTY LIGHTBULB!!!]
]
}`''
{
(set: $hue to 0)
(live: 1s)[
(set: $hue to it + 10)
(text-colour: (hsl: $hue, 1, 0.5))[NOVELTY LIGHTBULB!!!]
]
}
This made the hue change steadily, while its saturation and lightness remained the same. It reminded her of the cheap water jet speakers on sale at booths in every shopping centre ever.
Since this place was beginning to look a little like a Disco Stu fever dream, Susan resolved to either switch to thinking about [[how to add cool effects]] to text in Twine, or [[how to combine text effects with colour]].Table of Contents
[[Start]]
[[how to change text colour]]
[[more advanced use of colour]]
[[even more advanced use of colour]]
[[how to add cool effects]]
[[how to combine text effects with colour]]
Snazzy Susan decided that there should probably be a link to this table of contents at the bottom of every page - including this one - but that she would make it transparent because she was just kind of an annoying person in general, really.
Here it is:
↓↓↓
(css: "opacity: 0")[ [[table of contents]] ]