leqno and fleqn support (#1814)

* leqno support

* Add fleqn support

* Add tests

* Lint fix

* Add leqno and fleqn to website demo

src/Settings.js

@@ -18,6 +18,8 @@ export type StrictFunction =
 
 export type SettingsOptions = {
     displayMode?: boolean;
+    leqno?: boolean;
+    fleqn?: boolean;
     throwOnError?: boolean;
     errorColor?: string;
     macros?: MacroMap;
@@ -40,6 +42,8 @@ export type SettingsOptions = {
  */
 class Settings {
     displayMode: boolean;
+    leqno: boolean;
+    fleqn: boolean;
     throwOnError: boolean;
     errorColor: string;
     macros: MacroMap;
@@ -53,6 +57,8 @@ class Settings {
         // allow null options
         options = options || {};
         this.displayMode = utils.deflt(options.displayMode, false);
+        this.leqno = utils.deflt(options.leqno, false);
+        this.fleqn = utils.deflt(options.fleqn, false);
         this.throwOnError = utils.deflt(options.throwOnError, true);
         this.errorColor = utils.deflt(options.errorColor, "#cc0000");
         this.macros = options.macros || {};

src/buildTree.js

@@ -16,6 +16,20 @@ const optionsFromSettings = function(settings: Settings) {
     });
 };
 
+const displayWrap = function(node: DomSpan, settings: Settings): DomSpan {
+    if (settings.displayMode) {
+        const classes = ["katex-display"];
+        if (settings.leqno) {
+            classes.push("leqno");
+        }
+        if (settings.fleqn) {
+            classes.push("fleqn");
+        }
+        node = buildCommon.makeSpan(classes, [node]);
+    }
+    return node;
+};
+
 export const buildTree = function(
     tree: AnyParseNode[],
     expression: string,
@@ -29,11 +43,7 @@ export const buildTree = function(
         mathMLNode, htmlNode,
     ]);
 
-    if (settings.displayMode) {
-        return buildCommon.makeSpan(["katex-display"], [katexNode]);
-    } else {
-        return katexNode;
-    }
+    return displayWrap(katexNode, settings);
 };
 
 export const buildHTMLTree = function(
@@ -44,11 +54,7 @@ export const buildHTMLTree = function(
     const options = optionsFromSettings(settings);
     const htmlNode = buildHTML(tree, options);
     const katexNode = buildCommon.makeSpan(["katex"], [htmlNode]);
-    if (settings.displayMode) {
-        return buildCommon.makeSpan(["katex-display"], [katexNode]);
-    } else {
-        return katexNode;
-    }
+    return displayWrap(katexNode, settings);
 };
 
 export default buildTree;

src/katex.less

@@ -588,3 +588,14 @@
         }
     }
 }
+
+// Left-justified tags (default is right-justified)
+.katex-display.leqno > .katex > .katex-html > .tag {
+    left: 0;
+    right: auto;
+}
+
+// Flush-left display math
+.katex-display.fleqn > .katex {
+    text-align: left;
+}