Webによる数式表示(等倍)

概要

数式の大きさを特に指定せずにCodeCogsとGoogle Chart APIで描画した例を示します。

CODECOGS SVG

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
<img alt="x=¥frac{-b ¥pm ¥sqrt{b^2-4ac}}{2a}" class="codecogsvg"/>
<script type="text/javascript">
$("img:.codecogsvg").each(function(){
  var s=$(this).attr("alt");
  var g='http://latex.codecogs.com/svg.latex?¥¥dpi{100} '+encodeURIComponent(s);
  $(this).attr("src",g);
});
</script>
</body>
</html>

Latexの数式はimgタグのalt属性に記述しています。imgタグのクラス名をcodecogsvgとします。
JQuery+JavaScriptによりファイルの読み込み時にimgタグでクラス名がcodecogsvgのオブジェクトを抽出し、alt属性に記述されているLaTexの数式を取得しencodeURIComponentによりエンコードしcodecogsのURLを付加しsrc属性に設定します。設定時点でcodecogsから数式の画像が取得されます。
URLでsvgと記述している部分が画像の種類、dpi{}の中の数値が数式の画像の大きさを表しています。
最終的にsrc属性は以下の内容となります。

http://latex.codecogs.com/svg.latex?\dpi{100} x%3D%5Cfrac%7B-b%20%5Cpm%20%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D

$x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}$ サンプルページ

CODECOGS PNG

前項のSVG形式をPNGにした例です。
imgタグのsrc属性で前項のsvgと記述している部分をpngにすればPNG形式で数式が表示されます。
以下の例ではloadイベントを登録し描画終了時に画像サイズを取得し表示しています。
画像サイズの取得が必要なければaddEventListenerの行とtex_loada関数は不要です。
最終的にsrc属性は以下の内容となります。

http://latex.codecogs.com/png.latex?\dpi{100} x%3D%5Cfrac%7B-b%20%5Cpm%20%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
<img alt="x=¥frac{-b ¥pm ¥sqrt{b^2-4ac}}{2a}" class="codecogpng" /><br />
<script type="text/javascript">
function tex_loada(e){
   var img=e.target;
   img.removeEventListener("load", tex_loada,false);
   //要素の直後に追加
   var s = document.createElement('span');
   s.textContent = img.naturalWidth+"*"+img.naturalHeight;
   img.parentNode.insertBefore(s, img.nextSibling);
}

$("img:.codecogpng").each(function(){
  var g;
  var s=$(this).attr("alt");
  g='http://latex.codecogs.com/png.latex?¥¥dpi{100} '+encodeURIComponent(s);
  var o=this;
  o.addEventListener('load',tex_loada,false);
  $(this).attr("src",g);
});
</script>
</body>
</html>

$x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}$ サンプルページ

Google Chart API jpg

Latexの数式はimgタグのalt属性に記述しています。imgタグのクラス名googleapiをとします。
JQuery+JavaScriptによりファイルの読み込み時にimgタグでクラス名がgoogleapiのオブジェクトを抽出し、alt属性に記述されているLaTexの数式を取得しencodeURIComponentによりエンコードしGoogle APIのURLを付加しsrc属性に設定します。設定時点でGoogle Chart APIから数式の画像が取得されます。
URLでjpgと記述している部分が画像の種類を表しています。
以下の例ではloadイベントを登録し描画終了時に画像サイズを取得し表示しています。
画像サイズの取得が必要なければaddEventListenerの行とtex_loadag関数は不要です。
最終的にsrcタグは以下の内容となります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
<img alt="x=¥frac{-b ¥pm ¥sqrt{b^2-4ac}}{2a}" class="googleapi"/>

<script type="text/javascript">

function tex_loadag(e){
   var img=e.target;
   img.removeEventListener("load", tex_loadag,false);
   //要素の直後に追加
   var s = document.createElement('span');
   s.textContent = img.naturalWidth+"*"+img.naturalHeight;
   img.parentNode.insertBefore(s, img.nextSibling);
   document.google_Form.textf.value=img.outerHTML;
}

$("img:.googleapi").each(function(){
  var g;
  var s=$(this).attr("alt");
  g='http://chart.apis.google.com/chart?cht=tx&chl='+encodeURIComponent(s)+'}&chof=jpg';
  var o=this;
  o.addEventListener('load',tex_loadag,false);
  $(this).attr("src",g);
});
</script>
</body>
</html>

$x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}$ サンプルページ

MathJax

Latexの数式はimgタグのalt属性に記述しています。imgタグのクラス名をmathjaxconvとします。
JQuery+JavaScriptによりファイルの読み込み時にimgタグでクラス名がmathjaxconvのオブジェクトを抽出し、alt属性に記述されているLaTexの数式を取得します。 imgタグの次にspanタグを新規に作成します。
spanタグの中に先ほどのLaTexの式の前後に¥( ¥)を付加します。
imgタグのalt属性はimgで指定する画像がないためalt属性が表示されないようにクリアします。
なお分数式の場合、行の大きさに合わせて小さく表示されるので¥displaystyle をLaTexの式の前に付加します。
最終的に追加されたspanタグの中はMathJaxによりMathMLのコードが付加され数式が表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: { matchFontHeight: false }
});
</script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>
</head>

<body>
<img alt="¥displaystyle x=¥frac{-b ¥pm ¥sqrt{b^2-4ac}}{2a}" class="mathjaxconv" /><br />

<script type="text/javascript">
 $("img:.mathjaxconv").each(function(){
   var g=$(this).attr("alt");
   var img=this;
   var s = document.createElement('span');
   img.parentNode.insertBefore(s, img.nextSibling);
   s.textContent ="¥¥("+g+"¥¥)";
   $(this).attr("alt","");
 });
</script>
</body>
</html>

$\displaystyle x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}$ サンプルページ

ページのトップへ戻る

山本ワールド

Webによる数式表示(等倍)

概要

CODECOGS SVG

CODECOGS PNG

Google Chart API jpg

MathJax