Tags & Codes Reference

BWTA uses two systems to control how your document is translated and formatted into braille: tags and control codes.

• Tags define the structure of your document — headings, paragraphs, lists, emphasis, math, and blockquotes. They look like HTML: <h1>Title</h1>. Tags determine which BANA formatting rules are applied automatically (indentation, spacing, centering).
• Control codes give you fine-grained control over translation and layout. They use the syntax @{code}. Use them to force page breaks, change braille grade mid-document, insert transcriber notes, center text, adjust indentation, and more.

When you upload a document, BWTA automatically detects structure and inserts the appropriate tags. You can edit, add, or remove tags at any time in the Format pane (left side of the editor).

There are three ways to insert tags:

1. Keyboard shortcuts — The fastest method. Select text (or place your cursor) and press the shortcut. If text is selected, it will be wrapped in the tag. If no text is selected, the cursor's current word will be wrapped, or empty tags will be inserted at the cursor position.
2. Toolbar buttons — Click the tag buttons above the editor (e.g., <h1>, <p>, <strong>). Active tags at the cursor position are highlighted in blue.
3. Type directly — Type the opening and closing tags manually. Tags are case-insensitive.

Toggling: If the cursor is already inside a tag of the same type, using the shortcut or toolbar button will remove the tag instead of adding a duplicate.

Removing tags: Right-click in the editor and choose Remove Tag to strip the nearest enclosing tag pair without deleting the content inside.

Block tags define the structural elements of your document. Each block tag occupies its own line(s) and determines how the braille output is indented and spaced according to BANA (Braille Authority of North America) formatting rules.

<h1>Chapter One</h1>

<h2>Section Title</h2>

<h3>Subsection</h3>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

<li>First item in the list</li>
<li>Second item in the list</li>

<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>

<aside>To be, or not to be, that is the question.</aside>

<mathblock>x = (-b ± √(b² - 4ac)) / 2a</mathblock>

Inline tags modify text within a paragraph or other block element. They do not create new lines or affect indentation. In braille, they insert the appropriate indicators (e.g., bold typeform indicators for <strong>).

<p>This is <strong>important</strong> text.</p>

<p>She read <em>To Kill a Mockingbird</em> last summer.</p>

<p>The formula <math>a² + b² = c²</math> is the Pythagorean theorem.</p>

BANA (Braille Authority of North America) rules determine how each element is positioned on the braille page. BWTA applies these rules automatically based on your tags. The key concept is cell position: cell 1 is the leftmost position on the line, cell 2 is one space in, and so on.

“First Line” is where the first line of the element starts. “Runover” is where continuation lines start when the content wraps to the next line. “Blank Before/After” is the number of blank lines inserted around the element.

Control codes give you precise control over translation and layout beyond what tags provide. They use the syntax @{code}. Some codes are standalone (single code), and some are block codes that require an opening and closing pair.

How to insert: Click the Braille codes button in the toolbar to open the code menu, or right-click and choose Insert Code to search all available codes. You can also type codes directly.

Translation codes affect how text is converted to braille. They control contraction grade, capitalization, and allow you to insert braille directly.

<p>The acronym @{g1}NASA@{/g1} stands for...</p>

<p>The prefix @{nc}dis appears in many words.</p>

<p>@{tn}The following diagram shows a bar chart.@{/tn}</p>

@{db~⠓⠑⠇⠇⠕}

Layout codes affect how the braille is arranged on the page — line breaks, page breaks, indentation, centering, and alignment.

@{ctr}
<p>Dedicated to my family</p>
@{/ctr}

The Format pane uses color-coded syntax highlighting to help you identify tags and codes:

• Blue — Structure tags (<h1>, <p>, <strong>, <em>, <li>, etc.)
• Purple — Math tags (<math>, <mathblock>)
• Amber — Control codes (@{pg}, @{g1}, @{nl}, etc.)

The toolbar buttons also highlight in blue when the cursor is inside an active tag, making it easy to see which formatting is applied at the current position.

Here is a complete example showing a variety of tags and codes in a single document:

<h1>The Solar System</h1>
<h2>Introduction</h2>
<p>The solar system consists of the Sun and everything that orbits it, including <strong>eight planets</strong>, their moons, and smaller objects.</p>
<p>The planets, in order from the Sun, are:</p>
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
<h2>Earth</h2>
<p>Earth is the third planet from the Sun and the only known planet to support life. Its distance from the Sun is approximately <math>1.496 × 10^8</math> km.</p>
<aside>Earth is sometimes called the "Blue Marble" because of how it looks from space.</aside>
<p>@{tn}The following section includes a diagram not shown in braille.@{/tn}</p>
@{pg}
<h1>Chapter Two</h1>
<p>The force of gravity is described by the equation:</p>
<mathblock>F = G(m₁m₂) / r²</mathblock>

This example demonstrates headings (h1, h2), paragraphs, bold text, an unordered list, inline math, a blockquote, a transcriber note, a forced page break, and a display math block.

All Tags

Common Control Codes