Use case or problem
When I use Mathjax inside a list, usually I either use (1) the inline $ ... $ in the middle of a sentense, or (2) the inline $ ... $ solely in an indented new line (so as not to break the list flow), or (3) the block math $$ ... $$ in an indented new line.
The second use case beautifully displays the math equation indented/aligned with bullet points, which is great. But the third use case also indents/aligns the math equation with bullet points, which is not quite what “block” maths are designed for.
I don’t know if there’s somebody who would argue that, even for block maths, once it’s been put inside of a list structure, it should acquire that indentation.
But for me, when the list goes deeper and the equation is long, it’ll only occupy the right side area of the page while still overflows to the right, which is not good.
Even if the list indentation is justified (even for block maths), we need something to change this behaviour just in case we need. Maybe an Editor option toggle, maybe a cssclasses which is note-specific.
What’s special about block maths is that, for example images render into <span> elements that are left-aligned and not full-width, tables render into <table> elements that are also left-aligned and not full-width, whereas block maths render into center-aligned <mjx-math> elements and their full-width <span> containers. So I think it’s important to keep this displaying style, no matter where the block belongs to (structurally). People have this expectation for block maths in contrast to images, tables or paragraphs.
Proposed solution
I don’t have much idea. Setting span.math.math-block { direction: rtl; } or its child node mjx-container.MathJax { direction: rtl; } might a hack, so that when the equation is too long, it overflows to the left (the indented empty spaces).
Or, maybe, { position: absolute; left: -50%; right: -50%; } to make it overflow to both directions.
But the best would be not to only rely on CSS, but to give each span.math.math-block element a calculated margin-left offset to unindent it (and a width: var(--file-line-width) to assure full-width).
Or, maybe, to use the CSS anchor positioning that is yet to be supported.
Current workaround (optional)
Example code
- A. list
- B. going deeper
- C. inline math $a^2+b^2=c^2$.
- D. inline math in an indented new line
$a^2+b^2=c^2$
- E. inline math in an indented new line + extra indentation
$a^2+b^2=c^2$
- F. block math itself solely as a list item (not recommended)
- $$
a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2
$$
- G. block math in an indented new line
$$
a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2
$$
- H. block math in an indented new line + extra indentation
$$
a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2+a^2+b^2
$$
- END
in Live Preview mode:
in Reading mode:
Related feature requests (optional)
not really related, but I do care about block-math-in-list rendering a lot https://forum.obsidian.md/t/space-for-block-math-equation-source-is-not-removed-in-lists