From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:43:23 -0500
Subject: initial commit

---
 files/zh-tw/web/css/ruby-position/index.html | 112 +++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 files/zh-tw/web/css/ruby-position/index.html

(limited to 'files/zh-tw/web/css/ruby-position')

diff --git a/files/zh-tw/web/css/ruby-position/index.html b/files/zh-tw/web/css/ruby-position/index.html
new file mode 100644
index 0000000000..6caff70d64
--- /dev/null
+++ b/files/zh-tw/web/css/ruby-position/index.html
@@ -0,0 +1,112 @@
+---
+title: ruby-position
+slug: Web/CSS/ruby-position
+translation_of: Web/CSS/ruby-position
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS 的 <code><strong>ruby-position</strong></code> 屬性定義了 ruby 元素與該基礎元素（base element）相關聯的位置。它能在元素上方（<code>over</code>）、下方（<code>under</code>）、兩個字符之間、抑或右方（<code>inter-character</code>）。</p>
+
+<pre class="brush:css notranslate">/* 關鍵字值 */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* 全域值 */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="語法">語法</h2>
+
+<h3 id="屬性值">屬性值</h3>
+
+<dl>
+ <dt><code>over</code></dt>
+ <dd><img alt="Over example" src="https://mdn.mozillademos.org/files/10251/Screen%20Shot%202015-03-04%20at%2013.02.20.png" style="height: 31px; width: 77px;">如果文件以橫式排列，該關鍵字會指引旁註標記（ruby）出現在主文的上方。如果文件以直式排列，則會出現在主文的右方。</dd>
+ <dt><code>under</code></dt>
+ <dd><img alt="Under example" src="https://mdn.mozillademos.org/files/10249/Screen%20Shot%202015-03-04%20at%2013.02.07.png" style="height: 34px; width: 78px;">如果文件以橫式排列，該關鍵字會指引旁註標記出現在在主文的下方。如果文件以直式排列，則會出現在主文的左方。</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>該關鍵字會指引旁註標記出現在在主文的兩個字符的中間。</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>HTML 會因為 <code>ruby-position</code> 的值不同，而作出不同的渲染：</p>
+
+<pre class="brush: html notranslate">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="旁註標記定位到主文上方">旁註標記定位到主文上方</h3>
+
+<pre class="brush: html notranslate" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css notranslate">ruby {
+    ruby-position:over;
+}</pre>
+
+<p>它會給出如下結果：</p>
+
+<p>{{EmbedLiveSample("旁註標記定位到主文上方", 100, 40)}}</p>
+
+<h3 id="旁註標記定位到主文下方">旁註標記定位到主文下方</h3>
+
+<pre class="brush: html notranslate" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css notranslate">ruby {
+    ruby-position:under;
+}</pre>
+
+<p>它會給出如下結果：</p>
+
+<p>{{EmbedLiveSample("旁註標記定位到主文下方", 100, 40)}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Ruby', '#rubypos', 'ruby-position') }}</td>
+   <td>{{ Spec2('CSS3 Ruby') }}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.ruby-position")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>HTML 的旁註標記元素：{{HTMLElement("ruby")}}、{{HTMLElement("rt")}}、{{HTMLElement("rp")}}、{{HTMLElement("rtc")}}。</li>
+ <li>CSS 的旁註標記屬性：{{cssxref("ruby-align")}}、{{cssxref("ruby-merge")}}。</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf