2026-06-03 · Baduno Editorial Team · 7 blog.readMin · Blog & Knowledge
RTL Design: What changes when the reading direction flips
Arabic and Hebrew read from right to left – and overturn common design assumptions. A practical report from our design system.
More than mirrored
The naive approach – 'just mirror everything' – quickly fails: numbers and Latin brand names remain left-to-right, media player symbols keep their direction, phone numbers break. RTL design means deciding for each element whether it is logical (following the reading direction) or physical (direction-fixed).
CSS: logical properties
Modern CSS logic makes RTL manageable: margin-inline-start instead of margin-left, inset-inline-end instead of right, text-align:start instead of left. Those who write logically from the start get the second reading direction almost for free – those who retrofit struggle with hundreds of exceptions. This website uses logical properties throughout; every RTL version is generated from the same stylesheet as the German one.
Typography and density
Arabic script has no capital letters, different ascenders and descenders, and appears smaller and denser at the same font size. Good RTL typography requires its own specialized fonts, often one to two points larger sizes and more generous line height. Letter-spacing effects, popular in Latin script, do not work with connected scripts.
Testing with native speakers
No automation replaces the eye of a person who lives in the script: line breaks in compounds, numbers in running text, mixed directions in forms – the error types are subtle. Our review process therefore always includes a visual RTL review, not just text correction.
Navigation: Where Logic Flips
In RTL environments, navigation structures must be rethought. A horizontal menu bar starts on the right, with the first menu item on the far left – the order remains logical from right to left. Dropdown menus open to the bottom-left by default instead of bottom-right, because the anchor point is on the right. Sidebars that are positioned on the left in LTR layouts move to the right in RTL. Particular care is needed with hamburger menus: the icon itself (three horizontal lines) is direction-neutral, but its placement (top-left vs. top-right) must be swapped. A common mistake is submenus that still show LTR direction because they are not controlled via logical CSS properties. In our design system, we therefore define navigation components entirely with inset-inline-start/end so that they automatically switch between LTR and RTL. Practical example: a breadcrumb navigation shows the current page on the left and the home page on the right in RTL mode – the separator arrows must also change direction. We use CSS content with embedded arrows that use a different entity depending on the dir value.
Mixed Directions: Numbers and Characters
Numbers, phone numbers, email addresses, and Latin brand names retain their LTR orientation even when the surrounding text is RTL. This creates bidirectional sections where reading direction switches mid-sentence. The Unicode Bidirectional Algorithm (Bidi) handles such mixed text by default, but you must ensure the direction switch is correct. Use the dir attribute on the level of the mixed element or use characters like LRM (Left-to-Right Mark) and RLM (Right-to-Left Mark). Example: In a Hebrew sentence “Telefon: 01234 56789”, the number sequence must be read from left to right. Without correct markup, the browser might break or misdisplay the sequence. In forms, it is essential that labels are on the right and inputs on the left, since the user starts reading from the right. Our approach: for each text element with embedded Latin material, we set a <span dir="ltr"> wrapper with a trailing LRM in the RTL template, so that the following RTL character correctly moves to the end.
Arabic and Hebrew read from right to left – and overturn common design assumptions. A practical report from our design system.
Symbols: Directional or Logical?
Icons and pictograms often carry implicit directions: forward arrows point right, backward arrows point left. These must be mirrored in RTL interfaces, otherwise the navigation feels counterintuitive. However, not all symbols are direction-dependent: a play triangle always remains the same (because it represents a physical action), as do email or phone symbols. The rule of thumb: logical direction (chronological order, reading direction, navigation direction) must be mirrored; physical or symbolic meaning should not. In development, we use CSS transformations for icons: scaleX(-1) for all direction-logical SVGs, controlled by a class [dir=rtl] .icon--directional. This avoids duplicate assets. Caution: carousel arrows pointing right must point left in RTL mode, because the “next” page is now on the left. The same applies to progress bars: progress should increase from right to left. In our design system, such components are implemented with logical properties (inline-size instead of width) so that the fill level automatically binds to the start of the progress bar.
Images: What to mirror, what to redraw?
Graphics and illustrations often contain culturally or directionally dependent symbols: clocks moving clockwise (in RTL context, mirrored appears normal), handshakes, timelines. Not every image needs to be fully mirrored – a mirrored clock hand movement might feel wrong because physical reality remains unchanged. But a timeline from left to right should run from right to left in an RTL context. Logos and brand images usually remain unmirrored, as they follow a fixed brand identity. The challenge is to deliver the right images automatically. We store an RTL equivalent for each graphic as a separate asset or use CSS transformations for simple cases. In complex scenarios (e.g., infographics with text), manual redesign is required. Our workflow: The graphic designer tags each image as 'direction-neutral', 'mirrorable', or 'individual' in the CMS. Delivery is conditional based on the dir attribute of the parent element. Example: An illustration of a bookshelf with books in Latin script would need to be mirrored so that the spines appear on the right – this might be surprising at first, but is consistent.
SEO and hreflang: RTL-specific markup
For search engines, correct language and direction markup is essential. In addition to the language attribute (lang), the dir attribute must be set on every page so that browsers and search engines correctly interpret the reading direction. On multilingual RTL pages, hreflang annotation is particularly critical: an Arabic page (ar) must correctly reference its German or English counterparts. Incorrect hreflang entries lead to improper indexing because Google cannot automatically derive the reading direction. Additionally, consider separate sitemaps for LTR and RTL versions to reinforce signals. A common mistake is using generic tags without accounting for script direction. We rely on dynamic hreflang generation that derives both language and region codes from the language database. For Arabic dialects, regional differentiation is necessary, as consumers and algorithms have different expectations. We also use the canonical tag to avoid inconsistencies between mirrored and non-mirrored content. Our workflow automatically checks whether the dir attribute in the HTML header is consistent with the hreflang declarations. After all, Arabic text without dir="rtl" can be displayed incorrectly by browsers, increasing bounce rates. SEO performance is thus influenced not only by text but also by correct reading direction markup.
Accessibility: RTL Challenges for Assistive Technologies
The needs of screen readers and other assistive technologies change with the reading direction. Screen readers like JAWS or VoiceOver expect the dir attribute to determine the correct reading order. If this attribute is missing, they may read mixed-language content in the wrong order. ARIA landmarks remain the same, but the position in the DOM should ideally follow the reading direction: the main menu should appear before the main content in the source code – for RTL, this means the right side first. Another point is focus order: tab indexes must logically go from right to left on RTL pages. Use native HTML elements that automatically adjust keyboard navigation. Alt texts for images should be language-specific and reflect the perspective of the target culture. For example, an image showing a handshake should be described in Arabic as "two hands crossing" because the cultural connotation differs. We recommend conducting accessibility audits in both LTR and RTL views. This includes checking contrasts, which can vary under RTL typography. Our team uses automated tools combined with manual tests by native speakers to ensure an inclusive user experience.
blog.faqT
Do I need to mirror all images when creating an RTL version?
No. Only images with a clear reading direction such as timelines, arrows, or sequential diagrams should be mirrored. Logos, portraits, and graphics with physical objects (clock, globe) remain unchanged, as their meaning would otherwise be distorted. Decide on a case-by-case basis.
How do I test RTL most efficiently during development?
Use browser developer tools to set the dir attribute on the html element to "rtl" and check each component for correct alignment. Extend your code review process with a dedicated RTL check involving native speakers, covering visual issues and incorrect bidirectional text flows.
