WebKitとGeckoのMathMLレンダリングの違い

なにはともあれMathJaxから.

$$x = \frac{-b\pm\sqrt{b^2-4 a c}}{2 a}$$

$$x = \frac{-b\pm\sqrt{b^2-4 a c}}{2 a}$$

$$|x| = \begin{cases}x&(x\geqq0)\\-x&(x<0)\end{cases}$$ $$ \sqrt[n]{a}\sqrt[n]{b} = \sqrt[n]{a b},\quad \sqrt[n]{\sqrt[m]{a}} = \sqrt[n m]{a} $$ $$ \overline{x+y}=\overline{x}+\overline{y},\quad \overline{\left(\frac{x}{y}\right)} = \frac{\overline{x}}{\overline{y}} $$ $$f'(x)=\lim_{h\to0}\frac{f(x+h)-f(x)}{h}$$ $$\frac{d}{dx}\int_{a}^{x}f(t)\,dt = f(x)$$ $$\sum_{k=1}^n\sin k = \frac{ \displaystyle\sin\frac{n+1}{2}\sin\frac{n}{2} } { \displaystyle\sin\frac{1}{2} } $$ $$ \cos n\theta = \sum_{k=0}^{\lfloor n/2\rfloor}(-1)^k\frac{n}{n-k}\binom{n-k}{k} 2^{n-2k-1}\cos^{n-2k}\theta $$ $$ \begin{pmatrix} \cos\alpha & -\sin\alpha\\ \sin\alpha & \cos\alpha \end{pmatrix} \begin{pmatrix} \cos\beta & -\sin\beta\\ \sin\beta & \cos\beta \end{pmatrix} =\begin{pmatrix} \cos(\alpha+\beta) & -\sin(\alpha+\beta)\\ \sin(\alpha+\beta) & \cos(\alpha+\beta) \end{pmatrix} $$ $$\forall \epsilon>0\quad
\exists\delta>0\quad |x-a|<\delta\Longrightarrow |f(x)-f(a)|<\epsilon $$

申し分ありません.

次はmacOSのWebKit (Safari)のスクリーンショットです.

これでもかなり見られる品質になりました.

次は大御所のGecko (Firefox)です.

素晴らしいです.この例で一つだけ気になるのは二項係数のレンダリングが上下に寄っているくらいです.二項係数は分数の横棒の太さを0にして表現するのが慣わしらしく,仕様書にも次のような記述があります.

A fraction with linethickness=”0″ renders without the bar, and might be used within binomial coefficients.
https://www.w3.org/TR/REC-MathML/chap3_3.html#sec3.3.2

余談ですが,分数でないものを分数で,それも横棒の太さを0にして描写するというのはどうもセマンティックな感じがしませんが……

気づきうるWebKitの課題は

  • 根号が窮屈
  • 分数が窮屈
  • オーバーラインが横に伸びない.
  • 括弧が縦方向に伸びない.
  • 積分記号が縦方向に伸びない.

といったところでしょうか.

上記のサンプルは画像ですが,実際のMathMLを次に示しておきます.お使いのブラウザで確認してみてください.

x=b±b24ac2a

|x|={x(x0)x(x<0)

anbn=abn,amn=anm

x+y=x+y,(xy)=xy

f(x)=limh0f(x+h)f(x)h

ddxaxf(t)dt=f(x)

k=1nsink=sinn+12sinn2sin12

cosnθ=k=0n/2(1)knnk(nkk)2n2k1cosn2kθ

(cosαsinαsinαcosα)(cosβsinβsinβcosβ)=(cos(α+β)sin(α+β)sin(α+β)cos(α+β))

ϵ>0δ>0|xa|<δ|f(x)f(a)|<ϵ

コメントする