Commit Graph

12 Commits

Author SHA1 Message Date
Ron Kok
95ffb4fad4 Padding over \sqrt and Paths for frac-line (#1143)
* 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
2018-02-17 13:56:13 -05:00
Ron Kok
fd45669f7c Upgrade \sqrt zoom and width (#890)
* Fix \sqrt zoom in Safari

This PR evades a Safari bug which causes nested SVGs to zoom improperly. `\sqrt` and single-ended arrow SVGs have been modified.

These have been converted from nested SVGs to single level. Their long tails are now sliced off using CSS `overflow: hidden`.

Safari will still improperly zoom any double-ended stretchy arrows and horizontal braces.

* Fix \sqrt{}

Even if the function argument is empty, still render an SVG whose width equals the surd glyph.

* Fix tall \sqrt when scaled

* update screenshots affected by sqrt fixes

* more screenshots after changes to fix sqrt

* Pick up review comments
2017-09-18 19:24:20 -04:00
Ron Kok
ccf09786cc Improve SVG Performance (#841)
* Improve SVG Performance

This PR introduces three new classes:  `svgNode`, `pathNode`, and `lineNode`. SVG data is then loaded into the domTree exclusively via instances of these classes.

`innerHTML` is banished.

* Fix lint errors

* Fix \cancel typo

* Fix sqrt height

* Adjust min-lenght

Adjust some of the extensible arrows to get a min-length that matches glyph length of the long arrows in KaTeX Main font range from Unicode 27F5  to 27FC.

The accent arrows still get min-lengths that match the arrows in the Unicode 2100 range.

* regenerate screenshots after optimizing SVG code

* update DisplayStyle screenshot for Chrome

* update OverUnderset and Smash screenshots for Chrome as well

* Remove escapes from template strings

* Pick up review comments

* Fix lint errors

* Add comments
2017-09-08 23:27:47 -04:00
Ron Kok
e88256b397 Improve \sqrt (#810)
* Improve \sqrt

Make \sqrt out of inline SVGs to ensure a perfect match at the junction between surd and viniculum.

* Tweak for kern clarity

* Fix lint error

* regenerate screenshot tests with sqrts

* Correct advance

Edit the SVG paths so that they have the correct left bearing and advance width values.

This will correct the spacing on the left side of each surd and it will also improve the placment of a root indice.

* Revise scriptstyle surds

In the `main` size, delimiters *do* scale with scriptstyle and scriptscriptstyle.

* update screenshot images containing sqrts
2017-08-22 21:39:15 -04:00
Eddie Kohler
dcdca732a3 Improve rule coding, including for \sqrt. (#776)
* 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).
2017-08-06 15:11:23 -04:00
Eddie Kohler
2da06d541e Shrinkwrap vlists in table-like CSS. (#768)
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.
2017-07-30 11:13:55 -04:00
Eddie Kohler
b866cd5224 Fix interaction between styles and sizes. (#719)
* 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.
2017-06-27 20:55:14 -04:00
Eddie Kohler
3af23fd8a4 Fix #711 issue with multiple superscripts.
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).
2017-06-05 23:52:16 -04:00
Kevin Barabash
22957d40f6 Use style specific FONTDIM metrics (#545)
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
2016-11-04 07:45:08 +01:00
Martin von Gagern
2e002ff37a Use jspngopt and pako to create reproducible PNG files for Chrome as well
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.
2015-08-30 02:12:55 +02:00
Emily Eisenberg
ce99abd1f2 Update Dockerfile for ttfautohint, update metrics
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
2015-07-16 12:01:26 -07:00
Martin von Gagern
6f65f685f3 Add screenshots taken from Chrome 2015-07-14 18:09:58 +02:00