模板:圖書排版/doc
該模板用於書籍內容頁(如「傷寒論/章節」頁面)的正文排版,本身不輸出任何可見內容,只通過 TemplateStyles 引入 Template:圖書排版/styles.css。
用法
在頁面頂部引用:
{{图书排版}}
樣式只作用於正文段落與標題:
- 段落
<p>:字號、行高、字距、首行縮進、兩端對齊、斷行規則 - 標題
<h1>–<h6>:字號階梯、行高、字距、字重 <ruby>/<rt>:行間注注音
表格、列表、鏈接、引用、代碼塊、mark/q/sup/sub 等元素不受影響——導航框、目錄表、信息框的版式不會被改動。
默認排版效果
字體分派:中文 / 西文 / 標點
樣式用兩個 @font-face 配 unicode-range,把不同碼位分給不同字體:
| 字符範圍 | 實際字體 | 說明 |
|---|---|---|
| 拉丁字母、數字(ASCII) | Georgia 等西文字體 | 保留原有西文觀感 |
| 漢字、假名等 CJK | Noto Serif SC → Source Han Serif SC → Songti SC → SimSun → PingFang SC Regular → … | 宋體類優先(思源宋體 → macOS 宋體 → Windows 宋體),苹方、雅黑等黑體僅作最後兜底;可用名稱因系統而異 —— Windows 上安裝的苹方其註冊名為 PingFang SC Regular,寫成家族名 PingFang SC 或 macOS 的 PingFangSC-Regular 都不會匹配。(local() 只認字體全名 / PostScript 名)
|
| 中文標點(引號、破折號、頓號、書名號等) | Noto Serif SC → Source Han Serif SC → Songti SC → SimSun(宋體類) | 標點占滿一個全角字身,兩側留白正常 |
為什麼標點要單獨處理:全角引號 “ ” 的碼位是 U+201C / U+201D,Georgia、苹方、微軟雅黑都含這兩個字形,且做成西文風格的窄引號——此前因此出現「引號與後一個字貼在一起」。現在標點固定交給宋體類全角字體,任何設備上都不會再貼字。
字號階梯
| 元素 | 字號 | 行高 |
|---|---|---|
<h1> |
32px | 48px |
<h2> |
28px | 36px |
<h3> |
24px | 36px |
<h4> |
20px | 24px |
<h5> |
18px | 24px |
<h6> |
16px | 24px |
正文 <p> |
17px | 繼承皮膚(約 1.5–1.6) |
段落與對齊
- 字距
.02em(標題 h1–h3 為.05em) - 首行縮進
2em - 兩端對齊
text-align: justify - 行高:正文不固定,繼承皮膚默認(Vector 2022 的
--line-height-content,約 1.5–1.6);標題行高固定為 48/36/36/24/24/24px - 非中文段落自動左對齊、取消縮進
- 長串西文自動斷行(
overflow-wrap/hyphens) - 相鄰標題自動收緊間距(
h1+h2、h2+h3… 上邊距 12px)
實時效果(本頁即為演示):
刻《仲景全書》序
歲乙未,吾邑疫癘大作,予家臧獲率六七就枕席。予曰:「吾聞是書於家大夫之日久矣,而書肆間絕不可得。」君曰:「予誠有之。」Latin check: Georgia ABC abc 0123 — 「quoted latin」。
可選版式(需加 class)
下列版式默認不生效,需要把內容包進對應 class 的容器里;可疊加使用。
古籍體 heti--ancient
標題居中、正文宋體,適合序跋。
<div class="heti heti--ancient"> (正文) </div>
刻《仲景全書》序 予曰:「吾聞是書於家大夫之日久矣,而書肆間絕不可得。」君曰:「予誠有之。」
詩詞體 heti--poetry
正文居中、不縮進,適合詩詞、銘文。
<div class="heti heti--poetry"> <p>床前明月光,疑是地上霜。</p> </div>
靜夜思
床前明月光,疑是地上霜。
舉頭望明月,低頭思故鄉。
豎排 heti--vertical
自上而下、右起排列,適合牌記、題簽。
<div class="heti heti--vertical"> <p>岁乙未,吾邑疫疠大作。</p> </div>
歲乙未,吾邑疫癘大作,予家臧獲率六七就枕席。
行間注 heti--annotation
行距放大到 2.25,便於行間標註;<em> 自動變成着重號(字下點)。
<div class="heti heti--annotation"> <p>…正文<em>需着重的字</em>…</p> </div>
予讀而知其為成無己所解之書也。然而魚亥不可正,句讀不可離矣。
多欄 heti--columns-2 / heti--columns-3
把正文排成多欄;也可用 heti--columns-16em 到 heti--columns-48em 指定欄寬。
<div class="heti heti--columns-2"> <p>(较长的正文)</p> </div>
予曰:「吾聞是書於家大夫之日久矣,而書肆間絕不可得。」君曰:「予誠有之。」吾吳和緩明卿沈君南昉在海虞,藉其力而起死亡殆徧,予家得大造於沈君矣。不知沈君操何朮而若斯之神,因詢之。
字體族切換
| class | 中文字體 |
|---|---|
heti--hei(默認) |
黑體(PingFang SC / Microsoft YaHei UI) |
heti--song / heti--serif / heti--classic |
宋體(Songti SC / SimSun) |
heti--kai |
楷體(Kaiti SC / STKaiti / KaiTi) |
宋體示例:予曰:「吾聞是書於家大夫之日久矣。」
楷體示例:予曰:「吾聞是書於家大夫之日久矣。」
輔助類速查
| class | 用途 |
|---|---|
heti-meta |
落款、副題(塊級、不縮進) |
heti-verse |
詩句(居中、不縮進) |
heti-large / heti-x-large / heti-small / heti-x-small |
字號微調 18px / 20px / 14px / 12px |
heti-fn |
文末注釋區 |
heti-hang |
懸掛縮進 |
heti-em |
着重號(字下點) |
heti-ruby--inline |
行內 ruby 緊湊排版 |
heti-list-latin / heti-list-han |
列表編號:拉丁字母 / 漢字(一二三…) |
行間注(注音 / 訓詁)
styles.css 自 2026-09 起支持 HTML ruby 行間注,注文顯示在字上方小字,無需任何擴展,在 wikitext 里直接寫:
<ruby>被注字<rt>pīn yīn</rt></ruby>
上方注文默認 0.55em 小字;若整段都要注音,建議配合上面的行間注版式(行距 2.25)使用。
示例:注音與行間注渲染效果如下
吾邑疫癘大作,予家臧獲率六七就枕席。
作用範圍與限制
- 只影響
p、h1–h6、ruby;其餘標籤一律不碰。 - 段落規則會命中模板輸出里的 p(少數模板會生成段落),影響很小但存在。
- 紙色背景
#f6f4f0需要選中內容容器自身,TemplateStyles 無法做到,需站點級 CSS。 - 未引入 heti 的 JavaScript 增強(中西文自動間距、標點擠壓):需要改站點 JS,且其擠壓方向與「標點要有留白」相反。
注意事項
- 一個
<ruby>只注一音,要注多義請按需拆開顯示。 - 行間注版式僅用於頁面正文內容;本站閱讀器(Gadget BookVerticalReader)是獨立的書籍閱讀器,與本模板的行間注功能無關。
- 可選版式的 class 名沿用
heti--*命名(來自中文排版方案 heti),但本站不依賴任何 heti 文件,全部樣式都在 Template:圖書排版/styles.css 內。