* 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).
Some delicate surgery is required on the `vlist-s` table-cell CSS.
Problem with #768 reported by @ronkok; issue #779. Fixes:
* `font-size: 1px` (rather than `font-size: 0.05em`) solves render
issues with user overrides of the `.katex` `font-size`.
* Also fix a width issue.
* Make KaTeX work in Quirks mode
Summary: In issue #601, it was noticed that the KaTeX bug with the fraction
bars overlapping the text was occuring with an XHTML doctype. This indicated
that the bug we were seeing was caused by both quirks mode and limited-quirks
mode (which is a version of quirks mode with fewer quirks and is enabled for
various doctypes including some XHTML ones).
Based on the [quirks spec](https://quirks.spec.whatwg.org/), it appears that
there are only two quirks in limited-quirks mode, both having to do with a
line-height calculation. @gagern figured out that if we added some zero-width
spaces in our elements, we would stop triggering the quirk, which would make
our fractions render correctly in limited-quirks mode.
I implemented that change, and ran the screenshotter in limited-quirks mode.
There were several other places that suffered from the same quirk, but were
also easily fixed via adding zero-width spaces. I then ran the screenshotter in
quirks mode, and discovered that (once an appropriate meta charset was added),
everything looked correct still.
So, this diff fixes all of the places that the limited-quirks mode quirks
affect our rendering, and removes the warning about rendering in quirks mode.
I also added support to our screenshotter to render things in both no-quirks
and quirks mode, to ensure that things don't break in the future. I copied the
non-quirks images to the quirks images, and ran the screenshotter with
`--verify` to make sure that they look the same.
I have some thoughts that I'd like to hear opinions about:
- I'm not super happy with how the screenshot tests work. Ideally we'd test
both quirks mode and non-quirks mode against the same images, since we'd
like them to be the same. I'm not sure how to make that work well, though,
since then people wouldn't be able to tell if it's a quirks-mode problem or
not.
- I removed the doctype in the testing page file, so all testing would now be
done in quirks-mode. Not sure if we really want that.
- I need to test this in IE, but it looks like the trailing commas change we
made with eslinting is causing problems (cause IE doesn't like trailing
commas).
Test Plan:
- `./dockers/Screenshotter/screenshotter.sh --verify`
* Compare quirks mode against same screenshot files
Now the screenshotter itself can run more than one mode. It does serve the
HTML file from its own JavaScript code now, so that it can include different
doctype headers without needing distinct files for each. There is a
provision to mark specific tests as quirky in case they produce different
results depending on the mode.
* Some cleaning up and comments
* Restore access to the babelified version of the HTML page for screenshots
* Reference unicode fonts using absolute path names
This avoids issues caused by the fact that the dynamically generated
ss-render.html is mounted to a different location than the test.html from
which it is derived.
* do chrome screenshots first
* remove commented out code, simplify hadle_search_string call
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.
* Internal: Pass full `options` objects to makeSpan/makeSymbol.
Not just the current color. This will facilitate applying options
to built nodes in a standardized way, rather than changing all
callsites.
* Add style switching test: text and scriptstyle in the same group.
* Apply style-specific spacing using different CSS coding.
Specifically, infer style from a class on the *current* element,
rather than the parent element. Use "mtight" class to denote elements
with tight spacing (scriptstyle or scriptscriptstyle). Apply that
class automatically based on options.
* Fix#533, #534, #541.
- #534: Implement getTypeOfGroup for font groups.
- #533, #541: Improve the ways spaces are applied to lists. Since
CSS adjacency implements mathematical spacing, it's incorrect to
introduce "convenience spans" for spaces and display changes into
the generated HTML -- those spans break adjacency. Apply display
changes directly, and shift space spans into adjacent atoms.
Requires updates to two screenshotter tests, LimitControls and
SupSubLeftAlignReset. The new results for these tests are closer
to TeX output than the old results.
Also requires updates to Jasmine tests, since those assumed output
structures that have changed.
* Fix#136: Size commands generate fragments, not spans.
This is so the size commands don't hide the types of their enclosed
atoms. Addresses #136.
This slightly changes the vertical position of the Sizing test. Not
sure the vertical position matters, so change the test.
Summary:
This diff provides support for Latin-1, Cyrillic, and CJK characters
inside \text{} groups. For Latin-1 and Cyrillic characters we use
glyph metrics from a glyph from Basic Latin that has roughly the same
bounding box. We use the metrics for a capital 'M' to approximate the
full-width CJK characters. Half-width characters are not supported yet.
Test Plan:
- make test
- make screenshots
Reviewers: emily
Summary:
I've been experimenting with delivering a TrueType-only KaTeX build for our mobile apps. I couldn't
get anything to render properly until I flipped the `format` specifier from `ttf` to `truetype`.
Though I can't find a definitive source on this, all the examples I've seen online use `truetype`
over `ttf`, and flipping from `ttf` to `truetype` fixed my own issues.
It's unlikely that this has been much of a problem in practice, since so many browsers now support
WOFF (I'm considering a TrueType-only build since it's the least common denominator across Android
4.3+ and mobile Safari).
Test Plan:
- To force TrueType rendering, comment out the `.use-eot`, `.use-woff2`, and `.use-woff` lines in `fonts.less`.
- Run `make serve`.
- Open up the demo page.
- Verify that the demo text is rendered as before (only the parens are noticeably different in the demo?).
Reviewers: kevinb, emily
Reviewed By: emily
Subscribers: benkomalo
Differential Revision: https://phabricator.khanacademy.org/D29274
* Introduce MacroExpander
The job of the MacroExpander is turning a stream of possibly expandable
tokens, as obtained from the Lexer, into a stream of non-expandable tokens
(in KaTeX, even though they may well be expandable in TeX) which can be
processed by the Parser. The challenge here is that we don't have
mode-specific lexer implementations any more, so we need to do everything on
the token level, including reassembly of sizes and colors.
* Make macros available in development server
Now one can specify macro definitions like \foo=bar as part of the query
string and use these macros in the formula being typeset.
* Add tests for macro expansions
* Handle end of input in special groups
This avoids an infinite loop if input ends prematurely.
* Simplify parseSpecialGroup
The parseSpecialGroup methos now returns a single token spanning the whole
special group, and leaves matching that string against a suitable regular
expression to whoever is calling the method. Suggested by @cbreeden.
* Incorporate review suggestions
Add improvements suggested by Kevin Barabash during review.
* Input range sanity checks
Ensure that both tokens of a token range come from the same lexer,
and that the range has a non-negative length.
* Improved wording of two comments
It looks like the `text-align: center` is affecting the text in sub and
superscripts. Fixes#447
Test Plan:
- Visit [this
example](http://localhost:7936/?text=x%5El_%7Bi%5E%7Bl%2B1%7D%2Bi%2C%20j%5E%7Bl%2B1%7D%2Bj%2C%20d%7D)
- Edit the HTML to add `<span class="katex-display">...</span>` around the
`<span class="katex">` node.
- See that the sub and superscripts are left-aligned, not centered
(It looks like we don't have a way to test this in the screenshotter for now)
@kevinb
Summary: For some reason, adding `border-style: solid` also adds a 3px
border around elements, which means that all of the rules that we
created are 3px too large. This sets the default size to 0 for all the
edges, which makes them correct.
Test plan:
- See that `a\rule{0em}{0em}b` produces no visible rule.
- See the new screenshots look reasonable.
This adds the ability to add `|` to a column description and have
vertical separators be added. I added types to the column descriptions
and added some logic to handle the separators when building the vertical
lists of the array.
Test plan:
- See the Arrays screenshot looks good.
- `make test`
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
This commit introduces environments, and implements the parser
infrastructure to handle them, even including arguments after the
“\begin{name}” construct. It also offers a way to turn array-like data
structures, i.e. delimited by “&” and “\\”, into nested arrays of groups.
Environments are essentially functions which call back to the parser to
parse their body. It is their responsibility to stop at the next “\end”,
while the parser takes care of verifing that the names match between
“\begin” and “\end”. The environment has to return a ParseResult, to
provide the position that goes with the resulting node.
One application of this is the “array” environment. So far, it supports
column alignment, but no column separators, and no multi-column shorthands
using “*{…}”. Building on the same infrastructure, there are “matrix”,
“pmatrix”, “bmatrix”, “vmatrix” and “Vmatrix” environments. Internally
these are just “\left..\right” wrapped around an array with no margins at
its ends. Spacing for arrays and matrices was derived from the LaTeX
sources, and comments indicate the appropriate references.
Now we have hard-wired breaks in parseExpression, to always break on “}”,
“\end”, “\right”, “&”, “\\” and “\cr”. This means that these symbols are
never PART of an expression, at least not without some nesting. They may
follow AFTER an expression, and the caller of parseExpression should be
expecting them. The implicit groups for sizing or styling don't care what
ended the expression, which is all right for them. We still have support
for breakOnToken, but now it is only used for “]” since that MAY be used to
terminate an optional argument, but otherwise it's an ordinary symbol.
Summary:
Use the TeX definitions of `\root` to get the optional `\sqrt`
argument in the right place. Also add the MathML version.
Fixes#48
Test Plan:
- `make test`
- See that the images look good
Reviewers: kevinb, alpert
Reviewed By: alpert
Differential Revision: https://phabricator.khanacademy.org/D17236
Summary:
Add an auto-render extension to render math on a page. It
exposes a global function (maybe we should attach it to `katex`?) to
render math in an element. It comes with a README on how to use it.
Also, make `make build` build the minified file.
Fixes#26
Test Plan:
- Visit http://localhost:7936/contrib/auto-render/
- See that all of the math renders correctly
- `make test`
Reviewers: alpert, kevinb
Reviewed By: kevinb
Differential Revision: https://phabricator.khanacademy.org/D16620
Summary: Make the CSS rules that hide the MathML rendering not
`!important`, so that they can be overridden. Also, remove the useless
`math.katex` rule.
Fixes#197
Test plan:
- `make test`
- See that huxley screenshots haven't changed
Auditors: alpert
Summary:
This adds support for rendering KaTeX to both HTML and MathML
with the intent of improving accessibility. To accomplish this, both
MathML and HTML are rendered, but with the MathML visually hidden and
the HTML spans aria-hidden. Hopefully, this should produce much better
accessibility for KaTeX.
Should fix/improve #38Closes#189
Test Plan:
- Ensure all the tests, and the new tests, still pass.
- Ensure that for each of the group types in `buildHTML.js`, there is a
corresponding one in `buildMathML.js`.
- Ensure that the huxley screenshots didn't change (except for
BinomTest, which changed because I fixed a bug in `buildHTML` where
`genfrac` didn't have a `groupToType` mapping).
- Run ChromeVox on the test page, render some math. (for example,
`\sqrt{x^2}`)
- Ensure that a mathy-sounding expression is read. (I hear "group
square root of x squared math").
- Ensure that nothing else is read (like no "x" or "2").
- Ensure that MathML markup is generated correctly and is interpreted
by the browser correctly by running
`document.getElementById("math").innerHTML =
katex.renderToString("\\sqrt{x^2}");` and seeing that the same speech
is read.
Reviewers: john, alpert
Reviewed By: john, alpert
Subscribers: alpert, john
Differential Revision: https://phabricator.khanacademy.org/D16373
Summary:
Add the ability to pass in options to the render calls which contain information about the parse. This information is passed around to the parser and builder, which parse and render differently depending on the options. Currently, this includes an option to render the math in display mode (i.e. centered, block level, and in displaystyle).
Also added some changes to make it easier to add new data to functions (now that new data doesn't need to be copied into the ParseFuncOrArg data structure, it is looked up when it is needed) and has more sane support for the `'original'` argType (as suggested by pull request #93).
Test Plan:
- Make sure tests and lint pass
- Make sure huxley screenshots didn't change, and new screenshot looks correct
Reviewers: alpert
Reviewed By: alpert
Differential Revision: https://phabricator.khanacademy.org/D13810
Summary:
To complement pull request #142, add the ability to automatically
generate the woff2 files from within the docker. Add a script for copying out
the generated font files to make things easier. Remove the KaTeX_Greek font
files as well as the KaTeX_Win ones, since we don't use them and they're oddly
non-woff and non-eot specific?
Test Plan:
- Build a new docker from the new Dockerfile
- Make sure the woff2_compress program compiles
- Follow the instructions in the README to build the fonts
- Make sure the fonts correctly build
- Make sure the copy_fonts.sh script copies the fonts out
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D13637
Summary:
Add correct parsing of optional arguments. Now, things like `\rule` can shift
based on its argument, and parsing of `\sqrt[3]{x}` fails (correctly) because we
don't support that yet.
Also, cleaned up the lexing code a bit. There was a vestige of the old types in
the lexer (they have now been completely moved to symbols.js). As a byproduct,
this made it hard to call `expect("]")`, because it would look at the type of
the Token and the type for "]" was "close". Now, all functions just look at the
text of the parsed token, and in special occasions (like in the dimension lexer)
it can return some data along with it.
Test Plan:
- Make sure tests still work, and new tests work
- Make sure no huxley screenshots changed
- Make EXTRA SURE `\sqrt[3]{x}` fails.
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D13505
Contrary to other web font formats, the new WOFF 2.0 Web Font compression format is optimized for file size, memory usage, and decompression speed.
WOFF2 has been supported in Chrome and Opera for a while now. See https://dev.opera.com/blog/opera-23/ for more info.
Summary:
Create a fonts.less file which generates identical css to fonts.css, but using
less rules to be more understandable and customizable. For example, add the
ability to change where the fonts directory is located (instead of mandating it
be located next to the less file), and add the ability to disable specific font
formats (like disable EOTs when IE8 support isn't needed).
Test Plan:
- Ensure that the test page and huxley page still work
- Ensure that the output of `./node_modules/.bin/lessc static/fonts.less` is
the same as the original css by running both through
`./node_modules/.bin/cleancss` and diffing them.
- Ensure that the huxley screenshots haven't changed
- Ensure that the build step still works
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D13326
Summary: This makes typing into the box bearable with break-on-exception enabled.
Test Plan: Typed into box; I didn't blow up.
Reviewers: emily
Reviewed By: emily
Subscribers: jessie
Differential Revision: http://phabricator.khanacademy.org/D13314
Summary:
Improve the build process by combining the CSS files, automatically
selecting font files to include, and building .tar.gz and .zip files.
Test Plan:
- Make sure tests work
- Make sure huxley screenshots didn't change
- Make sure zip and tar.gz files contain only files we want to distribute
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D13159
Summary:
Add support for math-mode accents. This involves a couple changes.
First, in order to correctly position the accents, we must know the kern between
every character and the "skewchar" in that font. To do this, we improve our tfm
parser to run the mini-kern-language and calculate kerns. We then export these
into fontMetrics.js.
Then, we add normal support for accents. In particular, we do some special
handling for supsubs around accents. This involves building the supsub
separately without the accent, and then replacing its base with the built
accent.
Finally, the character in the fonts for the \vec command is a combining unicode
character, so it is shifted to the left, but none of the other characters do
this. We add some special handling for \vec to account for this.
Fixes#7
Test Plan:
- Make sure tests pass
- Make sure no huxley screenshots changed, and the new one looks good
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D13157
Summary:
Add support for all of the other operators, including the ones with symbols and
limits. This also fixes the bug where subscripts were shifted the same amount as
subscripts.
To accomplish this, the domTree.textNode has been repurposed into symbolNode
which is no longer an actual text node, but instead represents an element with a
single symbol in it. This lets us access properties like the italic correction
of a symbol in a reasonable manner without having to recursively look through
children of spans.
Depends on D13082
Fixes#8
Test Plan:
- Make sure tests work
- Make sure huxley screenshots didn't change much, and new screenshot looks good
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D13122
Summary:
Add a way to automatically build vlists correctly. Previously, we built
vlists manually in ~4 different places, which made it difficult to manage
changes, and led to a large amount of duplication in the less. This also fixes
the vlist construction in safari, where the `display: inline-table` wasn't being
applied because of CSS specificity. This leads to the only significant change in
the huxley tests, with the vertical spacing.
Test Plan:
- Make sure the tests still work
- Make sure most of the huxley screenshots didn't change, and that the new
changes are insignificant.
- Make sure vlists now work in Safari
- Make sure the change to the VerticalSpacing screenshot is caused by the
fix-baseline span now correctly applying `display: inline-table` by creating
the construct in master and adding `display: inline-table !important` to the
`.fix-ie` css rule
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D13082
Fix the \frac and \overline lines so they actually render at the correct sizes
(i.e. don't get smaller when in script and scriptscript sizes). This also seems
to fix#33.
Test Plan:
- Make sure new huxley screenshot look good.
- Render
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+...} } } }
at small font sizes like 30pt and smaller, see that it looks much better
Auditors: alpert
Summary:
Follow the TeXbook instructions on how to construct square roots. Using
makeCustomSizedDelim, this becomes nearly trivial.
Test Plan:
- Make sure normal tests work
- Make sure the new huxley test looks good, and other huxley tests haven't changed.
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D12918
Summary:
Added stacked delimiter support for more delimiters. Split out delimiter
functions into its own file, and split out some tree building functions into a
common file. Supports the empty `.` delimiter with \left and \right, and doesn't
try to produce huge /, \backslash, <, or > delimiters. Depends on D7844
Test input:
\left( \left) \left[ \left\lbrack \left] \left\rbrack \left\{ \left\lbrace
\left\} \left\rbrace \left\lfloor \left\rfloor \left\lceil \left\rceil
\left\langle \left\rangle \left/ \left\backslash \left| \left\vert \left\|
\left\Vert \left\uparrow \left\Uparrow \left\downarrow \left\Downarrow
\left\updownarrow \left\Updownarrow {x^{x^{x^{x^{x^{x^{x^{x^{x^{x^x}}}}}}}}}}
\right.\right.\right.\right.\right.\right.\right.\right.\right.\right.
\right.\right.\right.\right.\right.\right.\right.\right.\right.\right.
\right.\right.\right.\right.\right.\right.\right.\right.
Test Plan:
- Run the test input, see that it works
- Run the tests, see that they work
- Look at huxley screenshots (not here yet :( ) and make sure they look good
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D11602
Summary:
This incorporates the changes to add a KA copyright, and to generate the woffs
from the ttfs, not the otfs.
Test Plan:
- Run huxley tests, see very little has changed (it looks like all the images
shifted back down ~1/2 pixel, the opposite of what happened in ad97dab19c
when we started making our own woffs, which means we probably are now
generating woffs the same way fontsquirrel does)
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D12889
