Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
bdo
Overrides the current text direction, forcing text to render left-to-right or right-to-left.
Description
The <bdo> (Bidirectional Text Override) element forces text to render in a specified direction, regardless of the Unicode Bidirectional Algorithm. The dir attribute is required.
For isolating text without forcing direction (user-generated content, unknown text), use <bdi> instead.
VB's i18n stylesheet sets unicode-bidi: embed on [dir="rtl"] elements, complementing the native bdo behavior.
When to Use
- Embedding RTL text in a left-to-right paragraph (or vice versa)
- Displaying reversed text for visual effects
- Correcting direction when the algorithm gets it wrong
- Technical documentation showing text in specific directions
When NOT to Use
- For user-generated content — use
<bdi>(auto-detection is safer) - For entire page direction — use
dir="rtl"on<html>
Examples
Basic bdo example
<p>Normal text: Hello World</p><p>Reversed: <bdo dir="rtl">Hello World</bdo></p>LTR override in RTL context
<p dir="rtl"> This paragraph is right-to-left, but <bdo dir="ltr">this text is forced left-to-right</bdo>.</p>RTL override for Hebrew
<p> The Hebrew word for "peace" is <bdo dir="rtl">שלום</bdo>.</p>Nested bdo overrides
<p> <bdo dir="rtl"> Outer RTL: Hello <bdo dir="ltr">Inner LTR: World</bdo> Back to RTL </bdo></p>Attributes
| Attribute | Description |
|---|---|
dir |
Required. Text direction: ltr (left-to-right) or rtl (right-to-left) |
Also supports global attributes.
CSS
bdo CSS (browser default)
bdo { unicode-bidi: bidi-override; /* browser default */}VB does not add additional styling. The element's value is in its Unicode override behavior.
Accessibility
<bdo> affects visual presentation only. Screen readers typically read text in logical order, not visual order. Be cautious using <bdo> purely for visual effects, as the rendered order may confuse users who cannot see it.
Related
<bdi>— Isolates text without forcing direction (safer for unknown text)<q>— Inline quotations with locale-aware quote marks- Internationalization guide — Full i18n reference including logical properties and reading direction utilities