Glossary / Right-to-left layouts

Right-to-left layouts

Right-to-left (RTL) layouts support languages and scripts whose primary inline direction is right to left, such as Arabic and Hebrew. Correct RTL is more than mirroring a page: text direction, punctuation, embedded Latin strings and numbers, icons, navigation, tables, and bidirectional text all require deliberate handling. Direction should follow the content’s language and writing direction, while layout should use logical properties so the browser can adapt without brittle left/right overrides.

What to know

• Set page direction with <html lang="ar" dir="rtl"> (or the appropriate language). Use dir="auto" for user-entered text whose direction is unknown.
• Prefer CSS logical properties: margin-inline-start, padding-inline-end, inset-inline-start, text-align: start, and border-inline-start, rather than physical left/right properties.
• The Unicode Bidirectional Algorithm handles mixed-direction runs, but punctuation and numbers can appear unexpectedly when strings concatenate. Isolate embedded values with <bdi> or dir="auto" where appropriate.
• Directionality is not the same as text alignment. A centered element remains centered; icons representing physical direction (back/forward) may need mirroring, while universal icons should not be blindly mirrored.
• Forms, dates, phone numbers, URLs, code, and currency often mix RTL text with LTR tokens. Isolate those values and test realistic content.
• Avoid Unicode directional controls in application strings where markup isolation is safer and more maintainable; if controls are needed, understand their security and display implications.

Testing

Test RTL at the document and component levels, including mixed Arabic/Hebrew plus Latin names, punctuation, numbers, links, and user-generated text. Check focus order remains logical even when the visual layout flips. Verify menus, breadcrumbs, charts, icons, input cursor direction, and responsive breakpoints. Use pseudo-RTL and real locale translations; pseudo mirroring alone will not reveal bidi algorithm edge cases.

Interview questions

1. Why use logical CSS properties? They express start/end and inline/block relationships, so layout adapts to writing direction and writing mode.
2. Does dir="rtl" mirror every icon? No. Only directional affordances whose meaning changes with reading direction should mirror.
3. What does <bdi> do? It isolates a text run’s direction so its characters do not affect surrounding bidirectional ordering.
4. Why can concatenated RTL strings break? The bidi algorithm reorders runs based on character classes, and punctuation or numbers may resolve against neighboring text unexpectedly.
5. How do you test RTL thoroughly? Use real translations and mixed-direction values across forms, navigation, focus order, and responsive layouts.

References

• W3C: Structural Markup and Right-to-left Text
• Unicode Bidirectional Algorithm, UAX #9
• MDN: CSS Logical Properties