Issues: screen readers may mispronounce foreign-language text; mixed-direction strings can reorder punctuation; “start” styling stays on the physical left even in RTL.
Shipping note: مرحبا بك في مكتبنا (Office A‑12).
No lang or dir on the Arabic phrase.
Receipt: User: أحمد — Order #12345 (Paid).
No isolation for user-generated RTL names (try RTL mode).
Visual “start” marker: this border + padding stay on the left even when the page is RTL.
Try: click Page dir to switch to RTL. Notice the “start marker” is still on the left.
Pattern: set the document’s primary language once; add inline lang (and dir when needed) for foreign-language runs; wrap user content in <bdi>; use logical CSS properties (e.g. border-inline-start).
Shipping note: مرحبا بك في مكتبنا (Office A‑12).
Arabic phrase is explicitly labeled: lang="ar" dir="rtl".
Receipt: User: أحمد — Order #12345 (Paid).
User-generated name is isolated with <bdi>.
Visual “start” marker: this border + padding follow the writing direction (LTR vs RTL).
Uses border-inline-start + padding-inline-start.
Tiny snippet you can copy
<p>User: <bdi>{{displayName}}</bdi> — Order #12345</p>
<p>
<span lang="ar" dir="rtl">مرحبا بك في مكتبنا</span>
(Office A‑12)
</p>Notes
dir="auto".