Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Do not indent the first paragraph after a heading #36

Closed
reuixiy opened this issue Dec 16, 2019 · 12 comments
Closed

Do not indent the first paragraph after a heading #36

reuixiy opened this issue Dec 16, 2019 · 12 comments
Labels
enhancement New feature or request

Comments

@reuixiy
Copy link
Owner

reuixiy commented Dec 16, 2019

paragraphStyle = "indent"

https://internetingishard.com/html-and-css/web-typography/#paragraph-indents

Three situations:

  1. First paragraph of post — it's after post-title
  2. First paragraph after a heading
  3. First paragraph after a <hr>
@reuixiy reuixiy added the enhancement New feature or request label Dec 16, 2019
@he-sb
Copy link

he-sb commented Jan 9, 2020

作者大佬,这个选项当设置为默认的margin时,我通过手动在需要缩进的段落开头使用&emsp;&emsp;来缩进,但此时标题下的第一段会始终处于左对齐状态,无法缩进,当删掉文章中所有的&emsp;&emsp;,将该选项改用indent参数时又会出现二级三级标题也强制居中的状态,而我希望二级标题三级标题是左对齐的——这也是为什么我坚持使用手动控制段落的缩进,但现在当我使用margin参数时一切都很正常,只有第一段无法正常地手动控制缩进,有什么解决办法吗 🙈

@he-sb
Copy link

he-sb commented Jan 9, 2020

也就是说,我遇到的问题是:

  1. 该参数设置为margin并通过手动控制缩进时,第一段无法正确的缩进,但当第一段后面是一个二级标题或第二段末尾不使用两个空格而是通过空一行来分段时第一段可以正常缩进。

  2. 该参数设置为indent时缩进一切正常,但二级标题三级标题也会被强制居中,而我希望子标题时左对齐的。

P.S. 文档中的分段通过段落末尾加两个空格再回车来实现,而非两段之间间隔一个空行,后者会导致文章排版多出一个段间距。

@reuixiy
Copy link
Owner Author

reuixiy commented Jan 9, 2020

样式交给 CSS 控制,如果你需要段首缩排,建议直接配置分段样式 paragraphStyleindent,而非手动加全角空格,输入太麻烦了。也不建议行末添加两空格,然后段首添加两全角空格,以此实现无段间距的段首缩排,因为直接 CSS 控制即可,且行末两空格生成的是 <br> 而非 <p>,逻辑上说不过去,比如:

第一段  
第二段

生成的是

<p>第一段<br>第二段</p>

而非符合逻辑的

<p>第一段</p>
<p>第二段</p>

总之,正确的操作应该是配置 paragraphStyleindent,通过 CSS 实现段首缩排,这样写作的时候直接敲第一段,然后两回车,再直接敲第二段即可,不用再去复制粘贴全角空格。

至于段首缩排后分节标题的样式变成了居中,这是我出于美观考虑有意而为之的,是为了消除段首缩排左边不对齐的「丑陋」。

段首缩排不像段间距式,它的左边不是一条对齐的直线,比如:

  1. 段间距式

    分节标题
    
    测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字。
    
    测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字。
    
  2. 段首缩排(分节标题居中)

           分节标题
    
    测试文字测试文字测试文字测试文字测试
    测试文字测试文字测试文字。
      测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字。
    

这意味着什么呢?当分段样式为段间距式时,分节标题左对齐,左边依然是一条直线,很美观;当分段样式为段首缩排时,左边本来就是一条不对齐的折线,而分节标题再左对齐,就会加重左边不对齐的程度,变得更丑陋。可以用例子来对比一下:

  1. 段首缩排(分节标题左对齐)

    分节标题
    
    测试文字测试文字测试文字测试文字测试
    测试文字测试文字测试文字。
      测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字。
    

故当分段样式为段首缩排时,我将分节标题的样式强制为居中,实现一种古典主义的三角形构图,将注意力从左边转移,以降低左边不对齐导致的美观丑陋,同时也让页面整体更加稳定、平衡、美观。

当然,如果你非要在段首缩排时将分节标题左对齐,可以通过自定义 CSS 样式实现,将以下代码加入你的 ~/blog/assets/_custom/custom.scss 文件(没有自建)

[data-indent="true"] {
    .contents-title {
        text-align: left;
    }
    .post-body {
        h1, h2, h3, h4, h5, h6 {
            text-align: left;
        }
    }
}

即可。

@he-sb
Copy link

he-sb commented Jan 9, 2020

明白了,这么说我应该配置paragraphStyleindent,,然后自定义CSS来使分节标题左对齐,这样就通顺了,非常感谢~

另外,我执着于分节标题的左对齐是基于弱化分节标题的存在感的考虑,因为分节标题渲染出来后相比于正文的文字存在感太强,会造成阅读时对于上下文内容的割裂感(割裂感来源于阅读到居中的分节标题时必然造成的注意力的停顿,阅读正文时会下意识地从左侧开始阅读下一段,而居中的分节标题会强迫读者将目光移向屏幕中间再转移至下一行的左侧),而我使用分节标题的目的只是为了使文章结构更加清晰,并不是为了分割各部分内容。

@reuixiy
Copy link
Owner Author

reuixiy commented Jan 9, 2020

嗯,也得考虑个人的行文风格~

@he-sb
Copy link

he-sb commented Jan 9, 2020

对滴,再次感谢作者大大的支持~

@he-sb
Copy link

he-sb commented Jan 16, 2020

还有一点点小麻烦,这样设置后我在新建了/blog/assets/_custom/custom.scss这个文件并粘贴进了上面那段CSS代码,但是实际上分节标题还是居中的,不知道怎么回事。。

还有设置分段样式为段首缩排后,markdown控制的无标题列表也像正文一样被缩排了,比如

* 列表第一项
* 列表第二项

我希望这种情况下列表项所在的行是左对齐的,该怎么操作呢,能否指点一二 🙈

@reuixiy
Copy link
Owner Author

reuixiy commented Jan 16, 2020

麻烦给个能反映此这两问题的在线链接

@he-sb
Copy link

he-sb commented Jan 16, 2020

麻烦给个能反映此这两问题的在线链接

https://he-sb.github.io/posts/why-i-stay-away-from-sns/

@reuixiy
Copy link
Owner Author

reuixiy commented Jan 16, 2020

问题一

我在页面的 CSS 的后面没有发现你自行添加的代码。请检查并确保该文件的路径是 ~/blog/assets/_custom/custom.scss

问题二

感觉你的用法有点奇怪……应该用标题而非列表……不过,可往 custom.scss 中添加

[data-indent="true"] {
    .post-body {
        ol, ul {
            padding-left: 4em;
        }
    }
}

修改数字自行控制。

@he-sb
Copy link

he-sb commented Jan 16, 2020

感谢作者拨冗

问题一

我确定路径没问题,所以百思不得其解,我晚点再研究一下吧。。

问题二

就像我之前的回复说的,这是个排版逻辑问题,文中只是想通过列表项来对下文内容进行一个提炼,但这个提炼所涵盖的范围又很小,用标题的话渲染出来存在感过强了。

再次感谢~

@he-sb
Copy link

he-sb commented Feb 3, 2020

这应该是最后一次就本问题前来叨扰了,十分抱歉。

我仔细考虑了一下,还是决定采用“不缩进+段间距式排版”了,综合考虑下来这种方式配置最简便,效果也最接近我的目标,强行坚持段首缩排的话其他格式又会出一堆问题,过于纠结在排版问题上的话和一开始选择hugo,Markdown,静态博客这些工具来追求简洁的初衷又渐行渐远了,还是把精力集中在内容上比较值当。

再次感谢作者的付出,新年愉快~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants