Bidirectional interfaces
RTL is behavior, not a mirror
How logical CSS, native direction, Base UI context, text alignment, reservoir placement, and keyboard expectations combine in Gummy UI’s RTL work.
By Gummy UI · Published
Set direction at a real boundary
Right-to-left review starts with the document or component subtree’s dir value. Gummy Direction provides a native direction boundary and the Base UI direction context used by primitives that need it. This is different from applying a transform to a finished screenshot: layout, text, focus movement, and positioning logic all need the correct direction while they run.
The public RTL page exposes a scoped example so direction can be inspected without changing the entire site. Component Lab specimens add representative RTL states for controls whose geometry or navigation changes. Those examples are implementation aids, not a claim that every language has received translation review.
Prefer logical geometry
Margins, padding, borders, insets, alignment, and radii should use inline and block concepts when their meaning follows reading direction. Gummy UI places attached reservoirs and support content with logical properties where possible, so the material moves with the functional edge instead of remaining pinned to an arbitrary physical side.
Some artwork still needs explicit RTL selectors because an asymmetric highlight or SVG path has visual direction. Those exceptions should remain local and documented. A blanket scaleX transform would reverse text and icons as well as geometry, creating a visual mirror rather than a usable RTL interface.
Keyboard order needs a contract
Horizontal controls can change arrow-key expectations under RTL. Tabs, radio groups, menus, and other composites should follow the primitive or documented native model rather than an assumption that Arrow Right always means the next DOM item. Focus and selection need to move together where the component contract requires it.
Automated tests cover selected direction-sensitive paths, but code-level direction is not the whole launch check. Arabic, Persian, and Hebrew content introduce different word lengths, punctuation, numerals, and mixed-direction strings. Reviewed translations and full locale navigation remain separate work from the current RTL architecture.
Test content, not just chrome
A reservoir moving to inline start is useful evidence, but long labels, validation messages, tables, dates, breadcrumbs, and input values also need review. Mixed LTR fragments such as URLs or code should remain readable inside an RTL context. Reflow and overflow checks should use realistic strings rather than repeated placeholder glyphs.
The durable rule is to treat direction as an environmental axis across semantics, behavior, and material. Gummy UI’s logical CSS and direction component establish that foundation. They do not replace native-speaker review or justify publishing untranslated locale claims.