Indent first line of paragraph

Share & showcase
1

Hey there,

I saw a couple of questions how to indent text so I wanted to share my solution with you.

I wanted this:

  • don’t indent headings, quotes
  • indent first line of paragraph
  • don’t indent first line of first paragraph after heading, quotes

Step 1

  • add “indent” as CSS class with the new properties feature

Step 2

  • create your custom CSS snippet:
/* TEXT INDENT */

/* regular indent */
.indent .cm-content .cm-line {
    text-indent: 1.5rem;
}

/* no indent for header */
.indent .cm-content .HyperMD-header {
    text-indent: 0;
}

.indent .cm-content .HyperMD-header+.cm-line,
.indent .cm-content .HyperMD-quote+.cm-line {
    text-indent: 0;
    /* background-color: blue; */
}

.indent .cm-content .HyperMD-header+.cm-line+.cm-line,
.indent .cm-content .HyperMD-quote+.cm-line+.cm-line {
    text-indent: 0;
    /* background-color: red; */
}

(if you want you can uncomment the colors red and blue to see what it does)

Hope this helps :slight_smile:

0
01484×2000 402 KB

Bildschirmfoto 2023-10-07 um 12.36.59
Bildschirmfoto 2023-10-07 um 12.36.591920×919 133 KB

3 Likes
2

:slight_smile: thanks a lot for this helpful CSS snippet! I even was able to make slight modifications to my specific needs and create another CSS for header formatting from this template, although I currently understand little about the DOM class hierarchy of Obsidian which is used here.

To my observation, the CSS is effective in preview mode. In reading mode, it is not effective with my installation. With Ctrl+Shift+I i found out that Obsidian is creating a completely different DOM model with just a <br> in case of a new paragraph without an empty line between the paragraphs.
I was able to insert additional line spacing for this case with the CSS code

br	{
	content: ".";
    display: block;
    margin-bottom: 0.5em;
}

but of course this is not the same.

Questions: Should I change my Obsidian installation, or a setting, or is this a result of how Obsidian works and there’s no solution to it?

3

Hello, can you help me with the Step 1?

I have this snippet working, but it is broking the headers and markers

/* reading mode */

.markdown-preview-view p {

text-align: justify;

text-justify: inter-word;

text-indent: 5%;

}

/* source view and live preview */

.markdown-source-view.mod-cm6 .cm-line {

text-align: justify;

text-justify: inter-word;

text-indent: 5%;

}

And also in reading mode is not working properly