Keep mixed-direction text reading in the right order
Arabic or Hebrew with Latin words or numbers inside it can render with the punctuation in the wrong place. The bidirectional algorithm has to guess which run a neutral character like a space or a full stop belongs to. A right-to-left mark or a left-to-right mark tells it. W3C lists H34 as sufficient for 1.3.2 Meaningful Sequence when it is used together with the general technique for ordering content meaningfully, so a mark fixes one spot and the meaningful order is what actually passes. Use it only where the guess goes wrong, which in practice means around punctuation, prices and phone numbers. One warning worth having in advance. The same algorithm runs in your editor, so the mark may not appear where you typed it, and the fix can look wrong in the source while rendering correctly on the page.
How we find it in an audit
No tool can judge whether a mixed-direction sentence reads the way it was meant to, so this needs a reviewer who reads the language. On multilingual sites we look at every mixed passage on screen and compare what the page shows against what the sentence was written to say.
How affected users experience it
This lands as a visual sequence failure first, and the people it lands on are readers of right-to-left languages. A price renders backwards, an exclamation mark ends up at the far end of the line attached to the wrong word, and the sentence on screen says something slightly different from the sentence that was written. Anything downstream that consumes the rendered order inherits the same scramble.
Passes vs. fails
Passes
The same sentence with ‏ typed straight after Widget! The exclamation mark stays with the product name where it belongs.Fails
The Latin product name Widget! at the end of an Arabic sentence, with no mark. The exclamation mark renders at the far left, stuck to the wrong word.
Other ways to satisfy this rule
12 guides on this site are filed under 1.3.2 Meaningful Sequence. W3C lists this one as sufficient for that rule only alongside G57, so the pair is what passes and neither half does on its own.
- C6sufficientKeep source order meaningful when CSS repositions content
- C8sufficientSpace letters with CSS, not blank characters
- C27sufficientMatch DOM order to visual order
- G57sufficientPut content in a meaningful reading order
- H56sufficientFix nested right-to-left text with the dir attribute
- PDF3sufficientFix the reading and tab order in PDFs
This guide is our interpretation of W3C technique H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.