Equation

A math formula component (self-developed simplified LaTeX subset, zero third-party formula engine) covering common high-school / university formulas: superscripts/subscripts, fractions, square roots, summation/integration (with limits), Greek letters, and common operators.

Superscripts and Subscripts

Superscript / subscript

Example

^ superscript, _ subscript; both single characters x^2 and braced forms z_{max} work.

Fractions

Fraction

Example

\frac{numerator}{denominator} renders as a vertical fraction (numerator/denominator stacked with a horizontal line).

Square Roots

Square root

Example

\sqrt{radicand}; an optional root index \sqrt[3]{y} is supported.

Summation / Integration

Summation / integration (with limits)

Example

\sum_{lower}^{upper} / \int_{lower}^{upper} automatically typesets the limits.

Greek Letters and Operators

Greek letters + operators

Example

Greek letters like \alpha and common operators such as \times \div \pm \cdot \leq \geq \neq \approx \infty are mapped automatically.

Unknown Commands

Unknown commands shown literally

Example

Unknown commands are displayed literally without errors.

Block Formula

display=block (centered display line)

Example

Use display="block" for display math (centered standalone line with vertical margin); font size is not enlarged and follows the outer context.

Injecting a Rendering Engine

engine injection (thin-shell delegation)

Once a TeX-compatible engine object (the engine property, renderToString protocol) is injected, the component becomes a thin shell delegating rendering — this demo uses a mock engine to demonstrate the protocol (the dashed box is the engine output). Without an injection, the self-developed subset renderer is used with zero dependencies.

Example

Boundaries between the engine path and the self-developed path:

• DOM: engine output is written as innerHTML (the engine's own classes/fonts apply inside it); the self-developed path uses stacked spans + CSS layout. Both paths set aria-label to the raw LaTeX.
• Error state: both degrade silently — unknown commands render literally in the self-developed path; if the engine throws, rendering falls back to the self-developed subset (no blank output).
• SSR: the snapshot only carries attribute channels — engine is a property, so SSR output is always the self-developed subset; for engine SSR, inject the same engine object on the server.

Font Size

Font size follows the outer context (inherited) by default; override with the CSS variable --oas-equation-font (e.g. 18px).

API

oas-equation

Attributes

Attribute	Description	Type	Default
code	LaTeX subset source text	string	—
display	Display mode: inline (default, in-flow) / block (standalone centered block with margin-block)	string	—

CSS Variables

CSS Variable	Default
--oas-equation-block-margin	var(--oas-space-4)
--oas-equation-font	inherit

ARIA

The container's aria-label equals the raw LaTeX source text, so screen readers read the formula source directly.

Boundaries

• All text is HTML-escaped to prevent injection
• Empty code renders an empty container without errors