此 Ruby 非彼 Ruby – XHTML的旁註標記語法

Ruby,其意義是極小的鉛字,在W3C規範當中其實是一個通常用於亞洲語言上的旁註標記語法,簡單來講,就是像日文當中的漢字的拼音註記或是華文當中的文字注音,使用這個標籤,就可以輕鬆的在網頁上面標註文字的發音,就像是下圖所示;這個好用的標籤實在是很適合一些教學網站來使用,尤其是那種什麼華語小學生課文教學網站之類的。(不然要那些幼兒網站把每個字標上注音,豈不是要了他們的老命?要好好善用HTML的原生標籤唷!)

ruby-en-ex.gif


雖然這樣說是沒錯,不過目前真正有支援這個標籤的是IE6(不確定以上有沒有),FireFox則必須依賴他的延伸套件,Opera則是完全不支援;但是既然W3C已經將它列入標準化規範當中,我想未來應該會全面性支援的,短期間,我們就用CSS來彌補樣式上的殘缺吧!簡單來看看Ruby標籤的用法吧!

1. 基本 ruby 標籤
下面列出最簡單的 ruby 語法,整個字使用 <ruby> 包起來,為得是宣告裡面的內容要當成旁註標記文字來處理,<rb> 標籤包含的就是作為基本(base)單字的內容,<rt> 標籤包的則是旁註文字(ruby text)的內容,使用方式如下:

<ruby>
  <rb>WWW</rb>
  <rt>World Wide Web</rt>
</ruby>

2. Ruby的圓括弧
有的瀏覽器看不懂 Ruby 標籤,或是無法判讀 ruby 標籤的意義,不過我們還是希望就算瀏覽器不能判讀,我們還是希望能夠正確的呈現文字上面的意義,最好的方式,當然就是把詳細的拼音用括弧來表示在該文字的後面,就像是WWW (World Wide Web) 這種樣子,此時,我們就需要使用到<rp> (ruby parentheses)標籤來幫助我們,使用方法如下:

<ruby> 
  <rb>WWW</rb> 
  <rp>(</rp><rt>World Wide Web</rt><rp>)</rp> 
</ruby>

這種方法的優點是

  • 瀏覽器無法判讀 <ruby> 或是可以判讀,卻無法呈現正確樣式時,使用 <rp> 可讓標記更為清楚並合乎語意的規範
  • 能夠正確顯示的瀏覽器,例如 IE6 ,則會略過 <rp> 標籤不受到影響。
3. 複合的 ruby 標籤
所謂的複合式 ruby 標籤(Complex ruby markup),是用於標記多個旁註文字,有時你會希望在文字加上注音以及羅馬拼音,此時,複合標記就可以滿足你的需要,它允許你使用多個 <rt> 標籤,但是當然還是只有一個 <rb> 標籤囉!不過略為不同的是,這些標籤,都被 <rbc><rtc> 所包覆著,用法如下:

<ruby> 
  <rbc> 
    <rb>10</rb> 
    <rb>31</rb> 
    <rb>2002</rb> 
  </rbc> 
  <rtc> 
    <rt>Month</rt> 
    <rt>Day</rt> 
    <rt>Year</rt> 
  </rtc> 
  <rtc> 
    <rt rbspan="3">Expiration Date</rt> 
  </rtc> 
</ruby>

值得注意的是,<rp> 標籤在複合式 ruby 標記法當中是不被接受的,原因是首先 <rp> 標籤本來就是針對瀏覽器不能支援而產生的輔助語法,所以在比較常出現問題的基本標記方式當中比較需要被使用;其次,在大多數的複合式 ruby 標記法當中,要用括弧表示一個以上的輔助說明有其困難度。複合式的標記法,除了用以處理多個註記小字外,還可以用在由多個單字或是字元所構成的 ruby base 上,例如時間、人名、特殊專有名詞等。

正規的 Ruby 定義
以下的內容,是經由W3C定義的標籤內容,有興趣的話,可以到W3C的官方網站上面閱讀Ruby Annotation 的詳細介紹,這裡只是簡單介紹一下。

<ruby> 元素
ruby 元素屬於行內元素,裡面可以包含<rb>、<rt> 或是適用於簡單旁註標記法的 <rp>,它也可以包含 <rbc> 和 <rtc>。基本上,<ruby> 元素裡面第一個放置的是 <rb> 元素,也就是用以作為基本文字的部份,接著則是 <rp> (如果有的話),然後才是<rt>。

ruby 的屬性只有一般基本的屬性,沒有專屬的屬性,這些屬性包括了id、class 或是 xml:lang;一般屬性在W3C當中有更詳細的定義,詳細內容請見 XHTML Modularization, Section 5.1

<rbc> 元素
rbc 標籤(ruby base container)主要在複合式 ruby 表示法當中包含所有的 rb 元素,裡面可以包含一個以上的 rb 元素,它可以把多個不同的 rb 元素整合起來,例如時間、姓名、或是其他特殊名詞,請注意,一個 ruby 標籤當中只能有一個 rbc 元素;此元素同樣也只具備一般的基本屬性。
<rtc> 元素
rtc,也就是 ruby text container ,依此類推我們當然可以知道它是在複合 ruby 表示式當中用以整合所有 rt 元素的標籤,一個 ruby 標籤當中可允許出現一或兩的 rtc 標籤,但是不支援多於兩個的 rtc 標籤(阿不然你是要瀏覽器怎麼排列?)
<rb> 元素
rb(ruby base)元素,用來表示註記法當中的主要文字,在簡單表示法當中,一個 ruby 當中只可以允許出現一個 rb。rb 標籤當中可以包含其他的行內元素,包括 <span><a>、或是 <strong> 等標籤,而且同樣只支援基本屬性。
<rt> 元素
rt 元素是小鉛字的標籤,在簡單表示式當中,同樣也只允許出現一個 rt 元素。跟 rb 元素一樣,rt 元素也可以包含其他的行內元素,包括 <span><a>、或是 <strong> 等標籤,而且同樣支援基本屬性;特別的是,它還多出了rbspan 的屬性,這個屬性的存在意義是讓 rt 在複合表示式當中可以代表多個 rb 元素,他的值必須為整數,預設為 0 ,而且這個屬性不能用於簡單表示式當中,就算你使用了,瀏覽器也會加以忽略。
<rp> 元素
rp(ruby parentheses),前面已經說明這個標籤只適用於簡單表示式當中,你可以使用圓括弧,也可以使用其他類似的符號。基本上,這東西只有在瀏覽器錯誤解讀的時候才會出現,支援基本屬性。

接著,我們要來討論關於 Ruby 在樣式上的表現。

Ruby 在 Web 以及印刷上面的用法
ruby 在日語裡面代表的是外觀上附註於主要文字旁邊的小鉛字,這部份,不管是字體大小或是排列方式,在傳統印刷上來講都不至於有太大的問題,不管印在哪裡都不會差太多吧!但是如果用在Web上面,事情就變得沒那麼單純,畢竟要考慮到結構化與語意化的問題,而且W3C在定義的時候,也無法保證小鉛字一定顯示在主要文字的旁邊,下面就是幾個關於不強制把小鉛字顯示在主要文字旁邊的理由:

  • 非視覺的網頁閱讀器,例如聲音閱讀器或是盲字印瀏覽器,對這些使用者而言,一連串不中斷的內容才具備意義
  • 在低解析度的顯示器上,正常顯示ruby也許不可行,所以可能會使用忽略的方式來處理
  • 某些教學目的上,也許教育工作者會希望小鉛字並非一開始就顯示在文字旁邊,而是希望它以彈出視窗的方式顯示,書本及紙張當然無法做到這樣,但是這在Web上面是可行的

傳統的用法上,rt 的字級為 rb 的一半,事實上,ruby 的意思就是源自於就是英國印刷字體中 5.5 pt 字級的稱呼,也就是一般正常字級 10 pt 的一半。

ruby text 的定位
這裡有幾種不同的定位,為了因應歐洲及亞洲文字的不同需求,大致上有垂直與水平兩種,分別列表如下:

屬性值 水平顯示
(左->右,上->下)
垂直顯示(上->下,右->左)
before 上面 右方
after 下面 左方

在這裡也要提一個另類的東西,就是中文的注音符號,大家都知道,注音符號除了ㄅㄆㄇㄈ以外,還有標記重音的符號,W3C 稱之為 Bopomofo ,因為注音的顯示方式略有不同,所以會呈現不同的顯示法,但是目前我只看到CSS3當中對 Bopomofo 的樣式及用法有比較詳盡的說明;如果想知道更多關於 CSS3 的 Ruby 模組,請參閱 CSS3 Ruby Module  的內容介紹。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s