How to Build a Visual Formula Editor: From LaTeX to Interactive Editing

1. Problems to Solve

To implement a visual formula editor, several issues must be addressed:

How to convert a formula into data that a computer can understand for visual editing.

How to layout and render the formula after the computer understands it.

How to enable interactive editing once layout is solved.

How to improve editing efficiency.

2. Formula Representation

In mathematics, a formula is a combination of symbols under a specific grammar. Its structure consists of two elements: symbols and structures .

2.1 Formula Structure

2.2 Formula Languages

Defining symbols and structures with nesting capability solves the computer‑understanding problem. Common languages include LaTeX, MathML, OMML, AsciiMath, and UnicodeMath.

Examples of the same formula in different languages:

LaTeX

LaTeX is a markup language for typesetting and rendering. Example code: x=\frac{-b \pm \sqrt{{b}^{2}-4ac}}{2a} Commands such as \pm represent symbols and \frac{}{} defines a fraction structure.

AsciiMath

AsciiMath is a client‑side language for displaying mathematics in browsers.

Example code: x =(-b +- sqrt(b ^ 2 – 4ac))/(2a) The sqrt command denotes a square‑root structure.

MathML

MathML is an XML language for describing mathematical formulas. Example:

<math display="block">
  <mi>x</mi>
  <mo>=</mo>
  <mrow>
    <mfrac>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
        </msqrt>
        <mo>−</mo>
        <mn>4</mn>
        <mi>a</mi>
        <mi>c</mi>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

2.3 Why Choose LaTeX

Early creation, high market share, mature ecosystem, especially in publishing.

Stable; documents from decades ago still render correctly.

Open‑source and free.

Designed by Turing Award winners Donald Knuth and Leslie Lamport.

Industry‑standard with strong web rendering tools like MathJax and KaTeX.

3. Formula Rendering

Rendering addresses layout across different media. Sample images illustrate various layout cases.

LaTeX defines a box model and four‑level rendering (display, text, script, script‑script) to keep fonts readable at any nesting depth.

3.1 Box Model

TeX boxes have height, width, and depth. The diagram below shows a standard box with its reference point and baseline:

3.2 Four‑Level Rendering

The four levels (D, T, S, SS) control font size for display formulas, inline text, superscripts/subscripts, and nested superscripts, preventing parts of a formula from becoming illegibly small.

3.3 Rendering Solution Choice

Implementing the full TeXBook specification is costly; the project chooses the mature web renderer MathJax for its visual quality and ecosystem.

4. Formula Editing

Given the high cost of custom rendering, the editor relies on MathJax (or KaTeX) for rendering and builds an interactive layer on top of the generated DOM.

4.1 Visual Editing Implementation

LaTeX formula example: x=\frac{-b \pm \sqrt{{b}^{2}-4ac}}{2a} After rendering, two actions are required:

Map the cursor position to the corresponding LaTeX fragment (visual‑structure ↔ code mapping).

Update both the visual representation and the LaTeX source instantly after user edits.

MathJax produces an SVG DOM that closely mirrors a MathML kernel, enabling a one‑to‑one mapping between visual nodes and the underlying formula structure.

Workflow:

Input LaTeX/MathML into MathJax.

MathJax generates SVG DOM and a MathML‑based kernel, establishing node mapping.

User manipulates SVG nodes; actions are translated to kernel updates.

Kernel updates produce a new MathML formula.

The new MathML is fed back into MathJax, completing the loop.

All rendering remains handled by MathJax, ensuring visual quality.

4.2 Technical Architecture

The architecture decouples the UI layer from the rendering engine, allowing flexible business logic. (Diagram omitted for brevity.)

5. Editing Efficiency Optimization

5.1 Essence of Formula Editing

Formulas consist of symbols (e.g., π, Ω) and structures (e.g., fractions, roots). Efficiency, convenience, and correctness are key quality metrics.

5.2 Editing Path Analysis

5.2.1 Efficiency

Improving the path from mental conception to visual representation is the main efficiency goal. Two steps are required: element retrieval and insertion.

Code Editing

Code editing is fast for users familiar with the language but incurs memorization cost. Optimizations include auto‑completion, intelligent cursor detection, and syntax highlighting.

Visual Editing

Visual editing lowers the learning curve but can be slower due to element search; shortcuts, keyboard‑first design, and quick search can improve speed.

5.2.2 Quality

Code editing may introduce syntax errors; robust validation, error detection, and smart suggestions are essential. Visual editing inherently validates input, reducing quality issues.

5.3 Possible Implementation Strategies

5.3.1 Code Editing

Provide on‑hover tooltips showing the corresponding LaTeX code and brief explanations to reduce memorization cost.

5.3.2 Visual Editing

Introduce keyboard shortcuts for frequent elements and a fast search that accepts code, pinyin, or keywords.

5.3.3 Blurring the Boundary

Allow visual mode to accept raw code input and code mode to present a visual palette, giving users flexibility based on familiarity.

5.3.4 Domain‑Specific Optimizations

For specialized fields (e.g., chemistry, elementary education), supply tailored shortcuts such as H2O for water or pre‑built formula libraries.