Paragraph indentation that works in Source and Live Preview modes (not Reading View)

Custom CSS & Theme Design
1

The following CSS does paragraph indentation in Source and Live Preview mode quite well. Subsequent text paragraphs, and only text paragraphs, are indented. If you add an empty line between two paragraphs, indentation is reset and the next paragraph does not indent. Other content, such as lists and tables, also resets indentation.

[class="cm-line"]:not(:has(> br:only-child)) + [class="cm-line"],
[class="cm-line"]:not(:has(> br:only-child)) + [class="cm-active cm-line"],
[class="cm-active cm-line"]:not(:has(> br:only-child)) + [class="cm-line"],
[class="cm-active cm-line"]:not(:has(> br:only-child)) + [class="cm-active cm-line"] {
    text-indent: 2em;
}

Unfortunately, I can’t get the same behaviour in Reading View because paragraphs there are separated by <br> elements with no other targetable markup. If anyone has any ideas, please let me know!

2

Hello!

To achieve paragraph indentation in Reading View where paragraphs are separated by
elements, you can use the following concise CSS:

/* Indent valid paragraphs */
[class=“cm-line”]:not(:has(> br:only-child)) {
text-indent: 2em;
}

/* Reset indent after an empty
*/
[class=“cm-line”]:has(> br:not(:empty)):not(:first-child) {
text-indent: 0;
}

/* Indent subsequent paragraphs */
[class=“cm-line”]:not(:has(> br:only-child)) + [class=“cm-line”]:not(:has(> br:only-child)) {
text-indent: 2em;
}
Summary
First rule: Indents paragraphs not followed by an empty line.
Second rule: Resets indentation for paragraphs preceded by an empty line.
Third rule: Indents the next paragraph after a valid paragraph.
This should give you the desired indentation behavior.

3

Hi @Raymond874Butler :wave:

I don’t mean to be blunt, but was this suggestion of your making or something expelled from a chat bot?

Because it seems like it’s from a chat bot.