模板:圖書排版/doc

WikiBot​(留言 | 貢獻)2026年9月14日 (一) 15:14的修訂 (重修文档:字体分派、字号阶梯、段落规格说明 + 古籍·诗词·竖排·行间注·多栏·字体族实时演示 + 辅助类速查)

該模板用於**書籍內容頁**(如「傷寒論/章節」頁面)的正文排版,本身不輸出任何可見內容,只通過 TemplateStyles 引入 Template:圖書排版/styles.css。

用法

在頁面頂部引用:

{{图书排版}}

樣式**只作用於正文段落與標題**:

  • 段落 <p>:字號、行高、字距、首行縮進、兩端對齊、斷行規則
  • 標題 <h1>–<h6>:字號階梯、行高、字距、字重
  • <ruby> / <rt>:行間注注音

表格、列表、鏈接、引用、代碼塊、mark/q/sup/sub 等元素**不受影響**——導航框、目錄表、信息框的版式不會被改動。

默認排版效果

字體分派:中文 / 西文 / 標點

樣式用兩個 @font-face 配 unicode-range,把不同碼位分給不同字體:

字符範圍 實際字體 說明
拉丁字母、數字(ASCII) Georgia 等西文字體 保留原有西文觀感
漢字、假名等 CJK PingFang SC → Hiragino Sans GB → Noto Serif SC → Microsoft YaHei UI → … 沿用站點原有優先級,漢字外觀不變
中文標點(引號、破折號、頓號、書名號等) Noto Serif SC → Source Han Serif SC → Songti SC → SimSun(宋體類) 標點占滿一個全角字身,兩側留白正常

為什麼標點要單獨處理:全角引號 “ ” 的碼位是 U+201C / U+201D,Georgia、苹方、微軟雅黑都含這兩個字形,且做成**西文風格的窄引號**——此前因此出現「引號與後一個字貼在一起」。現在標點固定交給宋體類全角字體,任何設備上都不會再貼字。

字號階梯

元素 字號 行高
<h1> 32px 48px
<h2> 24px 36px
<h3> 20px 36px
<h4> 18px 24px
<h5> 16px 24px
<h6> 14px 24px
正文 <p> 16px 1.5

段落與對齊

  • 字距 .02em(標題 h1–h3 為 .05em)
  • 首行縮進 2em
  • 兩端對齊 text-align: justify
  • 非中文段落自動左對齊、取消縮進
  • 長串西文自動斷行(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)使用。

示例:注音與行間注渲染效果如下

吾邑疫yì癘大作,予家臧zāng獲率shuài六七就枕席。

作用範圍與限制

  • 只影響 p、h1–h6、ruby;其餘標籤一律不碰。
  • 段落規則會命中**模板輸出里的 p**(少數模板會生成段落),影響很小但存在。
  • 紙色背景 #f6f4f0 需要選中內容容器自身,TemplateStyles 無法做到,需站點級 CSS。
  • 未引入 heti 的 JavaScript 增強(中西文自動間距、標點擠壓):需要改站點 JS,且其擠壓方向與「標點要有留白」相反。

注意事項

  • 一個 <ruby> 只注一音,要注多義請按需拆開顯示。
  • 行間注版式僅用於**頁面正文內容**;本站閱讀器(Gadget BookVerticalReader)是獨立的書籍閱讀器,與本模板的行間注功能無關。
  • 可選版式的 class 名沿用 heti--* 命名(來自中文排版方案 heti),但本站**不依賴任何 heti 文件**,全部樣式都在 Template:圖書排版/styles.css 內。

參見