樣式標準化

概述

「漢字標準格式」使用由Nicolas Gallagher及Jonathan Neal主導開發的Normalize.css來增進各瀏覽器間樣式的一致性，並以此框架為基礎，延伸了專為各漢字語言及地區開發的本地樣式標準化模組。下文將詳細介紹其功能。

Normalize.css

參考其作者編寫的說明文件（英），及Oli Studholme對一般CSS reset與Normalize.css的比較（英）來瞭解更多資訊。

本地樣式標準化

「漢字標準格式」內建本地化（locale）的樣式標準化模組。這個模組在Normalize.css的基礎上，提供了漢字地區的本地化樣式，根據元素語言屬性的語言、文字變體或地區等元信息，配適相應而合理的樣式。

<* lang="[巨集]-[語言]-[文字及變體]-[地區]">

全域字體樣式

各種漢字字體的行高不一，且漢字需要較西文鬆散的行距空間，故全域行高預設使用1.3em以求一致，並在瀏覽器及作業系統支援的前提下，啓用亞像素文字渲染。

縮進

多數包含縮進的元素皆改用二個漢字（2em）的寬度取代UA樣式中預設的縮進寬度（40px），以求文字的高度對齊。

有序與無序清單

有序清單ol及無序清單ul元素的左間隙（padding-left）縮進。

圖表與區塊引用元素

圖表figure、區塊引用blockquote等元素的左右邊界（margin）縮進。

<figure>
  <blockquote>
    <p>唯有知識才能解決問題。
  </blockquote>
  <figcaption>面對記者的採訪，吳寶春如是說，話語更顯其從容自若的氣質。</figcaption>
</figure>

聯絡資訊元素

聯絡資訊address元素去除了西文常見的地址意大利體樣式。

<p>想瞭解更多關於我們的資訊，可以前往，

<address>
香港尖沙咀彌敦道105號<br>
九龍清真寺
</address>

格式預處理元素

格式預處理pre元素跟隨其原始代碼之格式，長文文本寬度大於其容器時仍不斷行，並啓用橫向捲軸。

void !function(a,b){var c=b.documentElement,d,e;function D(a,d) {d=a*d/100+b.getElementById("main").textContent;return d;}return new D(20,5);}(window||this,window.document);

超連結元素

超連結a元素預設不使用底線。

強調與重點

藉由差異於父文本的文字樣式，可以突顯警示或重要性，達成強調或重點標示的需求，着重號及粗體皆為此目的的排版手段之一。

強調

隷屬中文及日文語言屬性的強調em元素預設使用着重號；屬中、日文非漢字（如羅馬拼音）及其他語言的強調元素仍使用意大利體（斜體）。

着重號遇標點時不顯示（需配合JS腳本）。中文着重號位字元下方，使用「●」（U+25CF）；日文着重號則位上方，使用「﹅」（U+FE45）。

<p>至今<em>關於古希臘遊吟詩人Ὅμηρος的資料很少</em>，所以對其生平有很多說法，但都無確鑿證據。

<p [lang="ja"]>アンネリース・マリー・フランク（ドイツ語：Annelies Marie Frank、Annieアンネの日記』の著者として知られるユダヤ系ドイツ人の少女である。</em>

<p>「天下為公」是<em lang="yue-Latn">Sun Yat-sen</em>先生有名的思想理論之一。

更詳盡的範例及測試，請見程式測試頁·強調元素（着重號）。

重點

重點strong元素以粗於父文本的字重來凸顯其重要性。

<p>希望我們每一個人，都可以<strong>為自己的人生負責、找尋並達成自己設定的目標，</strong>才不枉為人。

其他粗體文本

術語dfn及關鍵字b元素的樣式同重點strong元素，以粗於父文本的字重來凸顯其重要性。術語dfn元素僅在中文、日文環境中顯示為粗體，在其他語言中則跟隨瀏覽器UA樣式，顯示為意大利體（斜體）。

<p>
  <dfn>火龍果</dfn>又稱紅龍果、龍珠果，是仙人掌科三角柱屬（<i lang="la">Hylocereus</i>）或蛇鞭柱屬（<i lang="la">Selenicereus</i>）植物果實，呈橢圓形，直徑約10公分，外觀為紅色或黃色，有綠色圓角三角形的葉狀體，白色、紅色或黃色果肉，具有黑色種子的水果。

<p lang="en">
  A <dfn>pitaya</dfn> or <dfn>pitahaya</dfn> is the fruit of several cactus species. ‘Pitaya’ usually refers to fruit of the genus <i lang="la">Selenicereus</i>, while ‘Pitahaya’ always refers to fruit of the genus <i lang="la">Hylocereus</i>.

來源與引用元素

樣式標準化模組移除了隷屬中文及日文語言屬性下、來源cite元素的意大利體（斜體）樣式；引用q元素則依語言及地區屬性採用相應的內外引號，以突顯引用文本的結構。

來源元素

<p>
  <cite>《漢語語音學》</cite>探討了諸多同「漢語語音學」相關的學術議題，值得喜歡語言的同好們一讀。

<p lang='en'>
  <cite>Webster Dictionary</cite> defines ‘marriage’ as…

引用元素

<p [lang='zh-Hant']>
  那個清晨漫步在<u class="pn">高雄</u><u class="pn">澄清湖</u>湖畔，忽見<u class="pn">余光中</u>從旁擦身而過，對我吟詩：<q>顯赫的是太陽的金輦／絢爛的是雲旗和霞旌／東經，西經，勾勒的行程／南緯，北緯，架設的驛站／等待絡繹繽紛的隨扈／簇擁著春天的主人……</q>

<p [lang='zh-Hans']>
  陈丹青曾在其作品<cite>《纽约琐记》</cite>中这么评论，<q>文艺复兴的重头作品不必在美国找。全美大概仅得一枚芬奇肖像，供在华盛顿国家美术馆，用丝绒绳子拦着。</q>

<p lang='en'>
  Albert Einstein once said: <q>Try not to become a man of success, but rather try to become a man of value.</q>

<p lang='en-GB'>
  <q>Friendship is certainly the finest balm for the pangs of disappointed love,</q> Jane Austen always speaks to my heart.

計算機相關文本

計算機相關文本——如代碼code、輸入鍵kbd、計算機輸出示例samp及格式預處理pre等元素——使用「等寬基型、無襯線基型」的字體回退順序，漢字得以用較清晰的系統預設黑體顯示。

<p>這是一段包含了<code>const CODE = "代碼"</code>的段落<code>p</code>元素。

<p>‘<kbd>command</kbd> + <kbd>P</kbd> makes the picture walk, walk, walk,’ sang Phil.

<p>火龍果電腦居然跟我說：<samp>不能在brainstrom接口上插入芝士</samp>。我壓根兒看不懂這是什麼意思。

變音文字與變數元素

變音文字i及變數var元素，使用「手寫體基型、襯線基型」的字體回退順序。

<p>此時我靈機一動，<i>如果我們在microwave內加上一層散熱片會如何？</i>也許幫助我們脫離這個窘境，說不準還能一舉拿下發明比賽的名次呢！

船名

西文排版中，船名多使用意大利體表示。

<p lang="en"><i class="ship">Tsimtsum</i> had been sunk for weeks by then.

文字裝飾線

二大使用漢字作為書寫系統的語言——中文及日文——皆不使用空格分詞，因而在當前的網頁環境下，難以明確標示或辨明二相鄰的同種裝飾線文字。樣式標準化模組內建了樣式及腳本的「文字裝飾線」雙重修正，毋需插入空白即可得到視覺上的間隔效果，同時避免了樣式性的標記。

註記與增訂元素

預設的UA樣式中，註記u與增訂ins元素皆使用「底線」呈現，由於該底線會附着於漢字下方，影響易讀性，我們使用「底部邊框」（border-bottom）取代「裝飾底線」（text-decoration）。二個相鄰的註記或增訂元素效果如下，

<p><u class="pn">英國</u><!--注意：中間毋需插入任何空白--><u class="pn">倫敦</u>是個世上少有、數一數二，且融合古典及現代的大城市。

<p><u class="pn">歐洲大陸</u>眾多的<u class="pn">西</u>文當中，我最喜歡的語言是隷屬於<u class="pn">羅曼</u>語族的<u class="pn">西</u>文。

<p>「先看完電影，」他說，「<u class="pn">阿呆</u>舉辦的派對我們晚點<u class="typo">在</u>去。」

訛訊與刪訂元素

二個相鄰的訛訊或刪訂元素效果如下，

<p>太陽系有<s>九大行星</s><s>入</s>八大行星。

<p>立法院常設有<del datetime="1992-0-0">一六一</del><del datetime="1998-0-0">二二五</del><ins datetime="1998-0-0">一一三</ins>位議員。

更詳盡的範例及測試，請見程式測試頁·文字裝飾線。

行間注元素

「行間注」包含漢字標音（亦作漢字注音）及雙語對照二大功能，前者更可細分為「羅馬拼音」及「注音符號」。搭配腳本的樣式標準化模組完整支援行間注的所有功能，按需求加入相應的類別屬性（class）即可。

基本行間注

基本行間注的形式係「注文」位「基文」上方居中，適用雙語對照、羅馬拼音等。

<ruby>萬維網<rt>World Wide Web</rt></ruby>

<p>
  <ruby>
    你<rt>nĭ</rt>瞧<rt>qiáo</rt>！<rt></rt>
    一彎<rt>yìwān</rt>流水<rt>liúshuĭ</rt>架<rt>jià</rt>小橋<rt>xiăoqiáo</rt>
    …
  </ruby>
</p>

注音行間注

注音行間注的「注文」位「單個基文漢字」的右側，用於標注漢字發音。現支援國語（普通話）注音符號及台灣方言音符號。

與各種字級語意元素並用，

直接於ruby元素標籤上，加入zhuyin或mps類別即可顯示注音行間注，

<ruby class="zhuyin">
  柴<rt>ㄔㄞˊ</rt>
  米<rt>ㄇㄧ˅</rt>
  油<rt>ㄧㄡˊ</rt>
  鹽<rt>ㄧㄢˊ</rt>
  醬<rt>ㄐㄧㄤˋ</rt>
  醋<rt>ㄘㄨˋ</rt>
  茶<rt>ㄔㄚˊ</rt>
</ruby>

複合式行間注

複合式行間注可為一段基文同時標注雙注文，以更精煉的空間顯示更多資訊。

<ruby class="complex">
  <rb>紐約</rb><rb>市</rb>

  <rtc lang="en">
    <rt rbspan="2">New York City</rt>
  </rtc>

  <rtc lang="cmn-Latn">
    <rt>Niǔyuē</rt>
    <rt>Shì</rt>
  </rtc>
</ruby>

如上方代碼所示，使用複合式行間注需為ruby元素標籤套用類別complex，並依「ruby text container」語法格式書寫。

拼音－注音共同標注

拼音－注音共同標注屬於複合式行間注的特殊情況，可同時為一段文本標注拼音與注音。

我有一个朋友，伊真有志氣， guá ū tsi̍t ê pîng-iú i tsin-ū tsì-khì ㆣㄨㄚˋ ㄨ˫ ㄐㄧㆵ̍ ㆤˊ ㄅㄧㄥˊ ㄧㄨˋ ㄧ ㄐㄧㄣ ㄨ˫ ㄐㄧ˪ ㄎㄧ˪
自細漢就立志講欲寫歌、唱歌趁錢， tsū sè-hàn tō li̍p-tsì kóng beh siá-kua tshiùnn-kua thàn-tsînn ㄗㄨ˫ ㄙㆤ˪ ㄏㄢ˪ ㄉㄜ˫ ㄌㄧㆴ̍ ㄐㄧ˪ ㄍㆲˋ ㆠㆤㆷ ㄒㄧㄚˋ ㄍㄨㄚ ㄑㄧㆫ˪ ㄍㄨㄚ ㄊㄢ˪ ㄐㆪˊ
伊逐工攏咧痟電影，聽阿啄仔的CD。 i ta̍k-kang lóng-teh siáu tiān-iánn thiann a-tok-á ê ㄧ ㄉㄚㆶ̍ ㄍㄤ ㄌㆲˋ ㄉㆤㆷ ㄒㄧㄠˋ ㄉㄧㄢ˫ ㄧㆩˋ ㄊㄧㆩ ㄚ ㄉㆦㆶ ㄚˋ ㆤˊ

<ruby lang="zh-nan-Hant" class="rightangle">
  <rb>我</rb>
  <rb>有</rb>
  <rb>一</rb><rb>个</rb>
  <rb>朋</rb><rb>友</rb>，

  <rtc class="romanization">
    <rt>guá</rt>
    <rt>ū</rt>
    <rt rbspan="2">tsi̍t-ê</rt>
    <rt rbspan="2">pîng-iú</rt>
  </rtc>

  <rtc class="zhuyin">
    <rt>ㆣㄨㄚˋ</rt>
    <rt>ㄨ˫</rt>
    <rt>ㄐㄧㆵ̍</rt>
    <rt>ㆤˊ</rt>
    <rt>ㄅㄧㄥˊ</rt>
    <rt>ㄧㄨˋ</rt>
  </rtc>
</ruby>

如上方代碼所示，使用「拼音－注音共同標注」式行間注時，需為ruby元素標籤套用類別complex或rightangle，並依「ruby text container」語法格式書寫。最後，在rtc元素標籤上，加入相應的拼音romanization或注音zhuyin類別。

示例：注音及雙行拼音共同標注

<ruby class="complex">
  <rb>一</rb>
  <rb>人</rb>
  <rb>煩</rb>
  <rb>惱</rb>
  <rb>一</rb>
  <rb>樣</rb>，
  <rb>無</rb>
  <rb>人</rb>
  <rb>煩</rb>
  <rb>惱</rb>
  <rb>親</rb>
  <rb>像</rb>。

  <rtc class="zhuyin">
    <rt>ㄐㄧㆵ͘</rt>
    <rt>ㄌㄤˊ</rt>
    <rt>ㄏㄨㄢˊ</rt>
    <rt>ㄌㄜˋ</rt>
    <rt>ㄐㄧㆵ͘</rt>
    <rt>ㄧㆫ˫</rt>
    <rt>ㆠㄜˊ</rt>
    <rt>ㄌㄤˊ</rt>
    <rt>ㄏㄨㄢˊ</rt>
    <rt>ㄌㄜˋ</rt>
    <rt>ㄑㄧㄣ</rt>
    <rt>ㄑㄧㆫ˫</rt>
  </rtc>
  <rtc class="romanization">
    <rt>Tsi̍t</rt>
    <rt>lâng</rt>
    <rt rbspan="2">hoân‑ló</rt>
    <rt>chi̍t</rt>
    <rt>iūⁿ</rt>
    <rt rbspan="2">bô‑lâng</rt>
    <rt rbspan="2">hoân‑ló</rt>
    <rt rbspan="2">chhin‑chhiūⁿ</rt>
  </rtc>
  <rtc class="romanization">
    <rt>Tsi̍t</rt>
    <rt>lâng</rt>
    <rt rbspan="2">huân-ló</rt>
    <rt>tsi̍t</rt>
    <rt>iūnn</rt>
    <rt rbspan="2">bô-lâng</rt>
    <rt rbspan="2">huân-ló</rt>
    <rt rbspan="2">tshin-tshiūnn</rt>
  </rtc>
</ruby>

更詳盡的範例及測試，請見程式測試頁·行間注元素。