description

this is a small engine for calculating the layout of math-formulae.
unlike katex it produces a fixed layout in pojo format which can then be rendered to canvas.

try it live!

installation

npm install @flurrux/math-layout-engine

or add it to the dependencies

// package.json
...
"dependencies": {
    "math-layout": "@flurrux/math-layout-engine"
}
...

documentation

https://flurrux-math-layout-docs.netlify.app/

usage

layout a formula and render it

import { 
    layoutFormula, 
    centerNodeOnCanvas, renderFormulaLayout, loadKatexFontFaces
} from '@flurrux/math-layout-engine';

const formula = {
    "type": "mathlist",
    "items": [
        { "type": "ord", "value": "1" },
        { "type": "bin", "value": "+" },
        { "type": "ord", "value": "2" },
        { "type": "bin", "value": "+" },
        { "type": "ord", "value": "3" },
        { "type": "bin", "value": "+" },
        { "type": "ord", "value": "⋯" },
        { "type": "rel", "value": "=" },
        { "type": "ord", "value": "-" },
        {
            "type": "fraction",
            "numerator": { "type": "ord", "value": "1" },
            "denominator": { "type": "ord", "text": "12" }
        }
    ]
};
const layoutedFormula = layoutFormula(formula);

//render the formula
document.body.insertAdjacentHTML("beforeend", `
    <canvas id="math-canvas" width=800 height=400></canvas>
`);
const canvas = document.querySelector("#math-canvas");
const ctx = canvas.getContext("2d");
//loading the fonts is asynchronous
loadKatexFontFaces().then(
    () => renderFormulaLayout(canvas, ctx, centerNodeOnCanvas(canvas, layoutedFormula))
);

examples

{
    type: "mathlist",
    items: [
        { type: "ord", value: "f" },
        { type: "open", value: "(" },
        { type: "ord", value: "x" },
        { type: "close", value: ")" },
        { type: "rel", value: "=" },
        { type: "ord", value: "x" },
        { type: "bin", value: "*" },
        { type: "open", value: "(" },
        { type: "ord", value: "x" },
        { type: "ord", value: "+" },
        { type: "ord", value: "1" },
        { type: "close", value: ")" },
    ]
}

credits

i used katex as a reference for my renderings.
also the font-data and fonts are directly taken from katex.

furthermore i tried to implement the algorithms as described in the texbook (starting at page 440) where it was possible. it still differs at some places though and i'm not sure if i understand them correctly.