Hoping someone with more knowledge of CSS than me (practically anyone) can provide advice on a small niggle.
In Live Preview, the first line of a blockquote is set back from the rest of the text. This isn’t the case in Source or Reading mode. I’ve tried to isolate the issue in Web Developer mode, with no joy. It’s only an aesthetic thing, but it shouldn’t be a thing. Can anyone shed any light on the issue?
Screenshots:
I’m not seeing that on my end.
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Source mode | Live Preview | Reading view
It could be your theme, a CSS snippet, or the font causing the issue. If you post the content here in a code block, maybe someone can spot something.
Thanks, @ariehen.
I’ll need advice on that. I assume I go into Web Developer Tools, use the qualifier to highlight a blockquote … and then copy what?
I tested another couple of options for the text font, and got the same result. I looked at all my CSS snippets and couldn’t find anything there, but suspect that’s where the issue lies.
No developer tools needed. Just paste the exact content of that passage in a code block (link above) – three backticks above and below the content.
Here goes:
>The boundary says, ‘Here and no further.’ The horizon says, ‘Welcome'.
Try adding a space after the caret, so
> The boundary says, ‘Here and no further.’ The horizon says, ‘Welcome'.
https://www.markdownguide.org/basic-syntax/#blockquotes-1
When in doubt, you can select text and run the Toggle blockquote command or right-click → Paragraph → Quote.
If that doesn’t sort it out then onto the theme, other snippets, or the font.
Adding the space indents the whole block of text but leaves the first line hanging in the same relationship to the rest of the text.
So I noodled around - not fonts, not theme (Border), so I tried going down my list of CSS snippets and turning them off one after the other – and got a result.
It turned out to be padding-left and padding-right.If I comment out padding-right and leave padding-left on, I get a hanging first line. Commenting out padding-left fixes the hang.
That fix does leave me without left padding in the quote block, which is fine but if possible I’d prefer more white space. I tried padding with margin-left, to no avail. Any advice on how to get 10px of padding without a hanging first line?
And thank you for the support. You got me to do what I should have done in the first place (although I did go through my snippets looking for blockquote anomalies. I just didn’t know that this was a problem.)
Glad you found the issue.
As for what you are going for, it seems you want to move the content to the right away from the blockquote left vertical border? Is that correct? There’s an element.style here that’s higher specificity than any CSS, so an !important is necessary to override it.
You could try this (adjust as necessary). I haven’t used it for any time, so something may act strange, but it’s worth a go.
.markdown-source-view.cm-s-obsidian.mod-cm6.is-live-preview .HyperMD-quote {
text-indent: -35px;
padding-inline-start: 35px !important;
}
no snippet:
with snippet:
That’s very helpful, thanks, both to my sense of aesthetics and my understanding of CSS. Will poke around and see what happens. Greatly appreciate your time and expertise.
You’re welcome. I hope it’s what you were going for.
Changing paddings in the editor should be fine, but we want to avoid changing the margins. Adjusting the margins in Reading view is fine. Messing with margins, especially using an !important in the rule, will cause all sorts of odd issues. e.g. line numbers over-lapping, the cursor and input/typing behaving erratically, etc. We’re not doing that here, but it’s good to keep in mind. A quote from Licat here:
