「工具」一款好用的中文排版工具

发现了一个古文排版工具，我自己做了很奇怪的指令用来自用，这个工具做出来的东西还挺好看的。后续我可能会有这方面的内容，现在做好为以后作准备。工具仓库-赫蹏。

我还使用了中文网字计划，一个免费的中文字体公益 CDN 服务, 致力于为国内外全球 CJK 开发者提供高质量网络字体服务，让中文字体在互联网世界起飞。还使用了京华老宋体v2.0，一款不错的开源字体。感谢这些开源工作者，为中国文化的传播所做的贡献。

介绍

@Hdiv(classic){@Hp(){@Hem(){@Hpy(){赫蹏}}是专为中文网页内容设计的排版样式增强。它基于通行的中文排版规范，可为网站的读者带来更好的内容阅读体验。}}

如何使用

在head中引入

<!-- 工具主体 -->
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/[email protected]/umd/heti.min.css">

可选以下工具，具体使用详见该库的npm页面

<!-- 优化中文排版的小问题，如首行缩进2字符 -->
<script type="text/javascript" src="https://cdn.jsdmirror.com/npm/[email protected]/charch.build.js"></script>

<!-- 符号挤压 -->
<script src="https://cdn.jsdmirror.com/npm/[email protected]/umd/heti-addon.min.js"></script>

指令详情

指令是我自己定义的，该工具只是一个css库。当然你也可以定义你自己的指令或者直接写html。

查看标签示例表

常用标签样式示例表

类型	标签	效果
标题	@Hh5(){标题1-5级}	标题1-5级
缩写	@Habbr(Cascading Style Sheets){CSS}	CSS
专名号	@Hp(){此时来自@Hu(位于山东省聊城市阳谷县城东){景阳冈}的@Hu(){武松}大喝一声：@Hq(){纳命来！}}	此时来自景阳冈的武松大喝一声：纳命来！
文本更新	因为谁也不认识，所以最后我们决定念@Hs(){dí}tí。	因为谁也不认识，所以最后我们决定念dítí。
引号	窃·格瓦拉曾经说过：@Hq(){打工是不可能打工的。}	窃·格瓦拉曾经说过：打工是不可能打工的。
术语	@Hdfn(){窃·格瓦拉}，中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。	窃·格瓦拉，中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。
标记	这道题@Hmr(){必考}，你们爱记不记。	这道题必考，你们爱记不记。
强调	稳住，@Hem(){我们能赢}！	稳住，我们能赢！
着重号	我们@Htem(){必将}战胜这场疫情。	我们必将战胜这场疫情。

使用示例

竖排诗词（我自己加的）

@Hdiv(poetry,vertical,kinghua){ @Hp(start,h1-self){沁园春·长沙} @Hp(start){独立寒秋，湘江北去，橘子洲头。
看万山红遍，层林尽染；
漫江碧透，百舸争流。
鹰击长空，鱼翔浅底，万类霜天竞自由。
怅寥廓，问苍茫大地，谁主沉浮？} @Hp(start){携来百侣曾游。忆往昔峥嵘岁月稠。
恰同学少年，风华正茂；
书生意气，挥斥方遒。
指点江山，激扬文字，粪土当年万户侯。
曾记否，到中流击水，浪遏飞舟？
} @Hp(end){@Hsp(red){毛泽东}} }

竖排诗词指令

<div class="heti-box">
@Hdiv(poetry,vertical,kinghua){
@Hp(start,h1-self){沁园春·长沙}
@Hp(start){独立寒秋，湘江北去，橘子洲头。<br>
看万山红遍，层林尽染；<br>漫江碧透，百舸争流。<br>
鹰击长空，鱼翔浅底，万类霜天竞自由。<br>
怅寥廓，问苍茫大地，谁主沉浮？}
@Hp(start){携来百侣曾游。忆往昔峥嵘岁月稠。<br>
恰同学少年，风华正茂；<br>书生意气，挥斥方遒。<br>
指点江山，激扬文字，粪土当年万户侯。<br>
曾记否，到中流击水，浪遏飞舟？<br>}
@Hp(end){@Hsp(red){毛泽东}}
}
</div>

横排古文

@Hdiv(ancient,annotation){ @Hh1(){庖丁解牛} @Hp(meta,small){作者：@Habbr(庄子){庄周}（公元前369～公元前286年）} @Hp(){@Hem(){吾生也有涯}，@Hem(){而知也无涯}。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。@Hmr(){缘督以为经，可以保身，可以全生，可以养亲，可以尽年。}} @Hp(){@Hu(名丁的厨工。先秦古书往往以职业放在人名前){@Hpy(){庖}丁}为文惠君解牛，手之所触，肩之所倚，足之所履，膝之所@Hu(支撑，接触){@Hpy(){踦}}，@Hu(砉然：砉，又读xū，象声词。砉然，皮骨相离的声音){@Hpy(){砉}然@Hpy(xiǎng){向}然}，奏刀@Hu(騞然：象声词，形容比砉然更大的进刀解牛声){@Hpy(){騞}然}，莫不中音。合于《桑林》之舞，乃中《经首》之会。} @Hp(){文惠君曰：「嘻，善哉！技@Hu(通「盍」，何，怎样){@Hpy(hé){盖}}至此乎？」} @Hp(){庖丁释刀对曰：「臣之所好者，道也，进乎技矣。始臣之解牛之时，所见无非牛者。三年之后，未尝见全牛也。方今之时，臣以神遇而不以目视，官知止而@Hu(指精神活动){神欲}行。依乎@Hu(指牛的生理上的天然结构){天理}，@Hu(击入大的缝隙){批大@Hpy(){郤}}，@Hu(){导大@Hpy(){窾}}，@Hu(依){因}其@Hu(指牛体本来的结构){固然}，技经肯@Hpy(){綮}之未尝，而况大@Hpy(){軱}乎！良庖岁更刀，割也；族庖月更刀，折也。今臣之刀十九年矣，所解数千牛矣，而刀刃若新发于@Hpy(){硎}。彼节者有间，而刀刃者无厚；以无厚入有间，恢恢乎其于@Hem(){游刃必有余地}矣，是以十九年而刀刃若新发于硎。虽然，每至于族，吾见其难为，@Hpy(){怵}然为戒，视为止，行为迟。动刀甚微，@Hpy(){謋}然已解，如土委地。提刀而立，为之四顾，为之@Hpy(){踌躇}满志，善刀而藏之。」} @Hp(){文惠君曰：「@Hpy(){善哉}！吾闻庖丁之言，得养生焉。」}}

横排古文指令

@Hdiv(ancient,annotation){
@Hh1(){庖丁解牛}

@Hp(meta,small){作者：@Habbr(庄子){庄周}（公元前369～公元前286年）}

@Hp(){@Hem(){吾生也有涯}，@Hem(){而知也无涯}。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。@Hmr(){缘督以为经，可以保身，可以全生，可以养亲，可以尽年。}}

@Hp(){@Hu(名丁的厨工。先秦古书往往以职业放在人名前){@Hpy(){庖}丁}为文惠君解牛，手之所触，肩之所倚，足之所履，膝之所@Hu(支撑，接触){@Hpy(){踦}}，@Hu(砉然：砉，又读xū，象声词。砉然，皮骨相离的声音){@Hpy(){砉}然@Hpy(xiǎng){向}然}，奏刀@Hu(騞然：象声词，形容比砉然更大的进刀解牛声){@Hpy(){騞}然}，莫不中音。合于《桑林》之舞，乃中《经首》之会。}

@Hp(){文惠君曰：「嘻，善哉！技@Hu(通「盍」，何，怎样){@Hpy(hé){盖}}至此乎？」}

@Hp(){庖丁释刀对曰：「臣之所好者，道也，进乎技矣。始臣之解牛之时，所见无非牛者。三年之后，未尝见全牛也。方今之时，臣以神遇而不以目视，官知止而@Hu(指精神活动){神欲}行。依乎@Hu(指牛的生理上的天然结构){天理}，@Hu(击入大的缝隙){批大@Hpy(){郤}}，@Hu(){导大@Hpy(){窾}}，@Hu(依){因}其@Hu(指牛体本来的结构){固然}，技经肯@Hpy(){綮}之未尝，而况大@Hpy(){軱}乎！良庖岁更刀，割也；族庖月更刀，折也。今臣之刀十九年矣，所解数千牛矣，而刀刃若新发于@Hpy(){硎}。彼节者有间，而刀刃者无厚；以无厚入有间，恢恢乎其于@Hem(){游刃必有余地}矣，是以十九年而刀刃若新发于硎。虽然，每至于族，吾见其难为，@Hpy(){怵}然为戒，视为止，行为迟。动刀甚微，@Hpy(){謋}然已解，如土委地。提刀而立，为之四顾，为之@Hpy(){踌躇}满志，善刀而藏之。」}

@Hp(){文惠君曰：「@Hpy(){善哉}！吾闻庖丁之言，得养生焉。」}}

竖排古文

@Hdiv(ancient,vertical){ @Hh1(){般若波罗蜜多心经} @Hp(meta,small){译者：@Habbr(陈祎){玄奘}（602年～664年）} @Hp(){观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。} @Hp(){舍利子，@Htem(){色不异空，空不异色。色即是空，空即是色。受想行识，亦复如是。}} @Hp(){舍利子，是诸法空相，不生不灭。不垢不净，不增不减。@Hmr(){是故空中无色，无受想行识。无眼耳鼻舌身意，无色声香味触法。无眼界，乃至无意识界。无无明，亦无无明尽。乃至无老死，亦无老死尽。无苦集灭道，无智亦无得，以无所得故。}} @Hp(){菩提萨@Hpy(){埵}，依般若波罗蜜多故。心无挂碍，无挂碍故，无有恐怖。远离颠倒梦想，究竟涅槃。} @Hp(){三世诸佛，依般若波罗蜜多故。得阿@Hpy(){耨}多罗三藐三菩提。} @Hp(){故知般若波罗蜜多。是大神咒，是大明咒，是无上咒。是无等等咒，能除一切苦，真实不虚。} @Hp(){故说般若波罗蜜多咒。即说咒曰，揭谛揭谛，波罗揭谛。波罗僧揭谛，菩提萨婆诃。}}

竖排古文指令

@Hdiv(ancient,vertical){
    ······
}

诗词横排

@Hdiv(poetry,nowarp){ @Hh1(){一剪梅·红藕香残玉簟秋@Hsp(meta,small){[宋]@Habbr(号易安居士){李清照}}} @Hp(verse,x-large,kinghua){红藕香残玉簟秋。轻解罗裳，独上兰舟@Hsp(hang){。}
云中谁寄锦书来，雁字回时，月满西楼@Hsp(hang){。}
花自飘零水自流。一种相思，两处闲愁@Hsp(hang){。}
此情无计可消除，才下眉头，却上心头@Hsp(hang){。}} }

诗词横排指令

@Hdiv(poetry,nowarp){

@Hh1(){一剪梅·红藕香残玉簟秋@Hsp(meta,small){[宋]@Habbr(号易安居士){李清照}}}

@Hp(verse,x-large,kinghua){红藕香残玉簟秋。轻解罗裳，独上兰舟@Hsp(hang){。}<br>云中谁寄锦书来，雁字回时，月满西楼@Hsp(hang){。}<br>花自飘零水自流。一种相思，两处闲愁@Hsp(hang){。}<br>此情无计可消除，才下眉头，却上心头@Hsp(hang){。}}
}

仿宋

我自己加的。

@Hdiv(ancient){ @Hh1(){出师表} @Hp(meta,small,fangsong){作者：@Habbr(字孔明){諸葛亮}（181年～234年10月8日）} @Hp(fangsong,fangsong-regular){先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。} @Hp(fangsong,fangsong-regular){宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。} @Hp(fangsong,fangsong-regular){侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。} @Hp(fangsong,fangsong-regular){将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。} @Hp(fangsong,fangsong-regular){亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。} @Hp(fangsong,fangsong-regular){臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。} @Hp(fangsong,fangsong-regular){先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。} @Hp(fangsong,fangsong-regular){愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。} @Hp(fangsong,fangsong-regular){今当远离，临表涕零，不知所言。} }

仿宋指令

@Hdiv(ancient,fangsong){
    ······
}

繁体

@Hdiv(poetry,nowarp){ @Hh1(){春江花月夜@Hsp(meta,small){[唐]@Habbr(吴中四士之一){张若虚}}} @Hp(verse,x-large,kinghua){ 春江潮水連海平，海上明月共潮生@Hsp(hang){。}
灩灩隨波韆萬裏，何處春江無月明@Hsp(hang){！}
江流宛轉繞芳甸，月照花林皆似霰@Hsp(hang){。}
空裏流霜不覺飛，汀上白沙看不見@Hsp(hang){。}
江天一色無縴塵，皎皎空中孤月輪@Hsp(hang){。}
江畔何人初見月，江月何秊初照人@Hsp(hang){？}
人生代代無窮已，江月秊秊朢相似@Hsp(hang){。}
不知江月待何人，但見長江送流水@Hsp(hang){。}
白雲一片去悠悠，青楓浦上不勝愁@Hsp(hang){。}
誰傢今夜扁舟子，何處相思明月樓@Hsp(hang){？}
可憐樓上月裴廻，應照離人粧鏡臺@Hsp(hang){。}
玉戶簾中捲不去，搗衣砧上拂還來@Hsp(hang){。}
此時相朢不相聞，願逐月華流照君@Hsp(hang){。}
鴻鴈長飛光不度，魚龍潛躍水成文@Hsp(hang){。}
昨夜閑潭夢落花，可憐春半不還傢@Hsp(hang){。}
江水流春去慾盡，江潭落月複西斜@Hsp(hang){。}
斜月沉沉藏海霧，碣石瀟湘無限路@Hsp(hang){。}
不知乗月幾人歸，落月搖情滿江樹@Hsp(hang){。}
} }

注释

楷体

@Hdiv(classic){ @Hbq(){ @Hsp(inline-block){注释：}
@Hsp(intent,inline-block){选自《全唐诗》卷二十一（中华书局1999年版）。春江花月夜，乐府旧题。张若虚（约660—约720），扬州（今属江苏）人，唐代诗人。与贺知章、张旭、包融并称“吴中四士”。}
@Hsp(intent,inline-block){〔滟滟〕形容波光荡漾。}
@Hsp(intent,inline-block){〔月明〕月光。}
@Hsp(intent,inline-block){〔芳甸〕花草茂盛的原野。}
@Hsp(intent,inline-block){〔@Hpy(){霰}〕白色不透明的小冰粒。}
@Hsp(intent,inline-block){〔流霜〕飞霜，比喻从空中洒落的月光。}
@Hsp(intent,inline-block){〔青枫浦〕即双枫浦，在湖南浏阳南。}
@Hsp(intent,inline-block){〔扁舟子〕指飘荡江湖的游子。}
@Hsp(intent,inline-block){〔明月楼〕明月映照下的楼阁。这里指楼上的思妇。}
@Hsp(intent,inline-block){〔裴回〕同“徘徊”。}
@Hsp(intent,inline-block){〔离人〕指守候在家的思妇。}
@Hsp(intent,inline-block){〔玉户帘中卷不去〕意思是，月光洒在玉门帘上，欲卷而去之而不得。玉户，用玉装饰的门，也用作门的美称。}
@Hsp(intent,inline-block){〔月华〕月光。}
@Hsp(intent,inline-block){〔流照〕照射。}
@Hsp(intent,inline-block){〔鸿雁长飞光不度〕大雁远飞却不能飞出月光。暗示鸿雁不能传书。}
@Hsp(intent,inline-block){〔鱼龙潜跃水成文〕鱼儿出没只能使水面泛出波纹。暗示鱼儿不能传书。古人有鱼儿传书一说。乐府诗《饮马长城窟行》：“呼儿烹鲤鱼，中有尺素书。”鱼龙，这里指鱼。}
@Hsp(intent,inline-block){〔潇湘〕潇水和湘江，均流入洞庭湖。}
} }

仿宋

@Hdiv(classic,fangsong){ @Hbq(){ @Hsp(inline-block){注释：}
@Hsp(intent,inline-block){选自《全唐诗》卷二十一（中华书局1999年版）。春江花月夜，乐府旧题。张若虚（约660—约720），扬州（今属江苏）人，唐代诗人。与贺知章、张旭、包融并称“吴中四士”。}
@Hsp(intent,inline-block){〔滟滟〕形容波光荡漾。}
@Hsp(intent,inline-block){〔月明〕月光。}
@Hsp(intent,inline-block){〔芳甸〕花草茂盛的原野。}
@Hsp(intent,inline-block){〔@Hpy(){霰}〕白色不透明的小冰粒。}
@Hsp(intent,inline-block){〔流霜〕飞霜，比喻从空中洒落的月光。}
@Hsp(intent,inline-block){〔青枫浦〕即双枫浦，在湖南浏阳南。}
@Hsp(intent,inline-block){〔扁舟子〕指飘荡江湖的游子。}
@Hsp(intent,inline-block){〔明月楼〕明月映照下的楼阁。这里指楼上的思妇。}
@Hsp(intent,inline-block){〔裴回〕同“徘徊”。}
@Hsp(intent,inline-block){〔离人〕指守候在家的思妇。}
@Hsp(intent,inline-block){〔玉户帘中卷不去〕意思是，月光洒在玉门帘上，欲卷而去之而不得。玉户，用玉装饰的门，也用作门的美称。}
@Hsp(intent,inline-block){〔月华〕月光。}
@Hsp(intent,inline-block){〔流照〕照射。}
@Hsp(intent,inline-block){〔鸿雁长飞光不度〕大雁远飞却不能飞出月光。暗示鸿雁不能传书。}
@Hsp(intent,inline-block){〔鱼龙潜跃水成文〕鱼儿出没只能使水面泛出波纹。暗示鱼儿不能传书。古人有鱼儿传书一说。乐府诗《饮马长城窟行》：“呼儿烹鲤鱼，中有尺素书。”鱼龙，这里指鱼。}
@Hsp(intent,inline-block){〔潇湘〕潇水和湘江，均流入洞庭湖。}
} }

代码

需要的库

<!-- Jquery -->
<script src="https://s4.zstatic.net/npm/[email protected]/dist/jquery.min.js"></script>

<!-- 一个生成拼音的库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>

具体实现

烂代码没啥鲁棒性，你可以自己实现一下，实现完了留言告诉我，我可以用一用，具体代码详见github。