Line-breakable <ruby> ומאפיין Ruby-יישור של CSS

רכיב ה-HTML‏ <ruby> הוא כלי יעיל לשיפור הצגת הטקסט, במיוחד בשפות מזרח אסיה. הרכיב הזה מאפשר להציג הערות פונטיות או מידע נוסף מעל הטקסט הבסיסי או לידו. החל מגרסה 128 של Chrome, הערות Ruby יהיו ניתנות לחיתוך שורה, ותוכלו לעצב טקסט Ruby באמצעות מאפיין ה-CSS ruby-align.

רכיב <ruby> מורכב משני חלקים עיקריים: ruby base שהוא הטקסט הראשי ו-ruby text שהוא טקסט ההערה, שמסומנים באמצעות הרכיב <rt>. אפשר להציג טקסט של רובי מעל או מתחת ל-ruby base, כפי שמוצג בדוגמאות הבאות.

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

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

למה קוראים לו Ruby?

כשהספרים הודפסו באמצעות גופנים ניידים, הגדלים של הגופנים הניידים האלה הוגדרו בשמות של גודל נקודה, כמו Perl ו-Diamond. במערכת הבריטית, האות 'ר' (Ruby) שימש לציון גודל של 5.5 נקודות. ביפן, בתי דפוס השתמשו בגודל דומה ל-Ruby (5.5 נקודות) לטקסט של ההערות, ולכן החלו להתייחס לטקסט של ההערות עצמו כ-Ruby (או Rubi באופן פונולוגי) בהדפסות. כשטקסט ההערה נכלל ב-HTML, הרכיב הוגדר כ-<ruby>. Pica (pc) הוא שם היסטורי נוסף של יחידת נקודות שנעשה בה שימוש ב-CSS בתור יחידת גודל גופן.

Ruby שניתן לשבור בשורה

בעבר, אם הקוד של ruby-base או ruby-text היה ארוך יותר משורה שלמה, הוא היה מוקף בנפרד, מה שגרם לבעיות בפריסה. כדי להתגבר על הבעיה הזו, מפתחי אתרים מסמנים לרוב קטע טקסט באמצעות כמה תגי Ruby. בעזרת Ruby שניתן לחיתוך שורות, אפשר לדלג על יצירת סימון כזה.

בדוגמה הבאה, הפיניין (רומאניזציה של סינית) מתווסף כקבוצה אחת של הערות רוביי על שירה סינית קלאסית. תוצאות הרינדור הנוכחיות מוחברות באזור הטקסט של הערה ביפנית.

כשמשתמשים ב-Chrome 128 עם 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.