element.style is increasing font size arbitrarily

Question

This page was auto-generated by Emacs' org-mode HTML export. I've got it set up to use MathJax rendering of LaTeX symbols. On the third column of the There Exists line I've used inline LaTeX symbols surrounded by "$"

$\exists  x \mid x2>x$

which is proper LaTeX embedding, whereas the line above and below I haven't, i.e., Emacs just picks up LaTeX markup and inserts it without using "$". If you Inspect (I'm using Chrome) this code, you'll see it is throwing in a font-size increase for only this LaTeX markup, seemingly arbitrarily, making the symbols look abnormally large compared to the other symbols.

<span style="display: inline-block; position: relative; width: 5.681em; height: 0px; font-size: 129%;">

How can I stop, block, override this element.style being inserted and blowing up my font size?

element.style {
    display: inline-block;
    position: relative;
    width: 5.713em;
    height: 0px;
    font-size: 129%;
}

Update:

I've narrowed the problem down to something in my custom stylesheet.css:

table {
    /* font-family: monospace; */
    font-family:'eulermedium_18';
    /* font-size: 1.05em; */
    margin-left:5%;
    margin-right:auto;
    margin-top:0.5em;
    margin-bottom:0.5em;
    line-height: 1.5em;
}

namely, the font-family. Above I've commented out monospace, which gave me a 129% arbitrary size. But then as you see I tried AMS Euler (ttf version converted by Font Squirrel, as is the Computer Modern) and it caused the $...$ parts of the org-mode table in question to reduce the font size to 53%! Craziness. Again, with no font-family in table sizes are normal across LaTeX/MathJax and regular text. Is there any way to have the org-mode HTML export for MathJax stuff use my fonts correctly?

The $...$ tirggers a MathJax interjection. The other two rows don't get that treatment. You could probably change a MathJax setting to change the size, but the fonts are different as well, so it is going to stick out unless you change that too. Why not treat them all the same? All $...$ delimited or all without. — NickD
Yes, I will change to proper LaTeX enclosings, but that doesn't solve my problem. I guess I need to understand why the element.style thing is being called in. — 147pm

mmk mmk · Accepted Answer · 2019-03-04T06:08:23

It seems to be related to font-family too. Column 3 of There Exists line seem to be use font as STIXGeneral-Italic, while the default font used at other places seem to be monospace. You can override these styles in your stylesheet.css using !important directive.

.mrow span{
    font-family: inherit!important;
    font-size: 100%;
}

element.style is increasing font size arbitrarily

1 Answers