How to underline text or apply styles to text?

[sffc]

Question from Fabien:

How can I underline text (or use bold characters)? Is there a special field for that in the +text helper function?

[sffc]

You can use SVG text styling or CSS. Mozilla has a great guide: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Texts

To create underlined text, add text-decoration="underline" to your element:

+text(description)(font-family="body" font-size=10 x=50 y=200 text-decoration="underline")

To make italics, use font-style="italic"

Applying styles to only certain words instead of the whole text block is a little trickier. You need to use the SVG text and tspan elements directly, not the +text and +textWrap helper mixins. Here is an example:

text(font-family="body" font-size=10 x=50 y=200)
	| The #[tspan(font-style="italic") quick] brown fox

That Pug code gets converted to the following SVG XML:

<text font-family="body" font-size="10" x="50" y="200">
    The <tspan font-style="italic">quick</tspan> brown fox
</text>