RTL support
ADEK serves Arabic first. Every component in this design system works right-to-left with the document's dir attribute - this page covers how mirroring works, how to set it up in React and Angular, and what should (and should not) flip.
Right-to-left support
Switch between Arabic and English below. Labels, required asterisks, hint text, and the action buttons mirror automatically because the components are built on flexbox, which follows the dir attribute.
How it works
Physical CSS properties (left, padding-left) always point the same way regardless of language. CSS logical properties follow the writing direction instead, so one rule serves both scripts. Use this mapping in product code:
| Physical (avoid) | Logical (use) | Where it matters |
|---|---|---|
| padding-left | padding-inline-start | input/button paddings |
| padding-right | padding-inline-end | input/button paddings |
| margin-left | margin-inline-start | icon and badge gaps |
| left / right | inset-inline-start / -end | tooltips, dropdown menus |
| text-align: left | text-align: start | labels, table cells |
| border-left | border-inline-start | quotes, nav indicators |
| border-radius corners | start-start / start-end radii | grouped buttons, tables |
Setting up RTL
<!-- Set the document direction; every ADEK component
built on flexbox mirrors automatically. -->
<html lang="ar" dir="rtl">
<!-- Per-section switching is also supported: -->
<section dir="rtl">...</section>/* Montserrat has no Arabic glyphs - the approved Arabic
companion is SF Arabic. Extend the body stack so the browser
picks the right glyphs per script. */
:root {
--font-family-body: "Montserrat", "SF Arabic",
-apple-system, "Segoe UI", sans-serif;
}
/* SF Arabic ships with Apple platforms. For Windows/Android,
self-host the licensed woff2 from the internal font server: */
@font-face {
font-family: "SF Arabic";
src: url("/fonts/sf-arabic.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
}/* Prefer CSS logical properties in product code -
they flip with dir="rtl" without extra rules. */
/* Instead of: Use: */
padding-left: 14px; → padding-inline-start: 14px;
margin-right: 8px; → margin-inline-end: 8px;
left: 0; → inset-inline-start: 0;
text-align: left; → text-align: start;
border-left: 3px ...; → border-inline-start: 3px ...;Directional icons
Icons that imply direction must mirror in RTL; icons that represent objects or state must not.
/* Directional icons mirror with a transform in RTL */
[dir="rtl"] .adek-icon--directional {
transform: scaleX(-1);
}Flip in RTL
- Chevrons and arrows in navigation
- Back / forward buttons
- Progress step connectors
- Breadcrumb dividers
- Pagination previous / next
Never flip
- Checkmarks and status icons
- Logos and the ADEK falcon mark
- Clocks and media playback icons
- Phone numbers and numerals
- Charts with time on the x-axis
FAQs
Do I need to change every component for RTL?
No. The components are flexbox-based, so ordering, gaps, and alignment follow the dir attribute automatically. You only need attention for your own layout CSS (use logical properties) and for directional icons.
Which font renders the Arabic text?
Montserrat covers Latin only. The approved Arabic companion is SF Arabic - add it after Montserrat in the font stack and the browser picks the right glyphs per script automatically. It ships with Apple platforms; for Windows and Android, self-host the licensed woff2 from the internal font server.
Do numbers and phone numbers flip?
No. Numerals, phone numbers, and email addresses keep left-to-right ordering inside RTL text; browsers handle this with the Unicode bidirectional algorithm. Avoid forcing direction on them.
How do I test a page in RTL quickly?
In the browser dev tools, set dir="rtl" on the html element - the whole page mirrors instantly. For automated coverage, render key screens twice in your visual tests, once per direction.