Harlowe: thinking outside the (box:)

Authoring Twine
,
7

▲ Return to the Table of Contents

CSS Units

  • Text is the primary way of delivering interactive fiction.
  • How you present your text is as important as the story itself.

Style sheets have many units at their disposal. The ones that allow the most control and flexibility are rem, px and %. In rare cases, I also recommend ch.

REM Unit

Rem is the most important unit because of how it is based off of the root font size. To use rem units effectively, set the font-size in your story’s style sheet as follows:

:root { font-size: 24px; }

This root font-size should reflect the best size for displaying the body of your story’s text.

Note: Most browsers use 16px as the default font-size.

CSS rem units are always relative to the root element, meaning 1 rem is equal to 24px in this case. I recommend using rem for margin, padding, font-size and line-height because they all relate to the chosen size of the font. Your story styles might look like:

tw-story {
	font-size: 1rem;       /* = 24px */
	line-height: 1.5rem;   /* = 36px */
	padding: 2rem 0;       /* = 48px / 0px */
}

h1 { font-size: 2rem; }

Now, if you decide to change the font-size for your story, all font sizes, padding and margins will also change relative to the font-size and little effort is required to keep it all proportional.

Note: When using 0 as a CSS value, the unit is not required.

》Fun Fact: The difference between rem and em is that rem is relative to the root element, while em is relative to the parent element. What this means is when elements are nested, rem produces predictable results always based off the root font-size. However, em units can change in unpredictable ways based on the parent element that might be affected by its parent element and so on. This means that 2 em is not always twice that of the main root element, but rem will always be that. If you nest many <div> tags with font-size: 2em; styled in each, the text will grow exponentially with each nested div.

PX Unit

The px unit is best for small, fine-tuned dimensions. I primarily use px units for border-width, box-shadow / text-shadow offsets and any other effect requiring precision.

A round, bordered button style could look like:

.button {
	display: inline-block;
	background-color: teal;
	border: 2px solid darkslategrey;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	color: white;
	text-shadow: 2px 2px darkslategrey;
}

Now if the root font-size changes, our button will still look the way we intended it to.

》Tip: Using small decimal values of rem is unpredictable. 0.05rem might look good for a border-width with your current font-size, but changing the root font-size later might cause what was being drawn at 2 pixels to draw at 1 or 3 pixels instead. This could dramatically change the way your story appears.

% Unit

Percentages are used primarily for sizing the widths of blocks and columns.

By default, Harlowe’s centering markup =><= creates a block that’s 50% of the width of the passage. To change this, you can use the following CSS style:

tw-align[style*="text-align: center"] { min-width: 100%; }

Note: Percentage widths of child elements might not work unless the parent’s width is also declared. For example, you may have to add a width to the <tw-passage> style if certain child element width percentages are not rendered properly in your passages.

》Tip: Percentages can get really interesting in place of other units. For example, line-height: 150%; will be 1.5 times that of the font-size for the current element.

CH Unit

The ch unit represents the width of an average character for an element’s font. For standard Harlowe stories, this is a very nice way to ensure paragraph readability. The sweet spot for readability lies within 50 – 75 characters of width.

You can set your story’s style sheet to use:

tw-passage { width: 60ch; }

The benefit then becomes that no matter the size of your font, you will always have your story’s paragraphs displayed with word wrapping occurring in a predictable manner. If you get rid of an orphan (a single word by itself on the last line of a paragraph), this will still be true if you change the root font-size later. The width will scale accordingly.

There are other CSS units that may be useful for specific situations, but the units described above will serve you well for the majority of your Harlowe story needs.

》Bonus Tip: If you find that your styles are not appearing as intended, it’s possible that Harlowe is overriding your styles. At the end of a style, you can add !important to ensure that your style never gets overridden, but it also will not be possible to change the style while the story is running either so use this technique sparingly.

Rationale :

  • Mastering only a few, yet effective, CSS units will ensure that you can more easily manage your story’s presentation.
  • Using each unit in a consistent way promotes more understandable CSS code.
  • CSS knowledge goes well beyond that of Twine stories and will give you an advantage in any web page related endeavours.

▲ Return to the Table of Contents

1 Like