Documentation for MathJax CSS

What I’m trying to do

I’m specifically looking for some documentation about what aspects of the Mathjax that comes with Obsidian are customisable. So far I’ve figured out how to change the font of my TeX equations to STIX to match with my selected display font using the following CSS snippet:

.MJX-TEX,
.MJX-TEX * {
	font-family: "STIX Two Text" !important;
}
.mjx-i {
	font-style: italic !important;
}

but it’s caused some alignment and spacing issues (see images for comparison) as well as making symbols of inclusion (so far I’ve seen it mess up square and round brackets) not extend all the way up and down when using \left[, \right] and \left(, \right) respectively. At the font size I’m using, I’m really not fond of the way that the default font that comes with Mathjax renders on my screen and I’m far more used to using STIX. Keep in mind, I have next to no idea how CSS works and found the above code here. This is what equations look like with the CSS snippet enabled:
image_2024-03-04_204329022

and then disabled (default):
image_2024-03-04_204155562
I much prefer the former’s letterforms and prime symbol, but as you can see the spacing, the square root, and the brackets look really janky.

Things I have tried

I’ve looked in all of these places:

  • https://docs.mathjax.org/en/latest/index.html
  • http s://www.youtube.com/watch?v=FA0z7oR7OWc
  • htt ps://stackoverflow.com/questions/21580476/setting-css-styles-color-for-mathjax
  • htt ps://forums.ankiweb.net/t/how-to-use-css-to-change-the-font-of-mathjax-in-anki-to-the-universal-font-of-time-new-roman/40980
  • youtube. com/ watch?v=FA0z7oR7OWc
  • htt ps://forum .obsidian.md/t/changing-mathjax-css/16585

and I’ve only really understood, like, half of it?

1. Is there any comprehensive documentation for how to modify the appearance of Obsidian’s Mathjax using CSS snippets?

2. How do I change my own snippet to fix the broken brackets and spacing, but keep the other characters?

3 Likes

That prime symbol looks indeed weird as your default option. Maybe it is caused by a theme or some css snippet that is active.

Issues with gaps in brackets can be caused by the font size or zoom level. (I believe this was only the case on windows)

It can’t be a CSS snippet interfering, the only CSS snippet that I’ve written for this vault is the change to STIX for MJX shown above. Toying with zoom level doesn’t seem to have much effect?

I also have this issue. I tried to change MathJax font before, and every font that I changed to look horribly spacing out. From the look of it, each MathJax character has some sort of margin and it only fits for the default font. I gave up eventually and stick with the default font.