Skip to content

Commit

Permalink
Apply style-specific spacing using different CSS coding.
Browse files Browse the repository at this point in the history 
Specifically, infer style from a class on the *current* element,
rather than the parent element. Use "mtight" class to denote elements
with tight spacing (scriptstyle or scriptscriptstyle). Apply that
class automatically based on options.
  • Loading branch information
@kohler
kohler committed Nov 27, 2016
1 parent 9784815 commit 38c14e5
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 99 deletions.
7 changes: 7 additions & 0 deletions src/Style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,13 @@ Style.prototype.reset = function() {
return resetNames[this.size];
};

/**
* Return if this style is tightly spaced (scriptstyle/scriptscriptstyle)
*/
Style.prototype.isTight = function() {
return this.size >= 2;
};

// IDs of the different styles
var D = 0;
var Dc = 1;
Expand Down
9 changes: 7 additions & 2 deletions src/buildCommon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,13 @@ var makeSymbol = function(value, style, mode, options, classes) {
symbolNode = new domTree.symbolNode(value, 0, 0, 0, 0, classes);
}

if (options && options.getColor()) {
symbolNode.style.color = options.getColor();
if (options) {
if (options.style.isTight()) {
symbolNode.classes.push("mtight");
}
if (options.getColor()) {
symbolNode.style.color = options.getColor();
}
}

return symbolNode;
Expand Down
14 changes: 7 additions & 7 deletions src/buildHTML.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ groupTypes.ordgroup = function(group, options, prev) {
};

groupTypes.text = function(group, options, prev) {
return makeSpan(["text", "mord", options.style.cls()],
return makeSpan(["mord", "text", options.style.cls()],
buildExpression(group.value.body, options.reset()),
options);
};
Expand Down Expand Up @@ -764,7 +764,7 @@ groupTypes.op = function(group, options, prev) {
var fontName = large ? "Size2-Regular" : "Size1-Regular";
base = buildCommon.makeSymbol(
group.value.body, fontName, "math", options,
["op-symbol", large ? "large-op" : "small-op", "mop"]);
["mop", "op-symbol", large ? "large-op" : "small-op"]);

// Shift the symbol so its center lies on the axis (rule 13). It
// appears that our fonts have the centers of the symbols already
Expand Down Expand Up @@ -914,7 +914,7 @@ groupTypes.katex = function(group, options, prev) {
["x"], [buildCommon.mathsym("X", group.mode)], options);

return makeSpan(
["katex-logo", "mord"], [k, a, t, e, x], options);
["mord", "katex-logo"], [k, a, t, e, x], options);
};

groupTypes.overline = function(group, options, prev) {
Expand Down Expand Up @@ -942,7 +942,7 @@ groupTypes.overline = function(group, options, prev) {
{type: "kern", size: ruleWidth},
], "firstBaseline", null, options);

return makeSpan(["overline", "mord"], [vlist], options);
return makeSpan(["mord", "overline"], [vlist], options);
};

groupTypes.underline = function(group, options, prev) {
Expand All @@ -968,7 +968,7 @@ groupTypes.underline = function(group, options, prev) {
{type: "elem", elem: innerGroup},
], "top", innerGroup.height, options);

return makeSpan(["underline", "mord"], [vlist], options);
return makeSpan(["mord", "underline"], [vlist], options);
};

groupTypes.sqrt = function(group, options, prev) {
Expand Down Expand Up @@ -1037,7 +1037,7 @@ groupTypes.sqrt = function(group, options, prev) {
}

if (!group.value.index) {
return makeSpan(["sqrt", "mord"], [delim, body], options);
return makeSpan(["mord", "sqrt"], [delim, body], options);
} else {
// Handle the optional root index

Expand Down Expand Up @@ -1065,7 +1065,7 @@ groupTypes.sqrt = function(group, options, prev) {
// kerning
var rootVListWrap = makeSpan(["root"], [rootVList]);

return makeSpan(["sqrt", "mord"],
return makeSpan(["mord", "sqrt"],
[rootVListWrap, delim, body], options);
}
};
Expand Down
3 changes: 3 additions & 0 deletions src/domTree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ function span(classes, children, options) {
this.style = {};
this.attributes = {};
if (options) {
if (options.style.isTight()) {
this.classes.push("mtight");
}
if (options.getColor()) {
this.style.color = options.getColor();
}
Expand Down
189 changes: 99 additions & 90 deletions static/katex.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,111 +101,120 @@
@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; }
}
}

// 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; }
}

.reset-textstyle.textstyle { font-size: 1em; }
Expand Down

0 comments on commit 38c14e5

Please sign in to comment.