Technical guide1 min read

RTL product design beyond mirroring

Treat reading direction as an input to hierarchy, interaction, motion and mixed-direction text.

The question behind the term

A global rtl declaration fixes browser layout behavior but cannot decide hierarchy, icon meaning or spatial composition. Mechanical mirroring can invert a real process diagram or put the primary action in an awkward reading position.

A reviewable approach

Review navigation order, focus order, gesture direction, progress motion and anchored actions for each locale. Use bidi-safe markup for emails, identifiers and code, and test with actual Persian content at zoom and narrow widths.

  • Set lang and dir on the server-rendered root
  • Test keyboard order and screen-reader landmarks
  • Use a Persian font with appropriate metrics
  • Localize motion with meaning

The boundary to keep visible

Decorative asymmetry does not always need mirroring. Preserve causal meaning and accessibility before pursuing visual symmetry.

Start with the real constraint

Something important needs to work better.

Tell us about the product, workflow, or system you are trying to build.

Start a conversation