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

Subscripts and superscripts are incorrectly sized inside SVG when font-size is set on <foreignObject> #2975

Open
rnwst opened this issue Dec 2, 2022 · 4 comments
Open

Subscripts and superscripts are incorrectly sized inside SVG when font-size is set on <foreignObject> #2975

rnwst opened this issue Dec 2, 2022 · 4 comments
Labels
Accepted Issue has been reproduced by MathJax team Code Example Contains an illustrative code example, solution, or work-around Merged Merged into develop branch Test Needed v3
Milestone
v4.0

Comments

@rnwst
Copy link

rnwst commented Dec 2, 2022

Issue Summary

When style="font-size: ..." is set on a <foreignObject> tag inside of an SVG, subscripts and superscripts are incorrectly sized (see the screenshot below).
image
When no style="font-size: ..." is set on the <foreignObject>, this bug does not appear. The problem exists both for SVG as well as CHTML output, although the size and positioning appears to be slightly different in each case.

Steps to Reproduce:

  1. Open the HTML below (or open this fiddle).
  2. Observe subscript and superscript sizing inside of SVG.

Technical details:

  • MathJax Version: 3.2.2
  • Client OS: Linux 64-bit
  • Browsers:
    • Chromium 107.0.5304.121
    • Firefox 107.0
    • Microsoft Edge 106.0.1370.47

I am using the following MathJax configuration: None

and loading MathJax via

<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

Supporting information:

HTML file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
</head>
<body>
<div style="font-size: 40px">Outside SVG: \(\int_a^b f(x)dx\)</div>
<svg xmlns="http://www.w3.org/2000/svg" width="650px" height="550px" viewBox="0 0 65 55">
<foreignObject x="0" y="5" width="65" height="55" style="font-size:4px"><div>Inside SVG: \(\int_a^b f(x)dx\)</div>
</foreignObject>
</svg>
</body>
</html>
@rnwst rnwst changed the title Subscripts and superscripts are incorrectly sized inside SVG when font-size is set on <foreignObject> Subscripts and superscripts are incorrectly sized inside SVG when font-size is set on <foreignObject> Dec 3, 2022
@dpvc
Copy link
Member

dpvc commented Dec 3, 2022

This is because the default value for the scriptminsize attribute in MathML is set at 8px, but since the font size is 4px, that means the super- and subscripts will end up being twice as big as the standard text. The MathML specification says it should be 8pt, but I ended up switching to 8px somewhere along the line because 8pt was too big: there are 10pt to an em, and so 8pt is too large in most situations, and it seemed better to have the minimum based on screen pixels in order to avoid too small fonts. But since px are no longer actual pixels, but relative to other scaling factors, as in your example, then that no longer does what it should.

So you might want to set the default minimum script size to something smaller. For example,

MathJax = {
  startup: {
    ready() {
      MathJax._.core.MmlTree.MmlNodes.math.MmlMath.defaults.scriptminsize = '8pt';
      MathJax.startup.defaultReady();
    }
  }
}

sets it back to 8pt, which works for your example, but may not work for a real page. You could use 1px or something like that, if that works better.

@dpvc dpvc added Expected Behavior This is how MathJax works v3 Code Example Contains an illustrative code example, solution, or work-around labels Dec 3, 2022
@rnwst
Copy link
Author

rnwst commented Dec 3, 2022

Many thanks @dpvc for your quick response, the detailed explanation, and the fix!

While I now understand the reasons for this, I still consider this a bug, since the 'actual font-size' of the sub- and superscripts is much larger than 8px. This is, as you have pointed out, because 'SVG px' are not equal to 'normal px'. A simple fix for this appears to be to set scriptminsize in pt instead of px (for some reason, subscripts and superscripts inside and outside of the SVG then appear to be the same size, even when their size is limited by scriptminsize - do you know why?).

Would you consider changing the default value of scriptminsize from 8px to 6pt or are there other side-effects I haven't considered?

@dpvc dpvc self-assigned this Dec 4, 2022
@dpvc
Copy link
Member

dpvc commented Dec 4, 2022

Yes, the value used for scriptminsize should be reconsidered. Since it is already changed from the MathML specification, it should be changed to a value that works in more situations.

dpvc added a commit to mathjax/MathJax-src that referenced this issue Feb 14, 2023
@dpvc
Make sure scriptminsize applies to the actual scaling factor, and use…
21805bf 
… a better default value. (mathjax/MathJax#2975)
@dpvc dpvc mentioned this issue Feb 14, 2023
Merged
@dpvc dpvc added Ready for Review Test Needed and removed Expected Behavior This is how MathJax works labels Feb 14, 2023
@dpvc
Copy link
Member

dpvc commented Feb 14, 2023

I've made a PR to improve the handling of scriptminsize and to use a better default value.

@dpvc dpvc added the Accepted Issue has been reproduced by MathJax team label Feb 14, 2023
@dpvc dpvc removed their assignment Feb 14, 2023
@dpvc dpvc added this to the v4.0 milestone Feb 24, 2023
dpvc added a commit to mathjax/MathJax-src that referenced this issue Mar 3, 2023
@dpvc
Merge pull request #901 from mathjax/issue2975
63f412d 
Better handling of scriptminsize (mathjax/MathJax#2975)
@dpvc dpvc added Merged Merged into develop branch and removed Ready for Review labels Mar 3, 2023
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 Code Example Contains an illustrative code example, solution, or work-around Merged Merged into develop branch Test Needed v3
Projects
None yet
Milestone
v4.0
Development

No branches or pull requests
2 participants
@dpvc @rnwst