Commit Graph

5 Commits

Author SHA1 Message Date
Ron Kok
61ec41146c Convert nested SVGs to single-level SVGs (#909)
* Convert nested SVGs to single-level SVGs

This PR evades a Safari bug which causes nested SVGs to zoom improperly.  Fixes the remainder of issue #883.

* Add omitted word

* Fix lint errors

* update screenshots

* Pick up review comments

* Clean up variable names

Remove two more redundant variables.
2017-10-08 15:20:47 -06: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
a4b1bf01be Use inline SVG for stretchy elements (#807)
* Use inline SVG for stretchy elements

Replace all background-images with inline SVG code.

Pros:

* `\color` works in all browsers, even IE/Edge
* Better printing
* Much simpler CSS
    * No links to background-images
    * No `mask`
    * No browser-detection
* No external SVG files
* Faster first rendering

Cons

* No image caching
* Heavier HTML load
* Larger JavaScript file
* `\cancel` line is in `px` units, not `em` units

* Remove static/images from make file

* Change \cancel from px to em

* regenerate screenshots for functions using inline svg
2017-08-19 21:51:16 -04:00
Ron Kok
eff7653c51 Support stretchy wide elements. (#670) 2017-06-15 23:47:51 -04:00