[zh-tw]: translate HTML element <rb> <rp> <rt> (mdn#18778)

ciyoe · Apr 20, 2024 · b9028ba · b9028ba
1 parent a480b37
commit b9028ba
Show file tree

Hide file tree

Showing 3 changed files with 329 additions and 0 deletions.
diff --git a/files/zh-tw/web/html/element/rb/index.md b/files/zh-tw/web/html/element/rb/index.md
@@ -0,0 +1,105 @@
+---
+title: <rb>：Ruby 基本元素
+slug: Web/HTML/Element/rb
+---
+
+{{HTMLSidebar}}{{deprecated_header}}
+
+**`<rb>`** [HTML](/zh-TW/docs/Web/HTML) 元素用於定義 {{HTMLElement("ruby")}} 注釋的基本文字組件，即正在注釋的文字。每個 `<rb>` 元素應該包裹基本文字的每個獨立原子部分。
+
+## 屬性
+
+該元素僅包含[全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)。
+
+## 使用注意事項
+
+- Ruby 注釋用於顯示東亞字符的發音，例如使用日文假名或台灣注音符號。`<rb>` 元素用於分隔每個 ruby 基本文字的各個部分。
+- 即使 `<rb>` 不是一個{{glossary("void element", "空元素")}}，在源代碼中僅包含每個元素的開始標籤是很常見的，這樣可以使 ruby 標記更加簡潔且易於閱讀。然後瀏覽器會在渲染版本中填充完整的元素。
+- 每個想要注釋的基本段落 /`<rb>` 元素都需要包含一個 {{htmlelement("rt")}} 元素。
+
+## 範例
+
+### 使用 rb
+
+在這個範例中，我們提供了「Kanji」原始字符的注釋：
+
+```html
+<ruby>
+  <rb>漢</rb><rb>字 </rb><rp>(</rp><rt>kan</rt><rt>ji</rt><rp>)</rp>
+</ruby>
+```
+
+請注意，我們包含了兩個 `<rb>` 元素，以分隔 ruby 基本文字的兩個不同部分。注釋則由兩個 {{htmlelement("rt")}} 元素分隔。
+
+#### 結果
+
+{{EmbedLiveSample("使用 rb", "100%", 60)}}
+
+### 分開注釋
+
+請注意，我們也可以將這個範例中的兩個基本文字部分完全分開注釋。在這種情況下，我們不需要包含 `<rb>` 元素：
+
+```html
+<ruby>
+  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+```
+
+#### 結果
+
+{{EmbedLiveSample('分開注釋')}}
+
+請參見 {{HTMLElement("ruby")}} 元素的文章以獲取更多範例。
+
+## 技術摘要
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/zh-TW/docs/Web/HTML/Content_categories"
+          >內容分類</a
+        >
+      </th>
+      <td>無</td>
+    </tr>
+    <tr>
+      <th scope="row">允許的內容</th>
+      <td>作為 {{htmlelement("ruby")}} 元素的子元素。</td>
+    </tr>
+    <tr>
+      <th scope="row">標籤省略</th>
+      <td>
+        如果元素後面緊跟著 {{HTMLElement("rt")}}、{{HTMLElement("rtc")}} 或
+        {{HTMLElement("rp")}} 元素，或者後面沒有更多的內容，則可以省略結束標籤，或者如果父元素中沒有更多的內容。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允許的父元素</th>
+      <td>{{HTMLElement("ruby")}} 元素</td>
+    </tr>
+    <tr>
+      <th scope="row">允許的 ARIA 角色</th>
+      <td>任何</td>
+    </tr>
+    <tr>
+      <th scope="row">DOM 介面</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
+## 規範
+
+{{Specifications}}
+
+## 瀏覽器相容性
+
+{{Compat}}
+
+## 參見
+
+- {{HTMLElement("ruby")}}
+- {{HTMLElement("rt")}}
+- {{HTMLElement("rp")}}
+- {{HTMLElement("rtc")}}
diff --git a/files/zh-tw/web/html/element/rp/index.md b/files/zh-tw/web/html/element/rp/index.md
@@ -0,0 +1,122 @@
+---
+title: <rp>：Ruby 回退括號元素
+slug: Web/HTML/Element/rp
+---
+
+{{HTMLSidebar}}
+
+**`<rp>`** [HTML](/zh-TW/docs/Web/HTML) 元素用於為不支援使用 {{HTMLElement("ruby")}} 元素顯示 ruby 注釋的瀏覽器提供回退括號。每個 `<rp>` 元素應該包裹著包含注釋文字的 {{HTMLElement("rt")}} 元素的開始和結束括號。
+
+{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}
+
+## 屬性
+
+該元素僅包含[全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)。
+
+## 使用注意事項
+
+- Ruby 注釋用於顯示東亞字符的發音，例如使用日文假名或台灣注音符號。在不支援 {{HTMLElement("ruby")}} 元素的情況下，使用 `<rp>` 元素；`<rp>` 元素的內容提供了應顯示的內容以指示 ruby 注釋的存在，通常是括號。
+
+## 範例
+
+### 使用 ruby 注釋
+
+此範例使用 ruby 注釋顯示每個字符的[羅馬拼音](https://zh.wikipedia.org/zh-tw/日语罗马字) 等價詞。
+
+```html
+<ruby>
+  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+```
+
+```css hidden
+body {
+  font-size: 22px;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("使用 ruby 注釋", 600, 60)}}
+
+請參見 {{HTMLElement("ruby")}} 元素的文章以獲取更多範例。
+
+### 不支援 ruby
+
+如果你的瀏覽器不支援 ruby 注釋，結果將如下所示：
+
+```html hidden
+漢 (Kan) 字 (ji)
+```
+
+```css hidden
+body {
+  font-size: 22px;
+}
+```
+
+{{EmbedLiveSample("不支援 ruby", 600, 60)}}
+
+## 技術摘要
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/zh-TW/docs/Web/HTML/Content_categories"
+          >內容分類</a
+        >
+      </th>
+      <td>無</td>
+    </tr>
+    <tr>
+      <th scope="row">允許的內容</th>
+      <td>文本</td>
+    </tr>
+    <tr>
+      <th scope="row">標籤省略</th>
+      <td>
+        如果元素後面緊跟著 {{HTMLElement("rt")}} 或另一個
+        <code>&#x3C;rp></code> 元素，或者後面沒有更多的內容，則可以省略結束標籤。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允許的父元素</th>
+      <td>
+        一個 {{HTMLElement("ruby")}} 元素。<code>&#x3C;rp></code>
+        必須緊跟著或位於 {{HTMLElement("rt")}} 元素之前或之後。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">隱含 ARIA 角色</th>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >沒有對應的角色</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允許的 ARIA 角色</th>
+      <td>任意</td>
+    </tr>
+    <tr>
+      <th scope="row">DOM 介面</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
+## 規範
+
+{{Specifications}}
+
+## 瀏覽器相容性
+
+{{Compat}}
+
+## 參見
+
+- {{HTMLElement("ruby")}}
+- {{HTMLElement("rt")}}
+- {{HTMLElement("rb")}}
+- {{HTMLElement("rtc")}}
diff --git a/files/zh-tw/web/html/element/rt/index.md b/files/zh-tw/web/html/element/rt/index.md
@@ -0,0 +1,102 @@
+---
+title: <rt>：Ruby 文本元素
+slug: Web/HTML/Element/rt
+---
+
+{{HTMLSidebar}}
+
+**`<rt>`** [HTML](/zh-TW/docs/Web/HTML) 元素用於指定 ruby 注釋的 ruby 文本部分，用於為東亞排版提供發音、翻譯或音譯信息。`<rt>` 元素必須始終包含在一個 {{HTMLElement("ruby")}} 元素中。
+
+{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}
+
+請參見 {{HTMLElement("ruby")}} 元素的文章以獲取更多範例。
+
+## 屬性
+
+該元素僅包含[全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)。
+
+## 範例
+
+### 使用 ruby 注釋
+
+此簡單範例為 {{HTMLElement("ruby")}} 元素中的漢字字符提供了羅馬字音譯：
+
+```html
+<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt> </ruby>
+```
+
+```css hidden
+body {
+  font-size: 22px;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("使用 ruby 注釋", 600, 60)}}
+
+## 技術摘要
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/zh-TW/docs/Web/HTML/Content_categories"
+          >內容分類</a
+        >
+      </th>
+      <td>無</td>
+    </tr>
+    <tr>
+      <th scope="row">允許的內容</th>
+      <td>
+        <a href="/zh-TW/docs/Web/HTML/Content_categories#段落型內容"
+          >段落型內容</a
+        >。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">標籤省略</th>
+      <td>
+        如果 <code>&#x3C;rt></code> 元素後面緊跟著一個 <code>&#x3C;rt></code>
+        或 {{HTMLElement("rp")}} 元素，或者後面沒有更多的內容，則結束標籤可以省略。
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允許的父元素</th>
+      <td>一個 {{HTMLElement("ruby")}} 元素。</td>
+    </tr>
+    <tr>
+      <th scope="row">隱含 ARIA 角色</th>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >沒對應的角色</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">允許的 ARIA 角色</th>
+      <td>任何</td>
+    </tr>
+    <tr>
+      <th scope="row">DOM 介面</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
+## 規範
+
+{{Specifications}}
+
+## 瀏覽器相容性
+
+{{Compat}}
+
+## 參見
+
+- {{HTMLElement("ruby")}}
+- {{HTMLElement("rp")}}
+- {{HTMLElement("rb")}}
+- {{HTMLElement("rtc")}}
+- {{CSSXRef("text-transform", "text-transform: full-size-kana")}}