patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-18 01:08:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade \sqrt zoom and width (#890)

Browse Source 
* 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
This commit is contained in:
Ron Kok
2017-09-18 16:24:20 -07:00
committed by Kevin Barabash
parent 6e75ebdc2d
commit fd45669f7c
23 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/delimiter.js
View File

@@ -329,14 +329,13 @@ const sqrtSvg = function(sqrtName, height, viewBoxHeight, options) {
}
const pathNode = new domTree.pathNode(sqrtName, alternate);
let attributes = [["width", "100%"], ["height", height + "em"]];
// Note: 1000:1 ratio of viewBox to document em width.
const attributes = [["width", "400em"], ["height", height + "em"]];
attributes.push(["viewBox", "0 0 400000 " + viewBoxHeight]);
attributes.push(["preserveAspectRatio", "xMinYMin slice"]);
const innerSVG = new domTree.svgNode([pathNode], attributes);
const svg = new domTree.svgNode([pathNode], attributes);
attributes = [["width", "100%"], ["height", height + "em"]];
const svg = new domTree.svgNode([innerSVG], attributes);
return buildCommon.makeSpan([], [svg], options);
return buildCommon.makeSpan(["hide-tail"], [svg], options);
};
const sqrtSpan = function(height, delim, options) {
@@ -353,22 +352,25 @@ const sqrtSpan = function(height, delim, options) {
sizeMultiplier = newOptions.sizeMultiplier / options.sizeMultiplier;
spanHeight = 1 * sizeMultiplier;
span = sqrtSvg("sqrtMain", spanHeight, viewBoxHeight, options);
span.surdWidth = 0.833 * sizeMultiplier; // from the font.
span.style.minWidth = "0.853em";
span.advanceWidth = 0.833 * sizeMultiplier; // from the font.
} else if (delim.type === "large") {
// These SVGs come from fonts: KaTeX_Size1, _Size2, etc.
viewBoxHeight = 1000 * sizeToMaxHeight[delim.size];
spanHeight = sizeToMaxHeight[delim.size] / sizeMultiplier;
span = sqrtSvg("sqrtSize" + delim.size, spanHeight, viewBoxHeight, options);
span.surdWidth = 1.0 / sizeMultiplier; // from the font
span.style.minWidth = "1.02em";
span.advanceWidth = 1.0 / sizeMultiplier; // from the font
} else {
// Tall sqrt. In TeX, this would be stacked using multiple glyphs.
// We'll use a single SVG to accomplish the same thing.
spanHeight = height / sizeMultiplier;
viewBoxHeight = Math.floor(1000 * spanHeight);
viewBoxHeight = Math.floor(1000 * height);
span = sqrtSvg("sqrtTall", spanHeight, viewBoxHeight, options);
span.surdWidth = 1.056 / sizeMultiplier;
span.style.minWidth = "0.742em";
span.advanceWidth = 1.056 / sizeMultiplier;
}
span.height = spanHeight;