Re: <ruby> 應用上的幾個問題

不知道和你說的問題有沒有相關
不過還是提供一些資訊
以前的 ruby markup 是有六個標籤的
http://www.w3.org/TR/ruby/
<http://www.w3.org/TR/ruby/>這個版本 IE 是有實作的
主要是多了 ruby base
所以你可以明確的做出兩者的對應關係
其實我是比較喜歡這個版本的

Firefox 的話以往大家主要是使用 Extension 來支援
https://addons.mozilla.org/en-US/firefox/addon/1935/
<https://addons.mozilla.org/en-US/firefox/addon/1935/>這個擴充套件也是有完整支援上面六個標籤的

Ethan Chen <chief@ethantw.net> 於 2010年9月28日下午8:47 寫道：

> 各位不好意思，沒發現圖片不見了。為了怕理解上有錯誤，我把圖片貼上之後，整篇重發給大家。
>
>
> 大家好，我也來發篇討論吧。這是我在實際應用上遇到的問題。
> 下面分別是 Webkit (Safari，上圖) 原生支援的 <ruby> 與 Firefox（下圖）以 CSS 實作的 <ruby> 。
>
> [image: Content][image: Content]
>
>
>
> 以下是 HTML 語法（為了方便閱讀，我加上了縮排空白與換行，上圖中的 HTML 都沒有任何空白）：
>
> <p>
>
> <b class="proper-noun">
>
> <ruby>
>
> 白<rp>（</rp><rt>ㄅㄞˊ</rt><rp>）</rp>
>
> 雪<rp>（</rp><rt>ㄒㄩㄝˇ</rt><rp>）</rp>
>
> </ruby>
>
> </b>
>
> <ruby>
>
> 公<rp>（</rp><rt>ㄍㄨㄥ</rt><rp>）</rp>
>
> 主<rp>（</rp><rt>ㄓㄨˇ</rt><rp>）</rp>
>
> ，
>
> 一<rp>（</rp><rt>ㄧ</rt><rp>）</rp>
>
> 個<rp>（</rp><rt>˙ㄍㄜ</rt><rp>）</rp>
>
> 人<rp>（</rp><rt>ㄖㄣˊ</rt><rp>）</rp>
>
> 見<rp>（</rp><rt>ㄐㄧㄢˋ</rt><rp>）</rp>
>
> 人<rp>（</rp><rt>ㄖㄣˊ</rt><rp>）</rp>
>
> 愛<rp>（</rp><rt>ㄞˋ</rt><rp>）</rp>
>
> 的<rp>（</rp><rt>˙ㄉㄜ</rt><rp>）</rp>
>
> 小<rp>（</rp><rt>ㄒㄧㄠˇ</rt><rp>）</rp>
>
> 姑<rp>（</rp><rt>ㄍㄨ</rt><rp>）</rp>
>
>    <!--兒化音-->
>
> 娘兒<rp>（</rp><rt class="er">˙ㄋㄧㄤㄦ</rt><rp>）</rp>
>
> 。
>
> </ruby>
>
> </p>
>
>
> W3C 草稿裡寫說，rt 就算不是 ruby 的子元素還是會有一樣的效果 [1]，但在 Webkit 中，ruby > b > rt
> 就無效了，所以上面用兩個 ruby 分開。改成 b.proper-noun > ruby > rt。
>
>
> Webkit 已經支援這個標籤，所以我只有設定字體大小：
>
> body.browser-webkit ruby rt {  font-size: .35em;  }
>
>
> Firefox 還沒支援這個標籤，所以我用 CSS 這樣寫：
>
> ruby rp {  display: none;  }
>
>
> body.browser-gecko ruby rt,
> body.browser-opera ruby rt,
> body.browser-msie  ruby rt {
>     display: inline-block;
>
>     height: .35em;
>     margin: 0 .1em 0 -3.5em;
>     padding: 0 -.2em 0 .2em;
>     position: relative;
>     text-align: center;
>     top: -2.6em;
>     width: 4.5em;
> }
>
>
> /* 兒化音 */
>
> body.browser-gecko ruby rt.er,
> body.browser-opera ruby rt.er,
> body.browser-msie  ruby rt.er {
>     margin: 0 1.5em 0 -5.5em;
>     width: 5.8em;
> }
>
>
> body.browser-XXXX 的 class 是用 JS 或後端程式判別後加上的。
> 兒化音的 class .er 手動加或用 JS 都可以。
>
> 另外我還設定了「專名號」的用法：
>
> b.proper-noun:lang(zh) {
>
>     text-decoration: underline;
>
> }
>
>
> 回到上面的圖片，關於文字間距的部份當然是 Safari 的結果比較正確，以 <rt> 的寬度來決定字寬。
> 我的 CSS 是無論 rt 裡有多少字元都以 4.5em 作寬度，遇到「兒化音」則用
> 5.8em。不過這部份以後會被瀏覽器實作，所以都只是暫時的解法。不曉得大家有沒有其它比較對的方法？
> （用 width: auto; 是不行的，因為 margin-left 裡要減掉一個與 width 相當的數值。）
>
> 還有個問題，遇到沒標註注音的漢字，Webkit
> 會共用下個字的注音，對「兒化音」就不需要多做處理（如下圖的「姑『娘兒』」）。但遇到標點符號或不想標註注音的字元時，還是會共用注音（上方圖一的「ㄧ、yi」會與前面的逗點共用）。碰到「標點符號」時，給一個空的
> <rt> 就可以解決（如下圖，Webkit）；但我認為遇到「不想標註注音的漢字（像是太簡單的字）」給一個空的 <rt>
> 在語意上有點怪怪的。不曉得大家的看法是？
> [image: Content]
>
> 最後再看「『*白雪*』公主」兩字下的專名號，放在 b.proper-noun 下任何元素都會有底線。但我的 CSS 把 rt 變成
> inline-block，所以注音下面不會有專名號。Webkit 卻有。
> 以 W3C 標準的角度來說，Webkit 應該沒有錯，卻違反了中文字的排版規則（標註在漢字旁的注音不加標點符號）。
>
>
>
>    1. http://www.w3.org/TR/html5/text-level-semantics.html#the-rt-element
>
>
>
> p.s.
> 又想到雙音節的漢字，類似「廿、浬」這樣的字出現在一篇標註注音的文章裡頭時，該怎麼標音？現在會全文注音的也只有國小課本，但印象中小學還沒教到這種程度的字咧。
>
>
>
>
> 在 Sep 28, 2010 8:21 PM 時， Yuan Chao 寫到：
>
> 2010/9/28 Ethan Chen <chief@ethantw.net>
>
>> 大家好，我也來發篇討論吧。這是我在實際應用上遇到的問題。
>> 下面分別是 Webkit (Safari，上圖) 原生支援的 <ruby> 與 Firefox（下圖）以 CSS 實作的 <ruby> 。
>>
> 不好意思，我這邊看不到「上圖」。
> 另外，一直有個問題：「ㄧ」這個注音，橫書的時候到底應該打成直的還是橫的？就方塊字來說，字間距都是一樣沒有省到。
>
> 回到上面的圖片，關於文字間距的部份當然是 Safari 的結果比較正確，以 <rt> 的寬度來決定字寬。
>>
> 看起來 Firefox 的文字間隔是有問題的，兩個字的ruby基本上都黏在一起。畢竟注音不像假名，並不是一個符號一個音。
>
>
>> p.s.
>> 又想到雙音節的漢字，類似「廿、浬」這樣的字出現在一篇標註注音的文章裡頭時，該怎麼標音？現在會全文注音的也只有國小課本，但印象中小學還沒教到這種程度的字咧。
>>
> 根據教育部國語辭典：
> 廿   注音一式 ㄋ｜ㄢˋ
> 浬   注音一式 ㄌ｜ˇ
>
> 就以前看過日文的做法是，就把所有的音節都塞進去，前後字距依ruby調整。但馬上又會遇到上述ruby斷字的問題。
>
>
> --
> Best regards,
> Yuan Chao
>
>
>


-- 
OOO