W3C home > Mailing lists > Public > public-html-ig-zh@w3.org > September 2010

<ruby> 應用上的幾個問題

From: Ethan Chen <chief@ethantw.net>
Date: Tue, 28 Sep 2010 13:37:23 +0800
Message-Id: <6FB1E551-FD19-4F73-AED9-4D1A776C2009@ethantw.net>
To: 中文HTML5同樂會ML <public-html-ig-zh@w3.org>
大家好,我也來發篇討論吧。這是我在實際應用上遇到的問題。
下面分別是 Webkit (Safari,上圖) 原生支援的 <ruby> 與 Firefox(下圖)以 CSS 實作的 <ruby> 。




以下是 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> 在語意上有點怪怪的。不曉得大家的看法是?


最後再看「『白雪』公主」兩字下的專名號,放在 b.proper-noun 下任何元素都會有底線。但我的 CSS 把 rt 變成 inline-block,所以注音下面不會有專名號。Webkit 卻有。
以 W3C 標準的角度來說,Webkit 應該沒有錯,卻違反了中文字的排版規則(標註在漢字旁的注音不加標點符號)。


http://www.w3.org/TR/html5/text-level-semantics.html#the-rt-element



p.s. 又想到雙音節的漢字,類似「廿、浬」這樣的字出現在一篇標註注音的文章裡頭時,該怎麼標音?現在會全文注音的也只有國小課本,但印象中小學還沒教到這種程度的字咧。






Received on Tuesday, 28 September 2010 05:38:05 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:43:45 UTC