【CSS】段落首行缩进2个字符,更符合中文的排版样式

检索关键字: CSS css snippets 段落 首行 缩进 字符 中文 排版 样式

以下CSS代码可以让Markdown文档像Word文档那样对段落首行(也包括段落中每个回车换行后的首行)缩进2个字符,这样更符合中文的排版样式。阅读模式和编辑模式都可正常使用。

缩进效果如下图:

阅读模式下, 段落中每个回车换行后的首行也如编辑模式那样进行缩进。但每个人使用的主题各异,缩进可能会没有缩进整齐。在CSS代码中,Unicode字符编码\0009表示水平制表符,\00A0表示不换行空格,大家可通过增减、组合搭配这两个Unicode字符来微调回车换行后的首行缩进量。

另外,根据中文样式,一些内容无需缩进,CSS代码中已经做出下列排除项:

  • 标题
  • 引用
  • 列表
  • 表格
  • 当前编辑空行

大家在日常使用中有发现其他需要排除项才更符合中文的排版样式的,请跟帖说明。

CSS代码:

/* === 段落-首行缩进2个字符 By Linzeal 2024/2/1更新 === */

/* 也包括段落中每个回车换行后的首行缩进 */

:is(
.markdown-source-view .cm-line:not(:is(:has(>.cm-hmd-frontmatter,>br),.HyperMD-header,.HyperMD-list-line,.HyperMD-quote,table .cm-line)), /* 编辑模式 */
.markdown-rendered :not(:is(blockquote)) > p /* 阅读模式 text-indent不支持each-line的办法 */
){
  text-indent: 2em !important;
}

.markdown-rendered :not(:is(blockquote)) > p
{
  /*text-indent: 2em each-line !important; 若支持each-line参数则用这个即可,更为简单,就无需下面的修正 */
}

/* 阅读模式下对每个回车换行后的首行缩进的修正 */
.markdown-rendered :not(:is(blockquote)) > p > br
{
  content:'';
  white-space:pre; 
}
.markdown-rendered :not(:is(blockquote)) > p > br::after
{
  content:'\000A\0009\00A0\00A0'; /* Unicode字符编码\0009表示水平制表符,\00A0表示不换行空格,可通过增减、组合搭配这两个Unicode字符来微调回车换行后的首行缩进量 */
}

/* === CSS代码结束 === */
5 个赞

感谢大佬的分享,非常好用! :+1:

好像有个小bug,就是缩进线没有对齐,我改动了一点,似乎这样就对齐了。

改动后的代码

.markdown-rendered :not(:is(blockquote)) > p > br::after
{
  content:'\A\0009\00A0\00A0\00A0';
}

前后对比
1
2

1 个赞

每个人使用的主题各异,缩进可能会没有缩进整齐。在CSS代码中,Unicode字符编码\0009表示水平制表符,\00A0表示不换行空格,大家可通过增减、组合搭配这两个Unicode字符来微调回车换行后的首行缩进量。

各位大佬:
我的使用场景:
1.编辑模式和预览模式在外观显示上保持一致;
2.一级标题只有一个,在最开始,同样需要居中;
3.其它标题和段落全部在起始位置空两个格;
4.嵌入的图片、表格、引用等可居中或左对齐。
请教以上模式用CSS片段如何实现呢?

现在基本除了印刷体文章,很少有段落首行缩进的了。

参见各大网站/媒体的文章,基本都是顶格写,段落之间空一行了。

另外,首行缩进也不是什么中文传统,古代竖着写肯定不这样,估计也就是新文化运动或者建国后竖改横排版时定的一个规则,已经不适应当前时代了。

CSS代码做了一些优化。2024/2/1