×

html · level 3 · unit 7 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

<bdi> keeps words you do not control in their own bubble.

A page can be : an English list of winners might include an Arabic name. The browser works out each word's direction, but a right-to-left name next to numbers or punctuation can drag them to the wrong side.

When you show text you do not control, like usernames or reviews, wrap it in <bdi>, short for bidirectional . It keeps those words apart, so their direction cannot scramble the rest of the line.

For a box where people type, add dir="auto". The browser looks at the first real letter and picks the direction for them.

<h2>Top reviewers</h2>
<ul>
  <li><bdi>Sam</bdi>: 12 reviews</li>
  <li><bdi>ياسمين</bdi>: 9 reviews</li>
  <li><bdi>Priya</bdi>: 7 reviews</li>
</ul>
<label for="nickname">Your nickname</label>
<input id="nickname" dir="auto">

Press show my page to see it here.

Without <bdi>, the colon and the 9 can jump to the wrong side of the Arabic name.