文字 「分享」一款好用的中文排版工具
文字
取消

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

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

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

字体需要较新的浏览器,老旧的有可能无法正常引入。Linux可以使用火狐或者Chromium浏览器,在我的统信UOS上其他的浏览器的Chromium内核都很老旧,不知道其他的发行版是什么情况。

介绍

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

如何使用

head中引入

1
2
<!-- 工具主体 -->
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/heti@0.9.4/umd/heti.min.css">

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

1
2
3
4
5
<!-- 优化中文排版的小问题,如首行缩进2字符 -->
<script type="text/javascript" src="https://cdn.jsdmirror.com/npm/charch@0.1.0/charch.build.js"></script>

<!-- 符号挤压 -->
<script src="https://cdn.jsdmirror.com/npm/heti@0.9.4/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í。 因为谁也不认识,所以最后我们决定念tí。
引号 窃·格瓦拉曾经说过:@Hq(){打工是不可能打工的。} 窃·格瓦拉曾经说过:打工是不可能打工的。
术语 @Hdfn(){窃·格瓦拉},中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。 窃·格瓦拉,中国大陆网络红人、罪犯。被奉为百度「戒赌吧」400万会员的「精神领袖」。
标记 这道题@Hmr(){必考},你们爱记不记。 这道题必考,你们爱记不记。
强调 稳住,@Hem(){我们能赢}! 稳住,我们能赢
着重号 我们@Htem(){必将}战胜这场疫情。 我们必将战胜这场疫情。

使用示例

竖排诗词(我自己加的)

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

竖排诗词指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="heti-box">
@Hdiv(poetry,vertical,huiwen){
@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(){善哉}!吾闻庖丁之言,得养生焉。」}}

横排古文指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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(){故说般若波罗蜜多咒。即说咒曰,揭谛揭谛,波罗揭谛。波罗僧揭谛,菩提萨婆诃。}}

竖排古文指令

1
2
3
@Hdiv(ancient,vertical){
    ······
}

金陵古文

@Hdiv(ancient){ @Hh1(){道德经@Hsp(medium,m-l-5){德经·第四十二章}} @Hp(meta,small){作者:@Habbr(姓李名耳,字聃,字伯阳(或曰谥伯阳),春秋时期人。){老子}(约公元前571年—约公元前470年)} @Hp(jinling,x-large){道生一,一生二,二生三,三生万物。万物负阴而抱阳,冲气以为和。人之所恶,唯孤、寡、不@Hpy(){穀},而王公以为称。故物或损之而益,或益之而损。人之所教,我亦教之。强梁者不得其死,吾将以为教父。} }

金陵古文指令

1
2
3
4
5
6
7
8
9
<div class="heti-box">
@Hdiv(ancient){
@Hh1(){道德经@Hsp(medium,m-l-5){德经第四十二章}}

@Hp(meta,small){作者:@Habbr(姓李名耳,字聃,字伯阳(或曰谥伯阳),春秋时期人。){老子}(约公元前571年—约公元前470年)}

@Hp(jinling,x-large){道生一,一生二,二生三,三生万物。万物负阴而抱阳,冲气以为和。人之所恶,唯孤、寡、不@Hpy(){穀},而王公以为称。故物或损之而益,或益之而损。人之所教,我亦教之。强梁者不得其死,吾将以为教父。}
}
</div>

诗词横排

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

诗词横排指令

1
2
3
4
5
6
@Hdiv(poetry,nowarp){

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

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

仿宋

我自己加的。

@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){今当远离,临表涕零,不知所言。} }

仿宋指令

1
2
3
@Hdiv(ancient,fangsong){
    ······
}

繁体

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

注释

楷体

@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){〔潇湘〕潇水和湘江,均流入洞庭湖。}
} }

代码

需要的库

1
2
3
4
5
6
<!-- Jquery -->
<script src="https://s4.zstatic.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<!-- 一个生成拼音的库 -->
<script src="https://cdn.jsdelivr.net/npm/pinyin-pro@3.18.2/dist/index.js"></script>

具体实现

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

本文由作者按照 CC BY 4.0 进行授权