換行 <gt>以及 CSS ruby-align 屬性

Mariko Kosaka

HTML <ruby> 元素是強化文字呈現方式的強大工具，特別適用於東亞語言。這個元素可讓你在基本文字上方或旁邊顯示音標註解或其他補充資訊。從 Chrome 128 開始，Ruby 註解將可換行，您可以使用 ruby-align CSS 屬性為 Ruby 文字設定樣式。

<ruby> 元素包含兩個主要部分：ruby base 是主要文字，而ruby text 是註解文字，並以 <rt> 元素標記。如以下範例所示，Ruby 文字可顯示在 Ruby 底層上方或下方。

<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-base 或 ruby-text 比整行長，系統會個別包裝，導致版面配置出現問題。為解決這個問題，網頁開發人員通常會使用多個 Ruby 標記標示文字。有了可換行日文假名，您就不必建立這類標記。

在以下範例中，我們在古典中文詩上加入了注音 (中文羅馬拼音) 做為一組 Ruby 註解。目前的轉譯結果會在 Ruby 註解文字區域內換行。

使用長的 Ruby 註解文字，在 Chrome 128 之前算繪的結果。

使用 Chrome 128 搭配可分行註解，可將包裝的註解文字放在包裝的基礎文字上，達到理想的文字算繪效果。

Chrome 128 的轉譯結果，其中包含長的 Ruby 註解文字。

在另一個日文文學例子中，換行會發生在長式羅馬拼音元素之前，因此會在第一行產生空白空間。

在 Chrome 128 之前，使用長的 Ruby 文字時的轉譯結果。

使用可換行的假名，可將換行符號放在長假名元素中間，以達到理想的版面配置。

Chrome 128 渲染結果，其中包含長的 Ruby 文字。

這項功能不會分割短的羅馬拼音文字，因為這類文字的基礎字元和註解字元數量都不會超過四個和八個。

當 <ruby> 元素嵌套在另一個 <ruby> 元素中時，內部 <ruby> 元素不會換行。

由於這會變更目前網頁使用長 Ruby 文字的行為，因此如果您需要停用此換行行為，套用 white-space:nowrap 會如常停用目標元素內的換行。

ruby-align CSS 屬性

瀏覽器支援

• 128
• 128
• 38
• 18.2

資料來源

新的 CSS 屬性 ruby-align 也已在 Chrome 128 版推出。這個屬性可接受其中一個關鍵字值 space-around、space-between、start 和 center，並控制 Ruby 基礎文字和 Ruby 註解文字的對齊方式。

圖片顯示 ruby-align 屬性的用途。