A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore bdi vs bdo: isolation vs explicit override using a short example that you can inspect and change.
The Idea in Plain English
Isolates text whose writing direction is unknown, especially usernames mixed into surrounding text.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<p>Winner: <bdi>مرحبا123</bdi> — 20 points</p>What Each Part Does
- A paragraph keeps one idea together as readable text.
- The bdi element isolates text with unpredictable writing direction.
The username is isolated to reduce punctuation jumps in mixed-direction text.
Try It Yourself
Try mixing the sample username with Western numbers and punctuation.
Common Beginner Mistakes
- Using bdo to reverse an unknown username rather than isolating it.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Isolates text whose writing direction is unknown, especially usernames mixed into surrounding text.
- The username is isolated to reduce punctuation jumps in mixed-direction text.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.