patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-10 13:38:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use inline SVG for stretchy elements (#807)

Browse Source 
* 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
This commit is contained in:
Ron Kok
2017-08-19 18:51:16 -07:00
committed by Kevin Barabash
parent 81037e5d10
commit a4b1bf01be
56 changed files with 534 additions and 823 deletions
Download Patch File Download Diff File Expand all files Collapse all files

591
static/katex.less
View File

@@ -539,13 +539,20 @@
}
}
// Define CSS for background-image whose width will match its span width.
.svg-align {
text-align: left;
}
svg {
display: block;
position: absolute; // absolute relative to parent
width: 100%;
}
// Define CSS for image whose width will match its span width.
.stretchy {
width: 100%;
display: block;
background-repeat: no-repeat;
background-position: right center; //right, so that \widehat will shift right when it is shortened
background-size: 100% 100%;
&:before,
&:after {
@@ -588,580 +595,4 @@
border-bottom-width: 0.08em;
}
.widehat1 {
height: 0.24em;
background-image: url(images/widehat1.svg);
}
.widehat2 {
height: 0.30em;
background-image: url(images/widehat2.svg);
}
.widehat3 {
height: 0.36em;
background-image: url(images/widehat3.svg);
}
.widehat4 {
height: 0.42em;
background-image: url(images/widehat4.svg);
}
.tilde1 {
height: 0.26em;
background-image: url(images/tilde1.svg);
}
.tilde2 {
height: 0.29em;
background-image: url(images/tilde2.svg);
}
.tilde3 {
height: 0.306em;
background-image: url(images/tilde3.svg);
}
.tilde4 {
height: 0.312em;
background-image: url(images/tilde4.svg);
}
.rightarrow {
height: 0.522em;
min-width: 0.5em;
background-image: url(images/rightarrow.svg);
}
.xrightarrow {
height: 0.522em;
min-width: 0.783em;
background-image: url(images/rightarrow.svg);
}
.leftarrow {
height: 0.522em;
min-width: 0.5em;
background-image: url(images/leftarrow.svg);
}
.xleftarrow {
height: 0.522em;
min-width: 0.783em;
background-image: url(images/leftarrow.svg);
}
.overbrace {
height: 0.548em;
min-width: 1.6em;
background-image: url(images/overbrace.svg);
}
.underbrace {
height: 0.548em;
min-width: 1.6em;
background-image: url(images/underbrace.svg);
}
.leftrightarrow {
height: 0.522em;
min-width: 0.5em;
background-image: url(images/leftrightarrow.svg);
}
.xleftrightarrow {
height: 0.522em;
min-width: 0.783em;
background-image: url(images/leftrightarrow.svg);
}
.doublerightarrow {
height: 0.56em;
min-width: 0.783em;
background-image: url(images/doublerightarrow.svg);
}
.doubleleftarrow {
height: 0.56em;
min-width: 0.783em;
background-image: url(images/doubleleftarrow.svg);
}
.doubleleftrightarrow {
height: 0.56em;
min-width: 0.955em;
background-image: url(images/doubleleftrightarrow.svg);
}
.leftharpoon {
height: 0.522em;
min-width: 0.5em;
background-image: url(images/leftharpoon.svg);
}
.leftharpoon {
height: 0.522em;
min-width: 0.783em;
background-image: url(images/leftharpoon.svg);
}
.rightharpoon {
height: 0.522em;
min-width: 0.5em;
background-image: url(images/rightharpoon.svg);
}
.xrightharpoon {
height: 0.522em;
min-width: 0.783em;
background-image: url(images/rightharpoon.svg);
}
.hookleftarrow {
height: 0.522em;
min-width: 0.87em;
background-image: url(images/hookleftarrow.svg);
}
.hookrightarrow {
min-width: 0.87em;
height: 0.522em;
background-image: url(images/hookrightarrow.svg);
}
.mapsto {
height: 0.522em;
min-width: 0.783em;
background-image: url(images/mapsto.svg);
}
.leftharpoondown {
height: 0.522em;
min-width: 0.5em;
background-image: url(images/leftharpoondown.svg);
}
.leftharpoondown {
height: 0.522em;
min-width: 0.783em;
background-image: url(images/leftharpoondown.svg);
}
.rightharpoondown {
height: 0.522em;
min-width: 0.5em;
background-image: url(images/rightharpoondown.svg);
}
.xrightharpoondown {
height: 0.522em;
min-width: 0.783em;
background-image: url(images/rightharpoondown.svg);
}
.rightleftharpoons {
height: 0.716em;
min-width: 0.783em;
background-image: url(images/rightleftharpoons.svg);
}
.leftrightharpoons {
height: 0.716em;
min-width: 0.783em;
background-image: url(images/leftrightharpoons.svg);
}
.overgroup {
height: 0.342em;
min-width: 0.87em;
background-image: url(images/overgroup.svg);
}
.undergroup {
height: 0.342em;
min-width: 0.87em;
background-image: url(images/undergroup.svg);
}
.twoheadleftarrow {
height: 0.334em;
min-width: 0.86em;
background-image: url(images/twoheadleftarrow.svg);
}
.twoheadrightarrow {
height: 0.334em;
min-width: 0.86em;
background-image: url(images/twoheadrightarrow.svg);
}
.linesegment {
height: 0.414em;
min-width: 0.5em;
background-image: url(images/linesegment.svg);
}
.longequal {
height: 0.334em;
min-width: 0.5em;
background-image: url(images/longequal.svg);
}
.tofrom {
height: 0.528em;
min-width: 0.86em;
background-image: url(images/tofrom.svg);
}
// \cancel, \bcancel, and \xcancel again.
// Define the detailed background-image for the span.
// Use a linear-gradient to draw a diagonal line that is 0.08 ems wide,
// that is, 0.04 ems on each side of the line on the diagonal of the span.
.cancel {
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
.bcancel {
background:
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
.xcancel {
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
@media screen and (min-width:~"0\0") {
// CSS hack for IE 9, 10, & 11.
// IE doesn't recognize @supports. Hence the media screen hack.
.mask {
background-color: transparent !important;
}
// Instead of a linear gradient, use an SVG to draw the diagonal line for \cancel.
// This line unfortunately has a width that varies with the size of the span.
.bcancel,
.bcancel-mask {
background-color: transparent !important; // Prevent a blob of color.
background-image: url(images/bcancel.svg);
}
.cancel,
.cancel-mask {
background-color: transparent !important;
background-image: url(images/cancel.svg);
}
.xcancel,
.xcancel-mask {
background-color: transparent !important;
background-image: url(images/xcancel.svg);
}
}
@supports ((mask-image:none) or (-webkit-mask:none)) {
// This section is part of the KaTeX support for \color of stretchy elements.
// In up-to-date browsers, over-ride the background-image set above.
// This section won't be applied by some older browsers, so they will instead
// render the black background-image defined above.
.mask,
.bcancel-mask,
.cancel-mask,
.xcancel-mask {
background-image: none;
}
}
@supports not ((mask-image:none) or (-webkit-mask:none)) {
// Fall back for older browswers that do not support CSS mask.
.mask {
background-color: transparent !important;
}
// For \cancel, use a background:linear-gradient, not a mask-image:linear-gradient.
.cancel-mask {
background-color: transparent !important;
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
.bcancel-mask {
background-color: transparent !important;
background:
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
.xcancel-mask {
background-color: transparent !important;
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
}
.cancel-mask {
mask-image:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
-webkit-mask-image:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
.bcancel-mask {
mask-image:
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
-webkit-mask-image:
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
.xcancel-mask {
mask-image:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
-webkit-mask-image:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) ~"calc(50% - 0.04em - 0.5px)",
rgba(0,0,0,1) ~"calc(50% - 0.04em)",
rgba(0,0,0,1) ~"calc(50% + 0.04em)",
rgba(0,0,0,0) ~"calc(50% + 0.04em + 0.5px)",
rgba(0,0,0,0) 100%);
}
@supports (-ms-touch-action: none) {
// CSS hack for Edge
// TODO(ron): If/When Edge fixes its CSS calc() bug, delete the next few lines and use gradients for \cancel.
.bcancel,
.bcancel-mask {
background-color: transparent !important;
background-image: url(images/bcancel.svg);
}
.cancel,
.cancel-mask {
background-color: transparent !important;
background-image: url(images/cancel.svg);
}
.xcancel,
.xcancel-mask {
background-color: transparent !important;
background-image: url(images/xcancel.svg);
}
}
// Next, define the CSS masks used for \color on stretchy wide elements.
.widehat1-mask {
-webkit-mask: url(images/widehat1.svg);
mask: url(images/widehat1.svg) no-repeat;
}
.widehat2-mask {
-webkit-mask: url(images/widehat2.svg);
mask: url(images/widehat2.svg) no-repeat;
}
.widehat3-mask {
-webkit-mask: url(images/widehat3.svg);
mask: url(images/widehat3.svg) no-repeat;
}
.widehat4-mask {
-webkit-mask: url(images/widehat4.svg);
mask: url(images/widehat4.svg) no-repeat;
}
.tilde1-mask {
-webkit-mask: url(images/tilde1.svg);
mask: url(images/tilde1.svg) no-repeat;
}
.tilde2-mask {
-webkit-mask: url(images/tilde2.svg);
mask: url(images/tilde2.svg) no-repeat;
}
.tilde3-mask {
-webkit-mask: url(images/tilde3.svg);
mask: url(images/tilde3.svg) no-repeat;
}
.tilde4-mask {
-webkit-mask: url(images/tilde4.svg);
mask: url(images/tilde4.svg) no-repeat;
}
.rightarrow-mask {
mask: url(images/rightarrow.svg);
-webkit-mask: url(images/rightarrow.svg);
}
.xrightarrow-mask {
mask: url(images/rightarrow.svg);
-webkit-mask: url(images/rightarrow.svg);
}
.leftarrow-mask {
mask: url(images/leftarrow.svg);
-webkit-mask: url(images/leftarrow.svg);
}
.xleftarrow-mask {
mask: url(images/leftarrow.svg);
-webkit-mask: url(images/leftarrow.svg);
}
.overbrace-mask {
min-width: 1.6em;
mask: url(images/overbrace.svg);
-webkit-mask: url(images/overbrace.svg);
}
.underbrace-mask {
min-width: 1.6em;
mask: url(images/underbrace.svg);
-webkit-mask: url(images/underbrace.svg);
}
.leftrightarrow-mask {
mask: url(images/leftrightarrow.svg);
-webkit-mask: url(images/leftrightarrow.svg);
}
.xleftrightarrow-mask {
mask: url(images/leftrightarrow.svg);
-webkit-mask: url(images/leftrightarrow.svg);
}
.doublerightarrow-mask {
mask: url(images/doublerightarrow.svg);
-webkit-mask: url(images/doublerightarrow.svg);
}
.doubleleftarrow-mask {
mask: url(images/doubleleftarrow.svg);
-webkit-mask: url(images/doubleleftarrow.svg);
}
.doubleleftrightarrow-mask {
mask: url(images/doubleleftrightarrow.svg);
-webkit-mask: url(images/doubleleftrightarrow.svg);
}
.leftharpoon-mask {
mask: url(images/leftharpoon.svg);
-webkit-mask: url(images/leftharpoon.svg);
}
.xleftharpoon-mask {
mask: url(images/leftharpoon.svg);
-webkit-mask: url(images/leftharpoon.svg);
}
.rightharpoon-mask {
mask: url(images/rightharpoon.svg);
-webkit-mask: url(images/rightharpoon.svg);
}
.xrightharpoon-mask {
mask: url(images/rightharpoon.svg);
-webkit-mask: url(images/rightharpoon.svg);
}
.hookleftarrow-mask {
mask: url(images/hookleftarrow.svg);
-webkit-mask: url(images/hookleftarrow.svg);
}
.hookrightarrow-mask {
mask: url(images/hookrightarrow.svg);
-webkit-mask: url(images/hookrightarrow.svg);
}
.mapsto-mask {
mask: url(images/mapsto.svg);
-webkit-mask: url(images/mapsto.svg);
}
.leftharpoondown-mask {
mask: url(images/leftharpoondown.svg);
-webkit-mask: url(images/leftharpoondown.svg);
}
.xleftharpoondown-mask {
mask: url(images/leftharpoondown.svg);
-webkit-mask: url(images/leftharpoondown.svg);
}
.rightharpoondown-mask {
mask: url(images/rightharpoondown.svg);
-webkit-mask: url(images/rightharpoondown.svg);
}
.xrightharpoondown-mask {
mask: url(images/rightharpoondown.svg);
-webkit-mask: url(images/rightharpoondown.svg);
}
.rightleftharpoons-mask {
mask: url(images/rightleftharpoons.svg);
-webkit-mask: url(images/rightleftharpoons.svg);
}
.leftrightharpoons-mask {
mask: url(images/leftrightharpoons.svg);
-webkit-mask: url(images/leftrightharpoons.svg);
}
.overgroup-mask {
mask: url(images/overgroup.svg);
-webkit-mask: url(images/overgroup.svg);
}
.undergroup-mask {
mask: url(images/undergroup.svg);
-webkit-mask: url(images/undergroup.svg);
}
.twoheadleftarrow-mask {
mask: url(images/twoheadleftarrow.svg);
-webkit-mask: url(images/twoheadleftarrow.svg);
}
.twoheadrightarrow-mask {
mask: url(images/twoheadrightarrow.svg);
-webkit-mask: url(images/twoheadrightarrow.svg);
}
.linesegment-mask {
mask: url(images/linesegment.svg);
-webkit-mask: url(images/linesegment.svg);
}
.longequal-mask {
mask: url(images/longequal.svg);
-webkit-mask: url(images/longequal.svg);
}
.tofrom-mask {
mask: url(images/tofrom.svg);
-webkit-mask: url(images/tofrom.svg);
}
}