RTL layout and logical properties

The selected image shows two readers at neighbouring desks, each desk set up from a different side. On the left desk the lamp stands at the far left; at the angled right desk the reader sits at its right-hand end, facing left, with the lamp beyond her book. The library writes one set-up card for every desk.

In the reading room	In the browser
the wing's sign, "Arabic readers start at the right"	dir="rtl" on <html> (steps 1–3)
a set-up card reading "lamp on the left"	left, margin-left (step 4)
a set-up card reading "lamp at the reader's start side"	inset-inline-start, margin-inline-start, text-align: start (steps 5–6)
"next shelf" arrows turned round in the Arabic wing; the wall clock and the tape player's buttons left alone	mirror directional icons only (steps 9–10)
an English title quoted on an Arabic catalogue card, kept in its own order	<bdi> isolation (step 8)
the room photographed in a mirror: every book spine reads backwards	transform: scaleX(-1) on the page (step 11)

In real terms: one stylesheet serves both directions when every side it names is a side of the line, not of the screen.

Breaks down when: a desk has nothing like a neutral character. In text, a ! or @ changes side with its neighbours (step 7); on a desk, nothing moves because of what sits beside it.

Contrasting case: switching English to French keeps dir="ltr". Nothing mirrors; only the strings change (fsd-i18n-architecture).

4.1 EXH-2010: the Arabic exam page

On the Arabic exam page the progress bar filled from the left, and the code-answer editor's lines started at the right. The fill was anchored with left: 0, and the editor inherited the page's rtl. MR !2310 anchors the fill with inset-inline-start: 0 and marks the editor dir="ltr".

/* before */ .fill { position: absolute; left: 0; width: 40%; height: 8px; }
/* after  */ .fill { position: absolute; inset-inline-start: 0; width: 40%; height: 8px; }

<!-- after --> <pre class="editor" dir="ltr">score = correct * 2</pre>

before (EXH-2010) · Arabic page: navigator Q1 at the right end · fill grows from the left · editor lines start at the right
MR !2310          · Arabic page: navigator Q1 at the right end · fill grows from the right · editor lines start at the left
MR !2310          · English page: navigator Q1 at the left end · fill grows from the left · editor lines start at the left

The navigator's buttons are inline blocks on one line, so they already ran from the right (step 3). The physical left: 0 did not; the logical inset does (steps 4–5). dir="ltr" keeps the code's lines left-to-right (step 12).

4.2 Physical against logical, in both directions

One box and one line of text, rendered under dir="ltr" and dir="rtl" with each declaration in turn.

margin-left: 40px          | English page: margin on the left | Arabic page: margin on the left
margin-inline-start: 40px  | English page: margin on the left | Arabic page: margin on the right
text-align: left           | English page: text at the left | Arabic page: text at the left
text-align: start          | English page: text at the left | Arabic page: text at the right

The two physical declarations never move. The logical ones follow the base direction, so one rule serves both pages (steps 4–6).

4.3 Grid columns follow the inline axis

An order-summary grid with grid-template-columns: 120px 1fr and a border-inline-start accent, rendered in both directions.

grid 120px 1fr · English page: 120 px column at the left · accent border on the left
grid 120px 1fr · Arabic page: 120 px column at the right · accent border on the right

Grid column 1 sits at the start of the inline axis, which is the right edge under rtl; the logical border follows it (steps 3 and 5).

4.4 A full stop after a Latin name

On the Arabic page, an order line ends with the brand name a seller typed and a full stop: شكرا لطلبك من TrailCo. ("Thank you for your order from TrailCo.").

as typed          · Arabic page: full stop drawn left of TrailCo, at the line's left end
name inside <bdi> · Arabic page: full stop drawn right of TrailCo

The full stop sits between the Latin run and the end of a right-to-left line, so it takes the paragraph's direction and is drawn at the line's left end, not after the o (step 7). Inside <bdi>, the name and its full stop are isolated and keep their own order (step 8).