# 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

<DemoBlock title="Superscript / subscript">
  <div style="width: 100%">
    <oas-equation code="x^2 + y_1 = z_{max}"></oas-equation>
  </div>
</DemoBlock>

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

## Fractions

<DemoBlock title="Fraction">
  <div style="width: 100%">
    <oas-equation code="\frac{a}{b} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}"></oas-equation>
  </div>
</DemoBlock>

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

## Square Roots

<DemoBlock title="Square root">
  <div style="width: 100%">
    <oas-equation code="\sqrt{x + 1} + \sqrt[3]{y}"></oas-equation>
  </div>
</DemoBlock>

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

## Summation / Integration

<DemoBlock title="Summation / integration (with limits)">
  <div style="width: 100%">
    <oas-equation code="\sum_{i=1}^{n} i = \frac{n(n+1)}{2}"></oas-equation>
    <br /><br />
    <oas-equation code="\int_{0}^{1} x^2 \, dx = \frac{1}{3}"></oas-equation>
  </div>
</DemoBlock>

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

## Greek Letters and Operators

<DemoBlock title="Greek letters + operators">
  <div style="width: 100%">
    <oas-equation code="\alpha \cdot \beta = \gamma \times \delta \div \epsilon \leq \pi \approx \infty"></oas-equation>
  </div>
</DemoBlock>

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

## Unknown Commands

<DemoBlock title="Unknown commands shown literally">
  <div style="width: 100%">
    <oas-equation code="\unknowncmd{x} + y"></oas-equation>
  </div>
</DemoBlock>

Unknown commands are displayed literally without errors.

## Block Formula

<DemoBlock title="display=block (centered display line)">
  <div style="width: 100%">
    <oas-equation code="\sum_{i=1}^{n} i^2 = \frac{n(n+1)(2n+1)}{6}" display="block"></oas-equation>
  </div>
</DemoBlock>

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

## Injecting a Rendering Engine

<DemoBlock title="engine injection (thin-shell delegation)">
  <div style="width: 100%">
    <oas-equation id="eq-engine" code="\oint_C x\,dx + y\,dy"></oas-equation>
    <p style="margin: var(--oas-space-2) 0 0; color: var(--oas-color-text-secondary); font-size: var(--oas-font-size-sm)">
      Once a TeX-compatible engine object (the <code>engine</code> property, <code>renderToString</code> 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.
    </p>
  </div>
</DemoBlock>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  customElements.whenDefined('oas-equation').then(() => {
    const eq = document.querySelector('#eq-engine')
    if (!eq) return
    // Mock engine demonstrating the renderToString(code, options) injection protocol
    // (in a real app, swap in a full TeX-compatible engine such as KaTeX).
    eq.engine = {
      renderToString: (code) =>
        `<span style="border: 1px dashed var(--oas-color-primary); border-radius: var(--oas-radius-sm); padding: 2px 8px; font-family: serif">⟦ ${code.replace(/</g, '&lt;')} ⟧</span>`,
    }
  })
})
</script>

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