mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-05 19:28:39 +00:00
2da06d541e
TeX and CSS treat line heights in fundamentally different ways. In
TeX, every character is treated as a box of its precise height and
depth; the line height (\baselineskip) applies after characters have
been assembled into lines. In CSS, in contrast, every character
creates a "line box" corresponding to the accompanying font. When
characters of different fonts and sizes are placed into the same
span, the resulting line box contains the line boxes of all children.
This is unfortunate because, for example, we want `\frac{1}{2}` to
behave in vertical spacing contexts like it is exactly as tall and
deep as the visible fraction (which is the TeX behavior). Given CSS
constraints, though, in most contexts the fraction has extra vertical
space: the line boxes for the numerator and denominator create
padding. For small boxes, this isn't so bad. To really see the
problem put a tall rule in the denominator of a fraction, or check
out the VerticalSpacing screenshotter test, which has way more space
than it should.
Solving this problem in CSS is difficult. There is no easy way to get
rid of the extra line boxes.
But there is *a* way, namely tables. A table-cell with vertical-align
top, bottom, or middle is ignored for the purposes of line height
calculation.
So in this commit, makeVList puts its contents into a
vertical-align:bottom table-cell (to clear unwanted line boxes), with
an extra row used to represent depth.
Many Chrome screenshotter tests change. This is because Chrome rounds
table dimensions to integral numbers of pixels, while it uses
sub-pixel positioning for non-table displayed tabs. That makes many
vlists a fraction of a pixel wider than they used to be.
1192 lines
32 KiB
Plaintext
1192 lines
32 KiB
Plaintext
@import "fonts.less";
|
|
|
|
// The mu unit is defined as 1/18 em
|
|
@mu: 1.0/18.0em;
|
|
|
|
.katex-display {
|
|
display: block;
|
|
margin: 1em 0;
|
|
text-align: center;
|
|
|
|
> .katex {
|
|
display: inline-block;
|
|
text-align: initial;
|
|
}
|
|
}
|
|
|
|
.katex {
|
|
font: normal 1.21em KaTeX_Main, Times New Roman, serif;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
|
|
// Protect elements inside .katex from inheriting text-indent.
|
|
text-indent: 0;
|
|
|
|
// Prevent a rendering bug that misplaces \vec in Chrome.
|
|
text-rendering: auto;
|
|
|
|
// Prevent background resetting on elements in Windows's high-contrast
|
|
// mode, while still allowing background/foreground setting on root .katex
|
|
* { -ms-high-contrast-adjust: none !important; }
|
|
|
|
.katex-html {
|
|
// Making .katex inline-block allows line breaks before and after,
|
|
// which is undesireable ("to $x$,"). Instead, adjust the .katex-html
|
|
// style and put nowrap on the inline .katex element.
|
|
display: inline-block;
|
|
}
|
|
|
|
.katex-mathml {
|
|
// Accessibility hack to only show to screen readers
|
|
// Found at: http://a11yproject.com/posts/how-to-hide-content/
|
|
position: absolute;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
padding: 0;
|
|
border: 0;
|
|
height: 1px;
|
|
width: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.base {
|
|
display: inline-block;
|
|
}
|
|
|
|
.strut {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mathrm {
|
|
font-style: normal;
|
|
}
|
|
|
|
.textit {
|
|
font-style: italic;
|
|
}
|
|
|
|
.mathit {
|
|
font-family: KaTeX_Math;
|
|
font-style: italic;
|
|
}
|
|
|
|
.mathbf {
|
|
font-family: KaTeX_Main;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.amsrm {
|
|
font-family: KaTeX_AMS;
|
|
}
|
|
|
|
.mathbb {
|
|
font-family: KaTeX_AMS;
|
|
}
|
|
|
|
.mathcal {
|
|
font-family: KaTeX_Caligraphic;
|
|
}
|
|
|
|
.mathfrak {
|
|
font-family: KaTeX_Fraktur;
|
|
}
|
|
|
|
.mathtt {
|
|
font-family: KaTeX_Typewriter;
|
|
}
|
|
|
|
.mathscr {
|
|
font-family: KaTeX_Script;
|
|
}
|
|
|
|
.mathsf {
|
|
font-family: KaTeX_SansSerif;
|
|
}
|
|
|
|
.mainit {
|
|
font-family: KaTeX_Main;
|
|
font-style: italic;
|
|
}
|
|
|
|
// This value is also used in fontMetrics.js, if you change it make sure the
|
|
// values match.
|
|
@ptperem: 10.0;
|
|
@nulldelimiterspace: 1.2em / @ptperem;
|
|
|
|
@thinspace: 0.16667em; // 3mu
|
|
@mediumspace: 0.22222em; // 4mu
|
|
@thickspace: 0.27778em; // 5mu
|
|
|
|
// These spacings apply in textstyle and displaystyle.
|
|
.mord {
|
|
& + .mord {}
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mop {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin {}
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mbin {
|
|
& + .mord { margin-left: @mediumspace; }
|
|
& + .mop { margin-left: @mediumspace; }
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen { margin-left: @mediumspace; }
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @mediumspace; }
|
|
}
|
|
|
|
.mrel {
|
|
& + .mord { margin-left: @thickspace; }
|
|
& + .mop { margin-left: @thickspace; }
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen { margin-left: @thickspace; }
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thickspace; }
|
|
}
|
|
|
|
.mopen {
|
|
& + .mord {}
|
|
& + .mop {}
|
|
& + .mbin {}
|
|
& + .mrel {}
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner {}
|
|
}
|
|
|
|
.mclose {
|
|
& + .mord {}
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen {}
|
|
& + .mclose {}
|
|
& + .mpunct {}
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mpunct {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin {}
|
|
& + .mrel { margin-left: @thinspace; }
|
|
& + .mopen { margin-left: @thinspace; }
|
|
& + .mclose { margin-left: @thinspace; }
|
|
& + .mpunct { margin-left: @thinspace; }
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
.minner {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
& + .mbin { margin-left: @mediumspace; }
|
|
& + .mrel { margin-left: @thickspace; }
|
|
& + .mopen { margin-left: @thinspace; }
|
|
& + .mclose {}
|
|
& + .mpunct { margin-left: @thinspace; }
|
|
& + .minner { margin-left: @thinspace; }
|
|
}
|
|
|
|
// These tighter spacings apply in scriptstyle and scriptscriptstyle.
|
|
.mord.mtight { margin-left: 0; }
|
|
.mop.mtight { margin-left: 0; }
|
|
.mbin.mtight { margin-left: 0; }
|
|
.mrel.mtight { margin-left: 0; }
|
|
.mopen.mtight { margin-left: 0; }
|
|
.mclose.mtight { margin-left: 0; }
|
|
.mpunct.mtight { margin-left: 0; }
|
|
.minner.mtight { margin-left: 0; }
|
|
|
|
.mord {
|
|
& + .mop.mtight { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mop {
|
|
& + .mord.mtight { margin-left: @thinspace; }
|
|
& + .mop.mtight { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mclose {
|
|
& + .mop.mtight { margin-left: @thinspace; }
|
|
}
|
|
|
|
.minner {
|
|
& + .mop.mtight { margin-left: @thinspace; }
|
|
}
|
|
|
|
.vlist-t {
|
|
display: inline-table;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.vlist-r {
|
|
display: table-row;
|
|
}
|
|
|
|
.vlist-s {
|
|
display: table-cell;
|
|
vertical-align: bottom;
|
|
font-size: 0.05em;
|
|
}
|
|
|
|
.vlist {
|
|
display: table-cell;
|
|
vertical-align: bottom;
|
|
position: relative;
|
|
|
|
> span {
|
|
display: block;
|
|
height: 0;
|
|
position: relative;
|
|
|
|
> span {
|
|
display: inline-block;
|
|
}
|
|
|
|
> .pstrut {
|
|
overflow: hidden;
|
|
width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.msupsub {
|
|
text-align: left;
|
|
}
|
|
|
|
.mfrac {
|
|
> span > span {
|
|
text-align: center;
|
|
}
|
|
|
|
.frac-line {
|
|
width: 100%;
|
|
|
|
&:before {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.04em;
|
|
content: "";
|
|
display: block;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mspace {
|
|
display: inline-block;
|
|
|
|
&.negativethinspace {
|
|
margin-left: -@thinspace;
|
|
}
|
|
|
|
&.thinspace {
|
|
width: @thinspace;
|
|
}
|
|
|
|
&.negativemediumspace {
|
|
margin-left: -@mediumspace;
|
|
}
|
|
|
|
&.mediumspace {
|
|
width: @mediumspace;
|
|
}
|
|
|
|
&.thickspace {
|
|
width: @thickspace;
|
|
}
|
|
|
|
&.sixmuspace {
|
|
width: 0.333333em;
|
|
}
|
|
|
|
&.eightmuspace {
|
|
width: 0.444444em;
|
|
}
|
|
|
|
&.enspace {
|
|
width: 0.5em;
|
|
}
|
|
|
|
&.twelvemuspace {
|
|
width: 0.666667em;
|
|
}
|
|
|
|
&.quad {
|
|
width: 1em;
|
|
}
|
|
|
|
&.qquad {
|
|
width: 2em;
|
|
}
|
|
}
|
|
|
|
.llap,
|
|
.rlap {
|
|
width: 0;
|
|
position: relative;
|
|
|
|
> .inner {
|
|
position: absolute;
|
|
}
|
|
|
|
> .fix {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.llap > .inner {
|
|
right: 0;
|
|
}
|
|
|
|
.rlap > .inner {
|
|
left: 0;
|
|
}
|
|
|
|
.katex-logo {
|
|
.a {
|
|
font-size: 0.75em;
|
|
margin-left: -0.32em;
|
|
position: relative;
|
|
top: -0.2em;
|
|
}
|
|
.t {
|
|
margin-left: -0.23em;
|
|
}
|
|
.e {
|
|
margin-left: -0.1667em;
|
|
position: relative;
|
|
top: 0.2155em;
|
|
}
|
|
.x {
|
|
margin-left: -0.125em;
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
display: inline-block;
|
|
border: solid 0;
|
|
position: relative;
|
|
}
|
|
|
|
.overline .overline-line,
|
|
.underline .underline-line {
|
|
width: 100%;
|
|
|
|
&:before {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.04em;
|
|
content: "";
|
|
display: block;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
.sqrt {
|
|
> .sqrt-sign {
|
|
position: relative;
|
|
}
|
|
|
|
.sqrt-line {
|
|
width: 100%;
|
|
|
|
&:before {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.04em;
|
|
content: "";
|
|
display: block;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
> .root {
|
|
// These values are taken from the definition of `\r@@t`,
|
|
// `\mkern 5mu` and `\mkern -10mu`.
|
|
margin-left: 5*@mu;
|
|
margin-right: -10*@mu;
|
|
}
|
|
}
|
|
|
|
.sizing, .fontsize-ensurer {
|
|
display: inline-block;
|
|
|
|
@size1: 0.5;
|
|
@size2: 0.6;
|
|
@size3: 0.7;
|
|
@size4: 0.8;
|
|
@size5: 0.9;
|
|
@size6: 1.0;
|
|
@size7: 1.2;
|
|
@size8: 1.44;
|
|
@size9: 1.728;
|
|
@size10: 2.074;
|
|
@size11: 2.488;
|
|
|
|
.generate-size-change(@from, @to) {
|
|
&.reset-size@{from}.size@{to} {
|
|
@sizeFromVariable: ~"size@{from}";
|
|
@sizeToVariable: ~"size@{to}";
|
|
font-size: (@@sizeToVariable / @@sizeFromVariable) * 1em;
|
|
}
|
|
}
|
|
|
|
.generate-to-size-change(@from, @currTo) when (@currTo =< 11) {
|
|
.generate-size-change(@from, @currTo);
|
|
|
|
.generate-to-size-change(@from, (@currTo + 1));
|
|
}
|
|
|
|
.generate-from-size-change(@currFrom) when (@currFrom =< 11) {
|
|
.generate-to-size-change(@currFrom, 1);
|
|
|
|
.generate-from-size-change((@currFrom + 1));
|
|
}
|
|
|
|
.generate-from-size-change(1);
|
|
}
|
|
|
|
.delimsizing {
|
|
&.size1 { font-family: KaTeX_Size1; }
|
|
&.size2 { font-family: KaTeX_Size2; }
|
|
&.size3 { font-family: KaTeX_Size3; }
|
|
&.size4 { font-family: KaTeX_Size4; }
|
|
|
|
&.mult {
|
|
.delim-size1 > span {
|
|
font-family: KaTeX_Size1;
|
|
}
|
|
.delim-size4 > span {
|
|
font-family: KaTeX_Size4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nulldelimiter {
|
|
display: inline-block;
|
|
width: @nulldelimiterspace;
|
|
}
|
|
|
|
.delimcenter {
|
|
position: relative;
|
|
}
|
|
|
|
.op-symbol {
|
|
position: relative;
|
|
|
|
&.small-op {
|
|
font-family: KaTeX_Size1;
|
|
}
|
|
&.large-op {
|
|
font-family: KaTeX_Size2;
|
|
}
|
|
}
|
|
|
|
.op-limits {
|
|
> .vlist-t {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.accent {
|
|
> .vlist-t {
|
|
text-align: center;
|
|
}
|
|
|
|
.accent-body > span {
|
|
width: 0;
|
|
}
|
|
|
|
.accent-body.accent-vec > span {
|
|
position: relative;
|
|
// This value is half of the value that the MathJax's makeFF shifts
|
|
// it left. We center it by shifting it half way right again.
|
|
left: 0.326em;
|
|
}
|
|
}
|
|
|
|
.mtable {
|
|
.vertical-separator {
|
|
display: inline-block;
|
|
margin: 0 -0.025em;
|
|
border-right: 0.05em solid black;
|
|
}
|
|
|
|
.arraycolsep {
|
|
display: inline-block;
|
|
}
|
|
|
|
.col-align-c > .vlist-t {
|
|
text-align: center;
|
|
}
|
|
|
|
.col-align-l > .vlist-t {
|
|
text-align: left;
|
|
}
|
|
|
|
.col-align-r > .vlist-t {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
// Define CSS for background-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 {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
// Lengthen the extensible arrows via padding.
|
|
.x-arrow-pad {
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
.x-arrow,
|
|
.mover,
|
|
.munder {
|
|
text-align: center;
|
|
}
|
|
|
|
.boxpad {
|
|
padding: 0 0.3em 0 0.3em; // \fboxsep = 3pt
|
|
}
|
|
.fbox {
|
|
box-sizing: border-box;
|
|
border: 0.04em solid black; // \fboxrule = 0.4pt
|
|
}
|
|
.cancel-pad {
|
|
padding: 0 0.2em 0 0.2em; // ref: cancel package \advance\dimen@ 2\p@ % "+2"
|
|
}
|
|
.mord + .cancel-lap,
|
|
.mbin + .cancel-lap {
|
|
margin-left: -0.2em;
|
|
}
|
|
.cancel-lap + .mord,
|
|
.cancel-lap + .mbin,
|
|
.cancel-lap + .msupsub {
|
|
margin-left: -0.2em;
|
|
}
|
|
.sout {
|
|
border-bottom-style: solid;
|
|
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 {
|
|
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);
|
|
}
|
|
|
|
}
|