لذلك ، قررت إنشاء نسخة من RTL لموقعك. لا يهم ما يدفعك: متطلبات العمل الحالية ، أو تتوقع مثل هذه الحاجة في المستقبل وتريد الاستعداد ، أو أنك مهتم فقط بالانغماس في هذا المجال من تطوير واجهة المستخدم. الشيء المهم هو ، على الأرجح ، أنك قابلت بالفعل بعض المقالات حول هذا الموضوع ، ووجدت ملحقات CSS لتوسيع الأنماط ، وتعرفت على كتابة الأحرف في لغات RTL والسمة magic dir.
إذا لم يكن الأمر كذلك ، فإليك بعض الروابط المفيدة لفهم المشكلات والحلول:
- من اليمين إلى اليسار. ما هو dir = rtl وكيفية ترويض اللغة العربية
- من اليمين إلى اليسار. كيفية قلب واجهة الموقع لـ RTL
- RTL Styling 101 - الدليل النهائي لتصميم RTL في CSS
- تقنيات التدويل: تأليف HTML و CSS
- ثنائية الاتجاه في تصميم المواد
- مدونة André 小 山 Schappo حول التدويل
هذا يكفي لمحاولة تكييف واجهات ثابتة من أجل RTL ، وعلى الأرجح ستكون راضيًا تمامًا. ولكن فقط حتى يحتوي الموقع على عناصر تفاعل مع المستخدمين ، على سبيل المثال ، النماذج التي يمكن أن تقبل أي محتوى بغض النظر عن لغة الواجهة.
تحتوي هذه المشكلة على مكونين - مدخلات ومخرجات المحتوى - وكلاهما مثير للاهتمام بطريقتهما الخاصة. في الوقت نفسه ، تمت تغطية الثانية على نطاق واسع في المقالات أعلاه وغيرها من المقالات ، ولكن الأولى ليست كذلك. لحلها ، هناك العديد من الحيل التي بدت لنا جديرة بمشاركتها مع قراء هبر.
أولاً ، دعنا نقارن بعض واجهات تطبيقات RTL التي لا يمثل جمهور RTL مشكلة كبيرة فيها ، ونرى كيف يتعاملون مع مهمة إدخال النص.
مثال 1. شبكة اجتماعية واحدة
1.1 نموذج تسجيل الدخول
في نموذج تسجيل الدخول على الصفحة الرئيسية ، يعمل حقل "البريد الإلكتروني" بشكل افتراضي مثل LTR. هذا معقول جدًا ، نظرًا لأن معظم عناوين البريد الإلكتروني تحتوي فقط على أحرف لاتينية.
لكن ليس عالميا. تسمح المعايير الحالية باستخدام أي حرف تقريبًا في عناوين البريد الإلكتروني. نتيجة لذلك ، سيكون العنوان المكتوب بالعبرية هو:
- محاذاة إلى اليسار ؛
- في عملية كتابة الرموز "@" و "." ، التي لها كتابة محايدة ، سيغير البناء بأكمله موضعه ، وهو أمر غير مناسب للغاية.
كلمة المرور الافتراضية هي RTL ، ويكون المؤشر على اليمين.
ولكن ماذا يحدث إذا حاولنا إدخال كلمة مرور من أحرف أو أرقام لاتينية؟ أثناء الكتابة ، سيتم وضع المؤشر على يسار النص الذي تدخله. هذا ليس بالغ الأهمية ، لأننا ما زلنا لا نرى كلمة المرور (حتى يكون لدينا زر "إظهار كلمة المرور") ، ولكن يمكن تحسين سلوك الحقل من خلال إظهار المستخدم في أي تخطيط يقوم بإدخال كلمة المرور. خصوصية واجهات RTL هي أنه على الرغم من حقيقة أن معظم النص يمينًا ، يتعين على المستخدمين في كثير من الأحيان تبديل تخطيطات لوحة المفاتيح لإدخال البريد الإلكتروني وتسجيل الدخول وكلمة المرور ، والتي تتم عادةً كتابتها بتنسيق LTR. نصيحة صغيرة هنا ستكون مفيدة.
1.2 استمارة التسجيل
لنلق نظرة الآن على نموذج التسجيل الموجود أيضًا في الصفحة الرئيسية.
هنا يمكنك أن ترى أن جميع الحقول تعتبر بشكل لا لبس فيه من اليمين لليسار ومحاذاة لليمين ، وهذا ليس مناسبًا جدًا عند التعامل مع نص LTR. يصبح الأمر مزعجًا بشكل خاص عند إدخال البريد الإلكتروني - الرموز "@" و "." إجبار أجزاء من العنوان على تغيير الأماكن أثناء عملية الطلب. ما لم يكن بالغ الأهمية بالنسبة لعناوين RTL النادرة في المثال السابق ، أصبح أمرًا بالغ الأهمية بالنسبة إلى LTR.
1.3 رسول - مضغوط
Messenger هو أحد الأدوات الرئيسية لهذا التطبيق. يجب أن يكون كل شيء مثاليًا بالتأكيد. دعونا نلقي نظرة على النسخة المدمجة: في
الواقع. يعتبر الحقل من اليمين إلى اليسار افتراضيًا ، ولكن بمجرد أن نبدأ في كتابة نص LTR ، يتغير اتجاهه إلى إدخال مناسب. القفز لا شيء. دعنا نتأكد من أن كل شيء على ما يرام في النسخة الموسعة أيضًا.
1.4 رسول - موسع
وجه الفتاة! بالرغم من أن النص اللاتيني في الحقل RTL يعمل بشكل صحيح ، إلا أنه مبرر بشكل صحيح. إنه غير نقدي ، لكن المنطق غير واضح: لماذا يختلف سلوك المكوّن الأيديولوجي نفسه؟
على ما يبدو ، تم تطوير المكونات الأربعة المدروسة بواسطة فرق مختلفة أو في أوقات مختلفة ، عندما كانت متطلبات الواجهات الدولية مختلفة.
هل هناك أي شيء يمكن تحسينه هنا؟ نعتقد ذلك. علاوة على ذلك ، بطرق بسيطة للغاية ، عنهم - أدناه.
مثال 2. خدمة بريدية معروفة إلى حد ما
2.1 نموذج تسجيل الدخول
هنا ، ينطلق المطورون من مبدأ المحاذاة المطلوبة إلى اليمين ، لكن يحتفظون بالموقف تجاه محتوى الإدخال كـ LTR. يؤدي هذا إلى عدة نقاط غير مريحة ، مماثلة لتلك الموضحة في الأمثلة السابقة.
على سبيل المثال ، يتوقع حقل إدخال البريد الإلكتروني إدخال نص على اليمين.
ومع ذلك ، يتصرف نص LTR الذي تم إدخاله كما هو متوقع ، بدون أي قفزات (ويُحظر استخدام الأحرف غير اللاتينية في خدمة البريد هذه).
, , RTL- , . , : - , - — , , , . Badoo, , .
سلوك أكثر إثارة للاهتمام لحقل كلمة المرور. يتم إجبارها أيضًا على محاذاة اليمين وتعتبر أيضًا LTR ، والتي ، في رأينا ، تؤدي إلى فقدان معلومات مفيدة حول تخطيط لوحة المفاتيح عند الكتابة بلغة RTL.
وعندما تقوم بتشغيل عرض كلمات المرور ، تصبح الأمور سيئة للغاية ، لأن الأحرف المحايدة تجعل كلمة المرور تقفز ، كما يحدث في حالة البريد الإلكتروني في الأمثلة السابقة. لذلك ، في المثال من لقطة الشاشة التالية ، يجب أن تأتي علامة التعجب أولاً ، ويجب أن يكون المؤشر على اليسار.
2.2
استمارة التسجيل أصبح استمارة التسجيل فجأة أكثر سهولة في الاستخدام. لكن هذا منطقي - المعلومات التي يتم إدخالها فيه أكثر تنوعًا. هنا على الأقل يظهر الاسم الأول والأخير.
المحاذاة هنا دائمًا ما تكون محاذاة لليمين ، ولكن لم يعد النص يُنظر إليه على أنه جانب أيسر بشكل لا لبس فيه ، وتغير الحقول اتجاهها بناءً على الأحرف المدخلة.
الاستثناء الوحيد هو حقل العنوان. هنا يتم ترك المحاذاة. يبدو غريبا بعض الشيء.
لكن حقل كلمة المرور محبط مرة أخرى. على الرغم من حقيقة أن هذه الصفحة لديها القدرة على تغيير اتجاه النص في الحقول ديناميكيًا ، إلا أنه لسبب ما لم تتم إضافته إلى حقل كلمة المرور.
كما ترى ، حتى هذه المكونات البسيطة تثير أسئلة. ماذا يمكننا أن نقول عن الضوابط المعقدة مثل التقويم؟
تجربة Badoo
بناءً على نتائج هذه النظرة العامة القصيرة ، سنقوم بصياغة متطلبات سلوك الحقول النصية التي نرغب في الحصول عليها:
- يجب محاذاة العناصر النائبة حسب اتجاه لغة الواجهة ؛
- يجب أن يشغل النص المدخل تلقائيًا الجانب الأيسر أو الأيمن من الحقل ، حسب اتجاهه ؛
- يجب محاذاة المؤشر في الحقل الفارغ اعتمادًا على اتجاه لغة الواجهة ؛
- أدخل النص في الحقول لإدخال الهاتف ، يجب أن يكون عنوان URL دائمًا على الجانب الأيسر ؛
- تتوقع حقول البريد الإلكتروني نصًا أعسرًا ، ولكنها أيضًا جاهزة للاستخدام باليد اليمنى ؛
- يتم محاذاة المؤشرات في الحقول الفارغة للبريد الإلكتروني والهاتف وعنوان URL إلى اليسار.
ودعونا نحاول تحقيق ذلك.
لنبدأ بالبحث في حقل عن نص عادي ، مثل الاسم ، بدون أي حيل.
<html lang=”he” dir=”rtl”>
...
<input type="text">
...
</html>
تم وضع المؤشر على اليمين كما ينبغي ، لأن علامة INPUT ترث اتجاه النص من HTML ، وبالنسبة للواجهة اليمنى ، نتوقع أن يكون النص الذي تم إدخاله على الأرجح يمينًا.
ولكن ماذا يحدث إذا بدأنا في كتابة أحرف LTR؟ الوضع المألوف بالفعل مع وجود مؤشر غير عادي على اليسار.
في الأمثلة أعلاه ، يتعامل المطورون مع حل المشكلة بقسوة: راقب أحرف الإدخال باستخدام JavaScript وتغيير سمة dir على الفور. كان هذا منطقيًا حتى وقت قريب ، ولكن جميع المتصفحات الحديثة الآن تفهم سمة dir = "auto" جيدًا وتتعامل مع النص بفك التفاف نفسها. دعونا نضيفها.
<input type="text" dir=”auto”>اتضح ما نحتاجه.
دعنا نحاول إضافة عنصر نائب إلى الحقل.
بشكل عام ، يعد استخدام العناصر النائبة موضوعًا منفصلاً يتطلب التعرف. وفقًا لبعض المطورين ، فإن الاستخدام غير المدروس لهذه السمة يضر بإمكانية استخدام حقول الإدخال . ترك القرار لك ، في هذه التجارب نفترض أننا بحاجة إلى عناصر نائبة.
<input type="text" dir=”auto” placeholder=”שם פרטי”>
يا! لسبب ما ، يتم ترك كل شيء بمحاذاة ، بما في ذلك العنصر النائب.
النقطة موجودة في السمة dir = "auto". في حالة عدم وجود محتوى ، قد يعتبر المتصفح أن اتجاه النص أعسر. دعنا نحاول وضع العناصر النائبة على الهامش الأيمن. عادة ما يكون هذا نصًا بلغة الواجهة ، لذلك لا نحتاج حقًا إلى تخطيط تلقائي.
input::placeholder {
direction: rtl;
}
أفضل بكثير. فقط موضع المؤشر هو المربك - فهو لا يزال على اليسار. لنجرب تصميم INPUT فارغًا باستخدام الفئة الزائفة المحببة: يظهر العنصر النائب.
input:placeholder-shown {
direction: rtl;
}
لسوء الحظ ، في المدخلات التي لا تحتوي على عنصر نائب ، لن تعمل الخاصية: placeholder-shown. يمكنك إصلاح ذلك عن طريق إضافة عنصر نائب فارغ لجميع هذه الحقول:
<input type="text" dir=”auto” placeholder=” ”>الآن كل شيء كما ينبغي أن يكون. عنصر نائب على اليمين ، ومؤشر على اليمين (لأننا أولاً نتوقع نص RTL) ، نص - على اليمين أو على اليسار ، اعتمادًا على اللغة التي نطبع بها.
لكن هذا لا يكفى.
نتذكر أن عناوين البريد الإلكتروني يمكن أن تحتوي على أي أحرف. لذلك ، سيكون رمز هذا الإدخال مشابهًا للرمز السابق.
<input type="email" dir=”auto” placeholder=”כתובת אימייל או מספר נייד”>(في Badoo ، نتوقع ، أولاً وقبل كل شيء ، إدخال بريد إلكتروني ، لكننا نسمح أيضًا بإدخال رقم هاتف ، لذلك يقول العنصر النائب عن هذا.)
ولكن على الرغم من أن الأحرف يمكن أن تكون موجودة ، فإننا نتوقع أولاً وقبل كل شيء إدخال العنوان باللغة اللاتينية (وفي حالتنا ، الأرقام أرقام الهواتف). بمعنى ، يجب أن يكون المؤشر في الحقل الفارغ على اليسار. دعونا نجعل استثناء في CSS.
input[type='email']:placeholder-shown {
direction: ltr;
}هذا لا يستحق الخوض فيه. لا يزال لدينا حقول مع أنواع tel ، number ، url. هم دائمًا أعسر ، لذلك نكتب لهم الكود التالي:
<input type="tel" dir=”ltr” placeholder=”מספר טלפון”>وأضف استثناءات للحقول الفارغة:
input[type='tel']:placeholder-shown,
input[type='number']:placeholder-shown,
input[type='url']:placeholder-shown {
direction: ltr;
}
الآن أصبح كما خططنا.
مجرد لمسة صغيرة لأولئك الذين يهتمون بـ IE11. لا يفهم هذا المستعرض سمة dir = "auto" ، لذلك لا يمكن إجراء تغييرات اتجاه النص تلقائيًا بدون JavaScript.
لكننا ما زلنا نسمح للمستخدمين بإدخال عناوين البريد الإلكتروني وأرقام الهواتف بسهولة.
.ie11 input[type="email"],
.ie11 input[type="tel"] {
direction: ltr;
}
.ie11 input[type="email"]:-ms-input-placeholder,
.ie11 input[type="tel"]:-ms-input-placeholder {
direction: rtl;
}
إذا جمعت كل CSS ، وأضفت البادئات والمعالج المسبق لـ SCSS ، فستحصل على شيء مثل هذا (نعم ، نتذكر أن حقول INPUT ، على سبيل المثال ، يمكن أن تكون من نوع خانة الاختيار ، ولكن من أجل البساطة سنتجاهل هذه النقطة):
[dir=”rtl”] input {
&::-webkit-input-placeholder {
direction: rtl;
}
&::-moz-placeholder {
direction: rtl;
}
&:-ms-input-placeholder {
direction: rtl;
}
&::placeholder {
direction: rtl;
}
&:placeholder-shown[type='email'],
&:placeholder-shown[type='tel'],
&:placeholder-shown[type='number'],
&:placeholder-shown[type='url'] {
direction: ltr;
}
}
.ie11 [dir=”rtl”] input {
&[type="email"],
&[type="tel"] {
direction: ltr;
&:-ms-input-placeholder {
direction: rtl;
}
}
}
نحن في Badoo نقسم الأنماط إلى LTR و RTL ، لذلك ليس لدينا سلسلة من [dir = ”rtl”] ، ونكتب خصائص LTR بحيث تتحول إلى RTL. لكن المبدأ في اعتقادي واضح.
بالنسبة إلى TEXTAREA ، يكون المخطط هو نفسه مع استثناء واحد: هناك لا تحتاج إلى مراعاة أنواع الحقول ووضع المؤشر أو النص على الحافة اليسرى - يتم دائمًا توسيع المحتوى تلقائيًا بسبب سمة dir = "auto".
نقطة مهمة يجب وضعها في الاعتبار: تنطبق جميع متطلبات المجال على واجهات LTR أيضًا. يجب أن يظهر الاسم الذي تم إدخاله بالعبرية أو العربية على اليمين ، ويجب أن يكون المؤشر على اليسار. يجب أن يرى المعجب النادر لعنوان بريد إلكتروني غريب به أحرف على اليمين بريده الإلكتروني أثناء كتابته - من اليمين إلى اليسار.
خلاصة القول: من خلال إضافة السمات الصحيحة إلى حقول الإدخال وبضعة أسطر من CSS ، يمكنك بتكلفة معقولة ، إن لم يكن تكييف النماذج بالكامل مع اللغات اليمنى ، ثم على الأقل تحسين قابليتها للاستخدام بشكل كبير من خلال جعلها أكثر منطقية ومفهومة للمستخدمين.