Short answer
Set direction on the container, not the page, and isolate every inline run that goes the other way. Latin numerals inside Arabic text are the most common breakage: 1 247 can render as 247 1 unless it is wrapped and isolated.
The problem nobody warns you about
Arabic runs right to left. Latin script runs left to right. Digits run left to right in both. A sentence containing all three is not one direction with exceptions. It is a set of runs, and the browser applies the Unicode bidirectional algorithm to decide their order.
The algorithm is well specified and usually correct. It goes wrong when it lacks the context you have: it cannot know that 2026/044 is one reference number rather than two numbers around a slash.
The failure we hit in practice
A character count rendered as 1 247 حرف displayed as 247 1 حرف. The digits were correct, the grouping was correct, and the order was wrong, because inside a right-to-left context, the space-separated groups were reordered.
The fix is to keep the number in its own left-to-right run:
<!-- wrong: the whole run inherits RTL -->
<span dir="rtl">1 247 حرف</span>
<!-- right: number isolated, label stays RTL -->
<span>1 247 <span dir="rtl">حرف</span></span>Rules that prevent most of it
- Direction belongs on the block. Put
dir="rtl"on the paragraph or section that is genuinely Arabic, not on<html>for a page that is mostly French. - Isolate opposite runs. Use
<bdi>, ordiron a wrapping element, around names, reference numbers, amounts and dates. - Never concatenate strings across directions. Build the markup, let the renderer decide the order.
- Use logical CSS properties.
margin-inline-startinstead ofmargin-left, so layout mirrors correctly. - Test with real content. Lorem ipsum will never reproduce these bugs. A genuine bilingual document will find them in seconds.
Fonts are part of the problem
Many Latin fonts have no Arabic coverage, so the browser silently substitutes a fallback. The result is two typefaces in one line with mismatched weight and baseline. Pick a family with genuine coverage of both scripts, or pair deliberately and check the vertical metrics rather than hoping.
Why this matters commercially
In Algeria a professional document is routinely bilingual. Text that renders backwards is not a cosmetic defect to the person reading it. It looks like the tool does not understand their language, which is a reasonable conclusion to draw. For software aimed at people whose work must be exact, that impression is expensive.
Frequently asked questions
Why do numbers appear reversed in Arabic text?
Digits are left-to-right even inside right-to-left text. When a number sits in an RTL run without isolation, the bidirectional algorithm can reorder space-separated groups. Wrapping the number so it keeps its own direction fixes it.
What is the correct way to mix Arabic and French on a web page?
Set dir on the block that is genuinely Arabic rather than on the whole document, isolate inline runs of the opposite direction with bdi or a dir attribute, and use logical CSS properties so layout mirrors correctly.
Which font should I use for Arabic and Latin together?
Choose a family with real coverage of both scripts, or pair two deliberately and check that weights and vertical metrics match. Relying on silent font fallback produces mismatched baselines within a single line.