跳转到内容

Template:图书排版/doc：修订间差异

勤求古训，博采众方
以互动方式浏览历史
下一编辑→
删除的内容 添加的内容
可视化wikitext
创建：模板用法 + 行间注(ruby)用法与示例（批次11）
 
重修文档：字体分派、字号阶梯、段落规格说明 + 古籍·诗词·竖排·行间注·多栏·字体族实时演示 + 辅助类速查
第1行： 第1行：
<templatestyles src="图书排版/styles.css"/>
本模板用于**书籍正文页**（如「书名/章节」子页）挂载排版样式，自身不输出任何可见内容——只通过 TemplateStyles 引入 [[Template:图书排版/styles.css]]。
该模板用于**书籍内容页**（如「伤寒论/章节」页面）的正文排版，本身不输出任何可见内容，只通过 TemplateStyles 引入 [[Template:图书排版/styles.css]]。


== 用法 ==
== 用法 ==
在正文页顶部放置：
在页面顶部引用：

<pre>
<pre>
{{图书排版}}
<nowiki>{{</nowiki>图书排版<nowiki>}}</nowiki>
</pre>
</pre>


样式**只作用于正文段落与标题**：
样式对整页正文生效：米黄纸底、正文 120% 字号、段落 2em 首行缩进、衬线字体栈、标题字号体系（详见 [[Template:图书排版/styles.css]]）。
* 段落 <code>&lt;p&gt;</code>：字号、行高、字距、首行缩进、两端对齐、断行规则
* 标题 <code>&lt;h1&gt;</code>–<code>&lt;h6&gt;</code>：字号阶梯、行高、字距、字重
* <code>&lt;ruby&gt;</code> / <code>&lt;rt&gt;</code>：行间注注音


表格、列表、链接、引用、代码块、<code>mark</code>/<code>q</code>/<code>sup</code>/<code>sub</code> 等元素**不受影响**——导航框、目录表、信息框的版式不会被改动。
== 行间注（注音 / 训诂） ==

样式（styles.css）自 2026-09 起内置 **HTML ruby 行间注**支持：被注字上方以小字显示注文，中文拼音或训诂均可。无需任何扩展，wikitext 直接写：
== 默认排版效果 ==

=== 字体分派：中文 / 西文 / 标点 ===
样式用两个 <code>@font-face</code> 配 <code>unicode-range</code>，把不同码位分给不同字体：

{| class="wikitable"
! 字符范围 !! 实际字体 !! 说明
|-
| 拉丁字母、数字（ASCII） || Georgia 等西文字体 || 保留原有西文观感
|-
| 汉字、假名等 CJK || PingFang SC → Hiragino Sans GB → Noto Serif SC → Microsoft YaHei UI → … || 沿用站点原有优先级，汉字外观不变
|-
| 中文标点（引号、破折号、顿号、书名号等） || Noto Serif SC → Source Han Serif SC → Songti SC → SimSun（宋体类） || 标点占满一个全角字身，两侧留白正常
|}

'''为什么标点要单独处理：'''全角引号 <code>“ ”</code> 的码位是 U+201C / U+201D，Georgia、苹方、微软雅黑都含这两个字形，且做成**西文风格的窄引号**——此前因此出现「引号与后一个字贴在一起」。现在标点固定交给宋体类全角字体，任何设备上都不会再贴字。

=== 字号阶梯 ===
{| class="wikitable"
! 元素 !! 字号 !! 行高
|-
| <code>&lt;h1&gt;</code> || 32px || 48px
|-
| <code>&lt;h2&gt;</code> || 24px || 36px
|-
| <code>&lt;h3&gt;</code> || 20px || 36px
|-
| <code>&lt;h4&gt;</code> || 18px || 24px
|-
| <code>&lt;h5&gt;</code> || 16px || 24px
|-
| <code>&lt;h6&gt;</code> || 14px || 24px
|-
| 正文 <code>&lt;p&gt;</code> || 16px || 1.5
|}

=== 段落与对齐 ===
* 字距 <code>.02em</code>（标题 h1–h3 为 <code>.05em</code>）
* 首行缩进 <code>2em</code>
* 两端对齐 <code>text-align: justify</code>
* 非中文段落自动左对齐、取消缩进
* 长串西文自动断行（<code>overflow-wrap</code> / <code>hyphens</code>）
* 相邻标题自动收紧间距（<code>h1+h2</code>、<code>h2+h3</code> … 上边距 12px）

实时效果（本页即为演示）：

'''刻《仲景全书》序'''

岁乙未，吾邑疫疠大作，予家臧获率六七就枕席。予曰：“吾闻是书于家大夫之日久矣，而书肆间绝不可得。”君曰：“予诚有之。”Latin check: Georgia ABC abc 0123 — “quoted latin”。

== 可选版式（需加 class） ==
下列版式默认不生效，需要把内容包进对应 class 的容器里；可叠加使用。


=== 古籍体 <code>heti--ancient</code> ===
标题居中、正文宋体，适合序跋。
<pre>
<pre>
&lt;div class="heti heti--ancient"&gt;
<ruby>庖<rt>páo</rt></ruby>丁为文惠君解牛
（正文）
&lt;/div&gt;
</pre>
</pre>
<div class="heti heti--ancient">
'''刻《仲景全书》序'''
予曰：“吾闻是书于家大夫之日久矣，而书肆间绝不可得。”君曰：“予诚有之。”
</div>


=== 诗词体 <code>heti--poetry</code> ===
上方注文默认 0.55em 小字、居中对齐；若段落注音较多需要更宽松行距，把整段包进注解容器：
正文居中、不缩进，适合诗词、铭文。
<pre>
&lt;div class="heti heti--poetry"&gt;
&lt;p&gt;床前明月光，疑是地上霜。&lt;/p&gt;
&lt;/div&gt;
</pre>
<div class="heti heti--poetry">
'''静夜思'''
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</div>


=== 竖排 <code>heti--vertical</code> ===
自上而下、右起排列，适合牌记、题签。
<pre>
&lt;div class="heti heti--vertical"&gt;
&lt;p&gt;岁乙未，吾邑疫疠大作。&lt;/p&gt;
&lt;/div&gt;
</pre>
<div class="heti heti--vertical">
<p>岁乙未，吾邑疫疠大作，予家臧获率六七就枕席。</p>
</div>

=== 行间注 <code>heti--annotation</code> ===
行距放大到 2.25，便于行间标注；<code>&lt;em&gt;</code> 自动变成着重号（字下点）。
<pre>
<pre>
&lt;div class="heti heti--annotation"&gt;
&lt;div class="heti heti--annotation"&gt;
&lt;p&gt;…正文&lt;em&gt;需着重的字&lt;/em&gt;…&lt;/p&gt;
吾生也有涯，而知也无涯。以有涯随无涯，殆已！
&lt;/div&gt;
&lt;/div&gt;
</pre>
</pre>
<div class="heti heti--annotation">
<p>予读而知其为<em>成无己</em>所解之书也。然而鱼亥不可正，句读不可离矣。</p>
</div>


=== 多栏 <code>heti--columns-2</code> / <code>heti--columns-3</code> ===
示例（注音行间注渲染效果）：
把正文排成多栏；也可用 <code>heti--columns-16em</code> 到 <code>heti--columns-48em</code> 指定栏宽。
<pre>
&lt;div class="heti heti--columns-2"&gt;
&lt;p&gt;（较长的正文）&lt;/p&gt;
&lt;/div&gt;
</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-ruby--inline</code> || 行内 ruby 紧凑排版
|-
| <code>heti-list-latin</code> / <code>heti-list-han</code> || 列表编号：拉丁字母 / 汉字（一二三…）
|}

== 行间注（注音 / 训诂） ==
styles.css 自 2026-09 起支持 **HTML ruby 行间注**，注文显示在字上方小字，无需任何扩展，在 wikitext 里直接写：
<pre>
&lt;ruby&gt;被注字&lt;rt&gt;pīn yīn&lt;/rt&gt;&lt;/ruby&gt;
</pre>
上方注文默认 0.55em 小字；若整段都要注音，建议配合上面的行间注版式（行距 2.25）使用。

示例：注音与行间注渲染效果如下


<div class="heti heti--annotation">
<div class="heti heti--annotation">
吾生也有涯，而知也无涯。<ruby>庖<rt>páo</rt></ruby>丁为文惠君解牛，手之所触，肩之所<ruby>倚<rt>yǐ</rt></ruby>，足之所履，膝之所踦，<ruby>砉<rt>huā</rt></ruby>然<ruby>向<rt>xiǎng</rt></ruby>然，奏刀<ruby>騞<rt>huō</rt></ruby>然，莫不中音。
吾邑<ruby>疫<rt>yì</rt></ruby>疠大作，予家<ruby>臧<rt>zāng</rt></ruby>获<ruby>率<rt>shuài</rt></ruby>六七就枕席。
</div>
</div>

== 作用范围与限制 ==
* 只影响 <code>p</code>、<code>h1</code>–<code>h6</code>、<code>ruby</code>；其余标签一律不碰。
* 段落规则会命中**模板输出里的 p**（少数模板会生成段落），影响很小但存在。
* 纸色背景 <code>#f6f4f0</code> 需要选中内容容器自身，TemplateStyles 无法做到，需站点级 CSS。
* 未引入 heti 的 JavaScript 增强（中西文自动间距、标点挤压）：需要改站点 JS，且其挤压方向与「标点要有留白」相反。


== 注意事项 ==
== 注意事项 ==
* 一个 `<ruby>` 只注一字；连续注音请逐字包裹（如上示例）。
* 一个 <code>&lt;ruby&gt;</code> 只注一音，要注多义请按需拆开显示。
* 该行间注样式作用于**页面横排正文**；书页阅读器（Gadget BookVerticalReader 的「书页」弹窗）是独立的竖排整页复刻视图，与本文行间注互不影响。
* 行间注版式仅用于**页面正文内容**；本站阅读器（Gadget BookVerticalReader）是独立的书籍阅读器，与本模板的行间注功能无关。
* 可选版式的 class 名沿用 <code>heti--*</code> 命名（来自中文排版方案 heti），但本站**不依赖任何 heti 文件**，全部样式都在 [[Template:图书排版/styles.css]] 内。
* 若页面正文采用繁体或需句读标注，另见书籍阅读工具的使用说明。


== 参见 ==
== 参见 ==

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 内。

参见

检索自“https://zybkcn.com/w/index.php?title=Template:图书排版/doc&oldid=121720”