Indenting lines 2-n of a paragraph in Publish environment?

[Sentiment]

I would like to create some references in Obsidian that look like this, i.e., all lines after the first line in each paragraph are indented. The target for publication is my Publish environment. Does anyone know of a way to accomplish this, besides manually entering line breaks and spaces/tabs? Thanks in advance…

[ariehen]

For notes where you want this style, you could use a cssclass:

---
cssclass: para2n
---

and some CSS:

.markdown-preview-view.para2n p {
  text-indent: -36px;
  padding-left: 36px;
}

I don’t currently use Publish, but I would think you could add this to the publish.css as is, or with some slight changes. Hopefully it gets you pointed in the right direction

---

Another option if you only want selected paragraphs to have the indent is to use a span class. In your note:

<span class='para2n'>We want to empower the team with the right tools and guidance to uplevel our craft....</span>

and the CSS (needs an Obsidian installer > v1.1.8 to work):

:where(p):has(.para2n) {
  text-indent: -36px;
  padding-left: 36px;
}

[Sentiment]

Awesome – it works. Thank you. What would be the best way to apply this to multiple lines at once (vs. putting a separate span tag on every single line)?

[ariehen]

The snippet works because we can target individual paragraphs/blocks.

I think the first option is the cleanest (a cssclass) and keeps your markdown from being mixed with html you might not want later, but the indent is applied to every paragraph in the document and maybe you don’t want that.

If you only wanted, say, 3 paragraphs out of 10 to look like this, a <span class will need to be on each paragraph. Does that make sense? Or did I misunderstand your followup question?

If you are doing this a lot, I’d look into the wrap with shortcuts plugin. You could set up a wrap with a hotkey. Select the paragraph/block of text → command or hotkey → it’s wrapped in a span.

[Sentiment]

I guess I’m looking for something in between the cssclass and span class. I have ~150 references, but they’re in a reference section (not their own note). eg:

It’s not a big deal but would be nice to wrap them all in a single tag, rather than 150 individual tags.

I suppose I could also put them in another note and transclude it.

Interesting plugin, thanks for mentioning that, I can think of several uses for it in addition to this.

[ariehen]

Got it. I’ll think about it and get back to you if anything bubbles up. Transcluding the references note with the cssclass is a good idea.

Yeah, wrap with shortcuts is awesome. Super simple but so useful. I use it for a bunch of different things.

[Sentiment]

You helped me a ton. Problem is fundamentally solved, anything else is just a nice to have. Appreciated!

[holroy]

@ariehen

I’ll think about it and get back to you if anything bubbles up.

Since this should work for all paragraphs within that section wouldn’t it be possible to tag the heading and extend your previous CSS?

Either by doing <h2 class="para2n">References</h2>, or by extending the headings markdown with something like <span class="para2n"></span> in combination with a :has(). These could then be used as a prerequisite for the paragraphs to be indented.

Untested code follows:

h2.para2n p,
h2:has(.para2n) p {
  text-indent: -36px;
  padding-left: 36px;
}

This way the references are untouched, but the leading header dictates the formatting. The latter variant might the better option with regards to folding options, but still untested.

[ariehen]

You’ve probably added a bunch of span classes by now, but here’s another option if you’re not using the Minimal theme. If ## References is a h2 and at the bottom of your document, (all blocks/paragraphs after will be styled with the indent), you could try this:

## References <wbr>

...

...

and the CSS for reading view:

div:has(>h2>wbr) ~ * {
  text-indent: -32px;
  padding-left: 32px;
}

source:

reading:

An alternative is to add live preview into the mix. Those results are less than stellar because of the negative text-indent, but I will use a variation of this for sure.

div:has(>h2>wbr) ~ *,
.HyperMD-header-2:has(wbr) ~ * {
  text-indent: -32px;
  padding-left: 32px;
}

[ariehen]

holroy, I think there’s something here, but I couldn’t get the <h2 class and ## working together (or separately) the few ways I tried.

[Sentiment]

Okay, so I tested this method:

## References <wbr>

It does work, except the <wbr> is shown in the Outline entry for the References section.

If there were a way to avoid that, then it would be a perfect solution.