|
== 用法 ==
在页面'''顶部'''引入模板、在正文'''结束处闭合容器'''（153 个既有页面均已如此）：
在页面顶部引用：
<pre>
<nowiki>{{</nowiki>图书排版<nowiki>}}</nowiki>
（正文……）
<nowiki>{{图书排版/尾}}</nowiki>
</pre>
'''头部与尾部必须成对。''' 头部模板总是输出一个基础容器 <code><div class="tushu-body"></code>（不传参数时也一样，只是不带版式类），闭合靠 <code>{{tl|图书排版/尾}}</code> 或文末手写 <code></div></code>。
* 漏写尾部'''不会报错'''，但容器会自动延伸到页面末尾，把后续章节与页尾导航一并包进版式里。
* 尾部应放在 <code>----</code> 与 <code><references /></code> '''之上'''，使参考资料节留在容器内、页尾导航与分类留在容器外。
样式'''只作用于正文段落与标题'''：
* 段落 <code><p></code>：字号、行高、字距、首行缩进、两端对齐、断行规则
* 标题 <code><h1></code>–<code><h6></code>：字号阶梯、行高、字距、字重
表格、列表、链接、引用、代码块、<code>mark</code>/<code>q</code>/<code>sup</code>/<code>sub</code> 等元素'''不受影响'''——导航框、目录表、信息框的版式不会被改动。
== 默认排版效果 ==
=== 字体分派：中文 / 西文 / 标点 ===
正文字体栈按「西文 → 黑体 → 宋体 → 扩展区」的顺序回退：
样式用两个 <code>@font-face</code> 配 <code>unicode-range</code>，把不同码位分给不同字体：
{| class="wikitable"
! 字符范围 !! 实际字体 !! 说明
|-
| 拉丁字母、数字（ASCII） || GeorgiaVerdana 等/ Arial（黑体栈的西文字体） || 保留原有西文观感
|-
| 汉字、假名等 CJK || '''PingFang SC / Microsoft YaHei'''（黑体栈） → Hiragino Sans GB → SimSun → SimSun-ExtB/G → Jigmo → HanaMin || 黑体优先，屏幕阅读舒适；生僻字自动往后掉到扩展区字体。繁体视图由 <code>:lang(zh-hant)</code> 换成繁体系（苹方 TC / 微軟正黑體）
| 汉字、假名等 CJK || '''Noto Serif SC''' → Source Han Serif SC → Songti SC → SimSun → PingFang SC Regular → … || 宋体类优先（思源宋体 → macOS 宋体 → Windows 宋体），苹方、雅黑等黑体仅作最后兜底；可用名称因系统而异 —— '''Windows 上安装的苹方其注册名为 <code>PingFang SC Regular</code>'''，写成家族名 <code>PingFang SC</code> 或 macOS 的 <code>PingFangSC-Regular</code> 都不会匹配。（<code>local()</code> 只认字体全名 / PostScript 名）
|-
| 标点（<code>，。、：；！？（）“”《》「」</code>） || 跟随正文字体（上两行同源） || 2026-09 起不再单独指定字体；引号字形随各字体而异
| 中文标点（引号、破折号、顿号、书名号等） || Noto Serif SC → Source Han Serif SC → Songti SC → SimSun（宋体类） || 标点占满一个全角字身，两侧留白正常
|}
'''为什么标点要单独处理：'''全角引号 <code>“ ”</code> 的码位是 U+201C / U+201D，Georgia、苹方、微软雅黑都含这两个字形，且做成'''西文风格的窄引号'''——此前因此出现「引号与后一个字贴在一起」。现在标点固定交给宋体类全角字体，任何设备上都不会再贴字。
=== 字号阶梯 ===
! 元素 !! 字号 !! 行高
|-
| <code><h1></code> || 32px<code>2.25rem</code>（36px） || 48px<code>1.4</code>
|-
| <code><h2></code> || 28px<code>1.875rem</code>（30px） || 36px<code>1.4</code>
|-
| <code><h3></code> || 24px<code>1.625rem</code>（26px） || 36px<code>1.4</code>
|-
| <code><h4></code> || 20px<code>1.5rem</code>（24px） || 24px<code>1.4</code>
|-
| <code><h5></code> || 18px<code>1.375rem</code>（22px） || 24px<code>1.4</code>
|-
| <code><h6></code> || 16px<code>1.25rem</code>（20px） || 24px<code>1.4</code>
|-
| 正文 <code><p></code> || 17px<code>1.25rem</code>（20px） || 继承皮肤（约 1.5–1.6）<code>2</code>
|}
'''单位策略'''：'''正文与标题用 <code>rem</code>'''——相对根字号（<code>html { font-size: 100% }</code> = 16px），嵌套时不会叠乘，与 MediaWiki 的 <code>--font-size-medium</code> 做法一致；'''辅助类字号用 <code>em</code>'''——相对所在元素的字号，随环境自动缩放。
=== 段落与对齐 ===
* 字距号 <code>1.02em25rem</code>（标题= h1–h3 为 <code>.05em</code>）20px）
* 段距：不自行声明，用站点默认（<code>.mw-body p</code> 为 <code>0.5em</code> 上 / <code>1em</code> 下）
* 首行缩进 <code>2em</code>
* 两端对齐 <code>text-align: justify</code>
* 行高：正文不固定，继承皮肤默认（Vector 2022 的 <code>--line-height-content2</code>，约 1.5–1.6）；；标题行高固定为 48<code>1.4</36/36/24/24/24pxcode>
* 非中文段落自动左对齐、取消缩进
* 长串西文自动断行（<code>overflow-wrap</code> / <code>hyphens</code>）
下列版式默认不生效；给模板传参数即可打开对应容器（英文别名等效）。
参数可以'''叠加'''——多写几个，类名会拼在同一个容器上，两种版式同时生效：<code><nowiki>{{图书排版|古籍诗词|限宽}}</nowiki></code> → <code><div class="heti--ancientpoetry heti--line-length"></code>。
{| class="wikitable"
! 参数 !! 英文别名 !! 容器类 !! 效果
|-
| <code>行间注</code> || <code>annotation</code> || <code>heti--annotation</code> || 行距 2.25、首行缩进 2em（夹批、行间标注）
|-
| <code>古籍</code> || <code>ancient</code> || <code>heti--ancient</code> || 标题居中、正文宋体（序跋）
|-
| <code>诗词</code> || <code>poetry</code> || <code>heti--poetry</code> || 居中、不缩进
|-
| <code>楷体限宽</code> || <code>kailine-length</code> || <code>heti--kailine-length</code> || 楷体字体栈正文限宽 42em 并居中
|-
| <code>限宽双栏</code> || <code>linecolumns-length2</code> || <code>heti--linecolumns-length2</code> || 正文限宽 42em 并居中两栏（'''2026-09栏目数固定为 改回参数触发'''，不再默认生效）2）
|-
| <code>双栏</code> / <code>三栏</code> / <code>四栏</code> || <code>columns-2</code> / <code>columns-3</code> / <code>columns-4</code> || <code>heti--columns-2/3/4</code> || 多栏
|}
=== 诗词体（参数 <code>诗词</code>） ===
用法（尾部可选，见[[#容器与闭合]]）：
正文居中、不缩进，适合诗词、铭文。
<pre>
<nowiki>{{图书排版|行间注诗词}}</nowiki>
（正文）
<nowiki>{{图书排版/尾}}</nowiki>
</pre>
下方各节仍可用手写 class 的方式实现同样效果。
（诗句，每句之间空一行）
=== 古籍体 <code>heti--ancient</code> ===
标题居中、正文宋体，适合序跋。
<pre>
<div class="heti heti--ancient">
（正文）
</div>
</pre>
<div class="heti heti--ancient">
'''刻《仲景全书》序'''
予曰：“吾闻是书于家大夫之日久矣，而书肆间绝不可得。”君曰：“予诚有之。”
</div>
<nowiki>{{图书排版/尾}}</nowiki>
=== 诗词体 <code>heti--poetry</code> ===
正文居中、不缩进，适合诗词、铭文。
<pre>
<div class="heti heti--poetry">
<p>床前明月光，疑是地上霜。</p>
</div>
</pre>
{{图书排版|诗词}}
<div class="heti heti--poetry">
'''静夜思'''
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
{{图书排版/尾}}
</div>
=== 竖排分栏诗词（推荐配 <code>heti--vertical<poem></code>） ===
Poem 扩展的 <code><poem></code> 负责把换行变成 <code><br></code>（因此诗句'''不必每句空行'''），<code>|双栏</code> 负责分栏并把诗句改为左对齐（<code>|诗词|双栏</code> 组合与参数顺序无关）。诗词名与作者放在分栏容器'''之外'''，只有诗块参与分栏。
自上而下、右起排列，适合牌记、题签。
<pre>
<div class="heti heti--vertical">
<p>岁乙未，吾邑疫疠大作。</p>
</div>
</pre>
<div class="heti heti--vertical">
<p>岁乙未，吾邑疫疠大作，予家臧获率六七就枕席。</p>
</div>
=== 多栏 <code>heti--columns-2</code> / <code>heti--columns-3</code> ===
把正文排成多栏；也可用 <code>heti--columns-16em</code> 到 <code>heti--columns-48em</code> 指定栏宽。
<pre>
<nowiki>{{图书排版|诗词|双栏}}</nowiki>
<div class="heti heti--columns-2">
<p>（较长的正文）</p>
</div>
</pre>
<div class="heti heti--columns-2">
<p>予曰：“吾闻是书于家大夫之日久矣，而书肆间绝不可得。”君曰：“予诚有之。”吾吴和缓明卿沈君南昉在海虞，藉其力而起死亡殆徧，予家得大造于沈君矣。不知沈君操何术而若斯之神，因询之。</p>
</div>
==静夜思==
=== 字体族切换 ===
{| class="wikitable"
! class !! 中文字体
|-
| <code>heti--hei</code>（默认） || 黑体（PingFang SC / Microsoft YaHei UI）
|-
| <code>heti--song</code> / <code>heti--serif</code> / <code>heti--classic</code> || 宋体（Songti SC / SimSun）
|-
| <code>heti--kai</code> || 楷体（Kaiti SC / STKaiti / KaiTi）
|}
<div class="heti heti--song">
<p>宋体示例：予曰：“吾闻是书于家大夫之日久矣。”</p>
</div>
<div class="heti heti--kai">
<p>楷体示例：予曰：“吾闻是书于家大夫之日久矣。”</p>
</div>
——唐·李白
=== 辅助类速查 ===
{| class="wikitable"
! class !! 用途
|-
| <code>heti-meta</code> || 落款、副题（块级、不缩进）
|-
| <code>heti-verse</code> || 诗句（居中、不缩进）
|-
| <code>heti-large</code> / <code>heti-x-large</code> / <code>heti-small</code> / <code>heti-x-small</code> || 字号微调 18px / 20px / 14px / 12px
|-
| <code>heti-fn</code> || 文末注释区
|-
| <code>heti-hang</code> || 悬挂缩进
|-
| <code>heti-em</code> || 着重号（字下点）
|-
|-
| <code>heti-list-latin</code> || 用在 <code><ol></code> 上：A B C…（其内层 ol 为罗马数字，再内层为小写字母）
|-
| <code>heti-list-han</code> || '''暂不可用'''：汉字编号（<code>cjk-ideographic</code>）不在 TemplateStyles 白名单内，规则已被剔除，仅剩 <code>ol</code> 的数字回退
|}
=== 辅助类演示 ===
下面每个类的效果都是本页实时渲染的。
<nowiki><poem></nowiki>
'''heti-meta'''（落款、副题：块级、不缩进）
床前明月光
<pre>
疑是地上霜
<div class="heti-meta">万历己亥三月谷旦 海虞清常道人赵开美序</div>
举头望明月
</pre>
低头思故乡
<div class="heti-meta">万历己亥三月谷旦 海虞清常道人赵开美序</div>
<nowiki></poem></nowiki>
<nowiki>{{图书排版/尾}}</nowiki>
'''heti-verse'''（诗句：居中、不缩进）
<pre>
<div class="heti-verse">床前明月光，疑是地上霜。</div>
</pre>
<div class="heti-verse">床前明月光，疑是地上霜。</div>
该组合也可手写为 <code><div class="heti--poetry heti--columns-2"></code>（与 <code>|诗词|双栏</code> 等价，参数顺序无关）。
'''heti-large / heti-x-large / heti-small / heti-x-small'''（四档字号）
注意 <code>|双栏</code> 自带 <code>max-width: none</code>（多栏需要宽度），'''不要再叠加 <code>|限宽</code>'''。
<pre>
<div class="heti-large">……</div>
</pre>
<div class="heti-large">heti-large（18px）：予曰：“吾闻是书于家大夫之日久矣。”</div>
<div class="heti-x-large">heti-x-large（20px）：予曰：“吾闻是书于家大夫之日久矣。”</div>
<div class="heti-small">heti-small（14px）：予曰：“吾闻是书于家大夫之日久矣。”</div>
<div class="heti-x-small">heti-x-small（12px）：予曰：“吾闻是书于家大夫之日久矣。”</div>
用法（尾部可选，见[[#容器与闭合]]）：
'''heti-fn'''（文末注释区）
<pre>
<nowiki>{{图书排版|诗词}}</nowiki>
<div class="heti-fn">
（正文）
<ol>
<nowiki>{{图书排版/尾}}</nowiki>
<li>……</li>
</ol>
</div>
</pre>
下方各节仍可用手写 class 的方式实现同样效果。
<div class="heti-fn">
<ol>
<li>赵开美，字清常，海虞（今江苏常熟）人，明代刻书家。</li>
<li>所刻《仲景全书》为《伤寒论》传世重要版本之一。</li>
</ol>
</div>
=== 多栏（参数 <code>双栏</code>） ===
'''heti-em'''（着重号：字下点）
把正文排成两栏。注意'''不要叠加 <code>|限宽</code>'''——多栏自带 <code>max-width: none</code>（分栏需要宽度），限宽 42em 再分两栏每栏只剩约 350px。
<pre>
<nowiki>{{图书排版|双栏}}</nowiki>
<span class="heti-em">成无己</span>
</pre>
<p>予读而知其为<span class="heti-em">成无己</span>所解之书也。</p>
（较长的正文）
'''heti-list-latin'''（列表编号：拉丁字母）
<pre>
<ol class="heti-list-latin">
<li>……</li>
</ol>
</pre>
<ol class="heti-list-latin">
<li>太阳病</li>
<li>阳明病</li>
<li>少阳病</li>
</ol>
<nowiki>{{图书排版/尾}}</nowiki>
'''heti-hang'''（悬挂：用于标题内落款。此类为 <code>position:absolute</code> 且未设偏移量，单独使用没有视觉变化，需按具体版式配合定位属性）
<pre>
<h2>刻《仲景全书》序<span class="heti-hang">赵开美</span></h2>
</pre>
{{图书排版|双栏}}
<p>予曰：“吾闻是书于家大夫之日久矣，而书肆间绝不可得。”君曰：“予诚有之。”吾吴和缓明卿沈君南昉在海虞，藉其力而起死亡殆徧，予家得大造于沈君矣。不知沈君操何术而若斯之神，因询之。</p>
{{图书排版/尾}}
=== 字体族切换 ===
{| class="wikitable"
! class !! 中文字体
|-
| <code>heti--song</code> / <code>heti--serif</code> || 宋体（Songti SC / SimSun）
|}
字体族类是这套样式里'''没有模板参数入口'''的，需要时这样手写。注意'''只写这一个类名'''，不要写成 <code>class="heti heti--song"</code>——本站'''没有引入''' heti 的 <code>.heti</code> 容器类。
<div class="heti--song">
<p>宋体示例：予曰：“吾闻是书于家大夫之日久矣。”</p>
</div>
=== 行间注版式 <code>行间注</code> ===
需要整段留出较大行间空间时（夹批、行间标注等）使用，把段落行距放大到 <code>2.25</code>、首行缩进 <code>2em</code>：
<pre>
<nowiki>{{图书排版|行间注}}</nowiki>
（正文）
<nowiki>{{图书排版/尾}}</nowiki>
</pre>
容器由头部模板打开、由尾部模板闭合；'''尾部不可省'''（也可在文末直接手写 <code></div></code>）。不传参数时本模板不输出任何可见内容。
== 作用范围与限制 ==
* 只影响 <code>p</code>、<code>h1</code>–<code>h6</code> 与各版式容器（如行间注的 <code>.heti--annotation</code>）；；其余标签一律不碰。
* 段落规则会命中'''模板输出里的 p'''（少数模板会生成段落），影响很小但存在。
* 纸色背景 <code>#f6f4f0</code> 需要选中内容容器自身，TemplateStyles 无法做到，需站点级 CSS。
<code><nowiki>{{图书排版}}</nowiki></code> 会输出一个基础容器 <code><div class="tushu-body"></code>，正文限宽（42em + 居中）就挂在这个容器上——容器继承正文字号，因此 <code>em</code> 的基准就是正文，标题与段落因而同宽对齐。（若把 <code>max-width</code> 分别写在 <code>p</code> 与 <code>h1</code>–<code>h6</code> 上，<code>em</code> 会按各元素自身字号计算，h1 的 42em 宽达 1344px，标题反而无法与正文对齐。）
'''写上 <code><nowiki>{{图书排版/尾}}</nowiki></code> 显式闭合'''（等价于手写 <code></div></code>）。153 个既有页面均已于 2026-09 全部加上如此。
'''尾部应放在 <code>----</code> 与 <code><references /></code> 之上'''，这样参考资料节留在容器内，而页尾导航、目录、分类留在容器外。若两者都不存在，则放在 <code><nowiki>{{daohang-f}}</nowiki></code> 之上。
若不写尾部，容器会由 HTML5 解析器自动闭合到内容区末尾：页面不会报错，但页末的导航、目录也会被一并限宽。
* 传了版式参数也一样：容器始终只有一个，参数是它的附加类，例如 <code>class="tushu-body heti--ancientpoetry"</code>。
* 本版式仅用于'''页面正文内容'''；本站阅读器（Gadget BookVerticalReader）是独立的书籍阅读器，与本模板的版式开关无关。
* 版式类名沿用 heti（[https://github.com/sivan/heti sivan/heti]）的官方命名；本站样式表以 heti 官方规则为底、按需补齐，全部内容都在 [[Template:图书排版/styles.css]] 内，'''不加载任何外部 heti 文件'''。
== 繁体（zh-Hant）的字体 ==
简体视图正文用黑体栈（苹方 SC → 微软雅黑 → …）；繁体视图由 <code>:lang(zh-hant)</code> 规则改用繁体系字体栈（苹方 TC → '''微軟正黑體''' → 思源黑體 TC → 明體 → …），与站内 Vector 皮肤一致。两套栈只在中文段不同：西文、标点（<code>@font-face</code>）与扩展区兜底（<code>SimSun-ExtB</code>／<code>SimSun-ExtG</code>／<code>Jigmo</code>／<code>HanaMin</code>）相同。
== 参见 ==
|