mikeo_410


 IE9とMathML、SVG

  IE9になっても、MathMLが表示できず、SVGはOKだとの認識で、MathMLからSVGへの変換をしようと思い立ちました。
  MathMLの方を調べたので、今度はSVGを調べます。
  ところがSVGもあまり上手く表示できません。

基本的な確認

  数式入力パッドやワードがカットアンドペーストにMathMLを使っていることからするとIE9がMathMLを表示しないのは不自然です。MathMLもSVGも表示する機能を持ちながら、周辺の事情で使えていないように思えます。

  MathMLを調べて知ったのは、DTDには HTMLの定義を合成したものがあることです。
  HTML中にMathMLを記述する場合、HTML記述との整合性に何か問題があると言うことだと考えます。

  ファイルの拡張子やDOCTYPE、xmlnsなど、いろいろあり複雑なので単純な xml から試します。

SVG

 左図は、Chrome の表示ですが、XML形式の場合、問題なく表示できます。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  3.  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg xmlns="http://www.w3.org/2000/svg">
  5.   <g>
  6.     <circle cx="150" cy="150" r="100" stroke="red" 
  7.             stroke-width="2" fill="none"/>
  8.     <path d="m 50 200 h 300" stroke="blue" 
  9.           stroke-width="1" />
  10.     <line x1="0%" y1="0%" x2="100%" y2="100%" 
  11.           stroke="green"/>
  12.   </g>
  13. </svg>

  一般的には、プレフィックスを付けたQName以下のようなで記すようですが、XML形式ならこれも問題ありません。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  3.  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg:svg xmlns:svg="http://www.w3.org/2000/svg">
  5.   <svg:g>
  6.     <svg:circle cx="150" cy="150" r="100" stroke="red"
  7.             stroke-width="2" fill="none"/>
  8.     <svg:path d="m 50 200 h 300" stroke="blue"
  9.           stroke-width="1" />
  10.     <svg:line x1="0%" y1="0%" x2="100%" y2="100%"
  11.           stroke="green"/>
  12.   </svg:g>
  13. </svg:svg>

  プレフィクスのない記述で、.html を記述します。

  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC
  3.     "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  6.     <head>
  7.         <meta http-equiv="Content-Type" 
  8.               content="application/xml+xhtml; charset=UTF-8" />
  9.         <title></title>
  10.     </head>
  11.     <body>
  12.         <svg xmlns="http://www.w3.org/2000/svg">
  13.           <g>
  14.             <circle cx="150" cy="150" r="100" stroke="red" stroke-width="2" 
  15.                     fill="none"/>
  16.             <path d="m 50 200 h 300" stroke="blue" stroke-width="1" />
  17.             <line x1="0%" y1="0%" x2="100%" y2="100%" stroke="green"/>
  18.           </g>
  19.         </svg>
  20.     </body>
  21. </html>

  この表示は、最初の図と異なっています。また、IE9 と Chrome でも異なっています。

IE9の表示 Chromeの表示

  緑の線は、両端の座標を比率で指定しています。100%に相当する位置が両者で異なっていると言うことだと思います。
  スクロールバーもこの差を表しています。

  もう一つ、重要なことがあります。xhtml の DTD は、SVG の宣言を含んでおらず、SVG の DTD を読み込んでいません。編集時にはSVGのタグが未定義になります。Visual Studio のエディタの場合、緑の波線の下線がタグに付いて表示されます。

  次に、以下のようにプレフィクスの付いた記述に変えて見ます。

  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC
  3.     "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  6.     <head>
  7.         <meta http-equiv="Content-Type" 
  8.               content="application/xml+xhtml; charset=UTF-8" />
  9.         <title></title>
  10.     </head>
  11.     <body>
  12.         <svg:svg xmlns:svg="http://www.w3.org/2000/svg">
  13.           <svg:g>
  14.             <svg:circle cx="150" cy="150" r="100" stroke="red" 
  15.                     stroke-width="2" fill="none"/>
  16.             <svg:path d="m 50 200 h 300" stroke="blue" stroke-width="1" />
  17.             <svg:line x1="0%" y1="0%" x2="100%" y2="100%" stroke="green"/>
  18.           </svg:g>
  19.         </svg:svg>
  20.     </body>
  21. </html>

  これは、何も表示されません。
  ファイルの拡張子を、.html から .xhtml に変えると以下のように表示されます。

IE9の表示 Chromeの表示
  1. svg プレフィクスを付けたQName表記をすると、HTMLにインラインで記述したSVGは表示されない。
  2. 拡張子を .xhtml とすると表示される。
  3. IE9では、プレフィクスの有無で表示が異なる。
  4. ウインドウのサイズに対する割合の解釈には差異があるが、表示空間を明示して使えば問題ないと考えて置く

 MathML

  残念ながら、どうやっても(MathML2、MathML3などDOCTYPEを変えても)左図のようなXMLのソースコード表示になってしまいます。
  Chromeで表示してみると、style infomation がないと表示されます。
  この線で探すと、W3C に XSLT Stylesheets for MathML on the Web があり、

  1. <?xml-stylesheet type="text/xsl" href="mathml.xsl"?>

  と、するようです。
  これは以下のように解釈できます。

  1. ページを置くサーバに、 mathml.xsl など一連のファイルを置く
  2. XSLTされたものがブラウザに送られる。
    したがって、ブラウザでローカルファイルを開いても機能しない。

  分数( 1 / 2 ) で試すと、線はないが、2行表示にはなります。
  ソースコード(XSLによる変換結果) を見ると、分数は table タグで表され、スクリプトも追加されています。
  このことからわかるのは、以下のことです。

  1. MathMLを描画する特別な仕組みはなく、HTMLのタグへの置き換えが行われる。
  2. したがって、XMLではダメで、HTMLドキュメントであることが必要
  3. さらに、分数の線などは、css に依存しており、想定されているCSS記述が別途必要

  また、CSSだけで描画する方法もあるようです。
  分数の実現方法を大枠は以下のようです。

mml.css
  1. mi { display: inline; }
  2. mn { display: inline; }
  3. mrow { display: inline; }
  4. mfrac { display:inline-table; border-collapse:collapse;
  5.         text-align:center; vertical-align:middle;}
  6. mfrac>*  { display:table-row!important; }
  7. mfrac>*:first-child { border-bottom-style:solid; 
  8.                       border-bottom-width:1pt; }
XMLFile4.xml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <?xml-stylesheet type="text/css" href="mml.css"?>
  3. <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN"
  4.            "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">
  5. <math xmlns:m="http://www.w3.org/1998/Math/MathML">
  6.   <mfrac>
  7.     <mrow>
  8.       <mn>1</mn>
  9.     </mrow>
  10.     <mrow>
  11.       <mn>2</mn>
  12.     </mrow>
  13.   </mfrac>
  14. </math>

 

  この方法は、ローカルにファイルを開く場合もOKです。また、HTMLタグに置き換えるわけではないのでXMLでも機能します。
  ただ、すべてがCSS記述に置き換えられるものなのかどうかはわかりません。

  以上のことから、以下のことが分かります。

  1. SVGと異なり、ブラウザは、MathMLのレンダラーを持っていないのかも知れない。
  2. mathplayer などのプラグインで描画する方法がある。
  3. css 記述で、MathMLのエレメントを描画する方法がある。
  4. XSLTで、HTMLタグに置き換えて描画する方法がある。

 XSLT

  以下のような xsl を使うことがあるようです。このSLTは何をしているのか調べます。

  1. <?xml-stylesheet type="text/xsl" href="http://www.w3.org/Math/XSL/mathml.xsl"?>

  以下のように記して、xsl と DTD を適用してみます。いずれもローカルにコピーしてあります。

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <?xml-stylesheet type='text/xsl' href='mathml.xsl'?>
  3. <!DOCTYPE math SYSTEM "mathml3-dtd/mathml3/mathml3.dtd">

  Visual Stuidio には、XSLTを適用するボタンがあります。

  このXSLの目的は、mml: プレフィックスを付与することが目的のようです。ソースが m: などのプレフィックスが付いている場合も、mml: に変換されます。
  サーバにあるのが、上の左の状態で、ブラウザが受け取るのは右側の状態となると言うことです。
  &sigma; は、DTDで宣言されているもので、これはブラウザが置き換えるもの考えます。

MathPlayer

  プラグインなしで表示できないらしいことが分かってきたので、MathPlayer を使って見ます。
  最小は以下のようです。ファイルの拡張子が .xhtml なら、<meta> タグの部分が無くても上手く行きます。
  これは、XSLを使ってはおらず、サーバは無関係で、ローカルファイルを直接ブラウザで開いた場合も同じ表示になります。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  5. <head>
  6.     <meta http-equiv="Content-Type" 
  7.           content="text/xhtml+xml; charset=UTF-8" />
  8.     <title></title>
  9. </head>
  10. <body>
  11. <math>
  12.   <msubsup>
  13.     <mrow>
  14.       <mi>&sigma;</mi>
  15.     </mrow>
  16.     <mrow>
  17.       <mi>s</mi>
  18.     </mrow>
  19.     <mrow>
  20.       <mn>2</mn>
  21.     </mrow>
  22.   </msubsup>
  23. </math>
  24. </body>
  25. </html>
  1. Visual Studio のウイザードが作るHTMLファイルの拡張子を .xhtml にすれば、MathPlayer が起動されMathML記述分が表示されます。
  2. Visual Studio のウイザードが作るHTMLファイルの拡張子をhtm、html のままとするなら、、<meta> タグの宣言をすると表示されます。
  3. この状態では、MathMLのDTDを読み込んでいません。編集中は、MathML記述は未定義のタグとして警告が表示されます。
  4. <m:math xmlns:m="http://www.w3.org/1998/Math/MathML"> のような、プレフィックスの指定は上手く行きません。

 



 


mikeo_410@hotmail.com