عنصر HTML <ruby> هو أداة فعالة لتحسين عرض النص، خاصة بلغات شرق آسيا. يتيح لك هذا العنصر عرض التعليقات التوضيحية الصوتية أو المعلومات التكميلية الأخرى فوق النص الأساسي أو بجانبه. بدءًا من Chrome 128، سيصبح التعليق التوضيحي بلغة Ruby قابلاً للكسر أسطرًا، ويمكنك تصميم نص Rubby باستخدام السمة ruby-align CSS.
يتكوّن عنصر <ruby> من جزأين رئيسيين، هما قاعدة Ruby التي تمثل النص الرئيسي ونص Ruby الذي يمثل نص التعليق التوضيحي، ويتم ترميزه باستخدام العنصر <rt>. يمكن عرض نص ياقوت أحمر فوق قاعدة الياقوتية أو أسفلها، كما هو موضح في الأمثلة التالية.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
لماذا تسمى روبي؟
عندما كان يتم تنضيد الكتب باستخدام الأنواع القابلة للنقل، كان يتم تحديد أحجام هذه الأنواع القابلة للنقل في أسماء ذات حجم نقطي، مثل Perl و"Diamond". تم استخدام ياقوت أحمر في النظام البريطاني للإشارة إلى حجم 5.5 نقطة. استخدمت الطابعات اليابانية حجمًا مشابهًا لـ Ruby (5.5 نقطة) لنص التعليق التوضيحي، لذا بدأت في الإشارة إلى نص التعليق التوضيحي نفسه باسم Ruby (أو Rubi صوتيًا) في المطبوعات. عند تضمين نص التعليق التوضيحي في HTML، تم تحديد العنصر على أنّه <ruby>. Pica (pc) هو اسم تاريخي آخر لحجم النقاط يُستخدم في CSS كوحدة حجم خط.
لعبة ياقوت حماسية غير قابلة للكسر
في السابق، إذا كانت قاعدة ياقوت أو نص ياقوت أطول من خط كامل، كان يتم لفّهما بشكل فردي لإنشاء تحديات في التصميم. للتغلب على هذه المشكلة، غالبًا ما يرمّ مطورو الويب جزءًا من النص باستخدام علامات Ruby متعددة. ويمكنك تخطي إنشاء هذا الترميز باستخدام لغة Ruby القابلة للكسر.
في المثال التالي، تتم إضافة Pinyin (كتابة الأحرف اللاتينية بالأحرف الصينية) كمجموعة واحدة من تعليقات الياقوتية على الشعر الصيني الكلاسيكي. يتم التفاف نتائج العرض الحالية داخل مساحة نص التعليق التوضيحي بلغة روبي.
يتم عرض المحتوى من الإصدار 128 من Chrome مع نص على شكل ياقوت أحمر يمكن كسره أسطر وتعليق توضيحي على شكل ياقوت مكتوب، فوق نص أساسي مغلَّف، ما يوفّر إمكانية عرض النص بشكل مثالي.
في مثال آخر من الأدب الياباني، يحدث فاصل السطر قبل عنصر الياقوت الطويل، مما يخلق مساحة فارغة في السطر الأول.
مع نمط ياقوت أحمر قابل للكسر، يتم وضع فاصل أسطر في منتصف عنصر ياقوت طويل لتحقيق تصميم مثالي.
ولن تفصل هذه الميزة نص ياقوتي القصير الذي يحتوي على أربعة أحرف أساسية أو يساويها وأقل من ثمانية أحرف للتعليقات التوضيحية أو يساويها.
عند تضمين عنصر <ruby> داخل عنصر <ruby> آخر، لن يُفصل عنصر <ruby> الداخلي فاصل أسطر.
ولأنّ هذا يؤدي إلى تغيير سلوك صفحات الويب الحالية التي تستخدم نصًا طويلاً بحروف ruby، إذا احتجت إلى إيقاف سلوك فواصل الأسطر، سيؤدي تطبيق white-space:nowrap إلى إيقاف فاصل الأسطر داخل العنصر الهدف كالمعتاد.
سمة ruby-align في CSS
تتوفّر خاصية CSS الجديدة ruby-align أيضًا من الإصدار Chrome 128. تقبل السمة إحدى قيم الكلمات الرئيسية space-around وspace-between وstart وcenter، وتتحكّم في محاذاة نص Ruby الأساسي ونص التعليق التوضيحي بلغة Ruby.
