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