mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-08 12:38:39 +00:00
50d120d614
* Prevent disappearing fraction lines. Set a CSS min-height that will ensure that fraction lines will display at least one screen pixel. Addresses issues #824 and #916. * Change from dppx to dpi Change the break point spec from 2dppx to 192dpi. They mean the same thing. I'm making the change because IE supports dpi but not dppx.
680 lines
15 KiB
Plaintext
680 lines
15 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 {
|
|
position: relative;
|
|
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;
|
|
}
|
|
|
|
.mainrm {
|
|
font-family: KaTeX_Main;
|
|
font-style: normal;
|
|
}
|
|
|
|
// 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 {
|
|
display: table-cell;
|
|
vertical-align: bottom;
|
|
position: relative;
|
|
|
|
> span {
|
|
display: block;
|
|
height: 0;
|
|
position: relative;
|
|
|
|
> span {
|
|
display: inline-block;
|
|
}
|
|
|
|
> .pstrut {
|
|
overflow: hidden;
|
|
width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vlist-t2 {
|
|
margin-right: -2px;
|
|
}
|
|
|
|
.vlist-s {
|
|
// This cell solves Safari rendering problems. It has text content, so
|
|
// its baseline is used for the table. A very small font avoids line-box
|
|
// issues; absolute units prevent user font-size overrides from breaking
|
|
// rendering. Safari refuses to make the box zero-width, so we give it
|
|
// a known width and compensate with negative right margin on the
|
|
// inline-table.
|
|
display: table-cell;
|
|
vertical-align: bottom;
|
|
font-size: 1px;
|
|
width: 2px;
|
|
}
|
|
|
|
.msupsub {
|
|
text-align: left;
|
|
}
|
|
|
|
.mfrac {
|
|
> span > span {
|
|
text-align: center;
|
|
}
|
|
|
|
.frac-line {
|
|
display: inline-block;
|
|
width: 100%;
|
|
border-bottom-style: solid;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
|
|
&.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,
|
|
.clap {
|
|
width: 0;
|
|
position: relative;
|
|
|
|
> .inner {
|
|
position: absolute;
|
|
}
|
|
|
|
> .fix {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.llap > .inner {
|
|
right: 0;
|
|
}
|
|
|
|
.rlap > .inner,
|
|
.clap > .inner {
|
|
left: 0;
|
|
}
|
|
|
|
.clap > .inner > span {
|
|
margin-left: -50%;
|
|
margin-right: 50%;
|
|
}
|
|
|
|
.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 {
|
|
display: inline-block;
|
|
width: 100%;
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
.sqrt {
|
|
> .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;
|
|
}
|
|
|
|
.accent-body.accent-hungarian > span {
|
|
position: relative;
|
|
left: 0.250em; // width of space
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.svg-align {
|
|
text-align: left;
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
position: absolute; // absolute relative to parent
|
|
width: 100%;
|
|
|
|
path {
|
|
fill: currentColor;
|
|
}
|
|
|
|
line {
|
|
stroke: currentColor;
|
|
}
|
|
}
|
|
|
|
// Define CSS for image whose width will match its span width.
|
|
.stretchy {
|
|
width: 100%;
|
|
display: block;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
// Hide the long tail of a stretchy SVG.
|
|
.hide-tail {
|
|
width: 100%; // necessary only to get IE to work properly
|
|
position: relative; // ditto
|
|
overflow: hidden; // This line applies to all browsers.
|
|
}
|
|
|
|
.halfarrow-left {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 50.1%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.halfarrow-right {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.brace-left {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 25.1%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.brace-center {
|
|
position: absolute;
|
|
left: 25%;
|
|
width: 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.brace-right {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 25.1%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// 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
|
|
}
|
|
.fcolorbox {
|
|
box-sizing: border-box;
|
|
border: 0.04em solid; // \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;
|
|
}
|
|
|
|
}
|