Fix interaction between styles and sizes.

src/Options.js

@@ -5,33 +5,43 @@
  * `.reset` functions.
  */
 
+const BASESIZE = 6;
+
+const sizeStyleMap = [
+    // Each element contains [textsize, scriptsize, scriptscriptsize].
+    // The size mappings are taken from TeX with \normalsize=10pt.
+    [1, 1, 1],    // size1: [5, 5, 5]              \tiny
+    [2, 1, 1],    // size2: [6, 5, 5]
+    [3, 1, 1],    // size3: [7, 5, 5]              \scriptsize
+    [4, 2, 1],    // size4: [8, 6, 5]              \footnotesize
+    [5, 2, 1],    // size5: [9, 6, 5]              \small
+    [6, 3, 1],    // size6: [10, 7, 5]             \normalsize
+    [7, 4, 2],    // size7: [12, 8, 6]             \large
+    [8, 6, 3],    // size8: [14.4, 10, 7]          \Large
+    [9, 7, 6],    // size9: [17.28, 12, 10]        \LARGE
+    [10, 8, 7],   // size10: [20.74, 14.4, 12]     \huge
+    [11, 10, 9],  // size11: [24.88, 20.74, 17.28] \HUGE
+];
+
+const sizeMultipliers = [
+    0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.2, 1.44, 1.728, 2.074, 2.488,
+];
+
 /**
- * This is the main options class. It contains the style, size, color, and font
- * of the current parse level. It also contains the style and size of the parent
- * parse level, so size changes can be handled efficiently.
+ * This is the main options class. It contains the current style, size, color,
+ * and font.
  *
- * Each of the `.with*` and `.reset` functions passes its current style and size
- * as the parentStyle and parentSize of the new options class, so parent
- * handling is taken care of automatically.
+ * Options objects should not be modified. To create a new Options with
+ * different properties, call a `.having*` method.
  */
 function Options(data) {
     this.style = data.style;
     this.color = data.color;
-    this.size = data.size;
+    this.size = data.size || BASESIZE;
+    this.textSize = data.textSize || this.size;
     this.phantom = data.phantom;
     this.font = data.font;
-
-    if (data.parentStyle === undefined) {
-        this.parentStyle = data.style;
-    } else {
-        this.parentStyle = data.parentStyle;
-    }
-
-    if (data.parentSize === undefined) {
-        this.parentSize = data.size;
-    } else {
-        this.parentSize = data.parentSize;
-    }
+    this.sizeMultiplier = sizeMultipliers[this.size - 1];
 }
 
 /**
@@ -42,6 +52,7 @@ Options.prototype.extend = function(extension) {
     const data = {
         style: this.style,
         size: this.size,
+        textSize: this.textSize,
         color: this.color,
         parentStyle: this.style,
         parentSize: this.size,
@@ -58,22 +69,66 @@ Options.prototype.extend = function(extension) {
     return new Options(data);
 };
 
+function sizeAtStyle(size, style) {
+    return style.size < 2 ? size : sizeStyleMap[size - 1][style.size - 1];
+}
+
 /**
- * Create a new options object with the given style.
+ * Return an options object with the given style. If `this.style === style`,
+ * returns `this`.
  */
-Options.prototype.withStyle = function(style) {
-    return this.extend({
-        style: style,
-    });
+Options.prototype.havingStyle = function(style) {
+    if (this.style === style) {
+        return this;
+    } else {
+        return this.extend({
+            style: style,
+            size: sizeAtStyle(this.textSize, style),
+        });
+    }
 };
 
 /**
- * Create a new options object with the given size.
+ * Return an options object with a cramped version of the current style. If
+ * the current style is cramped, returns `this`.
  */
-Options.prototype.withSize = function(size) {
-    return this.extend({
-        size: size,
-    });
+Options.prototype.havingCrampedStyle = function() {
+    return this.havingStyle(this.style.cramp());
+};
+
+/**
+ * Return an options object with the given size and in at least `\textstyle`.
+ * Returns `this` if appropriate.
+ */
+Options.prototype.havingSize = function(size) {
+    if (this.size === size && this.textSize === size) {
+        return this;
+    } else {
+        return this.extend({
+            style: this.style.text(),
+            size: size,
+            textSize: size,
+        });
+    }
+};
+
+/**
+ * Like `this.havingSize(BASESIZE).havingStyle(style)`. If `style` is omitted,
+ * changes to at least `\textstyle`.
+ */
+Options.prototype.havingBaseStyle = function(style) {
+    style = style || this.style.text();
+    const wantSize = sizeAtStyle(BASESIZE, style);
+    if (this.size === wantSize && this.textSize === BASESIZE
+        && this.style === style) {
+        return this;
+    } else {
+        return this.extend({
+            style: style,
+            size: wantSize,
+            baseSize: BASESIZE,
+        });
+    }
 };
 
 /**
@@ -104,11 +159,27 @@ Options.prototype.withFont = function(font) {
 };
 
 /**
- * Create a new options object with the same style, size, and color. This is
- * used so that parent style and size changes are handled correctly.
+ * Return the CSS sizing classes required to switch from enclosing options
+ * `oldOptions` to `this`. Returns an array of classes.
+ */
+Options.prototype.sizingClasses = function(oldOptions) {
+    if (oldOptions.size !== this.size) {
+        return ["sizing", "reset-size" + oldOptions.size, "size" + this.size];
+    } else {
+        return [];
+    }
+};
+
+/**
+ * Return the CSS sizing classes required to switch to the base size. Like
+ * `this.havingSize(BASESIZE).sizingClasses(this)`.
  */
-Options.prototype.reset = function() {
-    return this.extend({});
+Options.prototype.baseSizingClasses = function() {
+    if (this.size !== BASESIZE) {
+        return ["sizing", "reset-size" + this.size, "size" + BASESIZE];
+    } else {
+        return [];
+    }
 };
 
 /**
@@ -186,4 +257,9 @@ Options.prototype.getColor = function() {
     }
 };
 
+/**
+ * The base size index.
+ */
+Options.BASESIZE = BASESIZE;
+
 module.exports = Options;

src/Parser.js

@@ -390,8 +390,8 @@ Parser.prototype.parseAtom = function() {
 
 // A list of the size-changing functions, for use in parseImplicitGroup
 const sizeFuncs = [
-    "\\tiny", "\\scriptsize", "\\footnotesize", "\\small", "\\normalsize",
-    "\\large", "\\Large", "\\LARGE", "\\huge", "\\Huge",
+    "\\tiny", "\\sixptsize", "\\scriptsize", "\\footnotesize", "\\small",
+    "\\normalsize", "\\large", "\\Large", "\\LARGE", "\\huge", "\\Huge",
 ];
 
 // A list of the style-changing functions, for use in parseImplicitGroup
@@ -483,7 +483,7 @@ Parser.prototype.parseImplicitGroup = function() {
         const body = this.parseExpression(false);
         return new ParseNode("sizing", {
             // Figure out what size to use based on the list of functions above
-            size: "size" + (utils.indexOf(sizeFuncs, func) + 1),
+            size: utils.indexOf(sizeFuncs, func) + 1,
             value: body,
         }, this.mode);
     } else if (utils.contains(styleFuncs, func)) {

src/Style.js

@@ -22,15 +22,12 @@ for (let i = 0; i < 3; i++) {
 
 /**
  * The main style class. Contains a unique id for the style, a size (which is
- * the same for cramped and uncramped version of a style), a cramped flag, and a
- * size multiplier, which gives the size difference between a style and
- * textstyle.
+ * the same for cramped and uncramped version of a style), and a cramped flag.
  */
-function Style(id, size, multiplier, cramped) {
+function Style(id, size, cramped) {
     this.id = id;
     this.size = size;
     this.cramped = cramped;
-    this.sizeMultiplier = multiplier;
     this.metrics = metrics[size > 0 ? size - 1 : 0];
 }
 
@@ -73,17 +70,10 @@ Style.prototype.cramp = function() {
 };
 
 /**
- * HTML class name, like "displaystyle cramped"
+ * Get a text or display version of this style.
  */
-Style.prototype.cls = function() {
-    return sizeNames[this.size] + (this.cramped ? " cramped" : " uncramped");
-};
-
-/**
- * HTML Reset class name, like "reset-textstyle"
- */
-Style.prototype.reset = function() {
-    return resetNames[this.size];
+Style.prototype.text = function() {
+    return styles[text[this.id]];
 };
 
 /**
@@ -103,32 +93,16 @@ const Sc = 5;
 const SS = 6;
 const SSc = 7;
 
-// String names for the different sizes
-const sizeNames = [
-    "displaystyle textstyle",
-    "textstyle",
-    "scriptstyle",
-    "scriptscriptstyle",
-];
-
-// Reset names for the different sizes
-const resetNames = [
-    "reset-textstyle",
-    "reset-textstyle",
-    "reset-scriptstyle",
-    "reset-scriptscriptstyle",
-];
-
 // Instances of the different styles
 const styles = [
-    new Style(D, 0, 1.0, false),
-    new Style(Dc, 0, 1.0, true),
-    new Style(T, 1, 1.0, false),
-    new Style(Tc, 1, 1.0, true),
-    new Style(S, 2, 0.7, false),
-    new Style(Sc, 2, 0.7, true),
-    new Style(SS, 3, 0.5, false),
-    new Style(SSc, 3, 0.5, true),
+    new Style(D, 0, false),
+    new Style(Dc, 0, true),
+    new Style(T, 1, false),
+    new Style(Tc, 1, true),
+    new Style(S, 2, false),
+    new Style(Sc, 2, true),
+    new Style(SS, 3, false),
+    new Style(SSc, 3, true),
 ];
 
 // Lookup tables for switching from one style to another
@@ -137,6 +111,7 @@ const sub = [Sc, Sc, Sc, Sc, SSc, SSc, SSc, SSc];
 const fracNum = [T, Tc, S, Sc, SS, SSc, SS, SSc];
 const fracDen = [Tc, Tc, Sc, Sc, SSc, SSc, SSc, SSc];
 const cramp = [Dc, Dc, Tc, Tc, Sc, Sc, SSc, SSc];
+const text = [D, Dc, T, Tc, T, Tc, T, Tc];
 
 // We only export some of the styles. Also, we don't export the `Style` class so
 // no more styles can be generated.

src/buildCommon.js

@@ -63,6 +63,7 @@ const makeSymbol = function(value, fontFamily, mode, options, classes) {
     }
 
     if (options) {
+        symbolNode.maxFontSize = options.sizeMultiplier;
         if (options.style.isTight()) {
             symbolNode.classes.push("mtight");
         }
@@ -239,11 +240,10 @@ const makeFragment = function(children) {
  */
 const makeFontSizer = function(options, fontSize) {
     const fontSizeInner = makeSpan([], [new domTree.symbolNode("\u200b")]);
-    fontSizeInner.style.fontSize =
-        (fontSize / options.style.sizeMultiplier) + "em";
+    fontSizeInner.style.fontSize = fontSize + "em";
 
     const fontSizer = makeSpan(
-        ["fontsize-ensurer", "reset-" + options.size, "size5"],
+        ["fontsize-ensurer"].concat(options.baseSizingClasses()),
         [fontSizeInner]);
 
     return fontSizer;
@@ -378,20 +378,6 @@ const makeVList = function(children, positionType, positionData, options) {
     return vlist;
 };
 
-// A table of size -> font size for the different sizing functions
-const sizingMultiplier = {
-    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,
-};
-
 // A map of spacing functions to their attributes, like size and corresponding
 // CSS class
 const spacingFunctions = {
@@ -486,6 +472,5 @@ module.exports = {
     makeVList: makeVList,
     makeOrd: makeOrd,
     prependChildren: prependChildren,
-    sizingMultiplier: sizingMultiplier,
     spacingFunctions: spacingFunctions,
 };