Equation 数学公式
数学公式组件(自研简化 LaTeX 子集,零第三方公式引擎),覆盖高中/大学常用公式:上下标、分数、根号、求和/积分(带上下限)、希腊字母与常用运算符。
上下标
上标 / 下标
^ 上标、_ 下标,单字符 x^2 或花括号 z_{max} 均可。
分数
分数
\frac{分子}{分母} 渲染为竖式分数(分子/分母上下堆叠 + 横线)。
根号
根号
\sqrt{被开方数};可选根指数 \sqrt[3]{y}。
求和 / 积分
求和 / 积分(带上下限)
\sum_{下限}^{上限} / \int_{下限}^{上限} 自动排版上下限。
希腊字母与运算符
希腊字母 + 运算符
\alpha 等希腊字母与 \times \div \pm \cdot \leq \geq \neq \approx \infty 等常用运算符自动映射。
未知命令
未知命令按字面显示
未知命令按字面显示,不报错。
块级公式
display=block(独立居中行)
行间公式(独立居中、上下留白)用 display="block";字号不放大,跟随外层。
注入渲染引擎
engine 注入(薄壳委托)
注入兼容 TeX 渲染引擎对象(engine property,renderToString 协议)后组件转为薄壳委托渲染——本 demo 用 mock 引擎演示协议(虚线框即引擎产物)。零依赖场景不注入即走自研子集。
引擎路径与自研路径的边界:
- DOM:引擎产物以 innerHTML 直出(引擎自带类名/字体在其内部生效);自研路径为 span 堆叠 + CSS 排版。两条路径 aria-label 均为原始 LaTeX。
- 错误态:均为静默降级——自研未知命令按字面显示;引擎渲染抛错自动回退自研子集渲染,不空白。
- SSR:快照只走属性通道(attribute),
engine是 property——SSR 输出恒为自研子集渲染;需要引擎 SSR 时宿主在服务端注入同一引擎对象。
字号定制
字号默认跟随外层 font-size(继承),可用 CSS 变量 --oas-equation-font 显式定制(如 18px)。
API
oas-equation
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
code | LaTeX 子集源文本 | string | — |
display | 显示模式:inline(默认,随文)/ block(独立居中块,margin-block 间距) | string | — |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-equation-block-margin | var(--oas-space-4) |
--oas-equation-font | inherit |
ARIA
容器 aria-label = 原始 LaTeX 源文本,屏幕阅读器直接朗读公式源。
边界
- 文本全部 HTML 转义,杜绝注入
- 空
code渲染空容器,不报错