Lesson 7 / الدرس 7
Arabic and Latin on one page / العربية واللاتينية في صفحة واحدة
Most design advice is written by people who have never set two directions on one page. Here is what actually changes when your product has to work in both — and it is more than mirroring the layout.
معظم نصائح التصميم كتبها من لم يضبطوا اتجاهين في صفحة واحدة قط. وهذا ما يتغيّر فعلًا حين يجب أن يعمل منتجك بالاثنين — وهو أكثر من عكس التخطيط.
A bilingual product is not an English product with a translated copy. The two scripts have different proportions, different comfortable line heights, different relationships to the baseline, and they run in opposite directions — so a layout tuned for one is, at best, acceptable in the other. The work is to design one system that serves both, not to design in English and then check the Arabic.
What changes, and what does not
| Thing | In Arabic |
|---|---|
| Text direction | Right to left — and so does the whole layout that frames it |
| Line height | Wants 1.7–1.9 where Latin is comfortable at 1.5 |
| Optical size | Reads smaller; usually set 5–10% larger |
| Bold | Weaker as a signal — Arabic bolds less distinctly than Latin |
| Italic | Does not exist. Never fake it by slanting |
| ALL CAPS | Does not exist. There is no upper case |
| Numbers | Both ٠١٢ and 012 are used; pick one and be consistent |
| Letter-spacing | Breaks the script — letters must join. Never apply it |
The last two rows are the ones that produce visible damage. Letter-spacing on Arabic disconnects joined letters and makes words unreadable, and it is applied by accident all the time by a global rule meant for headings.
<div style="font-family:system-ui; font-size:20px">
<!-- a heading rule written for Latin, applied to everything -->
<p style="letter-spacing:.08em" dir="rtl" lang="ar">تعلّم بناء الويب</p>
<p style="letter-spacing:.08em">Learn to build for the web</p>
</div>
<hr>
<div style="font-family:system-ui; font-size:20px">
<!-- tracking on Latin only; Arabic left joined -->
<p dir="rtl" lang="ar" style="letter-spacing:normal; line-height:1.8">تعلّم بناء الويب</p>
<p style="letter-spacing:.08em">Learn to build for the web</p>
</div>Mixing the two in one line
Arabic sentences routinely contain Latin — product names, code, numbers — and the browser handles the reordering itself, correctly, as long as you tell it the direction of the surrounding text. Set dir and lang on the element, and then trust the algorithm. Where it goes wrong is punctuation at the boundary: a full stop after a Latin word inside an Arabic sentence can jump to the wrong end, and the fix is to mark the element correctly rather than to reorder the text by hand.
dir وlang على العنصر، ثم ثق بالخوارزمية. وموضع الخلل علاماتُ الترقيم عند الحدّ: فالنقطة بعد كلمة لاتينية داخل جملة عربية قد تقفز إلى الطرف الخطأ، والإصلاح أن تُعلَّم العنصر تعليمًا صحيحًا لا أن تعيد ترتيب النص بيدك.Try it live / جرّب بنفسك
Check yourself / اختبر نفسك
1. Why must letter-spacing never be applied to Arabic?
Arabic letters connect, and the connection is part of how a word is recognised. Adding space between them leaves a row of disconnected shapes — and the rule that does it is usually a global heading style nobody thought about.
2. Which icon should NOT be mirrored in a right-to-left layout?
Mirroring is for anything whose meaning depends on reading order. A play button, a clock face or a picture of a real object keeps its own orientation — flipping it changes what it means.
3. What is the recommended order of work for a bilingual layout?
RTL is the stricter constraint: it exposes hard-coded directions, unmirrored icons and physical margins immediately. A layout that already works in Arabic almost always works in English, which is why the order saves real time.
Score / النتيجة: 0 / 3
Your task / مهمتك
Build one small card — a title, a line of description, a number and a button — that works correctly in both directions. Show it twice, once with dir="rtl" and once without, and list every property you had to change between them.
ابنِ بطاقة صغيرة واحدة — عنوان وسطر وصف ورقم وزر — تعمل عملًا صحيحًا في الاتجاهين. وأظهرها مرتين، مرة بـdir="rtl" ومرة بدونه، واسرد كل خاصية اضطررت إلى تغييرها بينهما.
- The same card shown in both directions البطاقة نفسها معروضة في الاتجاهين
- No letter-spacing on the Arabic, and a larger line height for it لا تباعد أحرف في العربية، وارتفاع سطر أكبر لها
- A list of what had to change, and what deliberately did not قائمة بما وجب تغييره، وما لم يتغيّر عن قصد