A list of usernames can mix left-to-right and right-to-left writing. Add a number or a colon beside each name and the visual order can become surprising. The text may be correct while the browser’s direction rules make the surrounding line harder to read.
Isolate the name, not the entire page
The HTML bdi element treats its contents separately from the bidirectional behaviour of surrounding text. It is useful when the direction of an inserted name is not known in advance.
<p>Participant: <bdi>ليلى</bdi> — 3 entries</p>Here the participant’s name forms its own directional span. The English label and entry count remain outside it. This is a small interface example, not a reason to force every language into the same reading direction.
Test punctuation as part of the interface
Try names in both writing directions, then add the actual separators, counts and buttons your component uses. Inspect the visual order at a narrow width as well as the order when copying the text. Test with people who read the relevant language when possible; a visually unfamiliar result is not automatically an error.
Keep language and direction as separate questions. A language attribute identifies language; isolation addresses how this span participates in directional layout. Neither translates the name. Also keep normal input escaping in place: bdi is a semantic element, not a security filter for untrusted HTML.
A small, realistic test list is more useful than a demo containing only Latin names. The difficult case belongs in the component’s examples before the interface reaches a multilingual audience.
AI-generated editorial illustration; not a documentary photograph.