Allow CSS skinning of paragraphs in preview mode

Use case or problem

Readability would benefit greatly from being able to skin paragraphs independently, such as being able to use text-indent, on the first line. This is documented here: Indent the first line in each paragraph in preview mode but cannot be solved at the moment, why is why I’m making it a feature request.

Currently Obsidian only renders paragraphs with p tags when there is a strict markdown line break (two spaces or a blank line). In edit mode, you can skin distinct paragraphs with no strict Markdown line breaks, allowing for greater versatility in writing, and using blank lines for other purposes such as bigger semantic breaks. However this does not translate to preview. Even if you don’t use strict line breaks, paragraphs are rendered as one single p block interspersed with <br> breaks, instead of being different semantic paragraphs.

Here I’m using text-indent in source mode, it works fine

This however does not translate to preview, despite having a carriage return denoting, supposedly, a new paragraph

Proposed solution

Would it be possible to make it so that paragraphs that are only separated by one carriage return (not using strict Markdown line breaks) are identified by their own distinct p tags?

Thank you.

5 Likes

As someone who hopes to one day have functionality for wysiwyg and export-for-authors oh God yes please.

3 Likes

The devs gave me a temporary solution: Meta Post - Common CSS Hacks - #354 by KillerWhale

It’s not complete theming but it makes things definitely easier!

I wonder if it would be possible to put more priority on this feature?

As much as I have read of the problems of implementing the feature, this doesn’t seem to be possible to do as a community plugin, so the only option is for obsidian application to support first line indentation.

To be clear, I would expect the indentation to appear both in preview and in edit mode. It’s such a basic feature of text editing that I’m amazed obsidian doesn’t have it.
It’s like your favorite text editor can do everything you wish, but can’t add a space. Like building a rocket, but don’t have fuel.

The way I would expect this feature to work is that where ever I have pressed the enter-key, it would add an indentation, which can be changed from settings. I don’t expect any html tags to be added by the user.

If Obsidian would have this feature I would be able to delete other writing applications that I use (like Storyist) and just use Obsidian instead. This one missing feature makes it impossible to delete Storyist.
I hope the developers of Obsidian would see the value of this feature. Everything else is already possible with Obsidian. :slight_smile:

Cheers, Petri J

Maybe you could try this css snippet:

.markdown-rendered p {
    margin-block-end: 0;
    margin-block-start: 0;
    text-indent: 3em;
}
.markdown-rendered ul {
    margin-block-start: 1em;
    margin-block-end: 1em;
} 

Resulting in:

Limitations:

  • This only works in reading mode, not in Live preview. In Live preview mode, there are extra "br"s in between paragraphs, so it’s more complicated to remove the spacings.
  • It will also indent the first paragraph, unfortunately. I don’t see a css solution for this, since in Obsidian every paragraph and heading is wrapped in a div (unlike a normal web page), which makes certain css selections very difficult or impossible. In a plugin using javascript, it would be possible.

Note that Obsidian, as I understand it, is a (very sophisticated) markdown editor, not a true wysiwyg text editor. Maybe that leads to certain limitations, like having to type two line breaks (in the source) in order to create a new paragraph. I may be wrong in this.

Well, Obsidian uses markdown to display text, this isn’t the same as rich text formatting.

This feature request is very easy to solve, see Samueldee’ s previous suggestion.

This is my version:

.markdown-preview-view p,
.markdown-source-view .cm-line {
  text-indent: 4em;
}

Guide on how to install snippets

If you want more control over this formatting rule, eg. To only indent paragraphs of your choosing, you will need other css rules.
The example above applies to each and every paragraph, no matter how long or short it is

1 Like
.markdown-preview-view p,
.markdown-source-view .cm-line {
  text-indent: 4em;
}

Oh, That worked!
Thanks for your help :slight_smile: