Outdented marks / Hanging punctuation

[andre-m-faria]

Hello,

@uriafassina asked in Discord about if there is a way to have the header marks # outside of the paragraph and not inside as in iA Writer.

So I started to mess around with Things theme trying to achieve that.

What I did was set text-indent: 1em; inside .cm-content, text-indent: 0.4em; for markdown-preview-view h1 and text-indent: -0.3em; for markdown-preview-view h2.

The idea was to set a text-indent to all content so I could add a negative indentation for the headers.

Well, I don’t know the basics of CSS, so the whole question here is, this is the best way to achieve that?

I checked that this messed with indentation of read mode, how I can fix that?

[kenjibailly]

I loved your idea and created a css snippet to do this.
I have made it so that it shows in the editing and the reading view.

Screenshots:

Reading View:

Editing View:

headings-indent.css (562 Bytes)

At least if this is what you wanted to achieve, cause I didn’t fully understand the question.
This script works with the default theme and tested it also on the Prism theme.

[andre-m-faria]

Hey! how are you?

Thanks for replying, Well it was almost there.
What he wanted was to put the header characters like # for h1 or ## for h1 outside the margin of the text, this is somehow clear? My english is terrible…

How I could say, like the header characters start before the text line.

This is not the same as have the text indented inside the header.

I really don’t know if I could be clear, just let me know…

[andre-m-faria]

But what you did was great, I will use for my self.

[kenjibailly]

Honestly it gets pretty tricky and this script will have to be changed depending on how your layout looks. What does work is when you scroll to make your text bigger, it doesn’t break.

Screenshots:

My code is messy imo, maybe this can be done in another way.
Snippet:

headings-indent.css (1.3 KB)