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
The choice of font is crucial: Arabic, Persian, and Hebrew require fonts with appropriate glyph support. Popular options include 'Noto Naskh Arabic', 'Vazir' for Persian, and 'Noto Sans Hebrew'. Define fallbacks, e.g., 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Ensure sufficient font sizes and line spacing, as RTL scripts are often narrower or more complex. Avoid italics, as they do not exist in many Arabic scripts. Test the rendering on different devices to ensure the fonts load correctly and are readable.
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.
