Basic dir attribute
The dir attribute with the value 'rtl' is the foundation of any RTL web design. It is typically set on the <html> or <body> tag and influences text alignment, the default order of table cells, and the direction of CSS properties such as 'text-align'. Without this attribute, content remains left-aligned, which feels unnatural for RTL languages. Additionally, you should override 'dir' at the container level when mixed directions occur. A missing or incorrect dir attribute leads to hard-to-read layouts and should therefore be prioritized.
Mirrored layout and logical CSS properties
Instead of physical properties like 'left' and 'right', use logical CSS properties such as 'margin-inline-start' and 'padding-inline-end'. These automatically adapt to the writing direction and avoid manual overrides. A mirrored layout means the navigation bar starts on the right and content on the left. With logical values like 'float: inline-start' or 'text-align: start', you achieve this without media queries. Modern CSS Grid and Flexbox properties like 'justify-content: flex-start' work correctly depending on the dir attribute. Always test with real content, as logical properties are not interpreted uniformly by all browsers.
Numbers and embedded Latin
In RTL texts, numbers and embedded Latin letters remain left-to-right aligned. This poses challenges as they can disrupt the reading direction. Use the 'unicode-bidi' attribute or 'direction: ltr' for such elements to ensure consistent display. For date or number formats, it is advisable to adjust the order to match RTL culture. Also pay attention to the layout of forms, where input fields for numbers should remain left-aligned. Careful handling of this mixed direction prevents visual breaks and improves readability.
Fonts and typography
Font choice is crucial: Arabic and Hebrew require fonts with corresponding glyph support. Popular options include 'Noto Naskh Arabic' for Arabic and 'Noto Sans Hebrew' for Hebrew. Define fallbacks, e.g., 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Ensure adequate font sizes and line spacing, as RTL scripts are often narrower or more complex. Avoid italic, as it does not exist in many Arabic scripts. Test the display on various devices to ensure fonts load correctly and are legible.
Icons and mirroring
Icons that indicate direction (e.g., arrows, forward/backward symbols) must be mirrored in RTL layouts. Achieve this with CSS transformations like 'transform: scaleX(-1)' or by using icon sets that support RTL automatically (e.g., Font Awesome with the 'dir' attribute). Symbols without directional reference (e.g., house, settings) remain unchanged. Ensure that mirroring does not distort semantics. Test all icons in the RTL view, as unintended mirroring can impair usability.
