تتوفر شبكة الويب العالمية للجميع في جميع أنحاء العالم، فهي على وجه التحديد! وهذا يعني أن موقعك الإلكتروني قد يكون متاحًا لأي شخص لديه اتصال بالإنترنت، بغض النظر عن مكانه أو الجهاز الذي يستخدمه أو اللغات التي يتحدثها.
الهدف من التصميم سريع الاستجابة هو إتاحة المحتوى الخاص بك للجميع. إنّ تطبيق هذه الفلسفة نفسها على اللغات البشرية هو القوة الدافعة وراء نشر المحتوى على نطاق عالمي، إذ يتم إعداد المحتوى والتصاميم للجمهور العالمي.
الخصائص المنطقية
تكون اللغة الإنجليزية مكتوبة من اليمين إلى اليسار ومن أعلى إلى أسفل، ولكن ليست جميع اللغات مكتوبة بهذه الطريقة. فبعض اللغات مثل العربية والعبرية تُقرأ من اليمين إلى اليسار، وتقرأ بعض الخطوط اليابانية رأسيًا بدلاً من أفقيًا. لاستيعاب أوضاع الكتابة هذه، تم تقديم خصائص منطقية في 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-start
top
باللغة الإنجليزية.block-end
bottom
باللغة الإنجليزية.inline-start
left
باللغة الإنجليزية.inline-end
ما هي السمة التي يجب إضافتها إلى ترميز HTML لنشره على نطاق عالمي؟
english
lang
language
i18n
بعد ذلك، ستتعلم كيفية التعامل مع التنسيقات على مستوى الصفحة، والمعروفة أيضًا باسم تنسيقات الماكرو.