* Use JS for spacing between atoms instead of CSS
Summary:
This is the first step towards creating an intermediate representation
that can be used to generate HTML, SVG, and Canvas commands for rendering.
By generating spans that contain the width of the spaces instead of
relying on CSS sibling rules we'll be able to one day replaces the spans
with intermeidate 'Glue' nodes (in a later PR).
An added benefit of this approach is that is enables us to programmatically
change the values for thinspace, mediumspace, and thickspace which will
allow us to implement the \setlength command.
Test Plan:
- npm test
- dockers/Screenshotter/screenshotter.sh --verify
* fixed failures in BinCancellation, BoldSymbol, and OperatorName
* update screenshots
* don't use current size when determining size of spaces, update more screenshots
* fix spacing in SizingBaseline and StyleSwitching
* actually do the right thing for sizing groups
* fix \not for Chrome and Firefox
* do TODOs
* address feedback from the code review
* fix issue in delimsizing.js
* add TODO to think about a better solution in href.js
* fix typos, simplify href, be honest about paddingLeft for \not
TeX and CSS treat line heights in fundamentally different ways. In
TeX, every character is treated as a box of its precise height and
depth; the line height (\baselineskip) applies after characters have
been assembled into lines. In CSS, in contrast, every character
creates a "line box" corresponding to the accompanying font. When
characters of different fonts and sizes are placed into the same
span, the resulting line box contains the line boxes of all children.
This is unfortunate because, for example, we want `\frac{1}{2}` to
behave in vertical spacing contexts like it is exactly as tall and
deep as the visible fraction (which is the TeX behavior). Given CSS
constraints, though, in most contexts the fraction has extra vertical
space: the line boxes for the numerator and denominator create
padding. For small boxes, this isn't so bad. To really see the
problem put a tall rule in the denominator of a fraction, or check
out the VerticalSpacing screenshotter test, which has way more space
than it should.
Solving this problem in CSS is difficult. There is no easy way to get
rid of the extra line boxes.
But there is *a* way, namely tables. A table-cell with vertical-align
top, bottom, or middle is ignored for the purposes of line height
calculation.
So in this commit, makeVList puts its contents into a
vertical-align:bottom table-cell (to clear unwanted line boxes), with
an extra row used to represent depth.
Many Chrome screenshotter tests change. This is because Chrome rounds
table dimensions to integral numbers of pixels, while it uses
sub-pixel positioning for non-table displayed tabs. That makes many
vlists a fraction of a pixel wider than they used to be.
The previous code incorrectly implemented TeXbook rules. First off,
the font metrics at issue should be those for the superscript/
subscript style, not the main style. Secondly, the metrics should be
scaled by the font size.
This changes some screenshotter tests (and they look more like TeX
now).
The combination of jspngopt and pako should eliminate possible causes for
different PNG encodings, although the core reason for #325 remains unknown.
Pako has poorer compression rates than native libz, but optimization can
counter that effect, and actually reduce the size of the screenshots.
The screenshots for LimitControls and UnsupportedCmds on Firefox used to
exhibit subpixel rendering before, for reasons unknown. The regenerated
versions don't exhibit this. See #324 for a discussion.
Summary:
Update the MathJaxFonts `Dockerfile` to enable the use of
`ttfautohint` which hints our fonts better. Also, fix the location that
batik is downloaded from, update some formatting in the `Dockerfile`,
and update the fonts and metrics.
Test Plan:
- Compare a rendered `= - A z 4 \Longrightarrow \Sigma \Biggl(` in
Chrome on Windows at font sizes 10px to 20px before and after this
change.
- See that characters look about the same, or better.
- See that the screenshot tests didn't change in firefox (maybe firefox
runs the same autohinting algorithm that we do?), and don't visually
change in chrome
Reviewers: kevinb, alpert
Reviewed By: kevinb, alpert
Differential Revision: https://phabricator.khanacademy.org/D18977
