Fix interaction between styles and sizes by implementing styles as sizes.

Rather than having both `textstyle` CSS classes and `size5` CSS classes
affect the font size (and step on each other), implement sizes more the
way TeX does: a command like `\displaystyle` changes the current size.

This is actually a simplification, since now only `size` affects the size.
Simplifies CSS and computation. Many screenshotter tests change; they
change to be more like TeX. For instance, `\sqrt` fixes some
discrepancies in size treatment.

Author: kohler

src/Options.js

@@ -5,6 +5,25 @@
  * `.reset` functions.
  */
 
+const Style = require("./Style");
+
+const sizeStyleMap = [ // [textsize, scriptsize, scriptscriptsize]
+    [1, 1, 1],    // size1: 0.5
+    [2, 1, 1],    // size2: 0.7
+    [3, 2, 1],    // size3: 0.8
+    [4, 2, 1],    // size4: 0.9
+    [5, 2, 1],    // size5: 1.0
+    [6, 3, 2],    // size6: 1.2
+    [7, 5, 2],    // size7: 1.44
+    [8, 6, 4],    // size8: 1.73
+    [9, 7, 5],    // size9: 2.07
+    [10, 8, 6],   // size10: 2.49
+];
+
+const sizeMultipliers = [
+    0.5, 0.7, 0.8, 0.9, 1.0, 1.2, 1.44, 1.73, 2.07, 2.49,
+];
+
 /**
  * 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
@@ -18,20 +37,10 @@ function Options(data) {
     this.style = data.style;
     this.color = data.color;
     this.size = data.size;
+    this.baseSize = data.baseSize || 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 +51,7 @@ Options.prototype.extend = function(extension) {
     const data = {
         style: this.style,
         size: this.size,
+        baseSize: this.baseSize,
         color: this.color,
         parentStyle: this.style,
         parentSize: this.size,
@@ -58,22 +68,69 @@ 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.baseSize, 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 baseSize. If
+ * `this.size === size && this.baseSize === size`, returns `this`.
+ */
+Options.prototype.havingSize = function(size) {
+    if (this.size === size && this.baseSize === size) {
+        return this;
+    } else {
+        // Ensure style is at least `\textstyle`.
+        let style = this.style;
+        if (style.size > 1) {
+            style = style.cramped ? Style.TEXT.cramp() : Style.TEXT;
+        }
+
+        return this.extend({
+            style: style,
+            size: size,
+            baseSize: size,
+        });
+    }
+};
+
+/**
+ * Like `this.havingSize(5).havingStyle(style)`.
+ */
+Options.prototype.havingBaseStyle = function(style) {
+    const wantSize = sizeAtStyle(5, style);
+    if (this.size === wantSize && this.baseSize === 5 && this.style === style) {
+        return this;
+    } else {
+        return this.extend({
+            style: style,
+            size: wantSize,
+            baseSize: 5,
+        });
+    }
 };
 
 /**
@@ -104,11 +161,15 @@ 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.reset = function() {
-    return this.extend({});
+Options.prototype.sizingClasses = function(oldOptions) {
+    if (oldOptions.size !== this.size) {
+        return ["sizing", "reset-size" + oldOptions.size, "size" + this.size];
+    } else {
+        return [];
+    }
 };
 
 /**

src/Parser.js

@@ -478,7 +478,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];
 }
 
@@ -72,20 +69,6 @@ Style.prototype.cramp = function() {
     return styles[cramp[this.id]];
 };
 
-/**
- * HTML class name, like "displaystyle cramped"
- */
-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];
-};
-
 /**
  * Return if this style is tightly spaced (scriptstyle/scriptscriptstyle)
  */
@@ -103,32 +86,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

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", "reset-size" + options.size, "size5"],
         [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,
 };