خمس نصائح لصفحة بالعربية والإنجليزية / Five tips for an Arabic and English page

آخر تحديث: 8 أكتوبر 2026 / Last updated: 8 October 2026

الويب / Web

ما تعلّمناه ونحن نجعل كل صفحة تنقلب بين الاتجاهين.
What we learned making every page flip between both directions.

#CSS#RTL

  1. ضع dir وlang على عنصر html.
  2. اكتب CSS بالخصائص المنطقية.
  3. اعكس الأسهم، لا الشعارات ولا الأرقام.
  4. استعمل bdi للأسماء الإنجليزية داخل العربية.
  5. جرّب كل صفحة باللغتين وعلى الهاتف.
.card { margin-inline-start: 1rem; text-align: start; }
الخصائص المنطقية تنقلب وحدها
الخصائص المنطقية تنقلب وحدها
  1. Put dir and lang on the html element.
  2. Write CSS with logical properties.
  3. Mirror arrows, not logos or numbers.
  4. Use bdi for English names inside Arabic.
  5. Test every page in both languages and on a phone.
.card { margin-inline-start: 1rem; text-align: start; }
Logical properties flip by themselves
Logical properties flip by themselves

↑ ↓ للتنقل · Enter للفتح · Esc للإغلاق↑ ↓ to move · Enter to open · Esc to close