diff --git a/src/buildCommon.js b/src/buildCommon.js index e927d134..35633679 100644 --- a/src/buildCommon.js +++ b/src/buildCommon.js @@ -330,11 +330,13 @@ const makeLineSpan = function( className: string, options: Options, ) { - // Fill the entire span instead of just a border. That way, the min-height - // value in katex.less will ensure that at least one screen pixel displays. - const line = stretchy.ruleSpan(className, options); - line.height = options.fontMetrics().defaultRuleThickness; - line.style.height = line.height + "em"; + // Return a span with an SVG image of a horizontal line. The SVG path + // fills the middle fifth of the span. We want an extra tall span + // because Chrome will sometimes not display a span that is 0.04em tall. + const lineHeight = options.fontMetrics().defaultRuleThickness; + const line = stretchy.ruleSpan(className, lineHeight, options); + line.height = lineHeight; + line.style.height = 5 * line.height + "em"; line.maxFontSize = 1.0; return line; }; diff --git a/src/environments/array.js b/src/environments/array.js index a6e4cf65..9de2b402 100644 --- a/src/environments/array.js +++ b/src/environments/array.js @@ -199,7 +199,7 @@ const htmlBuilder = function(group, options) { } if (colDescr.separator === "|") { - const separator = stretchy.ruleSpan("vertical-separator", + const separator = stretchy.ruleSpan("vertical-separator", 0.05, options); separator.style.height = totalHeight + "em"; separator.style.verticalAlign = diff --git a/src/functions/genfrac.js b/src/functions/genfrac.js index fff12fa9..a2d6423a 100644 --- a/src/functions/genfrac.js +++ b/src/functions/genfrac.js @@ -126,7 +126,7 @@ defineFunction({ } let frac; - if (ruleWidth === 0) { + if (!rule) { // Rule 15c const candidateClearance = (numShift - numerm.depth) - (denomm.height - denomShift); @@ -166,8 +166,12 @@ defineFunction({ positionType: "individualShift", children: [ {type: "elem", elem: denomm, shift: denomShift}, - // $FlowFixMe `rule` cannot be `null` here. - {type: "elem", elem: rule, shift: midShift}, + // The next line would ordinarily contain "shift: midShift". + // But we put the rule into a a span that is 5 rules tall, + // to overcome a Chrome rendering issue. Put another way, + // we've replaced a kern of width = 2 * ruleWidth with a + // bottom gap in the SVG = 2 * ruleWidth. + {type: "elem", elem: rule, shift: midShift + 2 * ruleWidth}, {type: "elem", elem: numerm, shift: -numShift}, ], }, options); diff --git a/src/functions/overline.js b/src/functions/overline.js index e6f3eab5..93165804 100644 --- a/src/functions/overline.js +++ b/src/functions/overline.js @@ -34,9 +34,13 @@ defineFunction({ positionType: "firstBaseline", children: [ {type: "elem", elem: innerGroup}, - {type: "kern", size: 3 * line.height}, - {type: "elem", elem: line}, + // The kern on the next line would ordinarily be 3 * line.height + // But we put the line into a span that is 5 lines tall, to + // overcome a Chrome rendering issue. The SVG has a space in + // the bottom that is 2 lines high. That and the 1-line-high + // kern sum up to the same distance as the old 3 line kern. {type: "kern", size: line.height}, + {type: "elem", elem: line}, ], }, options); diff --git a/src/functions/underline.js b/src/functions/underline.js index 79cbb0f7..2d64a91a 100644 --- a/src/functions/underline.js +++ b/src/functions/underline.js @@ -24,7 +24,7 @@ defineFunction({ // Build the inner group. const innerGroup = html.buildGroup(group.value.body, options); - // Create the line above the body + // Create the line to go below the body const line = buildCommon.makeLineSpan("underline-line", options); // Generate the vlist, with the appropriate kerns @@ -32,9 +32,11 @@ defineFunction({ positionType: "top", positionData: innerGroup.height, children: [ - {type: "kern", size: line.height}, + // The SVG image is 5x as tall as the line. + // The bottom 2/5 of the image is blank and acts like a kern. + // So we omit the kern that would otherwise go at the bottom. {type: "elem", elem: line}, - {type: "kern", size: 3 * line.height}, + {type: "kern", size: 5 * line.height}, {type: "elem", elem: innerGroup}, ], }, options); diff --git a/src/stretchy.js b/src/stretchy.js index e8165a1e..d0ec7d07 100644 --- a/src/stretchy.js +++ b/src/stretchy.js @@ -326,16 +326,53 @@ const encloseSpan = function( return img; }; -const ruleSpan = function(className: string, options: Options): domTree.span { - // Get a big square image. The parent span will hide the overflow. - const pathNode = new domTree.pathNode('bigRule'); - const svg = new domTree.svgNode([pathNode], { - "width": "400em", - "height": "400em", - "viewBox": "0 0 400000 400000", - "preserveAspectRatio": "xMinYMin slice", - }); - return buildCommon.makeSpan([className, "hide-tail"], [svg], options); +const ruleSpan = function(className: string, lineThickness: number, + options: Options): domTree.span { + + // Get a span with an SVG line that fills the middle fifth of the span. + // We're using an extra wide span so Chrome won't round it down to zero. + + const lines = []; + let svgNode; + if (className === "vertical-separator") { + // Apply 2 brush strokes for sharper edges on low-res screens. + for (let i = 0; i < 2; i++) { + lines.push(new domTree.lineNode({ + "x1": "5", + "y1": "0", + "x2": "5", + "y2": "10", + "stroke-width": "2", + })); + } + + svgNode = new domTree.svgNode(lines, { + "width": "0.25em", + "height": "100%", + "viewBox": "0 0 10 10", + "preserveAspectRatio": "none", + }); + + } else { + for (let i = 0; i < 2; i++) { + lines.push(new domTree.lineNode({ + "x1": "0", + "y1": "5", + "x2": "10", + "y2": "5", + "stroke-width": "2", + })); + } + + svgNode = new domTree.svgNode(lines, { + "width": "100%", + "height": 5 * lineThickness + "em", + "viewBox": "0 0 10 10", + "preserveAspectRatio": "none", + }); + } + + return buildCommon.makeSpan([className], [svgNode], options); }; export default { diff --git a/src/svgGeometry.js b/src/svgGeometry.js index 5832c57c..72ca2a9e 100644 --- a/src/svgGeometry.js +++ b/src/svgGeometry.js @@ -5,10 +5,6 @@ */ const path: {[string]: string} = { - // bigRule provides a big square image for frac-lines, etc. - // The actual rendered rule is smaller, controlled by overflow:hidden. - bigRule: 'M0 0 h400000 v400000 h-400000z M0 0 h400000 v400000 h-400000z', - // sqrtMain path geometry is from glyph U221A in the font KaTeX Main sqrtMain: `M95 622c-2.667 0-7.167-2.667-13.5 -8S72 604 72 600c0-2 .333-3.333 1-4 1.333-2.667 23.833-20.667 67.5-54s diff --git a/static/katex.less b/static/katex.less index 78f3211a..e18df4f4 100644 --- a/static/katex.less +++ b/static/katex.less @@ -56,26 +56,26 @@ .strut { display: inline-block; } - + // Text font weights .textbf { font-weight: bold; } - + // Text font shapes. .textit { font-style: italic; } - + // Text font families. .textrm { font-family: KaTeX_Main; } - + .textsf { font-family: KaTeX_SansSerif; } - + .texttt { font-family: KaTeX_Typewriter; } @@ -85,7 +85,7 @@ font-family: KaTeX_Math; font-style: italic; } - + .mathrm { font-style: normal; } @@ -327,26 +327,6 @@ } } - // Set a min-height for some horizontal lines so their display - // will show at least one screen pixel. - @media screen { - .mfrac .frac-line, - .overline .overline-line, - .underline .underline-line { - min-height: 1px; - } - } - - // Modify min-height for retina displays. Don't force two screen pixels. - @media screen and (-webkit-min-device-pixel-ratio: 2.0), - screen and (min-resolution: 192dpi) { - .mfrac .frac-line, - .overline .overline-line, - .underline .underline-line { - min-height: 0.5px; - } - } - .mspace { display: inline-block; @@ -567,20 +547,9 @@ .mtable { .vertical-separator { display: inline-block; - margin: 0 -0.025em; - width: 0.05em; - - // Set a min-width so it will display at least one screen pixel. - @media screen { - min-width: 1px; - } - - // Modify min-width for retina displays. Don't force two screen pixels. - @media screen and (-webkit-min-device-pixel-ratio: 2.0), - screen and (min-resolution: 192dpi) { - min-width: 0.5px; - } - } + margin: 0 -0.125em; // The ink in the rule is actually 0.05em wide. + width: 0.25em; // We put it in a 0.25em wide span to overcome + } // a Chrome rendering issue. .arraycolsep { display: inline-block; @@ -617,6 +586,10 @@ } } + .vertical-separator svg { + width: 0.25em; + } + // Define CSS for image whose width will match its span width. .stretchy { width: 100%; diff --git a/test/screenshotter/images/ArrayMode-chrome.png b/test/screenshotter/images/ArrayMode-chrome.png index 1859b946..c7531dab 100644 Binary files a/test/screenshotter/images/ArrayMode-chrome.png and b/test/screenshotter/images/ArrayMode-chrome.png differ diff --git a/test/screenshotter/images/ArrayMode-firefox.png b/test/screenshotter/images/ArrayMode-firefox.png index 9893ca81..a178271a 100644 Binary files a/test/screenshotter/images/ArrayMode-firefox.png and b/test/screenshotter/images/ArrayMode-firefox.png differ diff --git a/test/screenshotter/images/Arrays-chrome.png b/test/screenshotter/images/Arrays-chrome.png index 9bae8b4a..81a7b2e7 100644 Binary files a/test/screenshotter/images/Arrays-chrome.png and b/test/screenshotter/images/Arrays-chrome.png differ diff --git a/test/screenshotter/images/Arrays-firefox.png b/test/screenshotter/images/Arrays-firefox.png index 00578144..01a95e48 100644 Binary files a/test/screenshotter/images/Arrays-firefox.png and b/test/screenshotter/images/Arrays-firefox.png differ diff --git a/test/screenshotter/images/DeepFontSizing-chrome.png b/test/screenshotter/images/DeepFontSizing-chrome.png index 9e29083c..9aee0eb1 100644 Binary files a/test/screenshotter/images/DeepFontSizing-chrome.png and b/test/screenshotter/images/DeepFontSizing-chrome.png differ diff --git a/test/screenshotter/images/DeepFontSizing-firefox.png b/test/screenshotter/images/DeepFontSizing-firefox.png index 46f3cee5..05b331ea 100644 Binary files a/test/screenshotter/images/DeepFontSizing-firefox.png and b/test/screenshotter/images/DeepFontSizing-firefox.png differ diff --git a/test/screenshotter/images/DisplayMode-chrome.png b/test/screenshotter/images/DisplayMode-chrome.png index fe21267d..a9f5d17a 100644 Binary files a/test/screenshotter/images/DisplayMode-chrome.png and b/test/screenshotter/images/DisplayMode-chrome.png differ diff --git a/test/screenshotter/images/DisplayMode-firefox.png b/test/screenshotter/images/DisplayMode-firefox.png index 22c03048..e3efecae 100644 Binary files a/test/screenshotter/images/DisplayMode-firefox.png and b/test/screenshotter/images/DisplayMode-firefox.png differ diff --git a/test/screenshotter/images/DisplayStyle-chrome.png b/test/screenshotter/images/DisplayStyle-chrome.png index 65619e34..b37a83d4 100644 Binary files a/test/screenshotter/images/DisplayStyle-chrome.png and b/test/screenshotter/images/DisplayStyle-chrome.png differ diff --git a/test/screenshotter/images/DisplayStyle-firefox.png b/test/screenshotter/images/DisplayStyle-firefox.png index c808ad23..b657fa75 100644 Binary files a/test/screenshotter/images/DisplayStyle-firefox.png and b/test/screenshotter/images/DisplayStyle-firefox.png differ diff --git a/test/screenshotter/images/ExtensibleArrows-chrome.png b/test/screenshotter/images/ExtensibleArrows-chrome.png index 5aab6439..68928c4c 100644 Binary files a/test/screenshotter/images/ExtensibleArrows-chrome.png and b/test/screenshotter/images/ExtensibleArrows-chrome.png differ diff --git a/test/screenshotter/images/ExtensibleArrows-firefox.png b/test/screenshotter/images/ExtensibleArrows-firefox.png index 972e006f..503bab7c 100644 Binary files a/test/screenshotter/images/ExtensibleArrows-firefox.png and b/test/screenshotter/images/ExtensibleArrows-firefox.png differ diff --git a/test/screenshotter/images/FractionTest-chrome.png b/test/screenshotter/images/FractionTest-chrome.png index a8d88e5c..54c829d6 100644 Binary files a/test/screenshotter/images/FractionTest-chrome.png and b/test/screenshotter/images/FractionTest-chrome.png differ diff --git a/test/screenshotter/images/FractionTest-firefox.png b/test/screenshotter/images/FractionTest-firefox.png index 3b01721e..d9e88c84 100644 Binary files a/test/screenshotter/images/FractionTest-firefox.png and b/test/screenshotter/images/FractionTest-firefox.png differ diff --git a/test/screenshotter/images/Gathered-chrome.png b/test/screenshotter/images/Gathered-chrome.png index 5e1eb0a1..e2ac866a 100644 Binary files a/test/screenshotter/images/Gathered-chrome.png and b/test/screenshotter/images/Gathered-chrome.png differ diff --git a/test/screenshotter/images/Gathered-firefox.png b/test/screenshotter/images/Gathered-firefox.png index 80d98f23..ccbb6bab 100644 Binary files a/test/screenshotter/images/Gathered-firefox.png and b/test/screenshotter/images/Gathered-firefox.png differ diff --git a/test/screenshotter/images/GreekUnicode-chrome.png b/test/screenshotter/images/GreekUnicode-chrome.png index e155bf64..0f5408e3 100644 Binary files a/test/screenshotter/images/GreekUnicode-chrome.png and b/test/screenshotter/images/GreekUnicode-chrome.png differ diff --git a/test/screenshotter/images/GreekUnicode-firefox.png b/test/screenshotter/images/GreekUnicode-firefox.png index 95fa8cc9..78abbf22 100644 Binary files a/test/screenshotter/images/GreekUnicode-firefox.png and b/test/screenshotter/images/GreekUnicode-firefox.png differ diff --git a/test/screenshotter/images/HorizontalBraces-chrome.png b/test/screenshotter/images/HorizontalBraces-chrome.png index 918f759e..54aaee41 100644 Binary files a/test/screenshotter/images/HorizontalBraces-chrome.png and b/test/screenshotter/images/HorizontalBraces-chrome.png differ diff --git a/test/screenshotter/images/HorizontalBraces-firefox.png b/test/screenshotter/images/HorizontalBraces-firefox.png index f7817b5d..46a05243 100644 Binary files a/test/screenshotter/images/HorizontalBraces-firefox.png and b/test/screenshotter/images/HorizontalBraces-firefox.png differ diff --git a/test/screenshotter/images/Kern-chrome.png b/test/screenshotter/images/Kern-chrome.png index 4bfdb3f2..5bd29bec 100644 Binary files a/test/screenshotter/images/Kern-chrome.png and b/test/screenshotter/images/Kern-chrome.png differ diff --git a/test/screenshotter/images/Kern-firefox.png b/test/screenshotter/images/Kern-firefox.png index 0f11d45c..18ae4ab9 100644 Binary files a/test/screenshotter/images/Kern-firefox.png and b/test/screenshotter/images/Kern-firefox.png differ diff --git a/test/screenshotter/images/LargeRuleNumerator-chrome.png b/test/screenshotter/images/LargeRuleNumerator-chrome.png index d61a2785..15c3be3e 100644 Binary files a/test/screenshotter/images/LargeRuleNumerator-chrome.png and b/test/screenshotter/images/LargeRuleNumerator-chrome.png differ diff --git a/test/screenshotter/images/LargeRuleNumerator-firefox.png b/test/screenshotter/images/LargeRuleNumerator-firefox.png index 8b5a493f..c7447011 100644 Binary files a/test/screenshotter/images/LargeRuleNumerator-firefox.png and b/test/screenshotter/images/LargeRuleNumerator-firefox.png differ diff --git a/test/screenshotter/images/LowerAccent-chrome.png b/test/screenshotter/images/LowerAccent-chrome.png index 3811ce17..3e87b06b 100644 Binary files a/test/screenshotter/images/LowerAccent-chrome.png and b/test/screenshotter/images/LowerAccent-chrome.png differ diff --git a/test/screenshotter/images/LowerAccent-firefox.png b/test/screenshotter/images/LowerAccent-firefox.png index 8fdcc1e4..a60fa1ab 100644 Binary files a/test/screenshotter/images/LowerAccent-firefox.png and b/test/screenshotter/images/LowerAccent-firefox.png differ diff --git a/test/screenshotter/images/MathAtom2-chrome.png b/test/screenshotter/images/MathAtom2-chrome.png index 1686e6be..21745cac 100644 Binary files a/test/screenshotter/images/MathAtom2-chrome.png and b/test/screenshotter/images/MathAtom2-chrome.png differ diff --git a/test/screenshotter/images/MathAtom2-firefox.png b/test/screenshotter/images/MathAtom2-firefox.png index 5f8171a3..2ea3d1af 100644 Binary files a/test/screenshotter/images/MathAtom2-firefox.png and b/test/screenshotter/images/MathAtom2-firefox.png differ diff --git a/test/screenshotter/images/NestedFractions-chrome.png b/test/screenshotter/images/NestedFractions-chrome.png index ad107791..3d1f0fd4 100644 Binary files a/test/screenshotter/images/NestedFractions-chrome.png and b/test/screenshotter/images/NestedFractions-chrome.png differ diff --git a/test/screenshotter/images/NestedFractions-firefox.png b/test/screenshotter/images/NestedFractions-firefox.png index 83a304b8..e85dcaa7 100644 Binary files a/test/screenshotter/images/NestedFractions-firefox.png and b/test/screenshotter/images/NestedFractions-firefox.png differ diff --git a/test/screenshotter/images/OverUnderline-chrome.png b/test/screenshotter/images/OverUnderline-chrome.png index b2255a55..e0a2339d 100644 Binary files a/test/screenshotter/images/OverUnderline-chrome.png and b/test/screenshotter/images/OverUnderline-chrome.png differ diff --git a/test/screenshotter/images/OverUnderline-firefox.png b/test/screenshotter/images/OverUnderline-firefox.png index d16b60c5..9fe5c685 100644 Binary files a/test/screenshotter/images/OverUnderline-firefox.png and b/test/screenshotter/images/OverUnderline-firefox.png differ diff --git a/test/screenshotter/images/Phantom-chrome.png b/test/screenshotter/images/Phantom-chrome.png index 9f1db3f6..b5d216d2 100644 Binary files a/test/screenshotter/images/Phantom-chrome.png and b/test/screenshotter/images/Phantom-chrome.png differ diff --git a/test/screenshotter/images/Phantom-firefox.png b/test/screenshotter/images/Phantom-firefox.png index 0284bfb6..a78ded79 100644 Binary files a/test/screenshotter/images/Phantom-firefox.png and b/test/screenshotter/images/Phantom-firefox.png differ diff --git a/test/screenshotter/images/Raisebox-chrome.png b/test/screenshotter/images/Raisebox-chrome.png index fc8da117..fd825a9d 100644 Binary files a/test/screenshotter/images/Raisebox-chrome.png and b/test/screenshotter/images/Raisebox-chrome.png differ diff --git a/test/screenshotter/images/Raisebox-firefox.png b/test/screenshotter/images/Raisebox-firefox.png index 405b1c8d..6c18d1d8 100644 Binary files a/test/screenshotter/images/Raisebox-firefox.png and b/test/screenshotter/images/Raisebox-firefox.png differ diff --git a/test/screenshotter/images/RlapBug-chrome.png b/test/screenshotter/images/RlapBug-chrome.png index 4cbe0bba..1a4568fa 100644 Binary files a/test/screenshotter/images/RlapBug-chrome.png and b/test/screenshotter/images/RlapBug-chrome.png differ diff --git a/test/screenshotter/images/RlapBug-firefox.png b/test/screenshotter/images/RlapBug-firefox.png index eb9ac884..e5ea0540 100644 Binary files a/test/screenshotter/images/RlapBug-firefox.png and b/test/screenshotter/images/RlapBug-firefox.png differ diff --git a/test/screenshotter/images/StretchyAccent-chrome.png b/test/screenshotter/images/StretchyAccent-chrome.png index d139bdbd..aff80285 100644 Binary files a/test/screenshotter/images/StretchyAccent-chrome.png and b/test/screenshotter/images/StretchyAccent-chrome.png differ diff --git a/test/screenshotter/images/StretchyAccent-firefox.png b/test/screenshotter/images/StretchyAccent-firefox.png index 8d6a0e0e..a95935e9 100644 Binary files a/test/screenshotter/images/StretchyAccent-firefox.png and b/test/screenshotter/images/StretchyAccent-firefox.png differ diff --git a/test/screenshotter/images/StrikeThrough-chrome.png b/test/screenshotter/images/StrikeThrough-chrome.png index e4e9fcec..fb145662 100644 Binary files a/test/screenshotter/images/StrikeThrough-chrome.png and b/test/screenshotter/images/StrikeThrough-chrome.png differ diff --git a/test/screenshotter/images/StrikeThrough-firefox.png b/test/screenshotter/images/StrikeThrough-firefox.png index a8301290..52ff15e2 100644 Binary files a/test/screenshotter/images/StrikeThrough-firefox.png and b/test/screenshotter/images/StrikeThrough-firefox.png differ diff --git a/test/screenshotter/images/SupSubLeftAlignReset-chrome.png b/test/screenshotter/images/SupSubLeftAlignReset-chrome.png index be5eb855..4ddc66b7 100644 Binary files a/test/screenshotter/images/SupSubLeftAlignReset-chrome.png and b/test/screenshotter/images/SupSubLeftAlignReset-chrome.png differ diff --git a/test/screenshotter/images/SupSubLeftAlignReset-firefox.png b/test/screenshotter/images/SupSubLeftAlignReset-firefox.png index 81d8133c..1ea11550 100644 Binary files a/test/screenshotter/images/SupSubLeftAlignReset-firefox.png and b/test/screenshotter/images/SupSubLeftAlignReset-firefox.png differ diff --git a/test/screenshotter/images/Text-chrome.png b/test/screenshotter/images/Text-chrome.png index 66e149f0..25d8cfac 100644 Binary files a/test/screenshotter/images/Text-chrome.png and b/test/screenshotter/images/Text-chrome.png differ diff --git a/test/screenshotter/images/Text-firefox.png b/test/screenshotter/images/Text-firefox.png index ad88219b..8f905789 100644 Binary files a/test/screenshotter/images/Text-firefox.png and b/test/screenshotter/images/Text-firefox.png differ diff --git a/test/screenshotter/images/UnsupportedCmds-chrome.png b/test/screenshotter/images/UnsupportedCmds-chrome.png index 824bdedf..aadfa103 100644 Binary files a/test/screenshotter/images/UnsupportedCmds-chrome.png and b/test/screenshotter/images/UnsupportedCmds-chrome.png differ diff --git a/test/screenshotter/images/UnsupportedCmds-firefox.png b/test/screenshotter/images/UnsupportedCmds-firefox.png index cfc3ff04..59a26e9c 100644 Binary files a/test/screenshotter/images/UnsupportedCmds-firefox.png and b/test/screenshotter/images/UnsupportedCmds-firefox.png differ