<ruby> قابل للكسر وخاصية محاذاة Ruby لـ CSS

Mariko Kosaka

يُعدّ عنصر HTML <ruby> أداة فعّالة لتحسين عرض النص، خاصةً للغات شرق آسيا. يتيح لك هذا العنصر عرض تعليقات توضيحية صوتية أو معلومات تكميلية أخرى فوق النص الأساسي أو بجانبه. اعتبارًا من الإصدار 128 من Chrome، سيتم تقسيم التعليق التوضيحي بلغة Ruby إلى أسطر، ويمكنك تصميم نص Ruby باستخدام خاصية ruby-align CSS.

يتألّف عنصر <ruby> من جزأين رئيسيين، وهما قاعدة نص روبيي التي تشكّل النص الرئيسي ونص روبيي الذي يشكّل نص التعليق التوضيحي، ويتم وضع علامة عليه باستخدام العنصر <rt>. يمكن عرض نص Ruby فوق قاعدة Ruby أو تحتها، كما هو موضّح في الأمثلة التالية.

<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>

طريقة لفظ الكلمات باللغة الإنجليزية كتعليق توضيحي على النص الأساسي باللغة اليابانية

<ruby style="ruby-position: under;">
  강남대로
  <rt>江南大路</rt>
</ruby>

تمت إضافة تعليق توضيحي صيني أسفل الهانغل الكوري.

لماذا يُطلق عليه اسم "روبي"؟

عندما كانت الكتب تُطبع باستخدام أنواع حروف متحركة، كان يتم تحديد أحجام هذه الأنواع المتحركة بأسماء أحجام النقاط، مثل Perl وDiamond. كان يُستخدَم الخطّ Ruby في النظام البريطاني للإشارة إلى حجم 5.5 نقطة. استخدمت المطابع اليابانية حجمًا مشابهًا لخط Ruby (5.5 نقطة) لنص التعليق التوضيحي، لذا بدأت في الإشارة إلى نص التعليق التوضيحي نفسه باسم Ruby (أو Rubi صوتيًا) في المطبوعات. عند تضمين نص التعليق التوضيحي في HTML، تم تعريف العنصر على أنّه <ruby>. البيكا (pc) هو اسم آخر لحجم النقطة المستخدَم في CSS كوحدة لحجم الخط.

نص RUBY قابل للفصل

في السابق، إذا كان نص قاعدة روماجي أو نص روماجي أطول من سطر كامل، كان يتم لفّهما بشكلٍ فردي، ما يتسبب في حدوث مشاكل في التنسيق. لحلّ هذه المشكلة، غالبًا ما يضع مطوّرو الويب علامة على جزء من النص باستخدام علامات روبي متعددة. باستخدام نص Ruby قابل للفصل، يمكنك تخطّي إنشاء هذا الترميز.

في المثال التالي، تمت إضافة نظام بينيين (الرومانية الصينية) كمجموعة واحدة من التعليقات التوضيحية بتنسيق Ruby على الشعر الصيني الكلاسيكي. يتمّ عرض نتائج العرض الحالية ضمن مساحة نص التعليق التوضيحي باللغة اللاتينية.

نتيجة العرض قبل الإصدار 128 من Chrome مع نص تعليق توضيحي طويل بتنسيق Ruby.

عند عرض المحتوى من الإصدار 128 من Chrome باستخدام نص Ruby قابل للفصل حسب السطر، يتم وضع نص التعليق التوضيحي بتنسيق Ruby المُلفَّف فوق النص الأساسي المُلفَّف، ما يؤدي إلى عرض النص بشكل مثالي.

نتيجة المعالجة من Chrome 128 مع نص تعليق توضيحي طويل بتنسيق Ruby.

في مثال آخر من الأدب الياباني، يحدث فاصل السطر قبل عنصر الروماجي الطويل، ما يؤدي إلى إنشاء مساحة فارغة في السطر الأول.

نتيجة العرض قبل الإصدار 128 من Chrome مع نص روبي طويل.

باستخدام نص Ruby قابل للفصل، يتم وضع فاصل سطر في منتصف عنصر نص Ruby الطويل لتحقيق تنسيق مثالي.

نتيجة المعالجة من Chrome 128 مع نص روبي طويل.

لن تؤدي هذه الميزة إلى تقسيم نص Ruby القصير الذي يحتوي على أقل من أو يساوي أربعة أحرف أساسية وأقل من أو يساوي ثمانية أحرف تعليق توضيحي.

عند تداخل عنصر <ruby> داخل عنصر <ruby> آخر، لن يتمّ وضع فاصل سطر في عنصر <ruby> الداخلي.

بما أنّ هذا الإجراء يغيّر سلوك صفحات الويب الحالية التي تستخدم نصًا طويلاً بتنسيق Ruby، إذا كنت بحاجة إلى إيقاف سلوك علامات الترقيم هذا، يؤدي تطبيق white-space:nowrap إلى إيقاف علامات الترقيم داخل العنصر المستهدَف كالمعتاد.

خاصية ruby-align في CSS

توافق المتصفّح

• 128
• 128
• 38
• 18.2

المصدر

تتوفّر أيضًا خاصية CSS الجديدة ruby-align من الإصدار 128 من Chrome. تقبل السمة إحدى قيم الكلمات الرئيسيةspace-around وspace-between وstart وcenter، وتتحكّم في محاذاة النص الأساسي للتعليق التوضيحي بلغة Ruby ونص التعليق التوضيحي بلغة Ruby.

صورة تعرض حالة استخدام لسمة ruby-align