أهداف الدرس
- أن تبني صفحة تنقلب بين العربية والإنجليزية.
- أن تعكس ما يجب عكسه فقط.
ضع dir وlang على <html>، واكتب CSS بالخصائص المنطقية، فينقلب التخطيط وحده.
| فيزيائية | منطقية |
|---|---|
| margin-left | margin-inline-start |
| padding-right | padding-inline-end |
| text-align: left | text-align: start |
| left: 0 | inset-inline-start: 0 |
/* Arrows point the way you read; logos and numbers never flip */
html[dir="rtl"] .icon-arrow { transform: scaleX(-1); }
.title { text-align: start; }للأسماء والرموز الإنجليزية وسط نص عربي استعمل <bdi> كي لا تنقلب الأقواس والنقاط.
تمرين
هل تُعكس أيقونة «تشغيل» ▶ في العربية؟
الإجابة
لا. هي رمز لاتجاه الزمن في المشغّل، لا لاتجاه القراءة.
Lesson goals
- Build a page that flips between Arabic and English.
- Mirror only what should be mirrored.
Put dir and lang on <html>, write CSS with logical properties, and the layout flips by itself.
| Physical | Logical |
|---|---|
| margin-left | margin-inline-start |
| padding-right | padding-inline-end |
| text-align: left | text-align: start |
| left: 0 | inset-inline-start: 0 |
/* Arrows point the way you read; logos and numbers never flip */
html[dir="rtl"] .icon-arrow { transform: scaleX(-1); }
.title { text-align: start; }For English names and codes inside Arabic text use <bdi>, so brackets and dots do not flip.
Exercise
Does a «play» ▶ icon flip in Arabic?
Answer
No. It stands for time moving forward in a player, not reading direction.
التعليقات / Comments
لا تعليقات بعد. كن أول من يسأل. / No comments yet. Be the first to ask.