925c96dbe2
Summary: Follow the TeXbook instructions on how to construct square roots. Using makeCustomSizedDelim, this becomes nearly trivial. Test Plan: - Make sure normal tests work - Make sure the new huxley test looks good, and other huxley tests haven't changed. Reviewers: alpert Reviewed By: alpert Differential Revision: http://phabricator.khanacademy.org/D12918
459 lines
10 KiB
Plaintext
459 lines
10 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;
|
|
}
|
|
|
|
.fix-ie {
|
|
display: inline-table;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
.baseline-align-hack-outer() {
|
|
display: inline-block;
|
|
}
|
|
|
|
.baseline-align-hack-middle() {
|
|
display: block;
|
|
height: 0;
|
|
}
|
|
|
|
.baseline-align-hack-inner() {
|
|
display: inline-block;
|
|
}
|
|
|
|
.msupsub {
|
|
.baseline-align-hack-outer;
|
|
text-align: left;
|
|
|
|
.msup,
|
|
.msub,
|
|
.fix-ie {
|
|
.baseline-align-hack-middle;
|
|
position: relative;
|
|
|
|
> span {
|
|
.baseline-align-hack-inner;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mfrac {
|
|
.baseline-align-hack-outer;
|
|
|
|
.mfracnum,
|
|
.mfracmid,
|
|
.mfracden,
|
|
.fix-ie {
|
|
.baseline-align-hack-middle;
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
> span {
|
|
.baseline-align-hack-inner;
|
|
}
|
|
}
|
|
|
|
.mfracmid > .line {
|
|
width: 100%;
|
|
|
|
&:before {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.05em;
|
|
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 {
|
|
.baseline-align-hack-outer;
|
|
|
|
> .overline-line,
|
|
> .overline-inner,
|
|
> .fix-ie {
|
|
.baseline-align-hack-middle;
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
> span {
|
|
.baseline-align-hack-inner;
|
|
}
|
|
}
|
|
|
|
> .overline-line > .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-body {
|
|
.baseline-align-hack-outer;
|
|
|
|
> .sqrt-line,
|
|
> .sqrt-inner,
|
|
> .fix-ie {
|
|
.baseline-align-hack-middle;
|
|
position: relative;
|
|
|
|
> span {
|
|
.baseline-align-hack-inner;
|
|
}
|
|
}
|
|
|
|
> .sqrt-line > .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 {
|
|
.baseline-align-hack-outer;
|
|
|
|
> .fix-ie,
|
|
> .delimsizinginner {
|
|
.baseline-align-hack-middle;
|
|
position: relative;
|
|
|
|
&.size1 > span {
|
|
font-family: Katex_Size1;
|
|
}
|
|
&.size4 > span {
|
|
font-family: Katex_Size4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nulldelimiter {
|
|
display: inline-block;
|
|
width: @nulldelimiterspace;
|
|
}
|
|
}
|