Wbr, bdi, bdo
Learn line break opportunities and bidirectional text control.
wbr: line break opportunity
The <wbr> tag marks a line break opportunity. If a long word or link overflows, the browser breaks here; if not, nothing happens. It is a void tag, written without closing.
Example: longcompoundword<wbr>breakhere. If 'longcompoundwordbreakhere' overflows, the browser breaks at the <wbr> position. The reader now follows long links or technical terms with ease.
bdi and bdo: direction control
The <bdi> tag isolates text with an unknown direction. A name from a user may be right-to-left or left-to-right; wrapped in <bdi>, it no longer disturbs the surrounding text.
The <bdo> tag forces the text direction. Its dir attribute is rtl (right to left) or ltr (left to right). Example: <bdo dir="rtl">1234-5678</bdo>. bdi isolates, bdo overrides.
Exercise Write bdi, bdo and wbr
Add three paragraphs to body. The first holds the text Writer:, then a <bdi> tag with content user-123, then - 10 points. The second holds a <bdo> tag with dir="rtl" and content 1234-5678. The third holds a long text: the letters longcompoundword, then a <wbr> tag, then the letters breakhere.
Show example solution
<body>
<p>Writer: <bdi>user-123</bdi> - 10 points</p>
<p><bdo dir="rtl">1234-5678</bdo></p>
<p>longcompoundword<wbr>breakhere</p>
</body>Test yourself
-
Which tag forces a text direction?
- <bdi>
- <dir>
- <bdo>
- <rtl>
Show answer
<bdo> — Correct. bdo forces the direction with the dir attribute.
-
Complete the bdo tag
<____ dir="rtl">This line runs right to left</bdo>Show answer
<bdo dir="rtl">This line runs right to left</bdo> -
Match each tag to its role
- <wbr>
- Break opportunity
- <bdi>
- Direction isolation
- <bdo>
- Direction override
- <br>
- Line break