الويب متاح للجميع في العالم، وهذا واضح من اسمه. يعني ذلك أنّ موقعك الإلكتروني قد يكون متاحًا لأي مستخدم لديه إمكانية الوصول إلى الإنترنت، بغض النظر عن مكانه أو الجهاز الذي يستخدمه أو اللغات التي يتحدث بها.
يهدف التصميم سريع الاستجابة إلى إتاحة المحتوى للجميع. ويشكّل تطبيق هذه الفلسفة نفسها على اللغات البشرية القوة الدافعة وراء عملية التدويل، أي إعداد المحتوى والتصاميم لجمهور دولي.
الخصائص المنطقية
تُكتب اللغة الإنجليزية من اليسار إلى اليمين ومن أعلى إلى أسفل، ولكن لا تُكتب جميع اللغات بهذه الطريقة. تُقرأ بعض اللغات، مثل العربية والعبرية، من اليمين إلى اليسار، وتقرأ بعض الخطوط اليابانية عموديًا بدلاً من أفقيًا. لمراعاة أوضاع الكتابة هذه، تم تقديم الخصائص المنطقية في 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 مع "left" ويتطابق inline-end مع "right".
وبالمثل، في لغة مثل الإنجليزية حيث يُكتب النص من أعلى إلى أسفل، يتطابق block-start مع "top" ويتطابق block-end مع "bottom".
إذا كنت تستخدم خصائص منطقية في CSS، يمكنك استخدام ورقة الأنماط نفسها لترجمات صفحاتك. حتى إذا تمت ترجمة صفحاتك إلى لغات تُكتب من اليمين إلى اليسار أو من أسفل إلى أعلى، سيتم تعديل تصميمك وفقًا لذلك. لست بحاجة إلى إنشاء تصاميم منفصلة لكل لغة. باستخدام الخصائص المنطقية، سيستجيب تصميمك لكل وضع كتابة. يعني ذلك أنّ تصميمك يمكن أن يصل إلى المزيد من المستخدمين بدون الحاجة إلى قضاء وقت في إنشاء تصاميم منفصلة لكل لغة.
تستخدم تقنيات تنسيق CSS الحديثة، مثل الشبكة وFlexbox، خصائص منطقية تلقائيًا.
إذا كنت تفكر من حيث inline-start وblock-start بدلاً من left وtop، فسيكون من الأسهل عليك فهم هذه التقنيات الحديثة.
لنأخذ نمطًا شائعًا، مثل رمز بجانب نص أو تصنيف بجانب حقل نموذج. بدلاً من التفكير في "يجب أن يكون للتصنيف هامش على اليمين"، فكِّر في "يجب أن يكون للتصنيف هامش في نهاية محوره المضمّن".
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
إذا تمت ترجمة هذه الصفحة إلى لغة تُكتب من اليمين إلى اليسار، لن تحتاج إلى تعديل الأنماط.
يمكنك محاكاة تأثير عرض صفحاتك بلغة تُكتب من اليمين إلى اليسار باستخدام السمة dir في عنصر html.
تعني القيمة ltr "من اليسار إلى اليمين". وتعني القيمة "rtl" "من اليمين إلى اليسار".
إذا أردت تجربة جميع التبديلات المحتملة لاتجاهات المستند (المحور block) وأوضاع الكتابة (المحور inline)، إليك عرض توضيحي تفاعلي.
تحديد لغة الصفحة
من المستحسن تحديد لغة صفحتك باستخدام السمة 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-starttopblock-endbottominline-startleftinline-endما هي السمة التي يجب إضافتها إلى HTML لجعلها أكثر دلالة لأغراض التدويل؟
englishlanglanguagei18nبعد ذلك، ستتعرّف على كيفية التعامل مع تنسيقات الصفحات، المعروفة أيضًا باسم التنسيقات الكلية.