Add support for \text{rm,it,bf,tt,sf,normal}.

And allow \text to nest inside \text.

src/Options.js

@@ -99,7 +99,7 @@ Options.prototype.withPhantom = function() {
  */
 Options.prototype.withFont = function(font) {
     return this.extend({
-        font: font,
+        font: font || this.font,
     });
 };
 

src/buildCommon.js

@@ -430,6 +430,10 @@ var fontMap = {
         variant: "normal",
         fontName: "Main-Regular",
     },
+    "textit": {
+        variant: "italic",
+        fontName: "Main-Italic",
+    },
 
     // "mathit" is missing because it requires the use of two fonts: Main-Italic
     // and Math-Italic.  This is handled by a special case in makeOrd which ends

src/buildHTML.js

@@ -249,15 +249,16 @@ groupTypes.ordgroup = function(group, options) {
 };
 
 groupTypes.text = function(group, options) {
-    var inner = buildExpression(group.value.body, options, true);
+    var newOptions = options.withFont(group.value.style);
+    var inner = buildExpression(group.value.body, newOptions, true);
     for (var i = 0; i < inner.length - 1; i++) {
         if (inner[i].tryCombine(inner[i + 1])) {
             inner.splice(i + 1, 1);
             i--;
         }
     }
-    return makeSpan(["mord", "text", options.style.cls()],
-        inner, options);
+    return makeSpan(["mord", "text", newOptions.style.cls()],
+        inner, newOptions);
 };
 
 groupTypes.color = function(group, options) {

src/functions.js

@@ -126,16 +126,27 @@ defineFunction("\\sqrt", {
     };
 });
 
-// Some non-mathy text
-defineFunction("\\text", {
+// Non-mathy text, possibly in a font
+var textFunctionStyles = {
+    "\\text": undefined, "\\textrm": "mathrm", "\\textsf": "mathsf",
+    "\\texttt": "mathtt", "\\textnormal": "mathrm", "\\textbf": "mathbf",
+    "\\textit": "textit",
+};
+
+defineFunction([
+    "\\text", "\\textrm", "\\textsf", "\\texttt", "\\textnormal",
+    "\\textbf", "\\textit",
+], {
     numArgs: 1,
     argTypes: ["text"],
     greediness: 2,
+    allowedInText: true,
 }, function(context, args) {
     var body = args[0];
     return {
         type: "text",
         body: ordargument(body),
+        style: textFunctionStyles[context.funcName],
     };
 });
 

static/katex.less

@@ -49,6 +49,14 @@
         display: inline-block;
     }
 
+    .mathrm {
+        font-style: normal;
+    }
+
+    .textit {
+        font-style: italic;
+    }
+
     .mathit {
         font-family: KaTeX_Math;
         font-style: italic;

test/katex-spec.js

@@ -1382,6 +1382,43 @@ describe("An HTML font tree-builder", function() {
         expect(markup).toContain("<span class=\"mord mathfrak\">R</span>");
     });
 
+    it("should render \\text{R} with the correct font", function() {
+        var markup = katex.renderToString("\\text{R}");
+        expect(markup).toContain("<span class=\"mord mathrm\">R</span>");
+    });
+
+    it("should render \\textit{R} with the correct font", function() {
+        var markup = katex.renderToString("\\textit{R}");
+        expect(markup).toContain("<span class=\"mord textit\">R</span>");
+    });
+
+    it("should render \\text{\\textit{R}} with the correct font", function() {
+        var markup = katex.renderToString("\\text{\\textit{R}}");
+        expect(markup).toContain("<span class=\"mord textit\">R</span>");
+    });
+
+    it("should render \\text{R\\textit{S}T} with the correct fonts", function() {
+        var markup = katex.renderToString("\\text{R\\textit{S}T}");
+        expect(markup).toContain("<span class=\"mord mathrm\">R</span>");
+        expect(markup).toContain("<span class=\"mord textit\">S</span>");
+        expect(markup).toContain("<span class=\"mord mathrm\">T</span>");
+    });
+
+    it("should render \\textbf{R} with the correct font", function() {
+        var markup = katex.renderToString("\\textbf{R}");
+        expect(markup).toContain("<span class=\"mord mathbf\">R</span>");
+    });
+
+    it("should render \\textsf{R} with the correct font", function() {
+        var markup = katex.renderToString("\\textsf{R}");
+        expect(markup).toContain("<span class=\"mord mathsf\">R</span>");
+    });
+
+    it("should render \\texttt{R} with the correct font", function() {
+        var markup = katex.renderToString("\\texttt{R}");
+        expect(markup).toContain("<span class=\"mord mathtt\">R</span>");
+    });
+
     it("should render a combination of font and color changes", function() {
         var markup = katex.renderToString("\\color{blue}{\\mathbb R}");
         var span = "<span class=\"mord mathbb\" style=\"color:blue;\">R</span>";