Skip to content
GitLab
Open
Issue created by Administrator@rootContributor

Please improve the glyph PLUS sign, and compress SVG fonts

Created by: verdy-p

Issue Summary

The plus sign has a very poor rendering at low resolution (e.g. on Wikipedia with the default sizes, when math formulas are rendered as SVG in user viewing preferences).

The rendering is so bad that some stroke even disappear, making the "+" sign almost unreadable.

In fact this is caused by a very INCORRECT PATH definition for its glyph (which is self-intersecting, uncalibrated, non symetric) as it is currently defined in the current version of the MathJax Tex SVG font component.

Technical details:

  • MathJax Version: 2.3 (latest commit: f3aaf3a2)
  • Browser: any browser.

Supporting information:

  • ANY Formula in Wikipedia showing a simple addition, or a sign "+" anywhere (this is an extremely common symbol in lot of maths formulas, it should be correctly displayed even at very small sizes for exponents or indices, but in fact it is NEVER shown correctly with the default size of the operator, except possibly on HiDPI monitors and in a browser whose SVG renderer supports HiPDI settings)

Fix:

These are two paths to fix the glyph (same metrics as before this fix). These two paths are geomtrically equivalent, the first using absolute curves, the second path (shorter code) using relative curves.

<path id="E1-MJMAIN-2B" d="M70 230Q57 240 57 250T70 270H370V570Q380 583 390 583T410 570V270H710Q723 260 723 250T710 230H410V-70Q400-83 390-83T370-70V230Z/>

<path id="E1-MJMAIN-2B" d="M70 230q-13 10-13 20t13 20h300v300q10 13 20 13t20-13v-300h300q13-10 13-20t-13-20h-300v-300q-10-13-20-13t-20 13v300z"/>

Note: you should compress the paths to save output size for glyph definitions:

  1. first convert all paths to absolute curves/moves (split them into single arcs or segments)
  2. detect cubic Bezier arcs that have two successive control points equal, merge them to use a quadratic Bezier instead with that single control point
  3. detect quadratic Bezier arcs that have a control point equal to the previous or next point on curve, covert the arc to a line segment by dropping this control point
  4. detect pairs of cubic or quadratic Bezier arcs where the last control point of the first arc is symetric to the first control point of the second arc, relative to the last on-curve point of the first arc, if so use the "short-hand" command for the second arc.
  5. detect line segments that have common ending/terminal point, drop these segments.
  6. detect successive line segments (including "closepath" commands) that are aligned, merge them into a single line segment by dropping intermediate node.
  7. convert all the remaining arcs or segments to relative coordinates (except the first "moveto")
  8. detect horizontal segments ("l" 0 dy) to convert them to ("h" dy)
  9. detect vertical segments ("l" dx 0) to convert them to ("v" dx)
  10. merge sequences of the same command into a single long command with their parameters combined.
  11. generate the sequence to include in for <path d="..."/>: do not use any space except between two numbers when the second one is positive (there's no need to insert any space before the minus sign).

Then extra cleanup:

  • drop all styles from paths definitions for glyphs: currently they have a non-sense "line-width:".
  • drop unnecessary xmlns="..." from most elements: the default xmlns is SVG, like the root element!
  • as well drop the unnecessary xmlns:xlink="..." for using referenced to paths for glyphs defined in the SVG font: you can just define this namespace in the root "svg" element.