patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-11 05:58:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add vlist builder for more consistent stacking

Browse Source 
Summary:
Add a way to automatically build vlists correctly. Previously, we built
vlists manually in ~4 different places, which made it difficult to manage
changes, and led to a large amount of duplication in the less. This also fixes
the vlist construction in safari, where the `display: inline-table` wasn't being
applied because of CSS specificity. This leads to the only significant change in
the huxley tests, with the vertical spacing.

Test Plan:
 - Make sure the tests still work
 - Make sure most of the huxley screenshots didn't change, and that the new
   changes are insignificant.
 - Make sure vlists now work in Safari
 - Make sure the change to the VerticalSpacing screenshot is caused by the
   fix-baseline span now correctly applying `display: inline-table` by creating
   the construct in master and adding `display: inline-table !important` to the
   `.fix-ie` css rule

Reviewers: alpert

Reviewed By: alpert

Differential Revision: http://phabricator.khanacademy.org/D13082
This commit is contained in:
Emily Eisenberg
2014-09-12 14:41:31 -07:00
parent 403dca64ab
commit 29b00ee6b7
9 changed files with 242 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
static/katex.less
View File

@@ -34,11 +34,6 @@ big parens
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;
@@ -171,52 +166,35 @@ big parens
position: relative;
}
.baseline-align-hack-outer() {
.vlist {
display: inline-block;
}
.baseline-align-hack-middle() {
display: block;
height: 0;
}
> span {
display: block;
height: 0;
position: relative;
.baseline-align-hack-inner() {
display: inline-block;
> span {
display: inline-block;
}
}
.baseline-fix {
display: inline-table;
table-layout: fixed;
}
}
.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;
> span > span {
text-align: center;
> span {
.baseline-align-hack-inner;
}
}
.mfracmid > .line {
.frac-line {
width: 100%;
&:before {
@@ -316,21 +294,8 @@ big parens
}
.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 {
.overline-line {
width: 100%;
&:before {
@@ -355,37 +320,22 @@ big parens
position: relative;
}
> .sqrt-body {
.baseline-align-hack-outer;
.sqrt-line {
width: 100%;
> .sqrt-line,
> .sqrt-inner,
> .fix-ie {
.baseline-align-hack-middle;
position: relative;
> span {
.baseline-align-hack-inner;
}
&:before {
border-bottom-style: solid;
border-bottom-width: 1px;
content: "";
display: block;
}
> .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;
}
&:after {
border-bottom-style: solid;
border-bottom-width: 0.04em;
content: "";
display: block;
margin-top: -1px;
}
}
}
@@ -434,19 +384,11 @@ big parens
&.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;
}
.delim-size1 > span {
font-family: Katex_Size1;
}
.delim-size4 > span {
font-family: Katex_Size4;
}
}
}