Skip to main content

Rich Text Tags

Nongine supports a set of inline tags that you can use within dialog and narration text to control formatting, styling, and presentation effects. Tags use curly brace syntax and wrap the text they affect. This page documents every supported tag with usage examples.

Basic Formatting​

The most common tags are for basic text formatting. These work as opening and closing pairs that wrap the affected text.

Bold: {b}text{/b} renders the enclosed text in bold weight. Use bold to emphasize important words, character names in narration, or key information the reader should notice.

Italic: {i}text{/i} renders the enclosed text in italic style. Italics are commonly used for internal thoughts, foreign words, emphasis, and titles of works.

You can nest formatting tags. For example, {b}{i}bold and italic{/i}{/b} applies both styles to the enclosed text. Nesting is supported to any depth, though excessive nesting can reduce readability in the editor.

Color​

The {color:X}text{/color} tag changes the text color. The value X can be any CSS color name (such as red, blue, gold) or a hex code (such as #ff6600). For example, {color:red}warning{/color} displays the word "warning" in red. Color tags can be combined with formatting tags: {b}{color:gold}legendary sword{/color}{/b} produces bold gold text.

Size Tags​

Two tags adjust the size of the enclosed text relative to the base font size.

Big: {big}text{/big} increases the font size to 125% of the base size. Use this for shouting, dramatic statements, or headings within dialog.

Small: {small}text{/small} decreases the font size to 80% of the base size. This is useful for whispers, asides, fine print, or parenthetical remarks.

Presentation Effects​

These tags apply animated effects to text during playback, adding visual flair to your dialog.

Shake: {shake}text{/shake} makes the enclosed text vibrate rapidly. This conveys fear, anger, trembling, or instability. The shake effect is subtle by default and does not interfere with readability.

Both shake and other presentation effects are applied in real time as the text is revealed during the typewriter animation. Characters inside a {shake} tag begin shaking as soon as they appear on screen and continue for as long as the text is displayed.

Pacing Control​

These tags do not wrap text. Instead, they are inserted at a specific point in the text to control the pacing of the typewriter reveal.

Pause: {pause:N} inserts a pause of N milliseconds at the point where it appears. For example, I saw something{pause:1000} terrible. will display "I saw something" then wait one full second before revealing " terrible." Pauses are a powerful tool for building tension, mimicking hesitation, or creating comedic timing.

Speed: {speed:N} changes the typewriter reveal speed starting from the point where it appears. The value N is a multiplier relative to the default speed. A value of 0.5 halves the speed (slower reveal), while 2.0 doubles it (faster reveal). The speed change persists for the rest of the current text block or until another {speed} tag overrides it. Use {speed:1} to reset to the default speed. For example, He spoke slowly{speed:0.3}, choosing each word with care{speed:1}, then suddenly blurted out the truth.

Combining Tags​

Tags can be freely combined to achieve complex effects. For example:

{shake}{color:red}{b}Get out of here!{/b}{/color}{/shake}

This produces bold red text that shakes, suitable for an urgent or terrifying shout. When combining tags, always close them in the reverse order of opening to maintain proper nesting.

Variable Interpolation Inside Tags​

You can use variable interpolation within tag values. For example, if you have a string variable themeColor set to #3399ff, then {color:{themeColor}}styled text{/color} will apply that color. This lets you create dynamic styling that changes based on game state.

Unsupported Contexts​

Rich text tags are only processed in dialog and narration text blocks. They do not work in choice option labels, character name fields, or the properties of non-text nodes. If you include tags in unsupported contexts, they will be displayed as literal text rather than interpreted.