For nested HTML text, choose isolation when each phrase should retain its own direction without disturbing its neighbors. Use embedding only when interaction with surrounding text is intentional, and an override when the design explicitly requires forced character order.

This guide helps someone editing an HTML page on a Mac choose the right mechanism, preserve nested labels and punctuation, and check the result in a desktop browser. The examples use invented labels, numbers and geometric characters.

Which mechanism fits the layout task?

Start with two questions: should the browser apply ordinary bidirectional ordering inside the phrase, and should that phrase influence the ordering of surrounding text? Those decisions produce the following practical comparison. MDN’s unicode-bidi reference describes the underlying CSS behaviors.

Requirement Mechanism Preferred HTML approach
Give a known-direction phrase its own boundary Isolation An existing inline element with dir="ltr" or dir="rtl"
Isolate a phrase whose direction is unknown Isolation with automatic direction bdi, or an existing inline element with dir="auto"
Create a directional scope that still affects surrounding ordering Embedding A specialized CSS case using unicode-bidi: embed
Force character sequence while isolating the result Isolated override bdo with explicit dir="ltr" or dir="rtl"
Force character sequence while retaining interaction with surrounding text Non-isolated override A specialized CSS case using unicode-bidi: bidi-override

For ordinary HTML authoring, use directional markup as the starting point. W3C recommends tightly wrapping each opposite-direction phrase and expressing nested phrases through nested markup. This makes the intended boundaries visible in the document. W3C: Inline markup and bidirectional text in HTML.

How should you mark up nested isolated text?

Give each complete phrase its own directional boundary. If an existing inline element already contains exactly that phrase, add dir there. Otherwise, introduce a span. Keep punctuation that belongs to the phrase inside its wrapper; keep the surrounding sentence’s punctuation outside. W3C calls this “tightly wrapping” the phrase. W3C’s inline markup guidance.

For a synthetic shape label intended to run right to left, containing a left-to-right identifier, the structure could be this illustrative fragment:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

There are three deliberate scopes: the outer sentence, the shape sequence and the nested identifier. The count belongs to the sentence, so it stays outside the shape sequence. Marking only the outer phrase would leave the inner identifier without its own explicit boundary. This nesting follows W3C’s recommended structure for directional changes. W3C’s nested-phrase guidance.

When the inserted label’s direction is unknown, bdi provides isolation and defaults to automatic direction detection. A plain span without dir does not provide that same default. WHATWG specifies that bdi defaults to auto rather than inheriting direction in the usual way. HTML Standard: The bdi element.

Automatic direction is a heuristic based on the first strongly directional character, with specified exclusions for nested directional elements. It does not understand the intended meaning of a label. A label beginning with A1 therefore supplies a left-to-right cue even if its later content suggests a different presentation. Use an explicit direction when you already know the requirement. MDN: dir global attribute.

A shapes-and-digits-only label needs particular care: it supplies no strong directional letter. For the ordinary inline examples here, the HTML algorithm falls back to left to right when automatic direction finds no qualifying character. Specify dir="rtl" if that synthetic sequence must have a right-to-left base. HTML Standard: The dir attribute.

When are embedding and overrides appropriate?

Embedding creates another directional level while retaining ordinary character ordering inside it. Its boundary also has a directional effect on surrounding text. Isolation gives the contents their own scope while making the sequence behave neutrally toward its surroundings. W3C’s specification distinguishes these internal and external effects explicitly. CSS Writing Modes Level 3: Embeddings and Overrides.

Choose embedding only when that external directional influence is part of the intended result. For an independent nested label followed by a separate count, isolation is usually the appropriate choice. A deeper nesting level alone is no reason to select embed: isolated spans can themselves contain further directional spans.

An override changes the internal rule. It forces the immediate text into sequence in the specified direction rather than allowing the ordinary algorithm to resolve its directional runs. isolate-override adds an isolation boundary around that forced ordering. These are distinct behaviors, not stronger settings for correcting an ordinary phrase. MDN: unicode-bidi values.

For an intentional character-order demonstration, use bdo with dir="ltr" or dir="rtl". The HTML Standard requires an explicit direction and forbids auto on this element. Its rendering rules use unicode-bidi: isolate-override, so current HTML bdo behavior includes isolation. HTML Standard: The bdo element, HTML Standard: Bidirectional text rendering.

This distinction matters for Latin labels: an ordinary right-to-left base does not mean “reverse every Latin character.” An override can force that sequence. Even then, the individual glyphs retain their orientation; bdo does not draw backward letter shapes. MDN: bdo element.

Try a complete comparison page on your Mac

The following standalone page needs only a browser and a plain-text editor. Its first two rows compare ordinary directional handling with forced ordering. Its remaining rows expose the nesting and boundary choices. The CSS embedding row is included as a mechanism demonstration; use the HTML isolation row as the starting point for an ordinary independent label.

In TextEdit, choose File > New, then Format > Make Plain Text. Paste the complete code below. Choose File > Save, name the file bidi-demo.html, and select Use .html if prompted. These are Apple’s documented steps for creating an HTML file. Open the saved file in your desktop browser. Apple: Work with HTML documents in TextEdit on Mac.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Inspect the first two rows before changing anything. The ordinary directional span should retain ABC in left-to-right letter order. The override should display CBA when read from the left edge. This is an expectation derived from the documented mechanisms, rather than a reported browser measurement. MDN: bdo behavior.

Next, compare the nested isolation and embedding rows. Keep the words and count unchanged while examining the shape sequence and punctuation at its boundary. The mechanism differs even if a particular sample looks identical: isolation and embedding are not guaranteed to produce visibly different results for every string. Their documented distinction concerns how the scope participates in surrounding bidi resolution. W3C: CSS Writing Modes Level 3.

For a useful boundary test, move the colon inside the outer directional span, save, and reload. Then restore it outside. You are changing which phrase owns the punctuation, so assess the result against that intended ownership. Finally, narrow the browser window to check the same boundaries when the sentence wraps.

The background and dotted outline identify the tested span. They are inspection aids. They do not supply direction or isolation.

How do you diagnose a result that still looks wrong?

Work from the smallest affected phrase outward. Changing several directional properties at once makes it difficult to identify which boundary caused the result.

  1. Check the wrapper. Does it contain the entire label, and only that label? Separate sentence punctuation and counts should remain outside unless they belong to the label.
  2. Check nested phrases. An independently directed identifier inside another phrase may need its own dir wrapper.
  3. Check automatic direction. If the intended base direction is known, replace auto with that explicit direction. This is especially useful for synthetic shapes and digits.
  4. Check for overrides. If character sequence is unexpectedly forced, inspect bdo and CSS unicode-bidi declarations.
  5. Check the CSS cascade. An author rule can replace the browser’s directional styling. Remove experimental bidi rules and retest the HTML markup.

The first two checks follow W3C’s wrapping and nesting guidance. The automatic-direction check follows MDN’s dir documentation; the final checks follow the HTML rendering rules.

Also distinguish ordering from alignment. text-align: right places inline content against the right edge of a block; it does not establish an isolated phrase. text-align: start follows the block’s direction, so a change in base direction can also change which edge it uses. Diagnose the character-order problem separately from the line’s position. MDN: text-align.

For compatibility, WHATWG documents bdi and bdo as supported in all current browser engines. That does not establish support in every older browser or embedded viewer. When checking another rendering environment, test the actual target and retain directional HTML markup: MDN recommends it over CSS-only isolation because styling may be ignored. HTML Standard: Text-level semantics, MDN: bdi usage notes.

Finish with one explicit decision for each nested phrase: its base direction, its boundary and whether its internal character order should remain ordinary. For an independent label, start with isolation. Keep an embedding or override only when its specific documented behavior is required by the layout.

Sources