HTML <ruby> 元素是強化文字呈現效果的強大工具，特別是東亞語言。這個元素可讓您在基本文字上方或旁邊顯示拼音註解或其他補充資訊。自 Chrome 128 版起，Rruby 註解將可以換行，而您可以使用 ruby-align CSS 屬性設定 ruby 文字的樣式。
<ruby> 元素包含兩個主要部分：「真比基」(主要文字) 和「ruby text」，也就是以 <rt> 元素標記的註解文字。Ruby 文字可以疊加在寶座基地上或下方，如以下範例所示。
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
為什麼叫 ruby？
使用可移動的類型書籍時，這些移動式類型的尺寸會以積分大小的名稱加以定義，例如：Perl 和鑽石級。英國系統使用 Ruby，以 5.5 點大小表示。日文印表機使用大小與 Ruby (5.5 點) 類似的大小做為註解文字，因此在印刷品中，會將註解文字本身稱為 Ruby (或稱 Rubi)。在 HTML 中加入註解文字時，該元素會定義為 <ruby>。「畢卡」(pc) 是 CSS 中另一個做為字型大小單位的歷史點大小名稱。
分行橄欖球
過去，如果 ruby 基底或 ruby 文字的長度比整行長，則會各自納入導致版面配置的挑戰。為解決這個問題，網頁開發人員通常會使用多個 ruby 標記來標記一段文字。使用斷行 Ruby 時，您可略過建立這類標記的步驟。
在以下範例中，以拼音 (中文拼音) 加入成一組紅寶石的傳統中國詩詞註解。目前轉譯結果會在 ruby 註解文字區域內環繞。
從 Chrome 128 版轉譯，在換行的基礎文字上，使用換行符號放置的換行符號註解文字，就能達到理想的文字顯示效果。
在日本文獻的另一個例子中，在長 ruby 元素之前斷行，第一行加入空白空間。
利用換行符號設計，長時間的拉比元素中間會插入換行符號，達到理想版面配置。
如果簡短 ruby 文字少於或等於四個基本字元，且不超過 8 個註解字元，這項功能就不會損毀。
如果 <ruby> 元素以巢狀結構嵌入其他 <ruby> 元素中，內部 <ruby> 元素不會換行。
由於這會變更目前網頁的使用長串文字行為，如果您需要停用這個換行行為，因此只要套用 white-space:nowrap 就會照常停用目標元素內的換行符號。
ruby-align CSS 屬性
Chrome 128 版也提供新的 CSS 屬性 ruby-align。這個屬性接受 space-around、space-between、start 和 center 的其中一個關鍵字值，並控制 ruby 基本文字和 ruby 註解文字的對齊方式。
