Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Mar 21, 2024
105 changes: 105 additions & 0 deletions files/zh-tw/web/html/element/rb/index.md
Original file line number Diff line number Diff line change
@@ -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 標記更加簡潔且易於閱讀。然後瀏覽器會在渲染版本中填充完整的元素。
Dr-XYZ marked this conversation as resolved.
Show resolved Hide resolved
- 每個想要注釋的基本段落 /`<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")}}
122 changes: 122 additions & 0 deletions files/zh-tw/web/html/element/rp/index.md
Original file line number Diff line number Diff line change
@@ -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://en.wikipedia.org/wiki/Romaji) 等價詞。
Dr-XYZ marked this conversation as resolved.
Show resolved Hide resolved

```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")}}
102 changes: 102 additions & 0 deletions files/zh-tw/web/html/element/rt/index.md
Original file line number Diff line number Diff line change
@@ -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")}}
Loading