amp-mathml
Description
Displays a MathML formula.
Required Scripts
<script async custom-element="amp-mathml" src="https://cdn.ampproject.org/v0/amp-mathml-1.0.js"></script>
Supported Layouts
Usage
Renders a MathML formula in an iframe.
The example below displays the quadratic formula:
<amp-mathml layout="container" data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]" > </amp-mathml>
The example below displays Cauchy's integral formula:
<amp-mathml layout="container" data-formula="\[f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz\]" > </amp-mathml>
The example below displays a double angle formula for cosines:
<amp-mathml layout="container" data-formula="$$ \cos(θ+φ)=\cos(θ)\cos(φ)−\sin(θ)\sin(φ) $$" > </amp-mathml>
Inline formula
This is an example of a formula of <amp-mathml layout="container" inline data-formula="`x`"></amp-mathml>
, <amp-mathml layout="container" inline data-formula="\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)"></amp-mathml>
placed inline in the middle of a block of text. <amp-mathml layout="container" inline data-formula="\( \cos(θ+φ) \)"></amp-mathml>
This shows how the formula will fit inside a block of text and can be styled with CSS.
Standalone Use outside valid AMP documents
Bento allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide Use AMP components in non-AMP pages.
To find the standalone version of amp-mathml
, see bento-mathml
.
Attributes
data-formula (required)
Specifies the formula to render.
inline (optional)
If specified, the component renders inline (inline-block
in CSS).
title (optional)
Define a title
attribute for the component to propagate to the underlying <iframe>
element. The default value is "MathML formula"
.
Validation
See amp-mathml rules in the AMP validator specification.
Version Notes
The 1.0 version of amp-mathml will, by default, only render formulas when they are offscreen to avoid layout shifts that would negatively impact the Page Experience (PX). If a formula is onscreen, it will resize to its correct size dynamically when the user has scrolled the formula out of the viewport. When the component returns to the viewport, they formula should be rendered. For best experience, it is recommended to provide the dimensions of the formula using height
and width
attributes so formulas onscreen are rendered immediately without causing a layout shift.
このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。
Stack Overflow にアクセスする バグや不足している機能がありますか?AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub にアクセスする