Bullet for H3 headers not aligned

Question

Bullet for H3 headers not aligned

martindufort opened this issue 2 years ago · 5 comments

martindufort commented 2 years ago

The bullet for H3 header is not center-aligned with the text. Is this by design?

Answer 1 · 2022-07-28T14:13:30.000Z

Not by design, but I haven't found a workaround yet for adjusting this when the font size is made smaller.

Answer 2 · 2022-07-29T22:25:04.000Z

Here's a quick workaround that I found.

logseq/logseq#4261 (comment)

If you're looking for a quick fix, you can add the following code to your custom.css:
:not(.block-ref) .ls-block h1,
:not(.block-ref) .ls-block h2,
:not(.block-ref) .ls-block h3,
:not(.block-ref) .ls-block h4,
:not(.block-ref) .ls-block h5,
:not(.block-ref) .ls-block h6 {
	transform: translateY(-4px);
}
The reason why I'm using translateY(-4px) is because the div that wraps both the bullet with the text aligns them in the baseline. For some reason, when you decrease the size of the headings, it doesn't align properly.

Maybe it's because they're setting a fixed height? I didn't debug it enough...

Here's the screenshot of a <h3> tag. I changed the font-size to 1.125rem, here's what it looks like when I inspect:

Without translateY:

With translateY:

I like to have my headings a little bit smaller than the default option, here's the code for it (it's working quite nicely with the translate change):
/* Content Headings */
.editor-inner .h1.uniline-block, :not(.block-ref) .ls-block h1 { 
	font-size: 1.675rem; 
}
.editor-inner .h2.uniline-block, :not(.block-ref) .ls-block h2 { 
	font-size: 1.375rem; 
}
.editor-inner .h3.uniline-block, :not(.block-ref) .ls-block h3 { 
	font-size: 1.125rem; 
}
.editor-inner .h4.uniline-block, :not(.block-ref) .ls-block h4 { 
	font-size: 1rem; 
}
.editor-inner .h5.uniline-block, :not(.block-ref) .ls-block h5 { 
	font-size: .875rem; 
}
.editor-inner .h6.uniline-block, :not(.block-ref) .ls-block h6 { 
	font-size: .75rem; 
}