רכיב ה-HTML <ruby> הוא כלי יעיל מאוד לשיפור הצגת הטקסט, במיוחד בשפות מזרח אסיה. הרכיב הזה מאפשר להציג הערות פונטיות או מידע משלים אחר מעל או לצד טקסט הבסיס. החל מגרסה 128 של Chrome, הערה מסוג Ruby תהיה ניתנת לשבץ שורה, וניתן לעצב טקסט Ruby באמצעות נכס CSS של ruby-align.
רכיב <ruby> מורכב משני חלקים עיקריים: בסיס Ruby – הטקסט הראשי וטקסט 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 (או רובי, מבחינה פונטית) בהדפסים. כשטקסט ההערה נכלל ב-HTML, הרכיב הוגדר כ-<ruby>. Pica (pc) הוא שם היסטורי נוסף של גודל נקודה שמשמש ב-CSS כיחידה של גודל גופן.
אבן אודם לשבירת שורות
בעבר, אם בסיס אבן או טקסט של אבן אודם היה ארוך משורה שלמה, הם היו ארוזים בנפרד ליצירת אתגרי פריסה. כדי להתגבר על הקושי שנוצר, מפתחי אתרים בדרך כלל מסמנים קטע טקסט באמצעות כמה תגי Ruby. עם Ruby שניתן לשבור שורה, אפשר לדלג על יצירת תגי עיצוב כאלה.
בדוגמה הבאה, פין-יין (רומאניזציה של סינית) נוסף כקבוצה אחת של הערות אודם בשירה הסינית הקלאסית. תוצאות הרינדור הנוכחיות עולות בתוך אזור הטקסט של הערת Ruby.
עיבוד מ-Chrome 128, עם מקומות של אבן אודם שקופצים לשורה חדשה, עטוף בטקסט של הערות אבן מעל טקסט בסיס עטוף, וכך מתקבלת רינדור טקסט אידיאלי.
בדוגמה נוספת מהספרות היפנית, מעבר השורה מופיע לפני אלמנט ה-Ruby הארוך, וכתוצאה מכך נוצר רווח ריק בשורה הראשונה.
באמצעות Ruby ניתן לשבור את הקו במרכז של רכיב ה-Ruby הארוך. כך ניתן להגיע לפריסה אידיאלית.
התכונה הזו לא תפגע בטקסט Ruby קצר שכולל פחות מארבעה תווים בסיסיים או שווים לו, ופחות משמונה תווי הערות או שווים להם.
כשרכיב <ruby> נמצא בתוך רכיב <ruby> אחר, לרכיב <ruby> הפנימי לא יש מעבר שורה.
מאחר שהפעולה הזו משנה את ההתנהגות של דפי אינטרנט קיימים שמשתמשים בטקסט Ruby ארוך, אם צריך להשבית את ההתנהגות הזו של מעבר שורה, ההחלה של white-space:nowrap משביתה את מעבר שורה בתוך רכיב היעד כרגיל.
נכס ה-CSS ruby-align
נכס ה-CSS החדש ruby-align זמין גם מ-Chrome בגרסה 128. הנכס מקבל אחד מערכי מילות המפתח space-around, space-between, start ו-center, ושולט בהתאמה של טקסט הבסיס של Ruby לטקסט ההערה של Ruby.
