« 2013年4月 | トップページ | 2014年4月 »

2013年5月

2013年5月26日 (日)

MathJax で可換図式 -2-

先の記事 で書いた斜め線入りの可換図式は、IEではうまく表示出来ていません。 IEは foreignObject に対応していないのが原因のようです。そこで、次のように書き換えてみました。


\(\require{AMScd}\)
\[
    \begin{CD}
        @. X\\
        @. @VVuV\\
        K @>>j> A @>>f> B
    \end{CD}
\]
<svg style="display: block; margin: -100px auto auto" width="180" height="90" viewBox="0 0 180 90">
    <path d="M70,20 l-40,30 8,-1 m-8,1 l4,-8" style="stroke:#0f0;stroke-width:0.5;fill:none" />
</svg>
<div style="margin:-70px 200px 70px; color:#0f0">
    \(\small{\bar{u}}\)
</div>
この結果がこれ↓です。 \(\require{AMScd}\) \[ \begin{CD} @. X\\ @. @VVuV\\ K @>>j> A @>>f> B \end{CD} \]
\(\small{\bar{u}}\)

2013年5月19日 (日)

MathJax で可換図式

\(\def\xypic{\mathrm{X\!_{\Large Y}\!{\tiny \boldsymbol -}pic}}\)

MathJax が v2.2 になって、CD環境が使えるようになりました。CDは Commutative Diagrams の略で、これにより可換図式を表示することが出来ます。例えば次のようなものです。
\(\require{AMScd}\) \[ \begin{CD} S^{{\mathcal{W}}_\Lambda}\otimes T @>j>> T\\ @VVV @VV{\operatorname{End} P}V\\ (S\otimes T)/I @= (Z\otimes T)/J \end{CD} \] この機能を使うには、適当な箇所に次のオマジナイを書いておきます。


<script type="text/x-mathjax-config">
    MathJax.Hub.Config({TeX: {extensions: ['AMScd.js']}});
</script>
このスクリプトの代わりに

\(\require{AMScd}\)
を \(\rm\TeX\) コードに入れても同じような効果が得られます。これについては
MathJax v2.2 : Oda 研究室
が参考になりました。

ところで、今回のこの機能、 CD(可換図式)とは言いながら、このCD環境では斜めの線が引けません。これでは満足な可換図式を扱うことが出来ません。\(\rm\TeX\) には \(\xypic\) というものが有って、それは斜め線を引くことが出来ますが、 MathJax に \(\xypic\) は導入されていません。

追記2: MathJax のみでは無理ですが、 \(\xypic\) の MathJax 対応である XyJax を併用すれば、斜め線はもちろん、もっと複雑な図式も扱えます。(当ブログの 状態遷移図を描きたい 参照)

そこで、斜め線の可換図式を書くのに行列を利用してみました。
\[ \begin{array}{ccccc} & & X & & \\ & \small{\bar{u}} \swarrow & \downarrow u & & \\ K & \longrightarrow & A & \longrightarrow & B \\ & \small{j} & & \small{f} & \end{array} \] ただし \(X\) から \(A\) への縦の射線が少しズレています。あまり綺麗とは言えません。

次に、 SVG を使って強引に斜め線を引いてみました。

追記3: タブレットで表示に不具合が生じるため、この部分の可換図式はコメントアウトしました。改良版を「MathJax で可換図式 -2-」で示しています。

この可換図式全体が SVG 画像になっています。コードは次の通りです。なお、射線の位置は、試行錯誤で探りながら決定しました。因みに、 SVG 利用の副産物として、色を部分的に変更することが可能となります。


<svg style="display:block; margin:auto" width="180" height="90" biewBox="0 0 180 90">
<foreignObject x="0" y="0" width="180" height="90">
\(\require{AMScd}\)
\(
    \begin{CD}
        @. X\\
        @. @VVuV\\
        K @>>j> A @>>f> B
    \end{CD}
\)
</foreignObject>
<foreignObject x="40" y="20" width="20" height="20" style="color:#0f0">
\(\small{\bar{u}}\)
</foreignObject>
<path d="M70,20 l-40,30 8,-1 m-8,1 l4,-8" style="stroke:#0f0;stroke-width:0.5;fill:none" />
</svg>

追記1: IEは foreignObject に対応していないのか、 SVG 内では MathJax の表示が出来ないようです。

« 2013年4月 | トップページ | 2014年4月 »