تتوفر شبكة الويب العالمية للجميع في جميع أنحاء العالم، فهي على وجه التحديد! وهذا يعني أن موقعك الإلكتروني قد يكون متاحًا لأي شخص لديه اتصال بالإنترنت، بغض النظر عن مكانه أو الجهاز الذي يستخدمه أو اللغات التي يتحدثها.
الهدف من التصميم سريع الاستجابة هو إتاحة المحتوى الخاص بك للجميع. إنّ تطبيق هذه الفلسفة نفسها على اللغات البشرية هو القوة الدافعة وراء نشر المحتوى على نطاق عالمي، إذ يتم إعداد المحتوى والتصاميم للجمهور العالمي.
الخصائص المنطقية
تكون اللغة الإنجليزية مكتوبة من اليمين إلى اليسار ومن أعلى إلى أسفل، ولكن ليست جميع اللغات مكتوبة بهذه الطريقة. فبعض اللغات مثل العربية والعبرية تُقرأ من اليمين إلى اليسار، وتقرأ بعض الخطوط اليابانية رأسيًا بدلاً من أفقيًا. لاستيعاب أوضاع الكتابة هذه، تم تقديم خصائص منطقية في CSS.
إذا كتبت صفحات الأنماط المتتالية (CSS)، ربما تكون قد استخدمت كلمات رئيسية توجيهية مثل "يسار" و"يمين" و"أعلى" و "أسفل". وتشير هذه الكلمات الرئيسية إلى التصميم الفعلي لجهاز المستخدم.
الخصائص المنطقية، من ناحية أخرى، تشير إلى حواف المربّع من حيث ارتباطها بتدفق المحتوى. وإذا تغيّر وضع الكتابة، سيتم تعديل لغة CSS المكتوبة بخصائص منطقية وفقًا لذلك. لكن ذلك لا ينطبق على خصائص الاتجاهات.
في حين تشير خاصية الاتجاه margin-left دائمًا إلى الهامش على الجانب الأيسر من مربّع المحتوى، تشير السمة المنطقية margin-inline-start إلى الهامش على الجانب الأيسر من مربّع المحتوى بلغة اتجاهية من اليسار إلى اليمين،
والهامش على الجانب الأيمن من مربّع المحتوى بلغة تُكتب من اليمين إلى اليسار.
لكي تتكيف تصميماتك مع أوضاع الكتابة المختلفة، تجنب خصائص الاتجاه. استخدِم الخصائص المنطقية بدلاً من ذلك.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
عندما تكون في CSS قيمة اتجاهية معيّنة مثل left أو right،
تكون هناك سمة منطقية مقابلة. حيث كان لدينا margin-left الآن لدينا أيضًا margin-inline-start.
في لغة مثل الإنجليزية حيث يتدفق النص من اليسار إلى اليمين،
يتوافق inline-start مع "اليسار" وinline-end إلى "اليمين".
وبالمثل، في لغة مثل الإنجليزية حيث تتم كتابة النص من الأعلى إلى الأسفل،
يتطابق block-start مع "الأعلى" وblock-end مع "الأسفل".
إذا كنت تستخدم خصائص منطقية في CSS، يمكنك استخدام ورقة الأنماط نفسها لترجمات صفحاتك. حتى إذا تمت ترجمة صفحاتك إلى لغات مكتوبة من اليمين إلى اليسار أو من أسفل إلى أعلى، فسيتم تعديل تصميمك وفقًا لذلك. لا تحتاج إلى عمل تصميمات منفصلة لكل لغة. باستخدام الخصائص المنطقية، سيستجيب تصميمك لكل وضع كتابة. هذا يعني أن تصميمك يمكن أن يصل إلى المزيد من الأشخاص دون الحاجة إلى قضاء بعض الوقت في تصميم تصميمات منفصلة لكل لغة.
تستخدم تقنيات تنسيق CSS الحديثة، مثل grid وflexbox خصائص منطقية بشكل تلقائي.
إذا كنت تفكر من خلال inline-start وblock-start بدلاً من left وtop، ستجد هذه الأساليب الحديثة أسهل في الفهم.
اتّبِع نمطًا شائعًا، مثل رمز بجانب نص أو تصنيف بجانب حقل نموذج. بدلاً من التفكير في "يجب أن يكون للتسمية هامش على اليمين"، فكر في "يجب أن يكون للتسمية هامش في نهاية محورها المضمّن".
label {
margin-right: 0.5em;
}
label {
margin-inline-end: 0.5em;
}
إذا تمت ترجمة تلك الصفحة إلى لغة من اليمين إلى اليسار،
لن يكون من الضروري تحديث الأنماط.
يمكنك محاكاة تأثير عرض صفحاتك بلغة اتجاهها من اليمين إلى اليسار باستخدام سمة dir على العنصر html.
تعني القيمة ltr "من اليسار إلى اليمين". قيمة "rtl" تعني "من اليمين إلى اليسار".
إذا كنت تريد تجربة جميع صيغ اتجاهات المستند (محور الكتلة) وأوضاع الكتابة (المحور المضمّن)، إليك عرض توضيحي تفاعلي.
تحديد لغة الصفحة
من الأفضل تحديد لغة صفحتك باستخدام السمة lang على العنصر html.
<html lang="en">
هذا المثال خاص بصفحة باللغة الإنجليزية. يمكنك أن تكون أكثر تحديدًا. في ما يلي توضيح أنّ الصفحة تستخدم اللغة الإنجليزية (الولايات المتحدة):
<html lang="en-us">
يكون تعريف لغة المستند مفيدًا لمحركات البحث. وهو مفيد أيضًا للتكنولوجيا المساعِدة مثل برامج قراءة الشاشة والمساعدات الصوتية. من خلال توفير البيانات الوصفية للغة، أنت تساعد هذه الأنواع من برامج توليف الكلام في نطق المحتوى بشكل صحيح.
يمكن استخدام السمة lang في أي عنصر HTML، وليس فقط على html. في حال تبديل اللغات في صفحة الويب، عليك الإشارة إلى ذلك التغيير.
في هذه الحالة، تكون كلمة واحدة باللغة الألمانية:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
تحديد لغة المستند المرتبط
هناك سمة أخرى تسمى hreflang يمكنك استخدامها على الروابط.
تستخدم السمة hreflang رمز اللغة نفسه المستخدَم في السمة lang وتصف لغة المستند المرتبط.
إذا كانت هناك ترجمة لصفحتك بالكامل متوفرة باللغة الألمانية، يمكنك الربط بها على النحو التالي:
<a href="/path/to/german/version" hreflang="de">German version</a>
إذا كنت تستخدم نصًا باللغة الألمانية لوصف الرابط المؤدي إلى النسخة الألمانية، استخدِم كلاً من hreflang وlang.
في هذه الحالة، يتم ترميز النص "Deutsche Version" باللغة الألمانية، كما يتم ترميز رابط الوجهة باللغة الألمانية:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
يمكنك أيضًا استخدام السمة hreflang على العنصر link. يظهر هذا النص في head من المستند:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
على عكس السمة lang التي يمكنها استخدام أي عنصر، لا يمكن تطبيق hreflang إلا على العنصرَين a وlink.
ضع في اعتبارك التدويل في تصميمك
عند تصميم مواقع ويب ستتم ترجمتها إلى لغات أخرى وأوضاع الكتابة، فكر في العوامل التالية:
- بعض اللغات، مثل الألمانية، لها كلمات طويلة شائعة الاستخدام. تحتاج واجهتك إلى التكيف مع هذه الكلمات، لذا تجنب تصميم أعمدة ضيقة. يمكنك أيضًا استخدام CSS لإضافة واصلات.
- احرص على أن تتوافق قيم
line-heightمع حروف مثل علامات التشكيل وعلامات التشكيل الأخرى. قد تتداخل أسطر النص التي تبدو جيدة في اللغة الإنجليزية بلغة مختلفة. - إذا كنت تستخدم خط ويب، تأكد من أنه يحتوي على مجموعة من الأحرف واسعة بما يكفي لتغطية اللغات التي ستترجم إليها.
- لا تُنشئ صورًا تحتوي على نص. وإذا فعلت ذلك، فسيتعين عليك إنشاء صور منفصلة لكل لغة. بدلاً من ذلك، يمكنك فصل النص عن الصورة واستخدام CSS لتركيب النص على الصورة.
التفكير على نطاق عالمي
استخدام سمات مثل lang وhreflang تجعل HTML أكثر وضوحًا في عملية نشر المحتوى على نطاق عالمي.
وبالمثل، تجعل الخصائص المنطقية CSS أكثر قابلية للتكيف.
إذا كنت معتادًا على التفكير في استخدامات top وbottom وleft وright،
قد يصعب عليك بدء التفكير في block start وblock end وinline start وinline end بدلاً من ذلك.
لكن الأمر يستحق ذلك. الخصائص المنطقية هي المفتاح لإنشاء تخطيطات سريعة الاستجابة حقًا.
التحقّق من استيعابك
اختبر معلوماتك حول التدويل.
في اللغة الإنجليزية، أي جانب right فعلي من المربّع هو منطقيًا؟
block-starttop باللغة الإنجليزية.block-endbottom باللغة الإنجليزية.inline-startleft باللغة الإنجليزية.inline-endما هي السمة التي يجب إضافتها إلى ترميز HTML لنشره على نطاق عالمي؟
englishlanglanguagei18nبعد ذلك، ستتعلم كيفية التعامل مع التنسيقات على مستوى الصفحة، والمعروفة أيضًا باسم تنسيقات الماكرو.