好孩子的網頁設計，第十一課 (in UTF-8)
Jedi
本次課程投影片：
http://Jedi.org/p4/slide/20060823/#eva
一定要用 Firefox 纔能看，用 IE 會出錯。如果妳沒有 Firefox 或不知道甚麼是
Firefox ，沒關係，底下是本週課程提要：
0. 本次課程所用到的標籤
<bdo> 雙向文字，這是個行內組件
<ruby> 帶有「字旁註 (Ruby Annotation) 」的內容，這是個
行內組件
<rb> 字旁註的「基底文字 (Ruby Base) 」部分
<rt> 字旁註的文字 (Ruby Text) 部分
<rbc> <rb> 的集合
<rtc> <rt> 的集合
<rp> 字旁註的括號部分，祇有不支援 Ruby 的瀏覽器纔會顯
示出來
1. <bdo> 標籤會用到的屬性
1.0. 所有核心屬性（如果忘記甚麼是核心屬性的話，請複習第八課的內容）
1.1. dir="foo" 文字走向，祇會有兩種可能：
dir="ltr" 由左至右 (left-to-right)
dir="rtl" 由右至左 (right-to-left)
例如這樣用：
<bdo dir="rtl">大中至正</bdo>
則顯示出來會變成：
正至中大
2. <ruby> 的基本結構
<ruby>
<rb>莊庭瑞</rb>
<rt>Tyng-Ruey Chuang</rt>
</ruby>
在這個範例中，「Tyng-Ruey Chuang」會以略小的字體，顯示於「莊庭瑞」
的上面
3. <ruby> 的複雜結構
3.1.
<ruby>
<rbc>
<rb>憂</rb>
<rb>鬱</rb>
</rbc>
<rtc>
<rt>ゆう</rt>
<rt>うつ</rt>
</rtc>
</ruby>
在這個範例中，「憂鬱」上面會加上字旁註「ゆううつ」，在日文中這稱
做「振假名」。要注意的是，在此範例中，「ゆう」會對齊「憂」，而
「うつ」則會對齊「鬱」。
請注意，一旦用了 <rbc> ，就一定要用 <rtc> ；反之亦然。
3.2.
<ruby>
<rbc>
<rb>涼宮</rb>
<rb>ハルヒ</rb>
</rbc>
<rtc>
<rt>すずみや</rt>
<rt></rt>
<rtc>
<ruby>
這個範例跟前一個範例很像，但是有一點不同：「涼宮」會有字旁註「す
ずみや」，但是「ハルヒ」不會有字旁註，因為他對應到的 <rt> 沒有內
容。
3.3.
<ruby>
<rbc>
<rb>08</rb>
<rb>23</rb>
<rb>2006</rb>
</rbc>
<rtc>
<rt>Month</rt>
<rt>Day</rt>
<rt>Year</rt>
</rtc>
<rtc>
<rt rbspan="3">Expiration Date</rt>
</rtc>
</ruby>
這個範例比之前的範例又多了些東西。
首先，在這個範例中有兩組 <rtc> ，也就是有兩組字旁註；第一組
<rtc> 的內容 (Month, Day, Year) 會出現在 Ruby Base 的上面，而第
二組 <rtc> 的內容 (Expiration Date) 則會出現在 Ruby Base 的底下。
另外在第二組 <rtc> 中，我們可以看到 <rt> 多用了一個叫 rbspan 的
屬性，這個屬性的用途就是指定要串接多少個 <rb> 的空間──在這個範
例中總共有三個 <rb> ，所以這邊的 rbspan="3" 就會把所有的 rb 的空
間串在一起，因此「Expiration Date」就會對齊整個 Ruby Base
4. 替不支援 <ruby> 的瀏覽器著想
對於完全不支援 <ruby> 的瀏覽器來說，整個 <ruby> 的內容就會被攤開
來顯示，例如前面 2. 的範例，就會變成：
莊庭瑞 Tyng-Ruey Chuang
在語意上，如果我們可以在這種情況下，多加上個括號，會更明確：
莊庭瑞 (Tyng-Ruey Chuang)
我們可以使用 <rp> 來辦到：
<ruby>
<rb>莊庭瑞</rb>
<rp>(</rp><rt>Tyng-Ruey Chuang</rt><rp>)</rp>
</ruby>
有幾點要注意：
1) 在 <rt> 前後，各要有一組 <rp></rp> ，而 <rp> 內則可以任意選擇
要用甚麼東西來當括號
2) <rp> 的內容在正常的 <ruby> 顯示中，是看不到的。使用 <rp> 的目
的是為了處理完全不支援 <ruby> 的瀏覽器
5. 補充資料
關於 Ruby Annotation 的詳細使用方法，請見
http://www.w3.org/TR/2001/REC-ruby-20010531/
6. 本週作業：
繼續修改上次作業，在妳的名字那邊，使用 Ruby 加上漢語拼音或通用拼
音。
完成後，請各位以網頁瀏覽器開啟這個檔案，實際看看妳自己做出來的網
頁會長甚麼樣子，然後這個檔案請在 08/29 前寄給我。
7. 版權宣告：
本講義採 Creative Commons "Attribution NonCommercial Share-Alike 2.5 Taiwan"
授權條款釋出。著作人為 Jedi http://Jedi.org/blog/
Best,
/Jedi/