赫蹏(hètí):为中文网页内容赋予优雅排版的开源利器

fHJ9cZeOp.jpg

在当今信息爆炸的时代，内容呈现的形式往往决定了阅读体验的优劣。对于中文网站来说，一个长期存在的挑战是如何实现符合传统中文排版美学的网页展示。尽管现代CSS技术已经十分强大，但针对中文特点的排版优化仍然不够完善。今天，我们将介绍一个专门为解决这一问题而生的开源项目——赫蹏（hètí）。

什么是赫蹏？

赫蹏是一个专为中文内容展示设计的排版样式增强库，名称取自古代对纸张的雅称。这个项目由开发者Sivan创建，基于通行的中文排版规范，旨在为网站的读者提供更加舒适、专业的文章阅读体验。

简单来说，赫蹏让中文网页内容“自动变好看” 。

该项目在github 已有6.6k star

_20260102_222650.png

github 地址： github.com/sivan/heti
在线预览地址：sivan.github.io/heti/

_20260102_223923.png

核心特性一览

🎯 贴合网格的精准排版

赫蹏实现了基于网格系统的中文排版，确保文字、段落和间距都遵循严谨的视觉规律，让页面呈现出整齐划一的专业感。

📝 全标签样式美化

项目不仅仅针对段落文本，而是对整个HTML文档中的各类标签（标题、列表、表格、代码块等）都进行了细致的美化，形成统一而和谐的整体视觉风格。

🏮 传统版式支持

赫蹏贴心地预置了古文、诗词样式，并提供了多种传统排版样式支持：

行间注（类似于古籍中的双行小注）
多栏排版
竖排文字
为需要展示传统文学内容的网站提供了极大便利

🌗 智能适配设计

自适应黑暗模式：跟随系统设置自动切换明暗主题
移动端优先：在各种屏幕尺寸上都有良好表现
简繁中文支持：满足不同地区用户的需求

✨ 智能排版增强（基于JavaScript）

这是赫蹏的“黑科技”部分：

中西文混排美化：自动在中英文之间添加适当间距，再也不用手动敲空格
全角标点挤压：智能调整标点符号的间距，避免出现难看的空白

🎨 字体优化

提供多种预设的中文字体族选择（桌面端），可根据不同内容风格搭配最合适的字体组合。

极简的安装与使用

赫蹏的设计哲学是“最小化侵入”，使用起来异常简单：

基础使用（仅CSS）

1<!-- 1. 引入样式 -->
2<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
3
4<!-- 2. 添加类名 -->
5<article class="heti">
6  <h1>文章标题</h1>
7  <p>这里是你所有的中文内容...</p>
8</article>
9

只需这两步，你的内容就会立刻获得专业级的中文排版效果。

增强功能（添加JavaScript）

1<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
2<script>
3  const heti = new Heti('.heti');
4  heti.autoSpacing(); // 启用智能中西文混排和标点挤压
5</script>
6

实际效果展示

我比较喜欢的是竖排排版的样式,我们在markdown中也可以直接使用，如下使用

1<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
2
3<div class="card__vertical-container">
4<section class="heti--vertical heti--ancient">
5<h1>出師表</h1>
6<p class="heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年－234年10月8日）</p>
7<p>先帝創業未半，而中道崩殂；今天下三分，益州疲弊，此誠危急存亡之秋也﹗然侍衞之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。</p>
8<p>誠宜開張聖聽，以光先帝遺德，恢弘志士之氣﹔不宜妄自菲薄，引喻失義，以塞忠諫之路也。</p>
9<p>宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作姦、犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。</p>
10<p>侍中、侍郎郭攸之、費禕、董允等，此皆良實，志慮忠純，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行淑均，曉暢軍事，試用於昔日，先帝稱之曰「能」，是以眾議舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優劣得所。</p>
11<p>親賢臣，遠小人，此先漢所以興隆也﹔親小人，遠賢臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎息痛恨於桓、靈也！侍中、尚書、長史、參軍，此悉貞良死節之臣，願陛下親之、信之，則漢室之隆，可計日而待也。</p>
12<p>臣本布衣，躬耕於南陽，苟全性命於亂世，不求聞達於諸侯。先帝不以臣卑鄙，猥自枉屈，三顧臣於草廬之中，諮臣以當世之事；由是感激，遂許先帝以驅馳。後值傾覆，受任於敗軍之際，奉命於危難之間，爾來二十有一年矣。先帝知臣謹慎，故臨崩寄臣以大事也。受命以來，夙夜憂歎，恐託付不效，以傷先帝之明。故五月渡瀘，深入不毛。今南方已定，兵甲已足，當獎率三軍，北定中原，庶竭駑鈍，攘除姦凶，興復漢室，還於舊都。此臣所以報先帝而忠陛下之職分也。至於斟酌損益，進盡忠言，則攸之、禕、允之任也。</p>
13<p>願陛下託臣以討賊興復之效；不效，則治臣之罪，以告先帝之靈。若無興德之言，則責攸之、禕、允等之慢，以彰其咎。陛下亦宜自謀，以諮諏善道，察納雅言，深追先帝遺詔。臣不勝受恩感激。今當遠離，臨表涕零，不知所言！</p>
14</section>
15</div>
16

效果如下：

_20260102_224539.png

我使用ai 基于赫蹏（hètí）做了一个竖版排版的网站，感兴趣的家人们也可以使用下

博主竖版排版网址： h5.xiuji.mynatapp.cc/heti/

_20260102_232901.png

_.png

结语：让内容回归本质

在追求炫酷交互和复杂动画的今天，赫蹏提醒我们一个基本事实：对于内容型网站，优秀的可读性才是最重要的用户体验。这个项目以极低的成本，为中文网页带来了显著的品质提升。

如果你正在经营一个以中文内容为主的网站，或者只是想在个人博客上获得更好的排版效果，不妨尝试一下赫蹏。正如项目README中所说的：“总之，用上就会变好看。”

赫蹏不仅是一个工具，更是对中文数字阅读体验的一次优雅致敬。在这个注意力稀缺的时代，为读者提供一个舒适的阅读环境，或许就是最好的内容策略。

《赫蹏(hètí):为中文网页内容赋予优雅排版的开源利器》是转载文章，点击查看原文。