ملخص بالعربية: يشرح هذا المقال قواعد بناء واجهات عربية من اليمين إلى اليسار في Laravel وTailwind CSS v4. ويعرض تطبيق فريق شركة برمجيات في الرياض لهذه القواعد على ستة مواقع ثنائية اللغة. ويتناول ضبط اتجاه الصفحة، واستخدام الخصائص المنطقية بدل اليسار واليمين، وتباعد الأسطر المناسب للعناوين العربية.
We run six bilingual Laravel sites: a company site and five product sites. Arabic is the main language and English is the second one. All six use Tailwind CSS v4 and one shared set of rules for right-to-left (RTL) text. These are the rules that held up after real Arabic content went live.
1. Set dir and lang on <html>, once
Every layout starts the same way:
<html lang="{{ app()->isLocale('ar') ? 'ar-SA' : 'en' }}"
dir="{{ app()->isLocale('ar') ? 'rtl' : 'ltr' }}">
dir flips the whole layout: flex order, text alignment and the scrollbar side. lang="ar-SA" tells screen readers and browsers which language and region to use. Do not set dir on inner wrappers unless a block really is in the other language, such as an English code sample inside an Arabic page.
2. Use logical utilities, not left and right
Tailwind has logical spacing and position utilities that follow dir:
| Physical (avoid) | Logical (use) |
|---|---|
ml-4 / mr-4
|
ms-4 / me-4
|
pl-6 / pr-6
|
ps-6 / pe-6
|
left-0 / right-0
|
start-0 / end-0
|
text-left |
text-start |
rounded-l-lg |
rounded-s-lg |
border-l |
border-s |
One class works in both languages. Our views have about 150 logical classes across 50 templates and almost no rtl: overrides for spacing.
3. Use rtl: only for things that point
Some things must be mirrored on purpose. An arrow that means "next" points right in English and left in Arabic. A hover nudge moves the other way too:
<svg class="size-4 rtl:rotate-180 transition group-hover:translate-x-1 rtl:group-hover:-translate-x-1">...</svg>
Decorative shapes in a hero can be flipped with rtl:-scale-x-100. Keep this rule narrow. Logos, product screenshots, charts and phone numbers must not be mirrored.
4. Do not copy Latin type settings to Arabic
Two Latin habits break Arabic headings:
- Negative letter-spacing. Arabic letters join. Tight tracking breaks the joins, so we apply it to LTR only.
- Tight line-height. Arabic has dots and tall letters above and below the line. At a Latin line-height of about 1.1, they collide once a heading wraps.
In Tailwind v4 we keep the size in one class and add direction rules beside it:
.text-display {
font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
line-height: 1.06;
font-weight: 800;
}
html[dir="ltr"] .text-display { letter-spacing: -0.022em; }
html[dir="rtl"] .text-display { line-height: 1.35; }
The same applies to small uppercase "eyebrow" labels. A monospace font has no Arabic glyphs, and Arabic has no uppercase. In RTL we switch the label back to the sans font, with no letter-spacing and no text-transform.
5. Put the Arabic font in the theme, not in each component
Tailwind v4 reads design tokens from @theme in CSS:
@import 'tailwindcss';
@theme {
--font-sans: 'Almarai', ui-sans-serif, system-ui, sans-serif;
}
Where a site pairs a Latin display font with Arabic, list the Latin font first and the Arabic font second. The browser takes Latin glyphs from the first font and falls back to the second for Arabic letters. One stack serves both languages.
6. Test with real Arabic text
Lorem ipsum hides most RTL bugs. Real Arabic sentences are often longer or shorter than the English ones, and they wrap at different points. Mixed lines such as "يدعم النظام Outlook" show bidirectional text issues that a placeholder never shows. We review every page in both languages before release.
Summary
-
dirandlanggo on<html>, set from the locale. - Logical utilities do most of the work.
-
rtl:is for arrows and decoration only. - Arabic headings need more line-height and no negative tracking.
We are the engineering team at Renewable Systems, a software company in Riyadh. We build Arabic-first business systems for companies in Saudi Arabia.
Top comments (0)