#1

A simple indentation for the first line in each paragraph. Long texts are recognized as just a paragraph, making them uncomfortable to read in Preview Mode, so I can’t do that with CSS either (at least I don’t know how).

3 Likes
Indenting paragraphs (and paragraphs only) in source mode
Allow CSS skinning of paragraphs in preview mode
#2

That’s correct. Markdown does not have syntax for indented paragraphs. One solution is to separate paragraphs with with a break, by typing <br> in the Editor view. The <br> will not render in Preview.

#3

One solution is to separate paragraphs with with a break

It is also a problem if I need to type 1 word on each line, it will take up a lot of space.

#4

Isn’t there a way in CSS to do hanging initial indents for presentation mode?

#5

You can do a workaround, but it’s not as straight forward as just typing markdown in the Editor pane.
e.g. You could add

article {
    padding: 1em;
}

.first {
    text-indent: 2em;
}

to your css file, then at the start of your paragraph, paste
<p class="first">
in the Editor, but that really defeats the purpose of the simplicity of markdown. Maybe the dev’s can implement a solution when the WYSIWYG editor is released.

#6

Use a custom css file (obsidian.css) with something like the following:

p::first-line{text-indent: 2em;}
2 Likes
#7

Now try to write a second paragraph right after the first, without skipping a line, it is recognized as if the same element.
The Enter key needs to close the paragraph </p> and start another one for this code to work, it must be a simple programming change to do this.

#8

I am quite sure that the standard Markdown syntax requires a blank lines (two consecutive enter) between paragraphs.

1 Like
#9

it turns out you’re right!

#10

I wonder if Licat could implement it to detect new paragraph if two spaces before enter. Seems to be common markdown implementation, I’m not sure.

#11

Usually, you don’t want the first paragraph to be indented from what I know. This should indent the following paragraphs only:

p{
font-size: 1rem; line-height: 1.5; margin-bottom: 0;
}
p + p{
text-indent: 1.5em; margin-top: 0;
}
1 Like
#12

Another work around, which is rather messy, is to use HTML codes.

So, lets say it takes 5 spaces to get a clear looking indentation, use &nbsp; 5 times.

You’ll get this look:

      Ea dicit oporteat recteque vis, nominavi pericula ut vix. Dicat essent mnesarchum mea id, vix id mazim referrentur, assum dolores pro an. Eu scribentur suscipiantur complectitur cum, lorem recteque consequuntur quo ei. Sed no oporteat scripserit, indoctum liberavisse ea eum. Cu pro decore disputando, te meis tempor qui. Tollit essent oporteat has te.

But it will just look messy in the editor:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ea dicit ...

Note: Strangely enough that really may have been 6 spaces, because for some reason in using the code, you can make an extra space by just including it between the code and your words, so &nbsp;Ea dicit ... is a bit different from &nbsp; Ea dicit ....

Update:

Okay so I think there’s a slightly messy look because of the &nbsp; with an ability to use one extra space indent, so for 5 spaces, you can use &nbsp; &nbsp; &nbsp;. Its just &nbsp; with spaces in between them. So…

&nbsp; &nbsp &nbsp;Ea dicit ...

… would be precisely 5 spaces.

#13

Thanks!! It worked as intended

#14

The ::first-line solution by @aroberge is almost right.
As @NilsHempel points out, you generally don’t want to intent the first paragraph after a heading.

Unfortunately, the simple p + p selector doesn’t work because of the way Obsidian presents the view. Here is a screenshot showing dev tools. Note every section is inside a div element so there doesn’t seem to be a CSS selector powerful enough to match each paragraph.

Are there any CSS wizards out there who know how to properly select paragraphs which are nested inside divs like this?

image

1 Like
#15

Agree that would be wonderful to have. I’ve opened a feature request for this.

#16

I think I’ve figured it out, I think this is html but nontheless

Text had been indented in the preview mode, try it out for yourself.

1
1869×95 16 KB
These are both the preview (left) and editor mode (right) side by side.