دليل شامل لوضع الكتابة (writing-mode) في CSS للتحكم في اتجاه النص، وإنشاء مواقع ويب دولية جذابة بصريًا ومتاحة عالميًا.
وضع الكتابة في CSS: إتقان اتجاه النص الدولي للمواقع العالمية
في عالم اليوم المترابط، يجب على مواقع الويب أن تلبي احتياجات جمهور متنوع، وأحد الجوانب الحاسمة لذلك هو التعامل مع اتجاهات النص المختلفة. تعد خاصية writing-mode في CSS أداة قوية تتيح للمطورين التحكم في اتجاه تدفق النص، مما يمكنهم من إنشاء تجارب ويب دولية (i18n) وجذابة بصريًا. سيستكشف هذا الدليل الشامل تعقيدات writing-mode، مع تقديم أمثلة عملية ورؤى قابلة للتنفيذ لمساعدتك على إتقان اتجاه النص للمواقع العالمية.
فهم أوضاع الكتابة
تحدد خاصية writing-mode في CSS ما إذا كانت أسطر النص تُعرض أفقيًا أم عموديًا والاتجاه الذي تتقدم فيه الكتل. تلعب دورًا حاسمًا في تكييف صفحات الويب للغات التي تستخدم اتجاهات كتابة مختلفة، مثل:
- من اليسار إلى اليمين (LTR): الإنجليزية، الإسبانية، الفرنسية، الألمانية، والعديد من اللغات الغربية الأخرى.
- من اليمين إلى اليسار (RTL): العربية، العبرية، الفارسية، والأردية.
- عمودي: الصينية التقليدية، اليابانية، والمنغولية.
بشكل افتراضي، تستخدم متصفحات الويب وضع الكتابة horizontal-tb، الذي يعرض النص أفقيًا من الأعلى إلى الأسفل. ومع ذلك، تتيح لك خاصية writing-mode تغيير هذا السلوك الافتراضي وإنشاء تخطيطات تستوعب اتجاهات النص المختلفة.
قيم خاصية `writing-mode`
تقبل خاصية writing-mode عدة قيم، كل منها يحدد اتجاه نص وتدفق كتل مختلف:
horizontal-tb: أفقي من الأعلى إلى الأسفل. تكون أسطر النص أفقية وتتدفق من الأعلى إلى الأسفل. هذه هي القيمة الافتراضية.vertical-rl: عمودي من اليمين إلى اليسار. تكون أسطر النص عمودية وتتدفق من اليمين إلى اليسار. تتقدم الكتل إلى الأسفل.vertical-lr: عمودي من اليسار إلى اليمين. تكون أسطر النص عمودية وتتدفق من اليسار إلى اليمين. تتقدم الكتل إلى الأسفل.sideways-rl: اسم بديل مهمل لـvertical-rl.sideways-lr: اسم بديل مهمل لـvertical-lr.
القيم التالية متاحة أيضًا ولكنها أقل استخدامًا:
block-flow: استخدم اتجاه سياق التنسيق الكتلي، والذي يمكن أن يتأثر بخصائص أخرى.
أمثلة أساسية
لنوضح استخدام writing-mode ببعض الأمثلة البسيطة:
نص أفقي (افتراضي)
هذا هو السلوك الافتراضي، لذلك لا حاجة لتحديد writing-mode بشكل صريح:
<p>This is horizontal text.</p>
نص عمودي (من اليمين إلى اليسار)
لعرض النص عموديًا من اليمين إلى اليسار، استخدم vertical-rl:
<p style="writing-mode: vertical-rl;">This is vertical text (right-to-left).</p>
نص عمودي (من اليسار إلى اليمين)
لعرض النص عموديًا من اليسار إلى اليمين، استخدم vertical-lr:
<p style="writing-mode: vertical-lr;">This is vertical text (left-to-right).</p>
تطبيقات عملية لخاصية `writing-mode`
إلى جانب اتجاه النص الأساسي، تقدم writing-mode مجموعة من التطبيقات العملية لإنشاء مواقع ويب جذابة بصريًا ومتاحة دوليًا:
1. التكيف مع اللغات من اليمين إلى اليسار (RTL)
بالنسبة للمواقع التي تدعم لغات RTL مثل العربية أو العبرية، من الضروري ضبط اتجاه النص الصحيح. يمكنك استخدام محددات CSS لتطبيق direction: rtl; على عناصر محددة أو على المستند بأكمله بناءً على سمة اللغة:
<html lang="ar">
<body>
<p>هذا نص عربي.</p>
</body>
</html>
html[lang="ar"] {
direction: rtl;
unicode-bidi: bidi-override;
}
بينما تعتبر direction: rtl; حاسمة لضبط الاتجاه الأساسي، قد تحتاج أيضًا إلى unicode-bidi: bidi-override; لضمان التعامل الصحيح مع النصوص مختلطة الاتجاه. غالبًا ما تفضل الأساليب الحديثة الخصائص المنطقية، والتي سيتم مناقشتها لاحقًا.
2. إنشاء قوائم تصفح عمودية
يمكن استخدام writing-mode لإنشاء قوائم تصفح عمودية، والتي غالبًا ما تُرى في مواقع الويب اليابانية والصينية. يمكن أن يضيف هذا لمسة بصرية فريدة لموقعك:
<ul class="vertical-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
.vertical-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}
في هذا المثال، يتم استخدام text-orientation: upright; لضمان عرض النص داخل عناصر القائمة العمودية بشكل مستقيم بدلاً من تدويره.
3. تصميم تخطيطات بأسلوب المجلات
يمكن دمج writing-mode لتحقيق تخطيطات بأسلوب المجلات. على سبيل المثال، قد يكون لديك صورة كبيرة مع نص عمودي فوقها لإنشاء تأثير بصري مذهل.
<div class="magazine-section">
<img src="image.jpg" alt="Magazine Image">
<div class="vertical-text">Exclusive Interview</div>
</div>
.magazine-section {
position: relative;
width: 500px;
height: 300px;
}
.magazine-section img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text {
position: absolute;
top: 0;
right: 10px;
color: white;
font-size: 2em;
writing-mode: vertical-rl;
text-orientation: upright;
transform-origin: top right;
transform: rotate(180deg); /* Required to render correctly across browsers */
}
غالبًا ما يكون transform: rotate(180deg); ضروريًا لضمان العرض المتسق عبر المتصفحات المختلفة، خاصة الإصدارات القديمة.
4. تحسين تصور البيانات
في مجال تصور البيانات، يمكن أن تكون writing-mode مفيدة لتسمية المحاور في المخططات والرسوم البيانية، خاصة عندما تكون المساحة محدودة. على سبيل المثال، قد تقوم بتدوير التسميات على المحور العمودي لمنعها من التداخل.
تقنيات واعتبارات متقدمة
للاستفادة الكاملة من قوة writing-mode، ضع في اعتبارك هذه التقنيات المتقدمة والعوامل المهمة:
1. الخصائص والقيم المنطقية
يقدم CSS الحديث الخصائص والقيم المنطقية، والتي توفر طريقة أكثر مرونة ودلالية للتعامل مع التخطيط والاتجاه. بدلاً من الخصائص المادية مثل left و right، يتم استخدام خصائص منطقية مثل start و end، والتي تتكيف مع اتجاه الكتابة. على سبيل المثال:
margin-inline-start: تعادلmargin-leftفي LTR وmargin-rightفي RTL.padding-block-start: تعادلpadding-topفي أوضاع الكتابة الأفقية وpadding-leftأوpadding-rightفي أوضاع الكتابة العمودية.
يجعل استخدام الخصائص المنطقية كود CSS الخاص بك أكثر قابلية للتكيف والصيانة، خاصة عند التعامل مع اتجاهات كتابة متعددة.
2. دمج `writing-mode` مع خصائص CSS أخرى
تتفاعل خاصية writing-mode مع خصائص CSS أخرى، مثل text-orientation، و direction، و unicode-bidi، للتحكم في مظهر وسلوك النص. يعد فهم هذه التفاعلات أمرًا بالغ الأهمية لتحقيق النتائج المرجوة.
text-orientation: تحدد اتجاه الحروف في أوضاع الكتابة العمودية. تشمل القيمupright،sideways،mixed، وuse-glyph-orientation.direction: تحدد الاتجاه الأساسي للنص (LTR أو RTL).unicode-bidi: تتحكم في كيفية تطبيق خوارزمية Unicode ثنائية الاتجاه على العنصر.
3. التعامل مع النصوص مختلطة الاتجاه
عند التعامل مع نص يحتوي على أحرف LTR و RTL (على سبيل المثال، نص إنجليزي داخل فقرة عربية)، من المهم استخدام خاصية unicode-bidi لضمان العرض الصحيح. غالبًا ما تُستخدم القيمة bidi-override لفرض اتجاه معين.
<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>
4. اعتبارات الخطوط
ليست كل الخطوط مناسبة للكتابة العمودية. قد لا تحتوي بعض الخطوط على رسوم غليفية للكتابة العمودية أو قد لا يتم عرضها بشكل صحيح. عند استخدام أوضاع الكتابة العمودية، اختر الخطوط المصممة خصيصًا للنص العمودي أو التي تدعم الرسوم الغليفية العمودية بشكل جيد.
الخطوط من دول شرق آسيا (الصين، اليابان، كوريا) لديها بشكل عام دعم جيد جدًا للكتابة العمودية.
5. إمكانية الوصول
تأكد من أن استخدامك لـ writing-mode لا يؤثر سلبًا على إمكانية الوصول. قم بتوفير نص بديل للصور والمحتويات غير النصية الأخرى، وتأكد من أن النص قابل للقراءة والفهم للمستخدمين من ذوي الإعاقة. استخدم عناصر HTML الدلالية وسمات ARIA لتحسين إمكانية الوصول.
6. توافق المتصفحات
تحظى خاصية writing-mode بدعم جيد في المتصفحات الحديثة، لكن المتصفحات القديمة قد تتطلب بادئات الموردين (مثل -webkit-writing-mode, -ms-writing-mode). استخدم معالج CSS المسبق مثل Sass أو Less لأتمتة إضافة بادئات الموردين أو استخدم أداة مثل Autoprefixer.
أفضل الممارسات لاستخدام `writing-mode`
لاستخدام writing-mode بفعالية وإنشاء مواقع ويب متاحة عالميًا، اتبع أفضل الممارسات التالية:
- استخدم الخصائص والقيم المنطقية كلما أمكن ذلك. سيجعل هذا كود CSS الخاص بك أكثر قابلية للتكيف والصيانة.
- اختر الخطوط المناسبة لأوضاع الكتابة العمودية. اختبر خطوطك للتأكد من أنها تُعرض بشكل صحيح في النص العمودي.
- ضع إمكانية الوصول في اعتبارك. تأكد من أن استخدامك لـ
writing-modeلا يؤثر سلبًا على إمكانية الوصول للمستخدمين من ذوي الإعاقة. - اختبر تخطيطاتك في متصفحات وأجهزة مختلفة. تأكد من أن تخطيطاتك تُعرض بشكل صحيح عبر منصات مختلفة.
- استخدم معالجات CSS المسبقة أو Autoprefixer للتعامل مع بادئات الموردين. سيوفر لك هذا الوقت والجهد ويضمن توافق CSS الخاص بك مع المتصفحات القديمة.
- افصل المحتوى عن العرض. استخدم CSS للتحكم في عرض المحتوى الخاص بك وتجنب استخدام HTML لأغراض التنسيق.
أمثلة على مواقع عالمية تستخدم `writing-mode`
تستخدم العديد من المواقع حول العالم خاصية writing-mode لمجموعة متنوعة من الأغراض، من التكيف مع لغات RTL إلى إنشاء تخطيطات فريدة بصريًا. إليك بعض الأمثلة:
- مواقع الأخبار باللغة العربية أو العبرية: تستخدم هذه المواقع
direction: rtlوربما تعديلاتwriting-modeلعرض النص بشكل صحيح. - مواقع الفن والثقافة اليابانية والصينية: غالبًا ما تدمج الكتابة العمودية للعناوين والقوائم والعناصر الزخرفية.
- مجلات الموضة: تستخدم بشكل متكرر النص العمودي في التخطيطات المرئية للتأثيرات الأسلوبية.
الخاتمة
تعد خاصية writing-mode في CSS أداة قوية لإنشاء مواقع ويب دولية وجذابة بصريًا. من خلال فهم القيم المختلفة للخاصية وكيفية تفاعلها مع خصائص CSS الأخرى، يمكنك إنشاء تخطيطات تتكيف مع اتجاهات النص المختلفة وتعزز تجربة المستخدم لجمهور عالمي. تذكر أن تضع في اعتبارك إمكانية الوصول وتوافق المتصفحات واختيار الخطوط لضمان أن مواقع الويب الخاصة بك متاحة وجذابة بصريًا لجميع المستخدمين.
مع استمرار تطور تطوير الويب، يصبح إتقان تقنيات مثل writing-mode ذا أهمية متزايدة لإنشاء تجارب عبر الإنترنت عالمية وشاملة حقًا. اغتنم قوة التدويل وأنشئ مواقع ويب يتردد صداها مع المستخدمين من جميع أنحاء العالم.