* Revert frac-lines to borders
This PR reverts the rendering of frac-lines from SVG paths back to span borders. This solves the thick grey bar reported by @mbourne in issue #1173.
The result is a frac-line similar to KaTeX v0.9.0-alpha1. The frac-lines are span borders and the CSS contains a `min-width: 1px;` rule to keep those borders visible.
There is one difference between this PR and v0.9.0-alpha1. The earlier work contained a second CSS rule:
```
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {
.katex.mfra.fracline {
min-height:0.5px;
}
}
That second CSS rule did not help much. Instead, it caused some lines to disappear. In the thread to issue 1173, people tested the rendering from the proposed approach and reported that frac-lines disappeared only at sized that were already too small to read.
* Fix lint errors
* Remove superfluous SVG paths.
* Remove superfluous CSS
* Removed `rulespan` from `stretchy.js`
* Support Unicode \ll and \lll
Fixes issue #1271
* Fix indent
* update screenshots for fracLineBorder
* Update Arrays-chrome screenshot for fracLineBorder
* Padding over \sqrt and Paths for frac-line
This replaces two earlier PRs.
* Restore reaction arrows
* regenerate screenshots
* Set line padding in a constant
* Update with latest master
* Fix lint error
* update screenshots
* Fix frac lline
For frac-line, use an SVG line in an extra tall span.
I still need to think of a way to adust `vertical-separator`.
* Fix spaces in katex.less
* regenerate screenshots
* update HorizontalBraces and StrikeThrough screenshots
* Change frac-line from border to full span
Change `frac-line` and `vertical-separator`. Instead of using span borders, fill entire span using a `box-shadow`.
This change will enable more dependable engagement of the `min-height` CSS.
* Fix indentation
* Fix indent again
* Change box shadow to inline SVG
* Fix lint error
* regenerate screenshots after switching to SVG for fraction bars
* Improve rule coding.
* Rule widths (overline, underline, fraction, sqrt) actually scale
with the current font size in AMS-TeX. Implement that. (Sqrt is
a special case: the rule width depends on the font size *of the
surd*.)
* Change the CSS coding for rules. The old, complex coding prevented
variable-width lines and may have contributed to issues like #696.
Its purpose, according to 0a3a2271f4,
was IE8 support; but KaTeX no longer supports IE8.
* The 0.5px offset makes larger sizes better, smaller sizes worse.
Smaller sizes seem more important.
* Cleanup (intended to be squashed).
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.
* Fix interaction between styles and sizes by implementing styles as sizes.
Rather than having both `textstyle` CSS classes and `size5` CSS classes
affect the font size (and step on each other), implement sizes more the
way TeX does: a command like `\displaystyle` changes the current size.
This is actually a simplification, since now only `size` affects the size.
Simplifies CSS and computation. Many screenshotter tests change; they
change to be more like TeX. For instance, `\sqrt` fixes some
discrepancies in size treatment.
Also:
Remove the `Options.withX()` methods in favor of `.havingX()`, which
might return the same `options`.
Remove `Style.cls()` and `Style.reset()`.
Remove `Options.reset()`. You should never modify an `Options`; they
should change only by the `havingX()` methods.
* Implement TeX sizing for scriptsize/scriptscriptsize.
At every size level. Also make the sizes match TeX to the last decimal.
* Review comments.
Summary:
FONTDIM metrics include metrics like sup2, sup3, etc. which are used for
position sub/super-scripts, fractions, delimiters, etc. TeX uses three
different font styles: textfont2 (DISPLAY & TEXT), scriptfont2 (SCRIPT), and
scriptscriptfont2 (SCRIPTSCRIPT) and has different sets of metrics for each.
This diff adds style specific metrics for better TeX compliance.
Notable squashed commits:
- Recreated screenshots (martin)
- fix getEmPerEx to use getXHeight
- regularize how we access options.style, remove unnecessary newlines
- use var style = options.style in more places in buildHTML
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
