These are probably common sense to people familiar with HTML and CSS, but I thought it might be helpful for other beginners!
Bold and Italic text
These are done with HTML tags! Surround text with the <strong> strong tag </strong> to make them bold, or the <em> emphasis tag </em> to make it italic.
There are also <b> and <i> tags, but I read that their use is discouraged, since they only make a visual change and don’t work with screenreader software.
Read more about HTML tags here:
HTML <strong> Tag
HTML <em> Tag
Inserting line breaks
I wanted a bit of empty space between each label for pacing, so I added the HTML <br> Tag at the starts of labels.
The code:
"Darkness is always the same no matter where you are."
jump snack
snack:
wait 1000
"<br /><br />You search the snack bar for something to eat, but your pupils are slow to adjust. You scan the dull mass of plastic wrappings, trying to remember what it looked like in the day."
What it looks like:
Line break tags don’t play well with talk commands though, since the line breaks would be wrapped inside quotation marks. So for labels that began with a talk command, I added the line break to the end of the previous label instead. I didn’t try putting line breaks on its own line of text, but I think that would require an extra input from the player instead of being automatic.
Changing the colour of think text
I wanted to change the think text colour from its default blue to the same as regular text. I did this by editing the main.css file. Here’s the code that worked for me:
/* main.css */
.think-command {
color: var(--text-color) !important;
}
Hiding the HUD stats
You can’t simply delete all the stats in config.yaml, the game will throw an error. Instead, you’ll need to edit the game’s CSS to hide them. This is the code that worked for me:
/* main.css */
.hud {
opacity: 0 !important;
}
The Narrat documentation has a great guide with more info on CSS editing:
some of this I should add to the docs.