mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-05 19:28:39 +00:00
f52c84c187
Summary: Add support for all of the other operators, including the ones with symbols and limits. This also fixes the bug where subscripts were shifted the same amount as subscripts. To accomplish this, the domTree.textNode has been repurposed into symbolNode which is no longer an actual text node, but instead represents an element with a single symbol in it. This lets us access properties like the italic correction of a symbol in a reasonable manner without having to recursively look through children of spans. Depends on D13082 Fixes #8 Test Plan: - Make sure tests work - Make sure huxley screenshots didn't change much, and new screenshot looks good Reviewers: alpert Reviewed By: alpert Differential Revision: http://phabricator.khanacademy.org/D13122
418 lines
9.4 KiB
Plaintext
418 lines
9.4 KiB
Plaintext
/*
|
|
things to do:
|
|
\sum, \int, \lim
|
|
\sqrt
|
|
big parens
|
|
*/
|
|
|
|
.katex {
|
|
font: normal 1.21em katex_main;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
|
|
.katex-inner {
|
|
// Making .katex inline-block allows line breaks before and after,
|
|
// which is undesireable ("to $x$,"). Instead, adjust the .katex-inner
|
|
// style and put nowrap on the inline .katex element.
|
|
display: inline-block;
|
|
}
|
|
|
|
.base {
|
|
display: inline-block;
|
|
}
|
|
|
|
.strut {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mathit {
|
|
font-family: KaTeX_Math;
|
|
font-style: italic;
|
|
}
|
|
|
|
.amsrm {
|
|
font-family: KaTeX_AMS;
|
|
}
|
|
|
|
// 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;
|
|
@mediumspace: 0.22222em;
|
|
@thickspace: 0.27778em;
|
|
|
|
.textstyle {
|
|
> .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; }
|
|
}
|
|
}
|
|
|
|
.mord {
|
|
& + .mop { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mop {
|
|
& + .mord { margin-left: @thinspace; }
|
|
& + .mop { margin-left: @thinspace; }
|
|
}
|
|
|
|
.mclose {
|
|
& + .mop { margin-left: @thinspace; }
|
|
}
|
|
|
|
.minner {
|
|
& + .mop { margin-left: @thinspace; }
|
|
}
|
|
|
|
.reset-textstyle.textstyle { font-size: 1em; }
|
|
.reset-textstyle.scriptstyle { font-size: 0.7em; }
|
|
.reset-textstyle.scriptscriptstyle { font-size: 0.5em; }
|
|
|
|
.reset-scriptstyle.textstyle { font-size: 1.42857em; }
|
|
.reset-scriptstyle.scriptstyle { font-size: 1em; }
|
|
.reset-scriptstyle.scriptscriptstyle { font-size: 0.71429em; }
|
|
|
|
.reset-scriptscriptstyle.textstyle { font-size: 2em; }
|
|
.reset-scriptscriptstyle.scriptstyle { font-size: 1.4em; }
|
|
.reset-scriptscriptstyle.scriptscriptstyle { font-size: 1em; }
|
|
|
|
.style-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.vlist {
|
|
display: inline-block;
|
|
|
|
> span {
|
|
display: block;
|
|
height: 0;
|
|
position: relative;
|
|
|
|
> span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.baseline-fix {
|
|
display: inline-table;
|
|
table-layout: fixed;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
&.mediumspace {
|
|
width: @mediumspace;
|
|
}
|
|
|
|
&.thickspace {
|
|
width: @thickspace;
|
|
}
|
|
|
|
&.enspace {
|
|
width: 0.5em;
|
|
}
|
|
|
|
&.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-style: solid;
|
|
}
|
|
|
|
.overline {
|
|
|
|
.overline-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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sizing, .fontsize-ensurer {
|
|
display: inline-block;
|
|
|
|
@size1: 0.5;
|
|
@size2: 0.7;
|
|
@size3: 0.8;
|
|
@size4: 0.9;
|
|
@size5: 1.0;
|
|
@size6: 1.2;
|
|
@size7: 1.44;
|
|
@size8: 1.73;
|
|
@size9: 2.07;
|
|
@size10: 2.49;
|
|
|
|
.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 =< 10) {
|
|
.generate-size-change(@from, @currTo);
|
|
|
|
.generate-to-size-change(@from, (@currTo + 1));
|
|
}
|
|
|
|
.generate-from-size-change(@currFrom) when (@currFrom =< 10) {
|
|
.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;
|
|
}
|
|
|
|
.op-symbol {
|
|
position: relative;
|
|
|
|
&.small-op {
|
|
font-family: KaTeX_Size1;
|
|
}
|
|
&.large-op {
|
|
font-family: KaTeX_Size2;
|
|
}
|
|
}
|
|
|
|
.op-limits {
|
|
> .vlist > span {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|