开源中文古风排版样式,简约美观,超级好用!

article/2025/1/19 3:39:30

只推荐用过的好用工具,关注DD帮你提高效率

如果有一篇古诗,要放在Web页面上,你会如何排版呢?如果要实现类似语文书中的那种效果,有没有办法快速实现呢?

今天给大家推荐一个非常好用的开源项目,就可以轻松完成这个任务。

这个项目,名字就是赫蹏,神不神奇?在今天的GitHub趋势榜上,当日新增了近500+的star,高居榜首!

赫蹏?何为赫蹏?相信有不少小伙伴不一定认识这两个字怎么念,其实这两个字发音:hètí。其含义呢:

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


赫蹏项目,其实就是专为中文内容展示设计的一个排版样式。

可能因为平时大多数的页面版式都是以英文等语言为主要考虑因素,所以在显示中文的时候或多或少有各种不如意,例如没对齐、换行错误、大小不合适等等等,看着就会让人觉得变扭。

赫蹏,就是针对整行的中文排版规范,让大家享受最质朴、古风的传统中文阅读体验!

赫蹏主要实现了以下几个功能特性:

  • 贴合网格的排版布置

  • 全标签样式美化

  • 预置古文、诗词样式

  • 预置多种排版样式(行间注、多栏、竖排等)

  • 多种预设字体族(仅限桌面端)

  • 简/繁体中文支持

  • 自适应黑暗模式

  • 中西文混排美化,不用再手敲空格(基于 JavaScript 脚本)

  • 全角标点挤压(基于 JavaScript 脚本)

  • 兼容 normalize.css、CSS Reset 等常见样式的重置

  • 支持移动端

使用起来也不复杂,只需要两个步骤就可以:

1、在页面的 标签中引入 heti.css 文件:

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

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

<article class="entry heti"><h1>TJ君</h1><p>TJ君最棒</p>……
</article>

当然除了这个最基础的引用,小伙伴还可以选择使用额外的增强脚本,例如:

<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script>const heti = new Heti('.heti');heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
</script>

我们来看下作者给出的实际效果样式:

91e4c37942bfaee38b47d63220ef06b0.png

包括黑暗模式:

fbe0417ff52955d298e23e5d1a4d3a92.png 61752cde5401ea5673138b697d44536a.png

是不是看着不错?有点古风?喜欢的那就来用用看吧!

点击下方卡片,关注公众号“TJ君

回复“heti”,获取仓库地址

推荐阅读

  • Java前沿分享:value或许成为java的新关键字

  • 刚刚,官宣100000个炫酷微信红包封面,速度撸!

  • 让你在浏览器也能享受H.265播放器的高清画面


http://chatgpt.dhexx.cn/article/pXrXdC9N.shtml

相关文章

微分和导数的关系是什么?

在初学微分和导数时&#xff0c;虽然感觉概念不复杂&#xff0c;但是我对两者的关系有点模糊&#xff0c;比如以下问题就觉得模棱两可&#xff1a; 对于导数链式法则&#xff0c; d y d x d y d u d u d x \frac {dy}{dx} \frac {dy}{du} \frac {du}{dx} dxdy​dudy​dxdu​…

重新认识微分和导数

之前写过不少关于微分和导数的文章&#xff1a; 微分是什么&#xff1f; dx&#xff0c;dy是什么&#xff1f; 微分和导数的关系是什么&#xff1f; 今天这篇文章再换一个角度来谈论微分和导数&#xff0c;让我们从微分出现的原因说起。 1 微分出现的原因 出于种种原因…

第七章——微分方程

目录 一、求常系数线性齐次微分方程的通解 二、可分离变量的一阶微分方程 三、齐次方程 四、一阶线性微分方程 五、 可降解的高阶微分方程 六、常系数非齐次线性微分方程的特解形式 注&#xff1a;//之后的都是注释&#xff0c;不是过程。 一、求常系数线性齐次微分方程…

【数学问题2】向量微分

一、反对称矩阵 定义运算 ⋅ ~ \tilde{\cdot} ⋅~ 为&#xff1a; l ~ ( 0 − c b c 0 − a − b a 0 ) \tilde{l} \begin{pmatrix} 0 & -c & b\\ c & 0 & -a\\ -b & a & 0 \end{pmatrix} l~⎝⎛​0c−b​−c0a​b−a0​⎠⎞​ 其中 l [ a b c ]…

微分滤波器总结

微分滤波器 本质&#xff1a;逻辑上&#xff0c;平滑使用的是积分&#xff0c;锐化则应使用微分。 1.索贝尔&#xff08;Sobel&#xff09;导数 索贝尔算子可以实现任意阶导数和混合偏导数。 本质&#xff1a;求得图像的一阶或二阶近似梯度图像。 void Sobel( InputArray sr…

微积分——外微分形式的微积分

在我们所讨论的三度空间&#xff08;三维&#xff09;中&#xff0c;能够出现的微分形式只有四种&#xff1a; 零次微分形式——函数 f 一次微分形式——线积分中出现的微分dx,dy,dz的一次式 二次微分形式——面积分中出现的微分dx,dy,dz的二次式 三次微分形式——体积分中出…

微分的积公式推导

因为学习图形学的时候&#xff0c;好多次涉及到、谈论到要使用线性代数和微积分的知识&#xff0c;所以怀着要学就学好的精神将他们都学习一遍&#xff0c;至少都了解清楚一些&#xff0c;更利于后面图形学的学习&#xff0c;在看到微分的积推导公式时&#xff0c;觉得讲的有些…

matlab中常微分方法,MATLAB常微分方程

4.8 微分方程 微分方程是数值计算中常见的问题,MATLAB提供了多种函数来计算微分方程的解。 4.8.1 常微分方程 众所周知,对一些典型的常微分方程,能求解出它们的一般表达式,并用初始条件确定表达式中的任意常数。但实际中存在有这种解析解的常微分方程的范围十分狭窄,往往…

如何通俗的解释全微分?

微积分这门学科&#xff0c;从字面上拆开来看&#xff0c;就是“微分”“积分”。按道理把这个两个概念作为学科的名字&#xff0c;很显然是非常重要&#xff0c;但是我觉得很奇怪&#xff0c;《高等数学》同济版并不怎么讲“微分”这个概念&#xff0c;而是着重在讲解“微分”…

自动微分(Auto differentiation)

1.自动微分是干什么的&#xff1a; 自动微分现在已经是深度学习框架的标配&#xff0c;我们写的任何模型都需要靠自动微分机制分配模型损失信息&#xff0c;从而更新模型。简言之&#xff0c;就是在模型更新计算梯度的时候会用到自动微分。 在数学和计算机代数中&#xff0c;…

高数 | 【一元函数微分学】一元函数微分的本质 导数与微分的区别

一、微分的本质 微分本质是一个微小的线性变化量&#xff0c;是用一个线性函数作为原函数变化的逼近&#xff08;或者叫近似&#xff09;。 现在我们将 定义为dy。而 表示的是函数值的变化&#xff0c;显然dy的真正含义是对这种变化的逼近。也就是说我们定义微分&#xff0c;就…

图像微分

图像微分 考虑到图像中值离散一般为前后像素作差&#xff0c;这是一阶微分。应用中效果不佳&#xff0c;与此相比二阶微分效果较好&#xff0c;二阶微分是对一阶微分的再微分,数学表达为&#xff08;考虑x方向时&#xff09;f(x,y0)’f(x,y0)-f(x-1,y0) f(x-1,y0)’f(x-1,y0)-f…

什么是微分,dy又是什么

目录 1.dy的定义2.可微与可导的关系3.dy的几何意义4.微分的运算法则5.dy再探索6.线性近似 1.dy的定义 在介绍什么是dy之前&#xff0c;先回顾一下之前的一些概念&#xff1a; 设&#xff0c; y f ( x ) yf(x) yf(x), 若: lim ⁡ Δ x → 0 Δ y f ( x 0 Δ x ) − f ( x 0 …

微分是什么?

前文请查看&#xff1a; 微积分是什么&#xff1f;柯西的数列极限 最开始我们就提到了&#xff0c;曲线下微小的矩形是“微分”&#xff1a; 把这些“微分”加起来就是“积分”&#xff0c;就可以得到曲线下的面积&#xff1a; 上一章定义了极限&#xff0c;解决了微积分中的…

对微分的简单理解

目录: 一、一元函数的可微性二、偏导数三、二元函数的可微性四、 n n n 元函数的可微性五、向量函数的导数作者留言 研究生复试现场&#xff1a; T:“这位同学&#xff0c;请你解释一下微分是什么。”  S:“啊&#xff0c;老师&#xff0c;微分的定义是~~~~”  T:“嗯&#x…

【数学】微分(Differential)的定义,微分与导数的区别

本文会详细的定义微分&#xff0c;并结合导数的概念&#xff0c;详细的说明二者的差别。 如上图所示&#xff0c;对于函数yf(x)来说&#xff0c;在任意一点p(x, y)上&#xff0c;若x方向上有增量&#xff0c;则在y的方向上有增量&#xff0c;当时&#xff0c;导数的定义为 可见…

什么是微分?导数和微分的区别是什么?微分和积分的联系?

看之前推荐您阔以拿一只笔和一张纸&#xff0c;遇到看不懂的就画一画&#xff0c;增量啊什么的&#xff0c;会好理解很多。 先总的抽象地说一下微分是什么&#xff0c;假设有一个函数yf(x)。假设y轴上有一个增量&#xff0c;把这个增量叫做Δy。字面上理解&#xff0c;什么是增…

Python基础:Python中的序列索引详解

欢迎你来到站长在线的站长学堂学习Python知识&#xff0c;本文分享的是《Python中的序列索引》。 序列中的每一个元素都有一个属于自己的编号&#xff0c;我们称为索引&#xff08;index&#xff09;。从起始元素开始&#xff0c;索引值从0开始编号&#xff0c;持续递增。即下标…

python返回索引值_python取索引值

广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 数据的一些细微区别num = num1 = num # 输出:10 type:intnum2 = num# 输出: type:list总结: 分片包括起始索引对应的元素,但不包括终止索引对应的元素,索引…

python字符串索引与切片

字符串是字符的“有序”集合&#xff0c;字符串中的每个 “字符/元素” 都拥有一个下标&#xff0c;而通过下标可以实现索引&#xff08;index&#xff09;与 切片&#xff08;slice&#xff09;两种方法&#xff0c;通过它们访问并获取其中的 字符/元素 . 一. 索引&#xff08…