Use inline SVG for stretchy elements #807
Conversation
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
|
I've put up a test page. |
|
The test page looks great! I checked IE11 and it looks great too. I'll regenerate the screenshots later today. |
The stroke-width can also be controlled by inline CSS, e.g. |
| overleftarrow : "\u2190", | ||
| underleftarrow : "\u2190", | ||
| xleftarrow : "\u2190", | ||
| widehat: "^", |
There was a problem hiding this comment.
I hadn't noticed the difference in : position before. Thanks for aligned this with the style that's used elsewhere.
src/stretchy.js
Outdated
| stroke='currentcolor'/>`, | ||
|
|
||
| cancel: `<line x1='0' y1='100%' x2='100%' y2='0' stroke-width='1.5px' | ||
| stroke='currentcolor'/>`, |
There was a problem hiding this comment.
Why doesn't this require a > at the start like many of the innerSVG values?
There was a problem hiding this comment.
I originally wrote both svgSpan and encloseSpan so the the first closing > was in the template string, not in innerSVG. But in svgSpan, I found that some of the SVGs were not nested, so I had to remove the > from of the template string and put it into innerSVG.
In encloseSpan, I left that closing > in the template string. I think it makes more sense that way.
| const totalHeight = height + depth; | ||
| span.style.height = totalHeight + "em"; | ||
| if (minWidth > 0) { | ||
| span.style.minWidth = minWidth + "em"; |
There was a problem hiding this comment.
In cases where no text argument is given, I am trying to render an element that is the same length as the base glyph. That matches LaTeX behavior.
I did the same thing with the original stretchy elements, but the min-width was in the static CSS.
There was a problem hiding this comment.
Exception: minWidth for the braces is set large enough to avoid a discontinuity where sloping parts of the brace match up.
| m8 0v40h399730v-40zm0 194v40h399730v-40z'/></svg>`, | ||
|
|
||
| // doubleleftrightarrow is from glyph U+21D4 in font KaTeX Main | ||
| doubleleftrightarrow: `><svg width='50.1%' viewBox='0 0 400000 549' |
There was a problem hiding this comment.
If we try for an exact 50%-50% match, then floating point rounding error can sometimes create a 1 screen-pixel vertical white line in the middle of the arrow shaft. Setting one side to 50.1% is enough overlap to avoid this. Except one element, I think the braces, where Firefox needed something larger.
| accentBody = buildCommon.makeVList([ | ||
| {type: "elem", elem: body}, | ||
| {type: "elem", elem: accentBody}, | ||
| ], "firstBaseline", null, options); | ||
|
|
||
| const styleSpan = accentBody.children[0].children[0].children[1]; | ||
| styleSpan.classes.push("svg-align"); // text-align: left; |
There was a problem hiding this comment.
I couldn't find the definition for the svg-align class. Is this still needed?
There was a problem hiding this comment.
Very much needed. If that text-align: left is not applied on just the right span, then the elements render smaller, lower, and off to the right.
There was a problem hiding this comment.
Sorry... katex.less was collapsed and I didn't click to expand it.
There was a problem hiding this comment.
Yes, you have to open it to see the glorious sight of 575 lines of deleted code.
|
I'll try experimenting with |
|
I checked out the changes and ran |
|
Well, I'm content with that size change. It's a better product when the SVG is inline. |
regenerate screenshots for functions using inline svg
Replace all background-images with inline SVG code.
Pros:
\colorworks in all browsers, even IE/EdgemaskCons
\cancelline is inpxunits, notemunits