diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6ff7034..ff350cb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -44,7 +44,7 @@ file to get it to work. If your function isn't similar to an existing function, you'll need to add a line to `functions.js` as well as adding an output function in -[buildTree.js](src/buildTree.js). +[buildHTML.js](src/buildHTML.js) and [buildMathML.js](src/buildMathML.js). ## Testing diff --git a/katex.js b/katex.js index 368a9b9..b876fb0 100644 --- a/katex.js +++ b/katex.js @@ -17,13 +17,13 @@ var utils = require("./src/utils"); * Parse and build an expression, and place that expression in the DOM node * given. */ -var render = function(toParse, baseNode, options) { +var render = function(expression, baseNode, options) { utils.clearNode(baseNode); var settings = new Settings(options); - var tree = parseTree(toParse, settings); - var node = buildTree(tree, settings).toNode(); + var tree = parseTree(expression, settings); + var node = buildTree(tree, expression, settings).toNode(); baseNode.appendChild(node); }; @@ -45,11 +45,11 @@ if (typeof document !== "undefined") { /** * Parse and build an expression, and return the markup for that. */ -var renderToString = function(toParse, options) { +var renderToString = function(expression, options) { var settings = new Settings(options); - var tree = parseTree(toParse, settings); - return buildTree(tree, settings).toMarkup(); + var tree = parseTree(expression, settings); + return buildTree(tree, expression, settings).toMarkup(); }; module.exports = { diff --git a/src/buildCommon.js b/src/buildCommon.js index f1ab53a..21fd4f4 100644 --- a/src/buildCommon.js +++ b/src/buildCommon.js @@ -261,11 +261,60 @@ var makeVList = function(children, positionType, positionData, options) { return vlist; }; +// A table of size -> font size for the different sizing functions +var 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 +var spacingFunctions = { + "\\qquad": { + size: "2em", + className: "qquad" + }, + "\\quad": { + size: "1em", + className: "quad" + }, + "\\enspace": { + size: "0.5em", + className: "enspace" + }, + "\\;": { + size: "0.277778em", + className: "thickspace" + }, + "\\:": { + size: "0.22222em", + className: "mediumspace" + }, + "\\,": { + size: "0.16667em", + className: "thinspace" + }, + "\\!": { + size: "-0.16667em", + className: "negativethinspace" + } +}; + module.exports = { makeSymbol: makeSymbol, mathit: mathit, mathrm: mathrm, makeSpan: makeSpan, makeFragment: makeFragment, - makeVList: makeVList + makeVList: makeVList, + sizingMultiplier: sizingMultiplier, + spacingFunctions: spacingFunctions }; diff --git a/src/buildHTML.js b/src/buildHTML.js new file mode 100644 index 0000000..0512767 --- /dev/null +++ b/src/buildHTML.js @@ -0,0 +1,1151 @@ +/** + * This file does the main work of building a domTree structure from a parse + * tree. The entry point is the `buildHTML` function, which takes a parse tree. + * Then, the buildExpression, buildGroup, and various groupTypes functions are + * called, to produce a final HTML tree. + */ + +var Options = require("./Options"); +var ParseError = require("./ParseError"); +var Style = require("./Style"); + +var buildCommon = require("./buildCommon"); +var delimiter = require("./delimiter"); +var domTree = require("./domTree"); +var fontMetrics = require("./fontMetrics"); +var utils = require("./utils"); + +var makeSpan = buildCommon.makeSpan; + +/** + * Take a list of nodes, build them in order, and return a list of the built + * nodes. This function handles the `prev` node correctly, and passes the + * previous element from the list as the prev of the next element. + */ +var buildExpression = function(expression, options, prev) { + var groups = []; + for (var i = 0; i < expression.length; i++) { + var group = expression[i]; + groups.push(buildGroup(group, options, prev)); + prev = group; + } + return groups; +}; + +// List of types used by getTypeOfGroup +var groupToType = { + mathord: "mord", + textord: "mord", + bin: "mbin", + rel: "mrel", + text: "mord", + open: "mopen", + close: "mclose", + inner: "minner", + genfrac: "minner", + spacing: "mord", + punct: "mpunct", + ordgroup: "mord", + op: "mop", + katex: "mord", + overline: "mord", + rule: "mord", + leftright: "minner", + sqrt: "mord", + accent: "mord" +}; + +/** + * Gets the final math type of an expression, given its group type. This type is + * used to determine spacing between elements, and affects bin elements by + * causing them to change depending on what types are around them. This type + * must be attached to the outermost node of an element as a CSS class so that + * spacing with its surrounding elements works correctly. + * + * Some elements can be mapped one-to-one from group type to math type, and + * those are listed in the `groupToType` table. + * + * Others (usually elements that wrap around other elements) often have + * recursive definitions, and thus call `getTypeOfGroup` on their inner + * elements. + */ +var getTypeOfGroup = function(group) { + if (group == null) { + // Like when typesetting $^3$ + return groupToType.mathord; + } else if (group.type === "supsub") { + return getTypeOfGroup(group.value.base); + } else if (group.type === "llap" || group.type === "rlap") { + return getTypeOfGroup(group.value); + } else if (group.type === "color") { + return getTypeOfGroup(group.value.value); + } else if (group.type === "sizing") { + return getTypeOfGroup(group.value.value); + } else if (group.type === "styling") { + return getTypeOfGroup(group.value.value); + } else if (group.type === "delimsizing") { + return groupToType[group.value.delimType]; + } else { + return groupToType[group.type]; + } +}; + +/** + * Sometimes, groups perform special rules when they have superscripts or + * subscripts attached to them. This function lets the `supsub` group know that + * its inner element should handle the superscripts and subscripts instead of + * handling them itself. + */ +var shouldHandleSupSub = function(group, options) { + if (!group) { + return false; + } else if (group.type === "op") { + // Operators handle supsubs differently when they have limits + // (e.g. `\displaystyle\sum_2^3`) + return group.value.limits && options.style.size === Style.DISPLAY.size; + } else if (group.type === "accent") { + return isCharacterBox(group.value.base); + } else { + return null; + } +}; + +/** + * Sometimes we want to pull out the innermost element of a group. In most + * cases, this will just be the group itself, but when ordgroups and colors have + * a single element, we want to pull that out. + */ +var getBaseElem = function(group) { + if (!group) { + return false; + } else if (group.type === "ordgroup") { + if (group.value.length === 1) { + return getBaseElem(group.value[0]); + } else { + return group; + } + } else if (group.type === "color") { + if (group.value.value.length === 1) { + return getBaseElem(group.value.value[0]); + } else { + return group; + } + } else { + return group; + } +}; + +/** + * TeXbook algorithms often reference "character boxes", which are simply groups + * with a single character in them. To decide if something is a character box, + * we find its innermost group, and see if it is a single character. + */ +var isCharacterBox = function(group) { + var baseElem = getBaseElem(group); + + // These are all they types of groups which hold single characters + return baseElem.type === "mathord" || + baseElem.type === "textord" || + baseElem.type === "bin" || + baseElem.type === "rel" || + baseElem.type === "inner" || + baseElem.type === "open" || + baseElem.type === "close" || + baseElem.type === "punct"; +}; + +/** + * This is a map of group types to the function used to handle that type. + * Simpler types come at the beginning, while complicated types come afterwards. + */ +var groupTypes = { + mathord: function(group, options, prev) { + return buildCommon.mathit( + group.value, group.mode, options.getColor(), ["mord"]); + }, + + textord: function(group, options, prev) { + return buildCommon.mathrm( + group.value, group.mode, options.getColor(), ["mord"]); + }, + + bin: function(group, options, prev) { + var className = "mbin"; + // Pull out the most recent element. Do some special handling to find + // things at the end of a \color group. Note that we don't use the same + // logic for ordgroups (which count as ords). + var prevAtom = prev; + while (prevAtom && prevAtom.type == "color") { + var atoms = prevAtom.value.value; + prevAtom = atoms[atoms.length - 1]; + } + // See TeXbook pg. 442-446, Rules 5 and 6, and the text before Rule 19. + // Here, we determine whether the bin should turn into an ord. We + // currently only apply Rule 5. + if (!prev || utils.contains(["mbin", "mopen", "mrel", "mop", "mpunct"], + getTypeOfGroup(prevAtom))) { + group.type = "textord"; + className = "mord"; + } + + return buildCommon.mathrm( + group.value, group.mode, options.getColor(), [className]); + }, + + rel: function(group, options, prev) { + return buildCommon.mathrm( + group.value, group.mode, options.getColor(), ["mrel"]); + }, + + open: function(group, options, prev) { + return buildCommon.mathrm( + group.value, group.mode, options.getColor(), ["mopen"]); + }, + + close: function(group, options, prev) { + return buildCommon.mathrm( + group.value, group.mode, options.getColor(), ["mclose"]); + }, + + inner: function(group, options, prev) { + return buildCommon.mathrm( + group.value, group.mode, options.getColor(), ["minner"]); + }, + + punct: function(group, options, prev) { + return buildCommon.mathrm( + group.value, group.mode, options.getColor(), ["mpunct"]); + }, + + ordgroup: function(group, options, prev) { + return makeSpan( + ["mord", options.style.cls()], + buildExpression(group.value, options.reset()) + ); + }, + + text: function(group, options, prev) { + return makeSpan(["text", "mord", options.style.cls()], + buildExpression(group.value.body, options.reset())); + }, + + color: function(group, options, prev) { + var elements = buildExpression( + group.value.value, + options.withColor(group.value.color), + prev + ); + + // \color isn't supposed to affect the type of the elements it contains. + // To accomplish this, we wrap the results in a fragment, so the inner + // elements will be able to directly interact with their neighbors. For + // example, `\color{red}{2 +} 3` has the same spacing as `2 + 3` + return new buildCommon.makeFragment(elements); + }, + + supsub: function(group, options, prev) { + // Superscript and subscripts are handled in the TeXbook on page + // 445-446, rules 18(a-f). + + // Here is where we defer to the inner group if it should handle + // superscripts and subscripts itself. + if (shouldHandleSupSub(group.value.base, options)) { + return groupTypes[group.value.base.type](group, options, prev); + } + + var base = buildGroup(group.value.base, options.reset()); + var supmid, submid, sup, sub; + + if (group.value.sup) { + sup = buildGroup(group.value.sup, + options.withStyle(options.style.sup())); + supmid = makeSpan( + [options.style.reset(), options.style.sup().cls()], [sup]); + } + + if (group.value.sub) { + sub = buildGroup(group.value.sub, + options.withStyle(options.style.sub())); + submid = makeSpan( + [options.style.reset(), options.style.sub().cls()], [sub]); + } + + // Rule 18a + var supShift, subShift; + if (isCharacterBox(group.value.base)) { + supShift = 0; + subShift = 0; + } else { + supShift = base.height - fontMetrics.metrics.supDrop; + subShift = base.depth + fontMetrics.metrics.subDrop; + } + + // Rule 18c + var minSupShift; + if (options.style === Style.DISPLAY) { + minSupShift = fontMetrics.metrics.sup1; + } else if (options.style.cramped) { + minSupShift = fontMetrics.metrics.sup3; + } else { + minSupShift = fontMetrics.metrics.sup2; + } + + // scriptspace is a font-size-independent size, so scale it + // appropriately + var multiplier = Style.TEXT.sizeMultiplier * + options.style.sizeMultiplier; + var scriptspace = + (0.5 / fontMetrics.metrics.ptPerEm) / multiplier + "em"; + + var supsub; + if (!group.value.sup) { + // Rule 18b + subShift = Math.max( + subShift, fontMetrics.metrics.sub1, + sub.height - 0.8 * fontMetrics.metrics.xHeight); + + supsub = buildCommon.makeVList([ + {type: "elem", elem: submid} + ], "shift", subShift, options); + + supsub.children[0].style.marginRight = scriptspace; + + // Subscripts shouldn't be shifted by the base's italic correction. + // Account for that by shifting the subscript back the appropriate + // amount. Note we only do this when the base is a single symbol. + if (base instanceof domTree.symbolNode) { + supsub.children[0].style.marginLeft = -base.italic + "em"; + } + } else if (!group.value.sub) { + // Rule 18c, d + supShift = Math.max(supShift, minSupShift, + sup.depth + 0.25 * fontMetrics.metrics.xHeight); + + supsub = buildCommon.makeVList([ + {type: "elem", elem: supmid} + ], "shift", -supShift, options); + + supsub.children[0].style.marginRight = scriptspace; + } else { + supShift = Math.max( + supShift, minSupShift, + sup.depth + 0.25 * fontMetrics.metrics.xHeight); + subShift = Math.max(subShift, fontMetrics.metrics.sub2); + + var ruleWidth = fontMetrics.metrics.defaultRuleThickness; + + // Rule 18e + if ((supShift - sup.depth) - (sub.height - subShift) < + 4 * ruleWidth) { + subShift = 4 * ruleWidth - (supShift - sup.depth) + sub.height; + var psi = 0.8 * fontMetrics.metrics.xHeight - + (supShift - sup.depth); + if (psi > 0) { + supShift += psi; + subShift -= psi; + } + } + + supsub = buildCommon.makeVList([ + {type: "elem", elem: submid, shift: subShift}, + {type: "elem", elem: supmid, shift: -supShift} + ], "individualShift", null, options); + + // See comment above about subscripts not being shifted + if (base instanceof domTree.symbolNode) { + supsub.children[0].style.marginLeft = -base.italic + "em"; + } + + supsub.children[0].style.marginRight = scriptspace; + supsub.children[1].style.marginRight = scriptspace; + } + + return makeSpan([getTypeOfGroup(group.value.base)], + [base, supsub]); + }, + + genfrac: function(group, options, prev) { + // Fractions are handled in the TeXbook on pages 444-445, rules 15(a-e). + // Figure out what style this fraction should be in based on the + // function used + var fstyle = options.style; + if (group.value.size === "display") { + fstyle = Style.DISPLAY; + } else if (group.value.size === "text") { + fstyle = Style.TEXT; + } + + var nstyle = fstyle.fracNum(); + var dstyle = fstyle.fracDen(); + + var numer = buildGroup(group.value.numer, options.withStyle(nstyle)); + var numerreset = makeSpan([fstyle.reset(), nstyle.cls()], [numer]); + + var denom = buildGroup(group.value.denom, options.withStyle(dstyle)); + var denomreset = makeSpan([fstyle.reset(), dstyle.cls()], [denom]); + + var ruleWidth; + if (group.value.hasBarLine) { + ruleWidth = fontMetrics.metrics.defaultRuleThickness / + options.style.sizeMultiplier; + } else { + ruleWidth = 0; + } + + // Rule 15b + var numShift; + var clearance; + var denomShift; + if (fstyle.size === Style.DISPLAY.size) { + numShift = fontMetrics.metrics.num1; + if (ruleWidth > 0) { + clearance = 3 * ruleWidth; + } else { + clearance = 7 * fontMetrics.metrics.defaultRuleThickness; + } + denomShift = fontMetrics.metrics.denom1; + } else { + if (ruleWidth > 0) { + numShift = fontMetrics.metrics.num2; + clearance = ruleWidth; + } else { + numShift = fontMetrics.metrics.num3; + clearance = 3 * fontMetrics.metrics.defaultRuleThickness; + } + denomShift = fontMetrics.metrics.denom2; + } + + var frac; + if (ruleWidth === 0) { + // Rule 15c + var candiateClearance = + (numShift - numer.depth) - (denom.height - denomShift); + if (candiateClearance < clearance) { + numShift += 0.5 * (clearance - candiateClearance); + denomShift += 0.5 * (clearance - candiateClearance); + } + + frac = buildCommon.makeVList([ + {type: "elem", elem: denomreset, shift: denomShift}, + {type: "elem", elem: numerreset, shift: -numShift} + ], "individualShift", null, options); + } else { + // Rule 15d + var axisHeight = fontMetrics.metrics.axisHeight; + + if ((numShift - numer.depth) - (axisHeight + 0.5 * ruleWidth) + < clearance) { + numShift += + clearance - ((numShift - numer.depth) - + (axisHeight + 0.5 * ruleWidth)); + } + + if ((axisHeight - 0.5 * ruleWidth) - (denom.height - denomShift) + < clearance) { + denomShift += + clearance - ((axisHeight - 0.5 * ruleWidth) - + (denom.height - denomShift)); + } + + var mid = makeSpan( + [options.style.reset(), Style.TEXT.cls(), "frac-line"]); + // Manually set the height of the line because its height is + // created in CSS + mid.height = ruleWidth; + + var midShift = -(axisHeight - 0.5 * ruleWidth); + + frac = buildCommon.makeVList([ + {type: "elem", elem: denomreset, shift: denomShift}, + {type: "elem", elem: mid, shift: midShift}, + {type: "elem", elem: numerreset, shift: -numShift} + ], "individualShift", null, options); + } + + // Since we manually change the style sometimes (with \dfrac or \tfrac), + // account for the possible size change here. + frac.height *= fstyle.sizeMultiplier / options.style.sizeMultiplier; + frac.depth *= fstyle.sizeMultiplier / options.style.sizeMultiplier; + + // Rule 15e + var innerChildren = [makeSpan(["mfrac"], [frac])]; + + var delimSize; + if (fstyle.size === Style.DISPLAY.size) { + delimSize = fontMetrics.metrics.delim1; + } else { + delimSize = fontMetrics.metrics.getDelim2(fstyle); + } + + if (group.value.leftDelim != null) { + innerChildren.unshift( + delimiter.customSizedDelim( + group.value.leftDelim, delimSize, true, + options.withStyle(fstyle), group.mode) + ); + } + if (group.value.rightDelim != null) { + innerChildren.push( + delimiter.customSizedDelim( + group.value.rightDelim, delimSize, true, + options.withStyle(fstyle), group.mode) + ); + } + + return makeSpan( + ["minner", options.style.reset(), fstyle.cls()], + innerChildren, + options.getColor()); + }, + + spacing: function(group, options, prev) { + if (group.value === "\\ " || group.value === "\\space" || + group.value === " " || group.value === "~") { + // Spaces are generated by adding an actual space. Each of these + // things has an entry in the symbols table, so these will be turned + // into appropriate outputs. + return makeSpan( + ["mord", "mspace"], + [buildCommon.mathrm(group.value, group.mode)] + ); + } else { + // Other kinds of spaces are of arbitrary width. We use CSS to + // generate these. + return makeSpan( + ["mord", "mspace", + buildCommon.spacingFunctions[group.value].className]); + } + }, + + llap: function(group, options, prev) { + var inner = makeSpan( + ["inner"], [buildGroup(group.value.body, options.reset())]); + var fix = makeSpan(["fix"], []); + return makeSpan( + ["llap", options.style.cls()], [inner, fix]); + }, + + rlap: function(group, options, prev) { + var inner = makeSpan( + ["inner"], [buildGroup(group.value.body, options.reset())]); + var fix = makeSpan(["fix"], []); + return makeSpan( + ["rlap", options.style.cls()], [inner, fix]); + }, + + op: function(group, options, prev) { + // Operators are handled in the TeXbook pg. 443-444, rule 13(a). + var supGroup; + var subGroup; + var hasLimits = false; + if (group.type === "supsub" ) { + // If we have limits, supsub will pass us its group to handle. Pull + // out the superscript and subscript and set the group to the op in + // its base. + supGroup = group.value.sup; + subGroup = group.value.sub; + group = group.value.base; + hasLimits = true; + } + + // Most operators have a large successor symbol, but these don't. + var noSuccessor = [ + "\\smallint" + ]; + + var large = false; + if (options.style.size === Style.DISPLAY.size && + group.value.symbol && + !utils.contains(noSuccessor, group.value.body)) { + + // Most symbol operators get larger in displaystyle (rule 13) + large = true; + } + + var base; + var baseShift = 0; + var slant = 0; + if (group.value.symbol) { + // If this is a symbol, create the symbol. + var style = large ? "Size2-Regular" : "Size1-Regular"; + base = buildCommon.makeSymbol( + group.value.body, style, "math", options.getColor(), + ["op-symbol", large ? "large-op" : "small-op", "mop"]); + + // Shift the symbol so its center lies on the axis (rule 13). It + // appears that our fonts have the centers of the symbols already + // almost on the axis, so these numbers are very small. Note we + // don't actually apply this here, but instead it is used either in + // the vlist creation or separately when there are no limits. + baseShift = (base.height - base.depth) / 2 - + fontMetrics.metrics.axisHeight * + options.style.sizeMultiplier; + + // The slant of the symbol is just its italic correction. + slant = base.italic; + } else { + // Otherwise, this is a text operator. Build the text from the + // operator's name. + // TODO(emily): Add a space in the middle of some of these + // operators, like \limsup + var output = []; + for (var i = 1; i < group.value.body.length; i++) { + output.push(buildCommon.mathrm(group.value.body[i], group.mode)); + } + base = makeSpan(["mop"], output, options.getColor()); + } + + if (hasLimits) { + // IE 8 clips \int if it is in a display: inline-block. We wrap it + // in a new span so it is an inline, and works. + base = makeSpan([], [base]); + + var supmid, supKern, submid, subKern; + // We manually have to handle the superscripts and subscripts. This, + // aside from the kern calculations, is copied from supsub. + if (supGroup) { + var sup = buildGroup( + supGroup, options.withStyle(options.style.sup())); + supmid = makeSpan( + [options.style.reset(), options.style.sup().cls()], [sup]); + + supKern = Math.max( + fontMetrics.metrics.bigOpSpacing1, + fontMetrics.metrics.bigOpSpacing3 - sup.depth); + } + + if (subGroup) { + var sub = buildGroup( + subGroup, options.withStyle(options.style.sub())); + submid = makeSpan( + [options.style.reset(), options.style.sub().cls()], + [sub]); + + subKern = Math.max( + fontMetrics.metrics.bigOpSpacing2, + fontMetrics.metrics.bigOpSpacing4 - sub.height); + } + + // Build the final group as a vlist of the possible subscript, base, + // and possible superscript. + var finalGroup, top, bottom; + if (!supGroup) { + top = base.height - baseShift; + + finalGroup = buildCommon.makeVList([ + {type: "kern", size: fontMetrics.metrics.bigOpSpacing5}, + {type: "elem", elem: submid}, + {type: "kern", size: subKern}, + {type: "elem", elem: base} + ], "top", top, options); + + // Here, we shift the limits by the slant of the symbol. Note + // that we are supposed to shift the limits by 1/2 of the slant, + // but since we are centering the limits adding a full slant of + // margin will shift by 1/2 that. + finalGroup.children[0].style.marginLeft = -slant + "em"; + } else if (!subGroup) { + bottom = base.depth + baseShift; + + finalGroup = buildCommon.makeVList([ + {type: "elem", elem: base}, + {type: "kern", size: supKern}, + {type: "elem", elem: supmid}, + {type: "kern", size: fontMetrics.metrics.bigOpSpacing5} + ], "bottom", bottom, options); + + // See comment above about slants + finalGroup.children[1].style.marginLeft = slant + "em"; + } else if (!supGroup && !subGroup) { + // This case probably shouldn't occur (this would mean the + // supsub was sending us a group with no superscript or + // subscript) but be safe. + return base; + } else { + bottom = fontMetrics.metrics.bigOpSpacing5 + + submid.height + submid.depth + + subKern + + base.depth + baseShift; + + finalGroup = buildCommon.makeVList([ + {type: "kern", size: fontMetrics.metrics.bigOpSpacing5}, + {type: "elem", elem: submid}, + {type: "kern", size: subKern}, + {type: "elem", elem: base}, + {type: "kern", size: supKern}, + {type: "elem", elem: supmid}, + {type: "kern", size: fontMetrics.metrics.bigOpSpacing5} + ], "bottom", bottom, options); + + // See comment above about slants + finalGroup.children[0].style.marginLeft = -slant + "em"; + finalGroup.children[2].style.marginLeft = slant + "em"; + } + + return makeSpan(["mop", "op-limits"], [finalGroup]); + } else { + if (group.value.symbol) { + base.style.top = baseShift + "em"; + } + + return base; + } + }, + + katex: function(group, options, prev) { + // The KaTeX logo. The offsets for the K and a were chosen to look + // good, but the offsets for the T, E, and X were taken from the + // definition of \TeX in TeX (see TeXbook pg. 356) + var k = makeSpan( + ["k"], [buildCommon.mathrm("K", group.mode)]); + var a = makeSpan( + ["a"], [buildCommon.mathrm("A", group.mode)]); + + a.height = (a.height + 0.2) * 0.75; + a.depth = (a.height - 0.2) * 0.75; + + var t = makeSpan( + ["t"], [buildCommon.mathrm("T", group.mode)]); + var e = makeSpan( + ["e"], [buildCommon.mathrm("E", group.mode)]); + + e.height = (e.height - 0.2155); + e.depth = (e.depth + 0.2155); + + var x = makeSpan( + ["x"], [buildCommon.mathrm("X", group.mode)]); + + return makeSpan( + ["katex-logo"], [k, a, t, e, x], options.getColor()); + }, + + overline: function(group, options, prev) { + // Overlines are handled in the TeXbook pg 443, Rule 9. + + // Build the inner group in the cramped style. + var innerGroup = buildGroup(group.value.body, + options.withStyle(options.style.cramp())); + + var ruleWidth = fontMetrics.metrics.defaultRuleThickness / + options.style.sizeMultiplier; + + // Create the line above the body + var line = makeSpan( + [options.style.reset(), Style.TEXT.cls(), "overline-line"]); + line.height = ruleWidth; + line.maxFontSize = 1.0; + + // Generate the vlist, with the appropriate kerns + var vlist = buildCommon.makeVList([ + {type: "elem", elem: innerGroup}, + {type: "kern", size: 3 * ruleWidth}, + {type: "elem", elem: line}, + {type: "kern", size: ruleWidth} + ], "firstBaseline", null, options); + + return makeSpan(["overline", "mord"], [vlist], options.getColor()); + }, + + sqrt: function(group, options, prev) { + // Square roots are handled in the TeXbook pg. 443, Rule 11. + + // First, we do the same steps as in overline to build the inner group + // and line + var inner = buildGroup(group.value.body, + options.withStyle(options.style.cramp())); + + var ruleWidth = fontMetrics.metrics.defaultRuleThickness / + options.style.sizeMultiplier; + + var line = makeSpan( + [options.style.reset(), Style.TEXT.cls(), "sqrt-line"], [], + options.getColor()); + line.height = ruleWidth; + line.maxFontSize = 1.0; + + var phi = ruleWidth; + if (options.style.id < Style.TEXT.id) { + phi = fontMetrics.metrics.xHeight; + } + + // Calculate the clearance between the body and line + var lineClearance = ruleWidth + phi / 4; + + var innerHeight = + (inner.height + inner.depth) * options.style.sizeMultiplier; + var minDelimiterHeight = innerHeight + lineClearance + ruleWidth; + + // Create a \surd delimiter of the required minimum size + var delim = makeSpan(["sqrt-sign"], [ + delimiter.customSizedDelim("\\surd", minDelimiterHeight, + false, options, group.mode)], + options.getColor()); + + var delimDepth = (delim.height + delim.depth) - ruleWidth; + + // Adjust the clearance based on the delimiter size + if (delimDepth > inner.height + inner.depth + lineClearance) { + lineClearance = + (lineClearance + delimDepth - inner.height - inner.depth) / 2; + } + + // Shift the delimiter so that its top lines up with the top of the line + var delimShift = -(inner.height + lineClearance + ruleWidth) + delim.height; + delim.style.top = delimShift + "em"; + delim.height -= delimShift; + delim.depth += delimShift; + + // We add a special case here, because even when `inner` is empty, we + // still get a line. So, we use a simple heuristic to decide if we + // should omit the body entirely. (note this doesn't work for something + // like `\sqrt{\rlap{x}}`, but if someone is doing that they deserve for + // it not to work. + var body; + if (inner.height === 0 && inner.depth === 0) { + body = makeSpan(); + } else { + body = buildCommon.makeVList([ + {type: "elem", elem: inner}, + {type: "kern", size: lineClearance}, + {type: "elem", elem: line}, + {type: "kern", size: ruleWidth} + ], "firstBaseline", null, options); + } + + return makeSpan(["sqrt", "mord"], [delim, body]); + }, + + sizing: function(group, options, prev) { + // Handle sizing operators like \Huge. Real TeX doesn't actually allow + // these functions inside of math expressions, so we do some special + // handling. + var inner = buildExpression(group.value.value, + options.withSize(group.value.size), prev); + + var span = makeSpan(["mord"], + [makeSpan(["sizing", "reset-" + options.size, group.value.size, + options.style.cls()], + inner)]); + + // Calculate the correct maxFontSize manually + var fontSize = buildCommon.sizingMultiplier[group.value.size]; + span.maxFontSize = fontSize * options.style.sizeMultiplier; + + return span; + }, + + styling: function(group, options, prev) { + // Style changes are handled in the TeXbook on pg. 442, Rule 3. + + // Figure out what style we're changing to. + var style = { + "display": Style.DISPLAY, + "text": Style.TEXT, + "script": Style.SCRIPT, + "scriptscript": Style.SCRIPTSCRIPT + }; + + var newStyle = style[group.value.style]; + + // Build the inner expression in the new style. + var inner = buildExpression( + group.value.value, options.withStyle(newStyle), prev); + + return makeSpan([options.style.reset(), newStyle.cls()], inner); + }, + + delimsizing: function(group, options, prev) { + var delim = group.value.value; + + if (delim === ".") { + // Empty delimiters still count as elements, even though they don't + // show anything. + return makeSpan([groupToType[group.value.delimType]]); + } + + // Use delimiter.sizedDelim to generate the delimiter. + return makeSpan( + [groupToType[group.value.delimType]], + [delimiter.sizedDelim( + delim, group.value.size, options, group.mode)]); + }, + + leftright: function(group, options, prev) { + // Build the inner expression + var inner = buildExpression(group.value.body, options.reset()); + + var innerHeight = 0; + var innerDepth = 0; + + // Calculate its height and depth + for (var i = 0; i < inner.length; i++) { + innerHeight = Math.max(inner[i].height, innerHeight); + innerDepth = Math.max(inner[i].depth, innerDepth); + } + + // The size of delimiters is the same, regardless of what style we are + // in. Thus, to correctly calculate the size of delimiter we need around + // a group, we scale down the inner size based on the size. + innerHeight *= options.style.sizeMultiplier; + innerDepth *= options.style.sizeMultiplier; + + var leftDelim; + if (group.value.left === ".") { + // Empty delimiters in \left and \right make null delimiter spaces. + leftDelim = makeSpan(["nulldelimiter"]); + } else { + // Otherwise, use leftRightDelim to generate the correct sized + // delimiter. + leftDelim = delimiter.leftRightDelim( + group.value.left, innerHeight, innerDepth, options, + group.mode); + } + // Add it to the beginning of the expression + inner.unshift(leftDelim); + + var rightDelim; + // Same for the right delimiter + if (group.value.right === ".") { + rightDelim = makeSpan(["nulldelimiter"]); + } else { + rightDelim = delimiter.leftRightDelim( + group.value.right, innerHeight, innerDepth, options, + group.mode); + } + // Add it to the end of the expression. + inner.push(rightDelim); + + return makeSpan( + ["minner", options.style.cls()], inner, options.getColor()); + }, + + rule: function(group, options, prev) { + // Make an empty span for the rule + var rule = makeSpan(["mord", "rule"], [], options.getColor()); + + // Calculate the shift, width, and height of the rule, and account for units + var shift = 0; + if (group.value.shift) { + shift = group.value.shift.number; + if (group.value.shift.unit === "ex") { + shift *= fontMetrics.metrics.xHeight; + } + } + + var width = group.value.width.number; + if (group.value.width.unit === "ex") { + width *= fontMetrics.metrics.xHeight; + } + + var height = group.value.height.number; + if (group.value.height.unit === "ex") { + height *= fontMetrics.metrics.xHeight; + } + + // The sizes of rules are absolute, so make it larger if we are in a + // smaller style. + shift /= options.style.sizeMultiplier; + width /= options.style.sizeMultiplier; + height /= options.style.sizeMultiplier; + + // Style the rule to the right size + rule.style.borderRightWidth = width + "em"; + rule.style.borderTopWidth = height + "em"; + rule.style.bottom = shift + "em"; + + // Record the height and width + rule.width = width; + rule.height = height + shift; + rule.depth = -shift; + + return rule; + }, + + accent: function(group, options, prev) { + // Accents are handled in the TeXbook pg. 443, rule 12. + var base = group.value.base; + + var supsubGroup; + if (group.type === "supsub") { + // If our base is a character box, and we have superscripts and + // subscripts, the supsub will defer to us. In particular, we want + // to attach the superscripts and subscripts to the inner body (so + // that the position of the superscripts and subscripts won't be + // affected by the height of the accent). We accomplish this by + // sticking the base of the accent into the base of the supsub, and + // rendering that, while keeping track of where the accent is. + + // The supsub group is the group that was passed in + var supsub = group; + // The real accent group is the base of the supsub group + group = supsub.value.base; + // The character box is the base of the accent group + base = group.value.base; + // Stick the character box into the base of the supsub group + supsub.value.base = base; + + // Rerender the supsub group with its new base, and store that + // result. + supsubGroup = buildGroup( + supsub, options.reset(), prev); + } + + // Build the base group + var body = buildGroup( + base, options.withStyle(options.style.cramp())); + + // Calculate the skew of the accent. This is based on the line "If the + // nucleus is not a single character, let s = 0; otherwise set s to the + // kern amount for the nucleus followed by the \skewchar of its font." + // Note that our skew metrics are just the kern between each character + // and the skewchar. + var skew; + if (isCharacterBox(base)) { + // If the base is a character box, then we want the skew of the + // innermost character. To do that, we find the innermost character: + var baseChar = getBaseElem(base); + // Then, we render its group to get the symbol inside it + var baseGroup = buildGroup( + baseChar, options.withStyle(options.style.cramp())); + // Finally, we pull the skew off of the symbol. + skew = baseGroup.skew; + // Note that we now throw away baseGroup, because the layers we + // removed with getBaseElem might contain things like \color which + // we can't get rid of. + // TODO(emily): Find a better way to get the skew + } else { + skew = 0; + } + + // calculate the amount of space between the body and the accent + var clearance = Math.min(body.height, fontMetrics.metrics.xHeight); + + // Build the accent + var accent = buildCommon.makeSymbol( + group.value.accent, "Main-Regular", "math", options.getColor()); + // Remove the italic correction of the accent, because it only serves to + // shift the accent over to a place we don't want. + accent.italic = 0; + + // The \vec character that the fonts use is a combining character, and + // thus shows up much too far to the left. To account for this, we add a + // specific class which shifts the accent over to where we want it. + // TODO(emily): Fix this in a better way, like by changing the font + var vecClass = group.value.accent === "\\vec" ? "accent-vec" : null; + + var accentBody = makeSpan(["accent-body", vecClass], [ + makeSpan([], [accent])]); + + accentBody = buildCommon.makeVList([ + {type: "elem", elem: body}, + {type: "kern", size: -clearance}, + {type: "elem", elem: accentBody} + ], "firstBaseline", null, options); + + // Shift the accent over by the skew. Note we shift by twice the skew + // because we are centering the accent, so by adding 2*skew to the left, + // we shift it to the right by 1*skew. + accentBody.children[1].style.marginLeft = 2 * skew + "em"; + + var accentWrap = makeSpan(["mord", "accent"], [accentBody]); + + if (supsubGroup) { + // Here, we replace the "base" child of the supsub with our newly + // generated accent. + supsubGroup.children[0] = accentWrap; + + // Since we don't rerun the height calculation after replacing the + // accent, we manually recalculate height. + supsubGroup.height = Math.max(accentWrap.height, supsubGroup.height); + + // Accents should always be ords, even when their innards are not. + supsubGroup.classes[0] = "mord"; + + return supsubGroup; + } else { + return accentWrap; + } + } +}; + +/** + * buildGroup is the function that takes a group and calls the correct groupType + * function for it. It also handles the interaction of size and style changes + * between parents and children. + */ +var buildGroup = function(group, options, prev) { + if (!group) { + return makeSpan(); + } + + if (groupTypes[group.type]) { + // Call the groupTypes function + var groupNode = groupTypes[group.type](group, options, prev); + var multiplier; + + // If the style changed between the parent and the current group, + // account for the size difference + if (options.style !== options.parentStyle) { + multiplier = options.style.sizeMultiplier / + options.parentStyle.sizeMultiplier; + + groupNode.height *= multiplier; + groupNode.depth *= multiplier; + } + + // If the size changed between the parent and the current group, account + // for that size difference. + if (options.size !== options.parentSize) { + multiplier = buildCommon.sizingMultiplier[options.size] / + buildCommon.sizingMultiplier[options.parentSize]; + + groupNode.height *= multiplier; + groupNode.depth *= multiplier; + } + + return groupNode; + } else { + throw new ParseError( + "Got group of unknown type: '" + group.type + "'"); + } +}; + +/** + * Take an entire parse tree, and build it into an appropriate set of HTML + * nodes. + */ +var buildHTML = function(tree, settings) { + var startStyle = Style.TEXT; + if (settings.displayMode) { + startStyle = Style.DISPLAY; + } + + // Setup the default options + var options = new Options(startStyle, "size5", ""); + + // Build the expression contained in the tree + var expression = buildExpression(tree, options); + var body = makeSpan(["base", options.style.cls()], expression); + + // Add struts, which ensure that the top of the HTML element falls at the + // height of the expression, and the bottom of the HTML element falls at the + // depth of the expression. + var topStrut = makeSpan(["strut"]); + var bottomStrut = makeSpan(["strut", "bottom"]); + + topStrut.style.height = body.height + "em"; + bottomStrut.style.height = (body.height + body.depth) + "em"; + // We'd like to use `vertical-align: top` but in IE 9 this lowers the + // baseline of the box to the bottom of this strut (instead staying in the + // normal place) so we use an absolute value for vertical-align instead + bottomStrut.style.verticalAlign = -body.depth + "em"; + + // Wrap the struts and body together + var htmlNode = makeSpan(["katex-html"], [topStrut, bottomStrut, body]); + + htmlNode.setAttribute("aria-hidden", "true"); + + return htmlNode; +}; + +module.exports = buildHTML; diff --git a/src/buildMathML.js b/src/buildMathML.js new file mode 100644 index 0000000..cd29c27 --- /dev/null +++ b/src/buildMathML.js @@ -0,0 +1,442 @@ +/** + * This file converts a parse tree into a cooresponding MathML tree. The main + * entry point is the `buildMathML` function, which takes a parse tree from the + * parser. + */ + +var buildCommon = require("./buildCommon"); +var mathMLTree = require("./mathMLTree"); +var ParseError = require("./ParseError"); +var symbols = require("./symbols"); + +var makeSpan = buildCommon.makeSpan; + +/** + * Takes a symbol and converts it into a MathML text node after performing + * optional replacement from symbols.js. + */ +var makeText = function(text, mode) { + if (symbols[mode][text] && symbols[mode][text].replace) { + text = symbols[mode][text].replace; + } + + return new mathMLTree.TextNode(text); +}; + +/** + * Functions for handling the different types of groups found in the parse + * tree. Each function should take a parse group and return a MathML node. + */ +var groupTypes = { + mathord: function(group) { + var node = new mathMLTree.MathNode( + "mi", + [makeText(group.value, group.mode)]); + + return node; + }, + + textord: function(group) { + var text = makeText(group.value, group.mode); + + var node; + if (/[0-9]/.test(group.value)) { + node = new mathMLTree.MathNode("mn", [text]); + } else { + node = new mathMLTree.MathNode("mi", [text]); + node.setAttribute("mathvariant", "normal"); + } + + return node; + }, + + bin: function(group) { + var node = new mathMLTree.MathNode( + "mo", [makeText(group.value, group.mode)]); + + return node; + }, + + rel: function(group) { + var node = new mathMLTree.MathNode( + "mo", [makeText(group.value, group.mode)]); + + return node; + }, + + open: function(group) { + var node = new mathMLTree.MathNode( + "mo", [makeText(group.value, group.mode)]); + + return node; + }, + + close: function(group) { + var node = new mathMLTree.MathNode( + "mo", [makeText(group.value, group.mode)]); + + return node; + }, + + inner: function(group) { + var node = new mathMLTree.MathNode( + "mo", [makeText(group.value, group.mode)]); + + return node; + }, + + punct: function(group) { + var node = new mathMLTree.MathNode( + "mo", [makeText(group.value, group.mode)]); + + node.setAttribute("separator", "true"); + + return node; + }, + + ordgroup: function(group) { + var inner = buildExpression(group.value); + + var node = new mathMLTree.MathNode("mrow", inner); + + return node; + }, + + text: function(group) { + var inner = buildExpression(group.value.body); + + var node = new mathMLTree.MathNode("mtext", inner); + + return node; + }, + + color: function(group) { + var inner = buildExpression(group.value.value); + + var node = new mathMLTree.MathNode("mstyle", inner); + + node.setAttribute("mathcolor", group.value.color); + + return node; + }, + + supsub: function(group) { + var children = [buildGroup(group.value.base)]; + + if (group.value.sub) { + children.push(buildGroup(group.value.sub)); + } + + if (group.value.sup) { + children.push(buildGroup(group.value.sup)); + } + + var nodeType; + if (!group.value.sub) { + nodeType = "msup"; + } else if (!group.value.sup) { + nodeType = "msub"; + } else { + nodeType = "msubsup"; + } + + var node = new mathMLTree.MathNode(nodeType, children); + + return node; + }, + + genfrac: function(group) { + var node = new mathMLTree.MathNode( + "mfrac", + [buildGroup(group.value.numer), + buildGroup(group.value.denom)]); + + if (!group.value.hasBarLine) { + node.setAttribute("linethickness", "0px"); + } + + if (group.value.leftDelim != null || group.value.rightDelim != null) { + var withDelims = []; + + if (group.value.leftDelim != null) { + var leftOp = new mathMLTree.MathNode( + "mo", [new mathMLTree.TextNode(group.value.leftDelim)]); + + leftOp.setAttribute("fence", "true"); + + withDelims.push(leftOp); + } + + withDelims.push(node); + + if (group.value.rightDelim != null) { + var rightOp = new mathMLTree.MathNode( + "mo", [new mathMLTree.TextNode(group.value.rightDelim)]); + + rightOp.setAttribute("fence", "true"); + + withDelims.push(rightOp); + } + + var outerNode = new mathMLTree.MathNode("mrow", withDelims); + + return outerNode; + } + + return node; + }, + + sqrt: function(group) { + var node = new mathMLTree.MathNode( + "msqrt", [buildGroup(group.value.body)]); + + return node; + }, + + leftright: function(group) { + var inner = buildExpression(group.value.body); + + if (group.value.left !== ".") { + var leftNode = new mathMLTree.MathNode( + "mo", [makeText(group.value.left, group.mode)]); + + leftNode.setAttribute("fence", "true"); + + inner.unshift(leftNode); + } + + if (group.value.right !== ".") { + var rightNode = new mathMLTree.MathNode( + "mo", [makeText(group.value.right, group.mode)]); + + rightNode.setAttribute("fence", "true"); + + inner.push(rightNode); + } + + var outerNode = new mathMLTree.MathNode("mrow", inner); + + return outerNode; + }, + + accent: function(group) { + var accentNode = new mathMLTree.MathNode( + "mo", [makeText(group.value.accent, group.mode)]); + + var node = new mathMLTree.MathNode( + "mover", + [buildGroup(group.value.base), + accentNode]); + + node.setAttribute("accent", "true"); + + return node; + }, + + spacing: function(group) { + var node; + + if (group.value === "\\ " || group.value === "\\space" || + group.value === " " || group.value === "~") { + node = new mathMLTree.MathNode( + "mtext", [new mathMLTree.TextNode("\u00a0")]); + } else { + node = new mathMLTree.MathNode("mspace"); + + node.setAttribute( + "width", buildCommon.spacingFunctions[group.value].size); + } + + return node; + }, + + op: function(group) { + var node; + + // TODO(emily): handle big operators using the `largeop` attribute + + if (group.value.symbol) { + // This is a symbol. Just add the symbol. + node = new mathMLTree.MathNode( + "mo", [makeText(group.value.body, group.mode)]); + } else { + // This is a text operator. Add all of the characters from the + // operator's name. + // TODO(emily): Add a space in the middle of some of these + // operators, like \limsup. + node = new mathMLTree.MathNode( + "mo", [new mathMLTree.TextNode(group.value.body.slice(1))]); + } + + return node; + }, + + katex: function(group) { + var node = new mathMLTree.MathNode( + "mtext", [new mathMLTree.TextNode("KaTeX")]); + + return node; + }, + + delimsizing: function(group) { + var children = []; + + if (group.value.value !== ".") { + children.push(makeText(group.value.value, group.mode)); + } + + var node = new mathMLTree.MathNode("mo", children); + + if (group.value.delimType === "open" || + group.value.delimType === "close") { + // Only some of the delimsizing functions act as fences, and they + // return "open" or "close" delimTypes. + node.setAttribute("fence", "true"); + } else { + // Explicitly disable fencing if it's not a fence, to override the + // defaults. + node.setAttribute("fence", "false"); + } + + return node; + }, + + styling: function(group) { + var inner = buildExpression(group.value.value, inner); + + var node = new mathMLTree.MathNode("mstyle", inner); + + var styleAttributes = { + "display": ["0", "true"], + "text": ["0", "false"], + "script": ["1", "false"], + "scriptscript": ["2", "false"] + }; + + var attr = styleAttributes[group.value.style]; + + node.setAttribute("scriptlevel", attr[0]); + node.setAttribute("displaystyle", attr[1]); + + return node; + }, + + sizing: function(group) { + var inner = buildExpression(group.value.value); + + var node = new mathMLTree.MathNode("mstyle", inner); + + // TODO(emily): This doesn't produce the correct size for nested size + // changes, because we don't keep state of what style we're currently + // in, so we can't reset the size to normal before changing it. + node.setAttribute( + "mathsize", buildCommon.sizingMultiplier[group.value.size] + "em"); + + return node; + }, + + overline: function(group) { + var operator = new mathMLTree.MathNode( + "mo", [new mathMLTree.TextNode("\u203e")]); + operator.setAttribute("stretchy", "true"); + + var node = new mathMLTree.MathNode( + "mover", + [buildGroup(group.value.body), + operator]); + node.setAttribute("accent", "true"); + + return node; + }, + + rule: function(group) { + // TODO(emily): Figure out if there's an actual way to draw black boxes + // in MathML. + var node = new mathMLTree.MathNode("mrow"); + + return node; + }, + + llap: function(group) { + var node = new mathMLTree.MathNode( + "mpadded", [buildGroup(group.value.body)]); + + node.setAttribute("lspace", "-1width"); + node.setAttribute("width", "0px"); + + return node; + }, + + rlap: function(group) { + var node = new mathMLTree.MathNode( + "mpadded", [buildGroup(group.value.body)]); + + node.setAttribute("width", "0px"); + + return node; + } +}; + +/** + * Takes a list of nodes, builds them, and returns a list of the generated + * MathML nodes. A little simpler than the HTML version because we don't do any + * previous-node handling. + */ +var buildExpression = function(expression) { + var groups = []; + for (var i = 0; i < expression.length; i++) { + var group = expression[i]; + groups.push(buildGroup(group)); + } + return groups; +}; + +/** + * Takes a group from the parser and calls the appropriate groupTypes function + * on it to produce a MathML node. + */ +var buildGroup = function(group) { + if (!group) { + return new mathMLTree.MathNode("mrow"); + } + + if (groupTypes[group.type]) { + // Call the groupTypes function + return groupTypes[group.type](group); + } else { + throw new ParseError( + "Got group of unknown type: '" + group.type + "'"); + } +}; + +/** + * Takes a full parse tree and settings and builds a MathML representation of + * it. In particular, we put the elements from building the parse tree into a + * tag so we can also include that TeX source as an annotation. + * + * Note that we actually return a domTree element with a `` inside it so + * we can do appropriate styling. + */ +var buildMathML = function(tree, texExpression, settings) { + var expression = buildExpression(tree); + + // Wrap up the expression in an mrow so it is presented in the semantics + // tag correctly. + var wrapper = new mathMLTree.MathNode("mrow", expression); + + // Build a TeX annotation of the source + var annotation = new mathMLTree.MathNode( + "annotation", [new mathMLTree.TextNode(texExpression)]); + + annotation.setAttribute("encoding", "application/x-tex"); + + var semantics = new mathMLTree.MathNode( + "semantics", [wrapper, annotation]); + + var math = new mathMLTree.MathNode("math", [semantics]); + + // You can't style nodes, so we wrap the node in a span. + return makeSpan(["katex-mathml"], [math]); +}; + +module.exports = buildMathML; diff --git a/src/buildTree.js b/src/buildTree.js index 464e6c2..270c03d 100644 --- a/src/buildTree.js +++ b/src/buildTree.js @@ -1,1169 +1,18 @@ -/** - * This file does the main work of building a domTree structure from a parse - * tree. The entry point is the `buildTree` function, which takes a parse tree. - * Then, the buildExpression, buildGroup, and various groupTypes functions are - * called, to produce a final tree. - */ - -var Options = require("./Options"); -var ParseError = require("./ParseError"); -var Style = require("./Style"); +var buildHTML = require("./buildHTML"); +var buildMathML = require("./buildMathML"); var buildCommon = require("./buildCommon"); -var delimiter = require("./delimiter"); -var domTree = require("./domTree"); -var fontMetrics = require("./fontMetrics"); -var utils = require("./utils"); var makeSpan = buildCommon.makeSpan; -/** - * Take a list of nodes, build them in order, and return a list of the built - * nodes. This function handles the `prev` node correctly, and passes the - * previous element from the list as the prev of the next element. - */ -var buildExpression = function(expression, options, prev) { - var groups = []; - for (var i = 0; i < expression.length; i++) { - var group = expression[i]; - groups.push(buildGroup(group, options, prev)); - prev = group; - } - return groups; -}; +var buildTree = function(tree, expression, settings) { + // `buildHTML` sometimes messes with the parse tree (like turning bins -> + // ords), so we build the MathML version first. + var mathMLNode = buildMathML(tree, expression, settings); + var htmlNode = buildHTML(tree, settings); -// List of types used by getTypeOfGroup -var groupToType = { - mathord: "mord", - textord: "mord", - bin: "mbin", - rel: "mrel", - text: "mord", - open: "mopen", - close: "mclose", - inner: "minner", - frac: "minner", - spacing: "mord", - punct: "mpunct", - ordgroup: "mord", - op: "mop", - katex: "mord", - overline: "mord", - rule: "mord", - leftright: "minner", - sqrt: "mord", - accent: "mord" -}; - -/** - * Gets the final math type of an expression, given its group type. This type is - * used to determine spacing between elements, and affects bin elements by - * causing them to change depending on what types are around them. This type - * must be attached to the outermost node of an element as a CSS class so that - * spacing with its surrounding elements works correctly. - * - * Some elements can be mapped one-to-one from group type to math type, and - * those are listed in the `groupToType` table. - * - * Others (usually elements that wrap around other elements) often have - * recursive definitions, and thus call `getTypeOfGroup` on their inner - * elements. - */ -var getTypeOfGroup = function(group) { - if (group == null) { - // Like when typesetting $^3$ - return groupToType.mathord; - } else if (group.type === "supsub") { - return getTypeOfGroup(group.value.base); - } else if (group.type === "llap" || group.type === "rlap") { - return getTypeOfGroup(group.value); - } else if (group.type === "color") { - return getTypeOfGroup(group.value.value); - } else if (group.type === "sizing") { - return getTypeOfGroup(group.value.value); - } else if (group.type === "styling") { - return getTypeOfGroup(group.value.value); - } else if (group.type === "delimsizing") { - return groupToType[group.value.delimType]; - } else { - return groupToType[group.type]; - } -}; - -/** - * Sometimes, groups perform special rules when they have superscripts or - * subscripts attached to them. This function lets the `supsub` group know that - * its inner element should handle the superscripts and subscripts instead of - * handling them itself. - */ -var shouldHandleSupSub = function(group, options) { - if (!group) { - return false; - } else if (group.type === "op") { - // Operators handle supsubs differently when they have limits - // (e.g. `\displaystyle\sum_2^3`) - return group.value.limits && options.style.size === Style.DISPLAY.size; - } else if (group.type === "accent") { - return isCharacterBox(group.value.base); - } else { - return null; - } -}; - -/** - * Sometimes we want to pull out the innermost element of a group. In most - * cases, this will just be the group itself, but when ordgroups and colors have - * a single element, we want to pull that out. - */ -var getBaseElem = function(group) { - if (!group) { - return false; - } else if (group.type === "ordgroup") { - if (group.value.length === 1) { - return getBaseElem(group.value[0]); - } else { - return group; - } - } else if (group.type === "color") { - if (group.value.value.length === 1) { - return getBaseElem(group.value.value[0]); - } else { - return group; - } - } else { - return group; - } -}; - -/** - * TeXbook algorithms often reference "character boxes", which are simply groups - * with a single character in them. To decide if something is a character box, - * we find its innermost group, and see if it is a single character. - */ -var isCharacterBox = function(group) { - var baseElem = getBaseElem(group); - - // These are all they types of groups which hold single characters - return baseElem.type === "mathord" || - baseElem.type === "textord" || - baseElem.type === "bin" || - baseElem.type === "rel" || - baseElem.type === "inner" || - baseElem.type === "open" || - baseElem.type === "close" || - baseElem.type === "punct"; -}; - -/** - * This is a map of group types to the function used to handle that type. - * Simpler types come at the beginning, while complicated types come afterwards. - */ -var groupTypes = { - mathord: function(group, options, prev) { - return buildCommon.mathit( - group.value, group.mode, options.getColor(), ["mord"]); - }, - - textord: function(group, options, prev) { - return buildCommon.mathrm( - group.value, group.mode, options.getColor(), ["mord"]); - }, - - bin: function(group, options, prev) { - var className = "mbin"; - // Pull out the most recent element. Do some special handling to find - // things at the end of a \color group. Note that we don't use the same - // logic for ordgroups (which count as ords). - var prevAtom = prev; - while (prevAtom && prevAtom.type == "color") { - var atoms = prevAtom.value.value; - prevAtom = atoms[atoms.length - 1]; - } - // See TeXbook pg. 442-446, Rules 5 and 6, and the text before Rule 19. - // Here, we determine whether the bin should turn into an ord. We - // currently only apply Rule 5. - if (!prev || utils.contains(["mbin", "mopen", "mrel", "mop", "mpunct"], - getTypeOfGroup(prevAtom))) { - group.type = "textord"; - className = "mord"; - } - - return buildCommon.mathrm( - group.value, group.mode, options.getColor(), [className]); - }, - - rel: function(group, options, prev) { - return buildCommon.mathrm( - group.value, group.mode, options.getColor(), ["mrel"]); - }, - - open: function(group, options, prev) { - return buildCommon.mathrm( - group.value, group.mode, options.getColor(), ["mopen"]); - }, - - close: function(group, options, prev) { - return buildCommon.mathrm( - group.value, group.mode, options.getColor(), ["mclose"]); - }, - - inner: function(group, options, prev) { - return buildCommon.mathrm( - group.value, group.mode, options.getColor(), ["minner"]); - }, - - punct: function(group, options, prev) { - return buildCommon.mathrm( - group.value, group.mode, options.getColor(), ["mpunct"]); - }, - - ordgroup: function(group, options, prev) { - return makeSpan( - ["mord", options.style.cls()], - buildExpression(group.value, options.reset()) - ); - }, - - text: function(group, options, prev) { - return makeSpan(["text", "mord", options.style.cls()], - buildExpression(group.value.body, options.reset())); - }, - - color: function(group, options, prev) { - var elements = buildExpression( - group.value.value, - options.withColor(group.value.color), - prev - ); - - // \color isn't supposed to affect the type of the elements it contains. - // To accomplish this, we wrap the results in a fragment, so the inner - // elements will be able to directly interact with their neighbors. For - // example, `\color{red}{2 +} 3` has the same spacing as `2 + 3` - return new buildCommon.makeFragment(elements); - }, - - supsub: function(group, options, prev) { - // Superscript and subscripts are handled in the TeXbook on page - // 445-446, rules 18(a-f). - - // Here is where we defer to the inner group if it should handle - // superscripts and subscripts itself. - if (shouldHandleSupSub(group.value.base, options)) { - return groupTypes[group.value.base.type](group, options, prev); - } - - var base = buildGroup(group.value.base, options.reset()); - var supmid, submid, sup, sub; - - if (group.value.sup) { - sup = buildGroup(group.value.sup, - options.withStyle(options.style.sup())); - supmid = makeSpan( - [options.style.reset(), options.style.sup().cls()], [sup]); - } - - if (group.value.sub) { - sub = buildGroup(group.value.sub, - options.withStyle(options.style.sub())); - submid = makeSpan( - [options.style.reset(), options.style.sub().cls()], [sub]); - } - - // Rule 18a - var supShift, subShift; - if (isCharacterBox(group.value.base)) { - supShift = 0; - subShift = 0; - } else { - supShift = base.height - fontMetrics.metrics.supDrop; - subShift = base.depth + fontMetrics.metrics.subDrop; - } - - // Rule 18c - var minSupShift; - if (options.style === Style.DISPLAY) { - minSupShift = fontMetrics.metrics.sup1; - } else if (options.style.cramped) { - minSupShift = fontMetrics.metrics.sup3; - } else { - minSupShift = fontMetrics.metrics.sup2; - } - - // scriptspace is a font-size-independent size, so scale it - // appropriately - var multiplier = Style.TEXT.sizeMultiplier * - options.style.sizeMultiplier; - var scriptspace = - (0.5 / fontMetrics.metrics.ptPerEm) / multiplier + "em"; - - var supsub; - if (!group.value.sup) { - // Rule 18b - subShift = Math.max( - subShift, fontMetrics.metrics.sub1, - sub.height - 0.8 * fontMetrics.metrics.xHeight); - - supsub = buildCommon.makeVList([ - {type: "elem", elem: submid} - ], "shift", subShift, options); - - supsub.children[0].style.marginRight = scriptspace; - - // Subscripts shouldn't be shifted by the base's italic correction. - // Account for that by shifting the subscript back the appropriate - // amount. Note we only do this when the base is a single symbol. - if (base instanceof domTree.symbolNode) { - supsub.children[0].style.marginLeft = -base.italic + "em"; - } - } else if (!group.value.sub) { - // Rule 18c, d - supShift = Math.max(supShift, minSupShift, - sup.depth + 0.25 * fontMetrics.metrics.xHeight); - - supsub = buildCommon.makeVList([ - {type: "elem", elem: supmid} - ], "shift", -supShift, options); - - supsub.children[0].style.marginRight = scriptspace; - } else { - supShift = Math.max( - supShift, minSupShift, - sup.depth + 0.25 * fontMetrics.metrics.xHeight); - subShift = Math.max(subShift, fontMetrics.metrics.sub2); - - var ruleWidth = fontMetrics.metrics.defaultRuleThickness; - - // Rule 18e - if ((supShift - sup.depth) - (sub.height - subShift) < - 4 * ruleWidth) { - subShift = 4 * ruleWidth - (supShift - sup.depth) + sub.height; - var psi = 0.8 * fontMetrics.metrics.xHeight - - (supShift - sup.depth); - if (psi > 0) { - supShift += psi; - subShift -= psi; - } - } - - supsub = buildCommon.makeVList([ - {type: "elem", elem: submid, shift: subShift}, - {type: "elem", elem: supmid, shift: -supShift} - ], "individualShift", null, options); - - // See comment above about subscripts not being shifted - if (base instanceof domTree.symbolNode) { - supsub.children[0].style.marginLeft = -base.italic + "em"; - } - - supsub.children[0].style.marginRight = scriptspace; - supsub.children[1].style.marginRight = scriptspace; - } - - return makeSpan([getTypeOfGroup(group.value.base)], - [base, supsub]); - }, - - genfrac: function(group, options, prev) { - // Fractions are handled in the TeXbook on pages 444-445, rules 15(a-e). - // Figure out what style this fraction should be in based on the - // function used - var fstyle = options.style; - if (group.value.size === "display") { - fstyle = Style.DISPLAY; - } else if (group.value.size === "text") { - fstyle = Style.TEXT; - } - - var nstyle = fstyle.fracNum(); - var dstyle = fstyle.fracDen(); - - var numer = buildGroup(group.value.numer, options.withStyle(nstyle)); - var numerreset = makeSpan([fstyle.reset(), nstyle.cls()], [numer]); - - var denom = buildGroup(group.value.denom, options.withStyle(dstyle)); - var denomreset = makeSpan([fstyle.reset(), dstyle.cls()], [denom]); - - var ruleWidth; - if (group.value.hasBarLine) { - ruleWidth = fontMetrics.metrics.defaultRuleThickness / - options.style.sizeMultiplier; - } else { - ruleWidth = 0; - } - - // Rule 15b - var numShift; - var clearance; - var denomShift; - if (fstyle.size === Style.DISPLAY.size) { - numShift = fontMetrics.metrics.num1; - if (ruleWidth > 0) { - clearance = 3 * ruleWidth; - } else { - clearance = 7 * fontMetrics.metrics.defaultRuleThickness; - } - denomShift = fontMetrics.metrics.denom1; - } else { - if (ruleWidth > 0) { - numShift = fontMetrics.metrics.num2; - clearance = ruleWidth; - } else { - numShift = fontMetrics.metrics.num3; - clearance = 3 * fontMetrics.metrics.defaultRuleThickness; - } - denomShift = fontMetrics.metrics.denom2; - } - - var frac; - if (ruleWidth === 0) { - // Rule 15c - var candiateClearance = - (numShift - numer.depth) - (denom.height - denomShift); - if (candiateClearance < clearance) { - numShift += 0.5 * (clearance - candiateClearance); - denomShift += 0.5 * (clearance - candiateClearance); - } - - frac = buildCommon.makeVList([ - {type: "elem", elem: denomreset, shift: denomShift}, - {type: "elem", elem: numerreset, shift: -numShift} - ], "individualShift", null, options); - } else { - // Rule 15d - var axisHeight = fontMetrics.metrics.axisHeight; - - if ((numShift - numer.depth) - (axisHeight + 0.5 * ruleWidth) - < clearance) { - numShift += - clearance - ((numShift - numer.depth) - - (axisHeight + 0.5 * ruleWidth)); - } - - if ((axisHeight - 0.5 * ruleWidth) - (denom.height - denomShift) - < clearance) { - denomShift += - clearance - ((axisHeight - 0.5 * ruleWidth) - - (denom.height - denomShift)); - } - - var mid = makeSpan( - [options.style.reset(), Style.TEXT.cls(), "frac-line"]); - // Manually set the height of the line because its height is - // created in CSS - mid.height = ruleWidth; - - var midShift = -(axisHeight - 0.5 * ruleWidth); - - frac = buildCommon.makeVList([ - {type: "elem", elem: denomreset, shift: denomShift}, - {type: "elem", elem: mid, shift: midShift}, - {type: "elem", elem: numerreset, shift: -numShift} - ], "individualShift", null, options); - } - - // Since we manually change the style sometimes (with \dfrac or \tfrac), - // account for the possible size change here. - frac.height *= fstyle.sizeMultiplier / options.style.sizeMultiplier; - frac.depth *= fstyle.sizeMultiplier / options.style.sizeMultiplier; - - // Rule 15e - var innerChildren = [makeSpan(["mfrac"], [frac])]; - - var delimSize; - if (fstyle.size === Style.DISPLAY.size) { - delimSize = fontMetrics.metrics.delim1; - } else { - delimSize = fontMetrics.metrics.getDelim2(fstyle); - } - - if (group.value.leftDelim != null) { - innerChildren.unshift( - delimiter.customSizedDelim( - group.value.leftDelim, delimSize, true, - options.withStyle(fstyle), group.mode) - ); - } - if (group.value.rightDelim != null) { - innerChildren.push( - delimiter.customSizedDelim( - group.value.rightDelim, delimSize, true, - options.withStyle(fstyle), group.mode) - ); - } - - return makeSpan( - ["minner", options.style.reset(), fstyle.cls()], - innerChildren, - options.getColor()); - }, - - spacing: function(group, options, prev) { - if (group.value === "\\ " || group.value === "\\space" || - group.value === " " || group.value === "~") { - // Spaces are generated by adding an actual space. Each of these - // things has an entry in the symbols table, so these will be turned - // into appropriate outputs. - return makeSpan( - ["mord", "mspace"], - [buildCommon.mathrm(group.value, group.mode)] - ); - } else { - // Other kinds of spaces are of arbitrary width. We use CSS to - // generate these. - var spacingClassMap = { - "\\qquad": "qquad", - "\\quad": "quad", - "\\enspace": "enspace", - "\\;": "thickspace", - "\\:": "mediumspace", - "\\,": "thinspace", - "\\!": "negativethinspace" - }; - - return makeSpan( - ["mord", "mspace", spacingClassMap[group.value]]); - } - }, - - llap: function(group, options, prev) { - var inner = makeSpan( - ["inner"], [buildGroup(group.value.body, options.reset())]); - var fix = makeSpan(["fix"], []); - return makeSpan( - ["llap", options.style.cls()], [inner, fix]); - }, - - rlap: function(group, options, prev) { - var inner = makeSpan( - ["inner"], [buildGroup(group.value.body, options.reset())]); - var fix = makeSpan(["fix"], []); - return makeSpan( - ["rlap", options.style.cls()], [inner, fix]); - }, - - op: function(group, options, prev) { - // Operators are handled in the TeXbook pg. 443-444, rule 13(a). - var supGroup; - var subGroup; - var hasLimits = false; - if (group.type === "supsub" ) { - // If we have limits, supsub will pass us its group to handle. Pull - // out the superscript and subscript and set the group to the op in - // its base. - supGroup = group.value.sup; - subGroup = group.value.sub; - group = group.value.base; - hasLimits = true; - } - - // Most operators have a large successor symbol, but these don't. - var noSuccessor = [ - "\\smallint" - ]; - - var large = false; - if (options.style.size === Style.DISPLAY.size && - group.value.symbol && - !utils.contains(noSuccessor, group.value.body)) { - - // Most symbol operators get larger in displaystyle (rule 13) - large = true; - } - - var base; - var baseShift = 0; - var slant = 0; - if (group.value.symbol) { - // If this is a symbol, create the symbol. - var style = large ? "Size2-Regular" : "Size1-Regular"; - base = buildCommon.makeSymbol( - group.value.body, style, "math", options.getColor(), - ["op-symbol", large ? "large-op" : "small-op", "mop"]); - - // Shift the symbol so its center lies on the axis (rule 13). It - // appears that our fonts have the centers of the symbols already - // almost on the axis, so these numbers are very small. Note we - // don't actually apply this here, but instead it is used either in - // the vlist creation or separately when there are no limits. - baseShift = (base.height - base.depth) / 2 - - fontMetrics.metrics.axisHeight * - options.style.sizeMultiplier; - - // The slant of the symbol is just its italic correction. - slant = base.italic; - } else { - // Otherwise, this is a text operator. Build the text from the - // operator's name. - // TODO(emily): Add a space in the middle of some of these - // operators, like \limsup - var output = []; - for (var i = 1; i < group.value.body.length; i++) { - output.push(buildCommon.mathrm(group.value.body[i], group.mode)); - } - base = makeSpan(["mop"], output, options.getColor()); - } - - if (hasLimits) { - // IE 8 clips \int if it is in a display: inline-block. We wrap it - // in a new span so it is an inline, and works. - base = makeSpan([], [base]); - - var supmid, supKern, submid, subKern; - // We manually have to handle the superscripts and subscripts. This, - // aside from the kern calculations, is copied from supsub. - if (supGroup) { - var sup = buildGroup( - supGroup, options.withStyle(options.style.sup())); - supmid = makeSpan( - [options.style.reset(), options.style.sup().cls()], [sup]); - - supKern = Math.max( - fontMetrics.metrics.bigOpSpacing1, - fontMetrics.metrics.bigOpSpacing3 - sup.depth); - } - - if (subGroup) { - var sub = buildGroup( - subGroup, options.withStyle(options.style.sub())); - submid = makeSpan( - [options.style.reset(), options.style.sub().cls()], - [sub]); - - subKern = Math.max( - fontMetrics.metrics.bigOpSpacing2, - fontMetrics.metrics.bigOpSpacing4 - sub.height); - } - - // Build the final group as a vlist of the possible subscript, base, - // and possible superscript. - var finalGroup, top, bottom; - if (!supGroup) { - top = base.height - baseShift; - - finalGroup = buildCommon.makeVList([ - {type: "kern", size: fontMetrics.metrics.bigOpSpacing5}, - {type: "elem", elem: submid}, - {type: "kern", size: subKern}, - {type: "elem", elem: base} - ], "top", top, options); - - // Here, we shift the limits by the slant of the symbol. Note - // that we are supposed to shift the limits by 1/2 of the slant, - // but since we are centering the limits adding a full slant of - // margin will shift by 1/2 that. - finalGroup.children[0].style.marginLeft = -slant + "em"; - } else if (!subGroup) { - bottom = base.depth + baseShift; - - finalGroup = buildCommon.makeVList([ - {type: "elem", elem: base}, - {type: "kern", size: supKern}, - {type: "elem", elem: supmid}, - {type: "kern", size: fontMetrics.metrics.bigOpSpacing5} - ], "bottom", bottom, options); - - // See comment above about slants - finalGroup.children[1].style.marginLeft = slant + "em"; - } else if (!supGroup && !subGroup) { - // This case probably shouldn't occur (this would mean the - // supsub was sending us a group with no superscript or - // subscript) but be safe. - return base; - } else { - bottom = fontMetrics.metrics.bigOpSpacing5 + - submid.height + submid.depth + - subKern + - base.depth + baseShift; - - finalGroup = buildCommon.makeVList([ - {type: "kern", size: fontMetrics.metrics.bigOpSpacing5}, - {type: "elem", elem: submid}, - {type: "kern", size: subKern}, - {type: "elem", elem: base}, - {type: "kern", size: supKern}, - {type: "elem", elem: supmid}, - {type: "kern", size: fontMetrics.metrics.bigOpSpacing5} - ], "bottom", bottom, options); - - // See comment above about slants - finalGroup.children[0].style.marginLeft = -slant + "em"; - finalGroup.children[2].style.marginLeft = slant + "em"; - } - - return makeSpan(["mop", "op-limits"], [finalGroup]); - } else { - if (group.value.symbol) { - base.style.top = baseShift + "em"; - } - - return base; - } - }, - - katex: function(group, options, prev) { - // The KaTeX logo. The offsets for the K and a were chosen to look - // good, but the offsets for the T, E, and X were taken from the - // definition of \TeX in TeX (see TeXbook pg. 356) - var k = makeSpan( - ["k"], [buildCommon.mathrm("K", group.mode)]); - var a = makeSpan( - ["a"], [buildCommon.mathrm("A", group.mode)]); - - a.height = (a.height + 0.2) * 0.75; - a.depth = (a.height - 0.2) * 0.75; - - var t = makeSpan( - ["t"], [buildCommon.mathrm("T", group.mode)]); - var e = makeSpan( - ["e"], [buildCommon.mathrm("E", group.mode)]); - - e.height = (e.height - 0.2155); - e.depth = (e.depth + 0.2155); - - var x = makeSpan( - ["x"], [buildCommon.mathrm("X", group.mode)]); - - return makeSpan( - ["katex-logo"], [k, a, t, e, x], options.getColor()); - }, - - overline: function(group, options, prev) { - // Overlines are handled in the TeXbook pg 443, Rule 9. - - // Build the inner group in the cramped style. - var innerGroup = buildGroup(group.value.body, - options.withStyle(options.style.cramp())); - - var ruleWidth = fontMetrics.metrics.defaultRuleThickness / - options.style.sizeMultiplier; - - // Create the line above the body - var line = makeSpan( - [options.style.reset(), Style.TEXT.cls(), "overline-line"]); - line.height = ruleWidth; - line.maxFontSize = 1.0; - - // Generate the vlist, with the appropriate kerns - var vlist = buildCommon.makeVList([ - {type: "elem", elem: innerGroup}, - {type: "kern", size: 3 * ruleWidth}, - {type: "elem", elem: line}, - {type: "kern", size: ruleWidth} - ], "firstBaseline", null, options); - - return makeSpan(["overline", "mord"], [vlist], options.getColor()); - }, - - sqrt: function(group, options, prev) { - // Square roots are handled in the TeXbook pg. 443, Rule 11. - - // First, we do the same steps as in overline to build the inner group - // and line - var inner = buildGroup(group.value.body, - options.withStyle(options.style.cramp())); - - var ruleWidth = fontMetrics.metrics.defaultRuleThickness / - options.style.sizeMultiplier; - - var line = makeSpan( - [options.style.reset(), Style.TEXT.cls(), "sqrt-line"], [], - options.getColor()); - line.height = ruleWidth; - line.maxFontSize = 1.0; - - var phi = ruleWidth; - if (options.style.id < Style.TEXT.id) { - phi = fontMetrics.metrics.xHeight; - } - - // Calculate the clearance between the body and line - var lineClearance = ruleWidth + phi / 4; - - var innerHeight = - (inner.height + inner.depth) * options.style.sizeMultiplier; - var minDelimiterHeight = innerHeight + lineClearance + ruleWidth; - - // Create a \surd delimiter of the required minimum size - var delim = makeSpan(["sqrt-sign"], [ - delimiter.customSizedDelim("\\surd", minDelimiterHeight, - false, options, group.mode)], - options.getColor()); - - var delimDepth = (delim.height + delim.depth) - ruleWidth; - - // Adjust the clearance based on the delimiter size - if (delimDepth > inner.height + inner.depth + lineClearance) { - lineClearance = - (lineClearance + delimDepth - inner.height - inner.depth) / 2; - } - - // Shift the delimiter so that its top lines up with the top of the line - var delimShift = -(inner.height + lineClearance + ruleWidth) + delim.height; - delim.style.top = delimShift + "em"; - delim.height -= delimShift; - delim.depth += delimShift; - - // We add a special case here, because even when `inner` is empty, we - // still get a line. So, we use a simple heuristic to decide if we - // should omit the body entirely. (note this doesn't work for something - // like `\sqrt{\rlap{x}}`, but if someone is doing that they deserve for - // it not to work. - var body; - if (inner.height === 0 && inner.depth === 0) { - body = makeSpan(); - } else { - body = buildCommon.makeVList([ - {type: "elem", elem: inner}, - {type: "kern", size: lineClearance}, - {type: "elem", elem: line}, - {type: "kern", size: ruleWidth} - ], "firstBaseline", null, options); - } - - return makeSpan(["sqrt", "mord"], [delim, body]); - }, - - sizing: function(group, options, prev) { - // Handle sizing operators like \Huge. Real TeX doesn't actually allow - // these functions inside of math expressions, so we do some special - // handling. - var inner = buildExpression(group.value.value, - options.withSize(group.value.size), prev); - - var span = makeSpan(["mord"], - [makeSpan(["sizing", "reset-" + options.size, group.value.size, - options.style.cls()], - inner)]); - - // Calculate the correct maxFontSize manually - var fontSize = sizingMultiplier[group.value.size]; - span.maxFontSize = fontSize * options.style.sizeMultiplier; - - return span; - }, - - styling: function(group, options, prev) { - // Style changes are handled in the TeXbook on pg. 442, Rule 3. - - // Figure out what style we're changing to. - var style = { - "display": Style.DISPLAY, - "text": Style.TEXT, - "script": Style.SCRIPT, - "scriptscript": Style.SCRIPTSCRIPT - }; - - var newStyle = style[group.value.style]; - - // Build the inner expression in the new style. - var inner = buildExpression( - group.value.value, options.withStyle(newStyle), prev); - - return makeSpan([options.style.reset(), newStyle.cls()], inner); - }, - - delimsizing: function(group, options, prev) { - var delim = group.value.value; - - if (delim === ".") { - // Empty delimiters still count as elements, even though they don't - // show anything. - return makeSpan([groupToType[group.value.delimType]]); - } - - // Use delimiter.sizedDelim to generate the delimiter. - return makeSpan( - [groupToType[group.value.delimType]], - [delimiter.sizedDelim( - delim, group.value.size, options, group.mode)]); - }, - - leftright: function(group, options, prev) { - // Build the inner expression - var inner = buildExpression(group.value.body, options.reset()); - - var innerHeight = 0; - var innerDepth = 0; - - // Calculate its height and depth - for (var i = 0; i < inner.length; i++) { - innerHeight = Math.max(inner[i].height, innerHeight); - innerDepth = Math.max(inner[i].depth, innerDepth); - } - - // The size of delimiters is the same, regardless of what style we are - // in. Thus, to correctly calculate the size of delimiter we need around - // a group, we scale down the inner size based on the size. - innerHeight *= options.style.sizeMultiplier; - innerDepth *= options.style.sizeMultiplier; - - var leftDelim; - if (group.value.left === ".") { - // Empty delimiters in \left and \right make null delimiter spaces. - leftDelim = makeSpan(["nulldelimiter"]); - } else { - // Otherwise, use leftRightDelim to generate the correct sized - // delimiter. - leftDelim = delimiter.leftRightDelim( - group.value.left, innerHeight, innerDepth, options, - group.mode); - } - // Add it to the beginning of the expression - inner.unshift(leftDelim); - - var rightDelim; - // Same for the right delimiter - if (group.value.right === ".") { - rightDelim = makeSpan(["nulldelimiter"]); - } else { - rightDelim = delimiter.leftRightDelim( - group.value.right, innerHeight, innerDepth, options, - group.mode); - } - // Add it to the end of the expression. - inner.push(rightDelim); - - return makeSpan( - ["minner", options.style.cls()], inner, options.getColor()); - }, - - rule: function(group, options, prev) { - // Make an empty span for the rule - var rule = makeSpan(["mord", "rule"], [], options.getColor()); - - // Calculate the shift, width, and height of the rule, and account for units - var shift = 0; - if (group.value.shift) { - shift = group.value.shift.number; - if (group.value.shift.unit === "ex") { - shift *= fontMetrics.metrics.xHeight; - } - } - - var width = group.value.width.number; - if (group.value.width.unit === "ex") { - width *= fontMetrics.metrics.xHeight; - } - - var height = group.value.height.number; - if (group.value.height.unit === "ex") { - height *= fontMetrics.metrics.xHeight; - } - - // The sizes of rules are absolute, so make it larger if we are in a - // smaller style. - shift /= options.style.sizeMultiplier; - width /= options.style.sizeMultiplier; - height /= options.style.sizeMultiplier; - - // Style the rule to the right size - rule.style.borderRightWidth = width + "em"; - rule.style.borderTopWidth = height + "em"; - rule.style.bottom = shift + "em"; - - // Record the height and width - rule.width = width; - rule.height = height + shift; - rule.depth = -shift; - - return rule; - }, - - accent: function(group, options, prev) { - // Accents are handled in the TeXbook pg. 443, rule 12. - var base = group.value.base; - - var supsubGroup; - if (group.type === "supsub") { - // If our base is a character box, and we have superscripts and - // subscripts, the supsub will defer to us. In particular, we want - // to attach the superscripts and subscripts to the inner body (so - // that the position of the superscripts and subscripts won't be - // affected by the height of the accent). We accomplish this by - // sticking the base of the accent into the base of the supsub, and - // rendering that, while keeping track of where the accent is. - - // The supsub group is the group that was passed in - var supsub = group; - // The real accent group is the base of the supsub group - group = supsub.value.base; - // The character box is the base of the accent group - base = group.value.base; - // Stick the character box into the base of the supsub group - supsub.value.base = base; - - // Rerender the supsub group with its new base, and store that - // result. - supsubGroup = buildGroup( - supsub, options.reset(), prev); - } - - // Build the base group - var body = buildGroup( - base, options.withStyle(options.style.cramp())); - - // Calculate the skew of the accent. This is based on the line "If the - // nucleus is not a single character, let s = 0; otherwise set s to the - // kern amount for the nucleus followed by the \skewchar of its font." - // Note that our skew metrics are just the kern between each character - // and the skewchar. - var skew; - if (isCharacterBox(base)) { - // If the base is a character box, then we want the skew of the - // innermost character. To do that, we find the innermost character: - var baseChar = getBaseElem(base); - // Then, we render its group to get the symbol inside it - var baseGroup = buildGroup( - baseChar, options.withStyle(options.style.cramp())); - // Finally, we pull the skew off of the symbol. - skew = baseGroup.skew; - // Note that we now throw away baseGroup, because the layers we - // removed with getBaseElem might contain things like \color which - // we can't get rid of. - // TODO(emily): Find a better way to get the skew - } else { - skew = 0; - } - - // calculate the amount of space between the body and the accent - var clearance = Math.min(body.height, fontMetrics.metrics.xHeight); - - // Build the accent - var accent = buildCommon.makeSymbol( - group.value.accent, "Main-Regular", "math", options.getColor()); - // Remove the italic correction of the accent, because it only serves to - // shift the accent over to a place we don't want. - accent.italic = 0; - - // The \vec character that the fonts use is a combining character, and - // thus shows up much too far to the left. To account for this, we add a - // specific class which shifts the accent over to where we want it. - // TODO(emily): Fix this in a better way, like by changing the font - var vecClass = group.value.accent === "\\vec" ? "accent-vec" : null; - - var accentBody = makeSpan(["accent-body", vecClass], [ - makeSpan([], [accent])]); - - accentBody = buildCommon.makeVList([ - {type: "elem", elem: body}, - {type: "kern", size: -clearance}, - {type: "elem", elem: accentBody} - ], "firstBaseline", null, options); - - // Shift the accent over by the skew. Note we shift by twice the skew - // because we are centering the accent, so by adding 2*skew to the left, - // we shift it to the right by 1*skew. - accentBody.children[1].style.marginLeft = 2 * skew + "em"; - - var accentWrap = makeSpan(["mord", "accent"], [accentBody]); - - if (supsubGroup) { - // Here, we replace the "base" child of the supsub with our newly - // generated accent. - supsubGroup.children[0] = accentWrap; - - // Since we don't rerun the height calculation after replacing the - // accent, we manually recalculate height. - supsubGroup.height = Math.max(accentWrap.height, supsubGroup.height); - - // Accents should always be ords, even when their innards are not. - supsubGroup.classes[0] = "mord"; - - return supsubGroup; - } else { - return accentWrap; - } - } -}; - -var 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 -}; - -/** - * buildGroup is the function that takes a group and calls the correct groupType - * function for it. It also handles the interaction of size and style changes - * between parents and children. - */ -var buildGroup = function(group, options, prev) { - if (!group) { - return makeSpan(); - } - - if (groupTypes[group.type]) { - // Call the groupTypes function - var groupNode = groupTypes[group.type](group, options, prev); - var multiplier; - - // If the style changed between the parent and the current group, - // account for the size difference - if (options.style !== options.parentStyle) { - multiplier = options.style.sizeMultiplier / - options.parentStyle.sizeMultiplier; - - groupNode.height *= multiplier; - groupNode.depth *= multiplier; - } - - // If the size changed between the parent and the current group, account - // for that size difference. - if (options.size !== options.parentSize) { - multiplier = sizingMultiplier[options.size] / - sizingMultiplier[options.parentSize]; - - groupNode.height *= multiplier; - groupNode.depth *= multiplier; - } - - return groupNode; - } else { - throw new ParseError( - "Got group of unknown type: '" + group.type + "'"); - } -}; - -/** - * Take an entire parse tree, and build it into an appropriate set of nodes. - */ -var buildTree = function(tree, settings) { - var startStyle = Style.TEXT; - if (settings.displayMode) { - startStyle = Style.DISPLAY; - } - - // Setup the default options - var options = new Options(startStyle, "size5", ""); - - // Build the expression contained in the tree - var expression = buildExpression(tree, options); - var body = makeSpan(["base", options.style.cls()], expression); - - // Add struts, which ensure that the top of the HTML element falls at the - // height of the expression, and the bottom of the HTML element falls at the - // depth of the expression. - var topStrut = makeSpan(["strut"]); - var bottomStrut = makeSpan(["strut", "bottom"]); - - topStrut.style.height = body.height + "em"; - bottomStrut.style.height = (body.height + body.depth) + "em"; - // We'd like to use `vertical-align: top` but in IE 9 this lowers the - // baseline of the box to the bottom of this strut (instead staying in the - // normal place) so we use an absolute value for vertical-align instead - bottomStrut.style.verticalAlign = -body.depth + "em"; - - // Wrap the struts and body together var katexNode = makeSpan(["katex"], [ - makeSpan(["katex-inner"], [topStrut, bottomStrut, body]) + mathMLNode, htmlNode ]); if (settings.displayMode) { diff --git a/src/domTree.js b/src/domTree.js index 87193f3..f9416bf 100644 --- a/src/domTree.js +++ b/src/domTree.js @@ -1,9 +1,11 @@ /** * These objects store the data about the DOM nodes we create, as well as some - * extra data. They can then be transformed into real DOM nodes with the toNode - * function or HTML markup using toMarkup. They are useful for both storing - * extra properties on the nodes, as well as providing a way to easily work - * with the DOM. + * extra data. They can then be transformed into real DOM nodes with the + * `toNode` function or HTML markup using `toMarkup`. They are useful for both + * storing extra properties on the nodes, as well as providing a way to easily + * work with the DOM. + * + * Similar functions for working with MathML nodes exist in mathMLTree.js. */ var utils = require("./utils"); @@ -35,8 +37,18 @@ function span(classes, children, height, depth, maxFontSize, style) { this.depth = depth || 0; this.maxFontSize = maxFontSize || 0; this.style = style || {}; + this.attributes = {}; } +/** + * Sets an arbitrary attribute on the span. Warning: use this wisely. Not all + * browsers support attributes the same, and having too many custom attributes + * is probably bad. + */ +span.prototype.setAttribute = function(attribute, value) { + this.attributes[attribute] = value; +}; + /** * Convert the span into an HTML node */ @@ -48,11 +60,18 @@ span.prototype.toNode = function() { // Apply inline styles for (var style in this.style) { - if (this.style.hasOwnProperty(style)) { + if (Object.prototype.hasOwnProperty.call(this.style, style)) { span.style[style] = this.style[style]; } } + // Apply attributes + for (var attr in this.attributes) { + if (Object.prototype.hasOwnProperty.call(this.attributes, attr)) { + span.setAttribute(attr, this.attributes[attr]); + } + } + // Append the children, also as HTML nodes for (var i = 0; i < this.children.length; i++) { span.appendChild(this.children[i].toNode()); @@ -87,6 +106,15 @@ span.prototype.toMarkup = function() { markup += " style=\"" + utils.escape(styles) + "\""; } + // Add the attributes + for (var attr in this.attributes) { + if (Object.prototype.hasOwnProperty.call(this.attributes, attr)) { + markup += " " + attr + "=\""; + markup += utils.escape(this.attributes[attr]); + markup += "\""; + } + } + markup += ">"; // Add the markup of the children, also as markup diff --git a/src/functions.js b/src/functions.js index 40600a4..1c3e9b0 100644 --- a/src/functions.js +++ b/src/functions.js @@ -60,10 +60,10 @@ var ParseError = require("./ParseError"); * error messages * The function should return an object with the following keys: * - type: The type of element that this is. This is then used in - * buildTree to determine which function should be called - * to build this node into a DOM node + * buildHTML/buildMathML to determine which function + * should be called to build this node into a DOM node * Any other data can be added to the object, which will be passed - * in to the function in buildTree as `group.value`. + * in to the function in buildHTML/buildMathML as `group.value`. */ var functions = { @@ -91,8 +91,8 @@ var functions = { argTypes: ["text"], greediness: 2, handler: function(func, body) { - // Since the corresponding buildTree function expects a list of - // elements, we normalize for different kinds of arguments + // Since the corresponding buildHTML/buildMathML function expects a + // list of elements, we normalize for different kinds of arguments // TODO(emily): maybe this should be done somewhere else var inner; if (body.type === "ordgroup") { @@ -407,8 +407,8 @@ var duplicatedFunctions = [ this.lexer, positions[1]); } - // left and right are caught somewhere in Parser.js, which is - // why this data doesn't match what is in buildTree + // \left and \right are caught somewhere in Parser.js, which is + // why this data doesn't match what is in buildHTML. if (func === "\\left" || func === "\\right") { return { type: "leftright", diff --git a/src/mathMLTree.js b/src/mathMLTree.js new file mode 100644 index 0000000..0c7d441 --- /dev/null +++ b/src/mathMLTree.js @@ -0,0 +1,102 @@ +/** + * These objects store data about MathML nodes. This is the MathML equivalent + * of the types in domTree.js. Since MathML handles its own rendering, and + * since we're mainly using MathML to improve accessibility, we don't manage + * any of the styling state that the plain DOM nodes do. + * + * The `toNode` and `toMarkup` functions work simlarly to how they do in + * domTree.js, creating namespaced DOM nodes and HTML text markup respectively. + */ + +var utils = require("./utils"); + +/** + * This node represents a general purpose MathML node of any type. The + * constructor requires the type of node to create (for example, `"mo"` or + * `"mspace"`, corresponding to `` and `` tags). + */ +function MathNode(type, children) { + this.type = type; + this.attributes = {}; + this.children = children || []; +} + +/** + * Sets an attribute on a MathML node. MathML depends on attributes to convey a + * semantic content, so this is used heavily. + */ +MathNode.prototype.setAttribute = function(name, value) { + this.attributes[name] = value; +}; + +/** + * Converts the math node into a MathML-namespaced DOM element. + */ +MathNode.prototype.toNode = function() { + var node = document.createElementNS( + "http://www.w3.org/1998/Math/MathML", this.type); + + for (var attr in this.attributes) { + if (Object.prototype.hasOwnProperty.call(this.attributes, attr)) { + node.setAttribute(attr, this.attributes[attr]); + } + } + + for (var i = 0; i < this.children.length; i++) { + node.appendChild(this.children[i].toNode()); + } + + return node; +}; + +/** + * Converts the math node into an HTML markup string. + */ +MathNode.prototype.toMarkup = function() { + var markup = "<" + this.type; + + // Add the attributes + for (var attr in this.attributes) { + if (Object.prototype.hasOwnProperty.call(this.attributes, attr)) { + markup += " " + attr + "=\""; + markup += utils.escape(this.attributes[attr]); + markup += "\""; + } + } + + markup += ">"; + + for (var i = 0; i < this.children.length; i++) { + markup += this.children[i].toMarkup(); + } + + markup += ""; + + return markup; +}; + +/** + * This node represents a piece of text. + */ +function TextNode(text) { + this.text = text; +} + +/** + * Converts the text node into a DOM text node. + */ +TextNode.prototype.toNode = function() { + return document.createTextNode(this.text); +}; + +/** + * Converts the text node into HTML markup (which is just the text itself). + */ +TextNode.prototype.toMarkup = function() { + return utils.escape(this.text); +}; + +module.exports = { + MathNode: MathNode, + TextNode: TextNode +}; diff --git a/static/katex.less b/static/katex.less index e394bf7..79c0629 100644 --- a/static/katex.less +++ b/static/katex.less @@ -10,18 +10,35 @@ } } +math.katex { + font-size: 1.21em; + line-height: 1.2; +} + .katex { font: normal 1.21em KaTeX_Main; line-height: 1.2; white-space: nowrap; - .katex-inner { + .katex-html { // Making .katex inline-block allows line breaks before and after, - // which is undesireable ("to $x$,"). Instead, adjust the .katex-inner + // which is undesireable ("to $x$,"). Instead, adjust the .katex-html // style and put nowrap on the inline .katex element. display: inline-block; } + .katex-mathml { + // Accessibility hack to only show to screen readers + // Found at: http://a11yproject.com/posts/how-to-hide-content/ + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; + } + .base { display: inline-block; } diff --git a/test/huxley/Huxleyfolder/BinomTest.hux/firefox-1.png b/test/huxley/Huxleyfolder/BinomTest.hux/firefox-1.png index 2f45dc3..1ede40f 100644 Binary files a/test/huxley/Huxleyfolder/BinomTest.hux/firefox-1.png and b/test/huxley/Huxleyfolder/BinomTest.hux/firefox-1.png differ diff --git a/test/katex-spec.js b/test/katex-spec.js index 310cfbe..1b531d5 100644 --- a/test/katex-spec.js +++ b/test/katex-spec.js @@ -1,4 +1,5 @@ -var buildTree = require("../src/buildTree"); +var buildHTML = require("../src/buildHTML"); +var buildMathML = require("../src/buildMathML"); var katex = require("../katex"); var ParseError = require("../src/ParseError"); var parseTree = require("../src/parseTree"); @@ -9,10 +10,10 @@ var defaultSettings = new Settings({}); var getBuilt = function(expr) { expect(expr).toBuild(); - var built = buildTree(parseTree(expr), defaultSettings); + var built = buildHTML(parseTree(expr), defaultSettings); // Remove the outer .katex and .katex-inner layers - return built.children[0].children[2].children; + return built.children[2].children; }; var getParsed = function(expr) { @@ -87,7 +88,7 @@ beforeEach(function() { expect(actual).toParse(); try { - buildTree(parseTree(actual), defaultSettings); + buildHTML(parseTree(actual), defaultSettings); } catch (e) { result.pass = false; if (e instanceof ParseError) { @@ -1094,6 +1095,13 @@ describe("A markup generator", function() { expect(markup).toContain("margin-right"); expect(markup).not.toContain("marginRight"); }); + + it("generates both MathML and HTML", function() { + var markup = katex.renderToString("a"); + + expect(markup).toContain(" + return built.children[0]; +}; + +describe("A MathML builder", function() { + it("should generate math nodes", function() { + var node = getMathML("x^2"); + + expect(node.type).toEqual("math"); + }); + + it("should generate appropriate MathML types", function() { + var identifier = getMathML("x").children[0].children[0]; + expect(identifier.children[0].type).toEqual("mi"); + + var number = getMathML("1").children[0].children[0]; + expect(number.children[0].type).toEqual("mn"); + + var operator = getMathML("+").children[0].children[0]; + expect(operator.children[0].type).toEqual("mo"); + + var space = getMathML("\\;").children[0].children[0]; + expect(space.children[0].type).toEqual("mspace"); + + var text = getMathML("\\text{a}").children[0].children[0]; + expect(text.children[0].type).toEqual("mtext"); + }); +});