赫蹏

古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后》：「武（籍武）发篋中，有裹药二枚，赫蹏书。」颜师古注：「邓展曰：『赫音兄弟鬩墙之鬩。』应劭曰：『赫蹏，薄小纸也。』」宋赵彦卫 《云麓漫钞》卷七：「《赵后传》所谓『赫蹏』者，注云『薄小纸』，然其寔亦縑帛。」

介绍#

赫(hè)蹏(tí)是专为中文网页内容设计的排版样式增强。它基于通行的中文排版规范，可为网站的读者带来更好的内容阅读体验。它的主要特性有：

• 贴合网格的排版；
• 全标签样式美化；
• 预置古文、诗词样式；
• 预置多种排版样式（行间注、多栏、竖排等）；
• 多种预设字体族（仅限桌面端）；
• 简/繁体中文支持；
• 自适应黑暗模式；
• 中西文混排美化，不再手敲空格（基于JavaScript脚本）；
• 标点挤压（基于JavaScript脚本）；
• 兼容normalize.css、CSS Reset^[1]等常见样式重置；
• 移动端支持；
• ……

总之，用上就会变好看。

使用方法#

项目地址：https://github.com/sivan/heti，使用方法如下：

1. 在页面的</head>标签前中引入heti.css样式文件：

   <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">

2. 在要作用的容器元素上增加class="heti"的类名即可：

   <article class="entry heti">
     <h1>我的世界观</h1>
     <p>有钱人的生活就是这么朴实无华，且枯燥。</p>
     ……
   </article>

效果示例#

本页面全页应用了赫蹏样式，所见即所得。下面是内置的多种排版效果演示。

古文#

<div class="heti heti--ancient">...</div>

诗词#

行间注#

<div class="heti heti--annotation">...</div>

多栏排版#

赫蹏预置了多种多栏布局类，可以按栏数或每栏行宽进行设置。

<div class="heti heti--columns-2">...</div>

竖排排版#

赫蹏预置了传统的竖排（直排）方向排版，同样贴合栅格。

<div class="heti heti--vertical">...</div>

英文排版#

设计原则#

赫蹏项目的初衷很简单：它不作为一个CSS Reset出现，而是根据通行的中文排版规范，对网页正文区域进行排版样式增强。在部分CSS特性尚未有浏览器支持前，可通过JavaScript实现功能补充。

文字

参考《中文排版需求^[2]》中描述的常用书籍排版字体，赫蹏提供了黑体、宋体和传统三种字体风格，前两者分别对应无衬线、衬线字体族。文字默认采用16px作为标准字号。在标题等文字较大的情况下，会适当地增加字间距以便获得更好地可读性。

查看字体风格详细对照表

各字体族下不同标签对应的字体

	黑体	宋体	传统	备注
标题	黑体	宋体	楷体	记忆中的站台
正文			宋体	那是一个风雨交加的夜晚。
引用			楷体	锣鼓喧天，鞭炮齐鸣，红旗招展，人山人海。
强调			宋体	父亲特意嘱咐了我两句。
对话			楷体	他说：我买几个橘子去。你就在此地，不要走动。
图例			黑体
表头			黑体	当时的情形 角色 物品 父亲 橘子 我 车票
角标	黑体	黑体	黑体	鲁迅[1]曾经没有说过

标点

参考《中文排版需求》制定符号样式。唯一的差异在于简体中文一律采用直角引号（「」）替代弯引号（“”），这样可以保持字符等宽。

间距

为保持页面元素总是贴合垂直栅格，块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。

附录#

兼容性#

赫蹏在间距、边框、位置属性上采用了Logical properties，在所有现代浏览器上表现良好。

标签示例表#

增强脚本^beta#

由于部分CSS特性尚未有浏览器支持等原因，可选择使用增强脚本进行排版效果优化。在页面的</body>标签前引入JavaScript脚本后初始化即可：

<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script>
  const heti = new Heti('.heti');
  heti.autoSpacing();
</script>

目前支持的功能有：

• 中英文混排优化：无论你的输入习惯是否在中西文之间留有「空格」^[3]，都会统一成标准间距（¼字宽的空白）；
• 标点挤压：自动对中文标点进行½字宽的挤压（弯引号和间隔符挤压¼字宽）。

效果演示：

开源协议#

「赫蹏」遵循MIT协议开源。