Design1 min

RTL starts at the document and continues inside each component

Arabic changes the first-paint direction, spacing logic and mixed-script rendering. Flipping a finished LTR layout is not enough.

The route locale reaches the root layout before the page is rendered. Arabic sets lang and dir=rtl on the html element, while zh-cn is emitted as the BCP 47 tag zh-CN. That gives the browser the correct reading direction at first paint instead of waiting for a late stylesheet switch.

Document direction is only the first layer. Components use logical start and end spacing, directional glyphs have an explicit RTL treatment, and display letter spacing is neutralized for connected Arabic script. Insight prose also isolates embedded Latin and numeric runs with bdi so terms such as HMAC-SHA256 stay in order inside an Arabic sentence.

These rules reduce a known class of layout and bidi errors; they do not replace native copy review or viewport testing. Each Arabic screen still needs checks for line length, control order, focus movement and mixed content. RTL is a system property carried through markup, CSS, components and editorial QA.

Related insights

RTL starts at the document and continues inside each component | Wize Digital