漢字標準格式1.2

同印刷品般的漢字網頁排版框架

前言

現今的瀏覽器預設樣式都是以顯示西文為主，忽略了其排版方式與漢字間的差異。加上出版者、網頁設計師和文章作者對此技術的妥協，導致漢字「螢幕文章」與正式文章書寫規則有愈來愈大的出入。

本CSS框架以「重設」為概念，套用合適於漢字文章及排版格式的樣式至各種字級語意元素（text-level semantics）、內容群組元素（grouping content）、區塊元素（sections）中，藉此降低正式文書與網頁格式的差異，設計師亦無需再為此類元素設置預設樣式，增強一致性。目前可完整支援台港繁體、大陸簡體、日文網頁的需求。

代碼解說

全代碼共分三大部，其一、目前已被廣泛使用的CSS reset；二、專為漢字加入（或取消）的樣式；及三、其他。

目前已被廣泛使用的CSS reset

目前已被廣泛使用的CSS reset採用Nicolas Gallagher的「normalize.css」加以修改而成。

專為漢字加入（或取消）的樣式

專為漢字加入（或取消）的樣式共有下列十項：

  1. 底線
    1. 連結、插入等元素
    2. 相鄰註記元素
  2. 文章內段落
    1. 詩篇
  3. 書名號
  4. 著重號
  5. 文字的變音
  6. 文章內重點
  7. 行內引言
  8. 文章內的區塊引用
  9. 漢字註音
  10. 代碼元素裡的漢字

底線

連結<a>、插入<ins>等元素

連結、插入等元素。為不影響「專名號」的使用，凡語系設定為「中文」的網頁（<html lang="zh-TW/HK/CN">），皆取消了連結<a>、插入<ins>等元素的預設下劃線，並以其他樣式取代。

相鄰註記元素

在兩個相鄰註記元素<u>（舊稱底線元素）之間，毋需以空白相隔即可得到（視覺上的）間隔效果。例如在不同卻相鄰的兩專名間，專名號不相連[1]。

英國倫敦是個世上少有、數一數二，且融合古典及現代的大城市。

上方的例子由以下代碼實現：

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

提示：當前版本仍支援舊版的專名號用法（不建議）。

文章內段落

將<article>文章元素中的<p>段落調整至兩倍行高（2em），且每段開頭縮排兩字元。

詩篇

一段落屬於「詩篇」時，各行皆縮排兩字元。

需在article、blockquote或p元素中手動套用類別.poem-like（使用前二者將作用於其內所有段落p子元素），再以<br>標籤換行。例如：

<blockquote class="poem-like" cite="http://zh.wikisource.org/wiki/長恨歌">
    <p>金屋妝成嬌侍夜，玉樓宴罷醉和春。<br>
    姊妹弟兄皆列土，可憐光彩生門戶。</p>
</blockquote>

書名號

書名號及篇名號為大陸地區、台灣的標點符號標準（台灣教育部稱作乙式）[2]，用以突顯文章內的著作名稱，不致混淆。範例如下：

最近在看張愛玲的小說傾城之戀。閱讀時搭配諾拉・瓊絲收錄於Come Away with Me專輯的Don't Know Why，隨著同故事情節波動的音符起舞，真是一大享受！

朱自清的背影是篇跨時代的鉅作啊。在中學時期讀過的課文，我到現在竟仍能倒背如流。

詳細使用說明：

<cite>書名、電影名、電視劇名、專輯名等</cite>
<cite class="piece">文章篇名、歌名、劇集名等</cite>

<cite class="no-cite-mark">不使用書名號，如遇國際標準書號（ISBN）時</cite>

<foo class="no-cite-mark">
    <cite>特定範圍內不使用書名號</cite>
</foo>

支援繁、簡中文、日語[3]、英文[3]等語言的書名號用法。套用語言屬性​lang="zh/​ja/​en"​即可。

著重號

著重號用以取代<em>強調元素預設的斜體樣式。可用於一段文字中需要特別強調之處[4]。需要注意的是「『強調』並不等於『重點』」，重點請用​<strong>​元素表示——而閱讀時容易誤會、判斷錯誤或需要加深印象、特意突出的字詞較適合使用此元素。[5]

「數大」便是美，碧綠的山坡前幾千隻綿羊，挨成一片的雪絨，是美；一天的繁星，千萬隻閃亮的眼神，從無極的藍空中下窺大地，是美；泰山頂上的雲海，巨萬的雲峰在晨光裏靜定著，是美；大海萬頃的波浪，戴著各式的白帽，在日光裏動盪著、起落著，是美；愛爾蘭附近的那個「羽毛島」上棲著幾千萬的飛禽，夕陽西沉時只見一個「羽化」的大空，只是萬鳥齊鳴的大聲，是美；⋯⋯數大便是美。數大了似乎按照著一種自然律，自然的會有一種特別的排列，一種特別的節奏，一種特殊的式樣，激動我們審美的本能，激發我們審美的情緒。

徐志摩徐志摩日記西湖記・「數大」便是美

標點符號及所有類型的空白預設不使用著重號。若<em>中帶有西文（如英文）字符，則：

「不只是Little People。還有空氣蛹、Mother和Daughter、兩個月亮，在這個世界都是實際存在的。」青豆說。

村上春樹IQ84

瀏覽器需支援JavaScript方能正確顯示，否則將以如下的「虛底線」樣式代替：

隔天她穿上最炫的洋裝，是她母親特別為開學日縫製的衣服。她離開家裡去上學，心裡不斷感謝上帝暑假終於結束。但是，小男生卻沒有出現。熬過了一個星期她才從同學口中得知，原來他已經搬到外地了。「他搬去很遠很遠的地方，」有人說。

保羅・科爾賀愛的十一分鐘

文字的變音

文字的變音（示例用拼音：wénzì de biànyīn）是以「差別於原行間的字體」取代<i>變音元素預設的斜體樣式[6]。在中文（或漢字）裡可用於語氣的轉換，例如：外語的夾雜、嘲諷或興奮處音調的改變，一個不需要強調亦非重點的「想法」。

在一般情況下，變音元素的字體順序為「西文襯線斜體（Times New Roman Italic）、仿宋體、楷體」；而在以仿宋體（或楷體）為主要字體的​article blockquote​文章內區塊引用元素中，則使用「西文非襯線斜體（Helvetica Oblique、Arial Italic）、黑體」。

範例如下：

「⋯⋯我們知道的並不多。我們只知道在很遠的地方，越過許多山脈和河流，有一群矮小的生物居住在洞穴或是沙丘中。但沒有任何關於他們的傳說，因為據說他們游手好閒，躲避人類的目光，可以在一瞬間消失，而且他們還可以將嗓音偽裝成飛鳥的啁啾聲。不過，看來並不是這樣。」

J. R. R.・托爾金魔戒之王・雙城奇謀

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

文章內重點

文章內重點元素使用「黑體（sans-serif）」無襯線字集，並搭配字體重量「600」（粗體）。

注意：只適用於文章<article>內的<strong>元素。

行內引言

以繁體中文之引號取代<q>行內引言元素預設的‘西文“引號”’，適用於繁體中文及日文<html lang="zh/zh-TW/HK/hant/ja">網頁。

文章內的區塊引用

article blockquote文章內的區塊引用元素向內縮排兩個漢字字寬（2em），並使用「仿宋體、楷體」等手寫體（cursive）以區別。

漢字註音

漢字hànzì註音zhùyīn使用<ruby>元素，適用於語言教科書或為難字標註音標。Webkit已「部分」支援此元素。

春光好

下方以「台灣閩南語羅馬字拼音方案」示例。

朱約信歡迎來唱我的歌

國語注音符號：

那美麗的高塔竟在瞬間化ㄏㄨㄚˋ作ㄗㄨㄛˋ齏ㄐㄧ粉ㄈㄣˇ，曾經令人齰ㄗㄜˊ舌ㄕㄜˊ的鬼斧神工最後只能長存在人們心中。

使用羅馬拼音時，請在ruby標籤上套用類別romaization或pinyin。

<ruby class="romanization/pinyin">
    一彎<rt>yìwān</rt>
    流水<rt>liúshuĭ</rt>
</ruby>

請注意：類別pinyin僅代表用於拼寫國語（即普通話）漢字的「漢語拼音」。僅管最終所得的顯示結果相同，為了正確地表達語意，其餘形式的羅馬拼音請使用類別romanization。

注音符號則套用mps或zhuyin分類。

<ruby class="mps/zhuyin">
    齰<rt>ㄗㄜˊ</rt>
    舌<rt>ㄕㄜˊ</rt>
</ruby>

代碼元素裡的漢字

變更<code>代碼元素的字體順序（"monospace, sans-serif"），使瀏覽器能以其預設的「無襯線字集」（sans-serif）顯示漢字，便於閱讀。

其他

其他部分共包含二小節：

  1. IE的支援
  2. Modernizr的補充
    1. 系統及瀏覽器的偵測
    2. 漢字標準格式所用的CSS3模組屬性
    3. 字體圓滑技術

IE的支援

使用JavaScript令IE8（及以下版本）支援HTML5元素。

Modernizr的補充

Modernizr的補充係CSS框架「Modernizr」概念的延伸（但不包含Modernizr提供的內容）。使用JavaScript偵測系統、瀏覽器版本及特殊功能的支援與否，並在<html>上加入相應的類別，方便以CSS編寫相容於不同環境或支援條件的代碼。

系統及瀏覽器的偵測

自動偵測使用者的系統、瀏覽器，您可用下列CSS類別設定不同平台或瀏覽器的樣式。

排版引擎
瀏覽器		 Gecko
Mozilla Firefox		 Internet
Explorer		 Opera Webkit
Google Chrome或Safari		 末知
類別 mozilla msie opera webkit browser-unknown
特殊版本類別 版本 ie-版本號
IE7以下 msie-old
作業系統 Linux Mac OS Unix Windows 末知
類別 linux mac unix win os-unknown

使用範例：

.ie-6 #new-tech {  display: none;  }

.mac.webkit dl dt {
    font: 600 1em/1.5em Helvetica, "Hiragino Kaku Gothic Pro", "Hiragino Sans GB", sans-serif;
    -webkit-text-shadow: pink 1px 3px;
}
漢字標準格式所用的CSS3模組屬性

漢字標準格式所用的CSS3模組屬性包括著重號text-emphasis、引號quotes、文字方向writing-mode、欄位寛度column-width。以下為使用範例：

.textemphasis [id^=lyrics-] .singing_loudlier {
    text-emphasis:              dot;
        -moz-text-emphasis:     dot;
        -o-text-emphasis:       dot;
        -webkit-text-emphasis:  dot;
}

.no-textemphasis [id^=lyrics-] .singing_loudlier {
    color: red;
    font-weight: bolder;
}
.quotes .stands_out {  quotes: "~~" "~~" "*" "*";  }
.quotes .stands_out:before {  content: open-quote;  }
.quotes .stands_out:after {  content: close-quote;  }

.no-quotes .stands_out:before {  content: "~~";  }
.no-quotes .stands_out:after {  content: "~~";  }
字體圓滑技術

自動偵測系統是否支援字體圓滑技術（如​Windows​上的​ClearType）。可用下列的CSS選擇器設定不同支援情況時的字體或樣式。

.win.hasFontSmoothing-true {  font-family: "微軟正黑體", sans-serif;  }

.win.hasFontSmoothing-false,
.win.hasFontSmoothing-unknown {  font-family: PMingLiU, serif;  }

詳細設定方式可參考由othree所撰寫的偵測Clear Type及預設字型樣式二文。

下載

您可以直接下載最新版本，或前往GitHub瞭解更多資訊。

設置步驟

  1. 解壓縮後開啟檔案「han.min.css」，更改「13及14行」的.eot與.ttf注音符號字體路徑。

    請注意：此處使用的注音符號字體係中華民國教育部研發的「教育部標準楷書」，並採創用CC 「姓名標示—禁止改作—3.0台灣版」授權。若您有著作權的疑慮，或是沒有使用注音符號的需求，請直接刪除上述提及之二行代碼及檔案。

  2. 在欲套用此CSS重設框架的網頁<head>內、所有樣式宣告之前導入下列外連樣式表：

    <link rel="stylesheet" media="all" href="./han.min.css">

    同上，於<head>中加入以下JavaScript語法：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js></script>
<script src="./han.min.js"></script>

    注意：請不要將上述JavaScript語法放於網頁底部。否則舊版IE瀏覽器將無法正確顯示HTML5元素。

  3. 留意<html>標籤上是否設置了正確的語言屬性lang。此框架多數功能僅支援中文zh-*及日語ja。

  4. 在瀏覽器中開啓已套用本框架的網頁測試是否正確運作。

版本資訊

version 1.2
採用normalize.css重設瀏覽器預設樣式；
移除文章內段落的前後間距。
version 1.1.1
新增Modernizr包括文字方向writing-mode、欄目寛度column-width等CSS類別。
version 1.1
加入了文章內重點article strong元素的樣式；
修正著重號的表示方式；
修正<ruby>的顯示問題；
停止使用「華康仿宋體」；
加入IE「版本」偵測類別；
開放了可於外部呼叫的JS函數（請參考檔案han.js）。

適用環境

經過測試，本CSS重設框架可在下列瀏覽器及（含）以上版本中正常運作：

參考文獻

  1. ^維基百科・專名號（網頁）。
  2. ^維基百科・書名號（網頁）。
  3. ^ 3.1 3.2 維基百科・書名號#其他語言（網頁）。
  4. ^維基百科・著重號（網頁）。
  5. ^ Ian 'Hixie' Hickson, et al. 4.6 Text-level semantics — HTML5#The em element (webpage).
  6. ^ Edward G.J. Lee。中英文字體的配合（網頁），2005年。

聯繫作者

歡迎使用電子郵件與我聯繫，或在Twitter上關注我。