You can display text in a character sheet just by typing it in the HTML, like this:
<h2>An Example Section</h2>
This is some text.
This is some more text.Code language: HTML, XML (xml)I call this naked text, and you can see what it looks like in the picture above. Notice how paragraphs are not respected. HTML doesn’t care about white space like line breaks and will ignore them unless you create them. You can use a line break tag, like this:
<h2>An Example Section</h2>
This is some text.
<br>
This is some more text.Code language: HTML, XML (xml)But you can also include the text in paragraph tags, like this:
<h2>An Example Section</h2>
<p>This is some text.</p>
<p>This is some more text.</p>Code language: HTML, XML (xml)Paragraphs, as the name suggests, automatically include line breaks.
These two examples will look identical. The first looks like it uses less typing, but you’ll find as work through the guide that the second is superior.
The important takeaways here are that HTML ignores whatever paragraphs, tabs, and similar things you include in the HTML, and always include your text in a HTML element of some kind.
SPAN
Spans work like paragraphs, but are inline – that means they don’t include line breaks and any similar spacing. Here’s what paragraphs and spans look like:
<h2>An Example Section</h2>
<p>This is some text.</p>
<p>This is some more text.</p>
<span>This is some text.</span>
<span>This is some more text.</span>Code language: HTML, XML (xml)Notice how the spans are on the same line? If a line break isn’t created manually, they don’t have one.
That makes spans really good for combining with other elements like inputs. Here are a couple of spans with an input:
Basically, spans work like naked text while still being inside an HTML Element. that’s an advantage that will be useful when using CSS.
Attribute-Backed Spans
Spans can also be used in another way – you can use them to display an attribute value, with no ability to alter them. Say in one section of the sheet you let a player enter their Strength attribute, and in another part of the sheet you just want to display the score, you can do that with a span.
<input type="number" name="attr_strength" value="10" title="@{strength}">
<hr>
<span name="attr_strength"></span>Code language: HTML, XML (xml)
Here is an example of the strength being set up with an input, followed by a display of that attribute. The <hr> tag is only there to break up the image:
Notice how the attribute-backed span just looks like normal text. There’s no obvious way to tell this comes from an input. That’s useful, sometimes.
Finally, when creating an attribute-backed span, don’t enter a value.
TEXTAREA
So, you know how to create inputs. that lets players enter values, words, and maybe even sentences. But what if you want them to enter paragraphs of text that cross over several lines, like say a character description?
<textarea name="attr_description" placeholder"Enter your description here"></textarea>
<textarea name="attr_magic_rules">
This is a description of the way magic works in this setting
</textarea>Code language: HTML, XML (xml)
Here are a couple of examples, one using a placeholder, and one with pre-existing text.
Whatever a player enters in the box will be saved as the new value. If there’s a placeholder, it will be overwritten by any entered text.
A Note on the Title Attribute
You can use the title attribute with almost all HTML elements to show popup text. It’s not just for inputs. You can use them with paragraphs, spans and textareas, and even headings. You can’t use it with naked text.
