Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

26520% mjx-texatom font-size #2694

Closed
andrhua opened this issue May 17, 2021 · 2 comments
Closed

26520% mjx-texatom font-size #2694

andrhua opened this issue May 17, 2021 · 2 comments
Labels
Accepted Issue has been reproduced by MathJax team Merged Merged into develop branch Test Needed v3

Comments

@andrhua
Copy link

andrhua commented May 17, 2021 •
edited
Loading

Issue Summary

Server conversion from TeX to CommonHTML produces enormous glyphs for both display and inline maths, and seems like no config option fixes that.
image

Steps to Reproduce:

Minimal html and css to reproduce:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link type="text/css" rel="stylesheet" href="./minimal.css">
    </head>
    <body>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="ltx_Math">\(\min_{\mathcal{G}}\log(1-\mathcal{D}(\mathcal{G}(\mathbf{z})))\)</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        <br>
        <span class="ltx_DisplayMath">\[\max_{\mathcal{D}}\min_{\mathcal{G}}V(\mathcal{G},\mathcal{D})\]</span>
        </p>
    </body>
</html>

@font-face {
  font-family: "Computer Modern Serif";
  src: url("https://cdn.jsdelivr.net/gh/arxiv-vanity/computer-modern@ec5980c33198e5c15debcae604bfff93fed5abf5/serif/cmunrm.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: "auto";
}

body {
    font-family: "Computer Modern Serif";
    font-size: 16px;
}

Conversion script (don't mind jsdom, I'm using it before mathjax to patch the document):

const fs = require("fs");
const { JSDOM } = require("jsdom");
var argv = require('minimist')(process.argv.slice(2))

const htmlfile = fs.readFileSync(argv._[0], 'utf8');
const dom = new JSDOM(htmlfile);
const { document } = dom.window;

require('mathjax-full').init({
    options: {
        processHtmlClass: 'ltx_Math|ltx_DisplayMath'
    },
    loader: {
        source: require('mathjax-full/components/src/source.js').source,
        load: ['adaptors/liteDOM', 'tex-chtml']
    },
    JSDOM: JSDOM,
    tex: {
        packages: ['autoload', 'base', 'require', 'ams', 'newcommand'],
        processRefs: false
    },
    chtml: {
        displayAlign: 'left',
        mtextInheritFont: true,
        matchFontHeight: false,
        exFactor: .001,
        minScale: .001,
        fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2',
    },
    'adaptors/liteDOM': {
        fontSize: 1
    },
    startup: {
        document: dom.serialize()
    }
});

MathJax.startup.promise.then(() => {
    const adaptor = MathJax.startup.adaptor;
    const html = MathJax.startup.document;
    if (html.math.toArray().length === 0) adaptor.remove(html.outputJax.chtmlStyles);
    const doctype = adaptor.doctype(html.document)
    const outer = adaptor.outerHTML(adaptor.root(html.document));
    fs.writeFileSync(argv._[1], doctype + "\n" + outer);
}).catch(err => console.log(err));

Produced mjx style, result html.

Technical details:

  • MathJax Version: 3.1.4
  • Client OS: Arch Linux 5.12
  • Browser: Firefox 88.0.1
@andrhua andrhua changed the title 26250% mjx-texatom font-size 26520% mjx-texatom font-size May 17, 2021
@dpvc
Copy link
Member

dpvc commented May 17, 2021

There are several issues going on here.

First, your exFactor value is way too small. This is supposed to be the size of an ex unit (the height of the "x" in the font) relative to the em size (the width of an em). The the browser, the font-size represents the em (so font-size: 16px means that 1em is 16px, for example). Since you have specified exFactor: .001, that means that you are saying that the height of an "x" is 1/1000 of the font size (e.g., .016 px for the 16px font). Typically, the ex-height is roughly .5 the em size, so you are probably 500 times too small. For Computer Modern, the exFactor should be around .44.

Second, your fontSize is too small tin the configuration for the LiteDOM adaptor. This is supposed to give the font size in pixels, which is 16. You have indicated that the font size is just 1px.

Third, version 3.1.4 introduced a bug that causes MathJax to fail to recognize that it needs to use the exFactor, and it gets the ex-size badly wrong. There is a pull request to resolve the issue, but it is not yet in a production release.

If you fix the exFactor and fontSize, and replace your startup configuration block with

    startup: {
      document: dom.serialize(),
      ready() {
        const OutputJax = MathJax._.output.common.OutputJax.CommonOutputJax;
        const measureMetrics = OutputJax.prototype.measureMetrics;
        OutputJax.prototype.measureMetrics = function (node, getFamily) {
          const metrics = measureMetrics.call(this, node, getFamily);
          const [w, h] = this.adaptor.nodeSize(this.adaptor.childNode(node, 1));
          metrics.ex = (w ? h / 60 : metrics.em * this.options.exFactor);
          const scale = Math.max(this.options.minScale,
                                 this.options.matchFontHeight ?
                                 metrics.ex / this.font.params.x_height / metrics.em : 1);
          return metrics;
        }
        MathJax.startup.defaultReady();
      }
    }

then that should get the sizes correct for now. Once the v3.2 is out, you can remove the extra ready() function from your script again.

@dpvc dpvc added Accepted Issue has been reproduced by MathJax team Ready for Review Test Needed v3 labels May 17, 2021
@dpvc dpvc mentioned this issue May 17, 2021
Merged
@andrhua
Copy link
Author

andrhua commented May 17, 2021

Tiny exFactor and fontSize are just the outcome of too many attempts to fix this bug :)
I've added ready callback, removed minScale, set proper fontSize and exFactor to 0.44 as you suggested, and now math is rendered correctly!

@andrhua andrhua closed this as completed May 17, 2021
@dpvc dpvc added Merged Merged into develop branch and removed Ready for Review labels May 18, 2021
@dpvc dpvc mentioned this issue Jun 1, 2021
Closed
@NicolasCARPi NicolasCARPi mentioned this issue Jun 18, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accepted Issue has been reproduced by MathJax team Merged Merged into develop branch Test Needed v3
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dpvc @andrhua