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