Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • M MathJax
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 304
    • Issues 304
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 15
    • Merge requests 15
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • MathJax
  • MathJax
  • Issues
  • #2975
Closed
Open
Issue created Dec 02, 2022 by R. N. West@rnwst

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

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>
Assignee
Assign to
Time tracking