خاصية writing-mode
آخر تحديث: 2026-09-13
writing-mode خاصية writing-mode
تحدد خاصية writing-mode في CSS الاتجاه العام لتخطيط النص، وتدعم الأنماط الأفقية (horizontal-tb) والعمودية (vertical-rl و vertical-lr). تُستخدم لإنشاء نص عمودي مثل الكتب الصينية أو اليابانية التقليدية، وتغير أيضًا طريقة ترتيب عناصر الكتلة والعناصر السطرية، مما يجعلها أداة مهمة لطباعة شرق آسيا.
| الفئة | |
|---|---|
| القيمة الأولية | horizontal-tb |
| موروث | نعم |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
writing-mode: horizontal-tb | vertical-rl | vertical-lr;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
horizontal-tb | vertical-rl | vertical-lr | كلمة مفتاحية | قيم اتجاه الكتابة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| writing-mode | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： vertical-rl هو التخطيط التقليدي للكتب الصينية (من أعلى إلى أسفل، من اليمين إلى اليسار)؛ ويُستخدم vertical-lr في بعض التخطيطات المنغولية واليابانية.
مهم： يغيّر writing-mode تعيين اتجاه الخصائص المنطقية في CSS: فمثلًا، في التخطيط العمودي يقابل width الخاصية block-size ويقابل height الخاصية inline-size.
❓ الأسئلة الشائعة
Qما الفرق بين writing-mode و direction في CSS؟
Aيتحكم direction فقط في تدفق النص (يسارًا أو يمينًا) بينما تبقى العناصر أفقية؛ أما writing-mode فيغيّر اتجاه التخطيط بالكامل، جاعلًا عناصر الكتلة تتراص عموديًا والمحتوى السطري يُعرض عموديًا أيضًا.
Qهل تدور الأحرف في نمط الكتابة العمودي مثل vertical-rl؟
Aفي vertical-rl و vertical-lr تبقى الأحرف منتصبة، مرتبة فقط من أعلى إلى أسفل. إذا كنت بحاجة إلى تدوير الرموز 90 درجة، استخدم إضافةً text-orientation: sideways.
Qكيف أنشئ نصًا صينيًا عموديًا باستخدام خاصية writing-mode؟
Aعيّن writing-mode: vertical-rl ليتدفق النص من أعلى إلى أسفل ومن اليمين إلى اليسار، محاكيًا التخطيط التقليدي للكتب الصينية؛ وينتج vertical-lr نصًا عموديًا يتدفق من اليسار إلى اليمين. افتراضيًا تبقى الأحرف منتصبة دون تدوير.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
