\n\n';
// ==========================================================================
AA2='\n\n';
BB0=htmlescape(AA1); // htmlのエスケープ文字の処理。
BB1=com_col(BB0); // コメント部のみ、文字色を変更
document.getElementById("intro_1").innerHTML=BB1;
BB2=htmlescape(AA2);
document.getElementById("intro_2").innerHTML=BB2;
DISP1=document.getElementById("disp1"); // TeX記法を表示する小窓
DISP2=document.getElementById("disp2"); // その中にあるTeX記法欄
WAIT=document.getElementById("wait"); // 表示完了待機中の注意書き
TRIAL=document.getElementById("trial"); // 「使ってみる」ボタン
TRIWIN=document.getElementById("tri_win"); // 「使ってみる」小窓
RETBACK=document.getElementById("retback"); // その中の「隠す」ボタン
TEXTIN=document.getElementById("text_in"); // その中のTeX記法入力欄
TOTEX=document.getElementById("to_TeX"); // その中の「変換」ボタン
TEXOUT=document.getElementById("TeX_out"); // その中のTeX出力欄
CHANGE=document.getElementById("change"); // 「id設定」の「変更」ボタン
// リロードしても、以前の入力が消えずに残ることがあるので、強制リセット。
TEXTIN.value="";
TEXTIN.placeholder="ここにTeX記法で入力。\n一部の簡単なHTMLタグ( ,
など )も使用可能。";
TEXOUT.style.fontWeight="bold"; // TeX出力欄、初期表示のときだけ太字
WW0=document.body.clientWidth; // bodyの幅(スクロールバーは含まない)
WW1=parseFloat(WW0)+68; // スクロールバーを除いたブラウザ画面の表示窓の幅
// 68=2*(30+2+2) html-boxのpadding, border, margin
WW2=WW1/2-120; // 表示完了待機中ラベルの左端位置(120:ラベル幅の半分)
WAIT.style.left=String(WW2) + "px";
WAIT.style.display="inline"; // 初期は可視状態
Bfam=document.getElementsByTagName("b"); // bタグ(早見用のTeX文字収容)の拾い出し
MathJax.Hub.Queue( function() { // MathJaxの描画が完了したときの処理を予約。
WAIT.style.background="green"; // 表示完了待機中ラベルの表示を「完了」にする
WAIT.innerHTML="完
了";
setTimeout("re_rend()",500); // 表示完了後、0.5秒の確認時間を置き、「追加変換」処理へ。
setTimeout("init2()",1000); // 「完了」の表示を1秒間継続し、本来の処理へ移行。
});
}
// ■■■
function init2() {
All_child=document.body.children;
// リサイズ時に、それまで注目していたターゲットが画面外に消失しないようにスクロ
// ール制御するため、body内の全ての子要素の位置を把握できるよう準備しておく。
// なお、この処理は、MathJaxの全描画が終わったあとで行わないと、MathJaxが作った
// 一時的なタグまで拾い出してしまうので、処理のタイミングはここが最適。
// 注: 各種ブラウザ(Edge, IE11, Firefox, Chrome)のうち、
// Chromeが拾ったbr要素の一部は、getBoundingClientRect()で取得するtopの値
// が異常値(0)になることがある(バグらしい)。この対策も必要。
Pos_id=[]; // 全子要素のうち、必要な子要素だけを拾い出すための配列。
Pos_id.push(document.getElementsByTagName("html")[0]);
// 位置を把握するために準備する最初の要素は、画面の最上端にあるhtmlタグとする。
// (All_childは、body内だけのchildrenを拾ったものなので、最上端までは含んでいない。)
Nc=All_child.length;
for(var i=1; i
") ; // \rはCR, \nはLF。
tx = tx.replace(/ /g," ") ;
return tx ;
}
// ■■■
function re_rend() { // 「追加変換」(MathJax.Hub.Queue の動作確認デモ)をする。
var AD1 = document.getElementById("add_1");
var AD2 = document.getElementById("add_2");
var Content = "$\\displaystyle\\int_{-\\pi}^{\\pi}$";
AD1.innerHTML = Content;
AD2.innerHTML = Content;
MathJax.Hub.Queue(["Typeset",MathJax.Hub,AD2]);
return;
}
// ■■■
function Mouse_Down(event) {
var ET=event.target; // クリックされたノード
var EP=ET.parentNode; // その親ノード
var EG=EP.parentNode; // さらに、その親のノード
if(ET==CHANGE) { // 「変更」ボタンがクリックされたとき
RCB=document.getElementsByClassName("RotColBig");
PART1=document.getElementById("part1"); // MathJax で設定された id や class は、
PART2=document.getElementById("part2"); // html のタグ内で設定されたものと比べて、
PART3=document.getElementById("part3"); // 特性がやや異なる。
PART4=document.getElementById("part4"); // id で get したオブジェクトは、イベン
PART5=document.getElementById("part5"); // ト処理以前のinit()などの中で他の変数
PART6=document.getElementById("part6"); // に置き換えても認識されない。ここで置
PART7=document.getElementById("part7"); // き換えればOK。
PART8=document.getElementById("part8"); // class で get したオブジェクトは、こ
PART9=document.getElementById("part9"); // こ以前で置き換えても有効。ただし、index
PARTA=document.getElementById("partA"); // は[0],[1],[2]...でなく、[0],[2],[4]...。
switch (change_N) {
case 0:
PART1.style.opacity="0";
PART2.style.opacity="0";
PART3.style.opacity="0";
PART4.style.opacity="0";
PART5.style.opacity="0";
PART6.style.opacity="0";
PART7.style.color="black";
PART8.style.transform="scale(-1,1)";
PART9.style.fontSize="50%";
PARTA.style.display="none";
RCB[0].style.color="black";
RCB[2].style.color="black";
RCB[4].style.color="black";
break;
case 1:
PART1.style.opacity="1";
PART2.style.opacity="0";
PART3.style.opacity="0";
PART4.style.opacity="1";
PART5.style.opacity="0";
PART6.style.opacity="0";
PART7.style.color="blue";
PART8.style.transform="scale(1,1)";
PART9.style.fontSize="150%";
PARTA.style.display="inline";
RCB[0].style.color="blue";
RCB[2].style.color="blue";
RCB[4].style.color="blue";
break;
case 2:
PART1.style.opacity="1";
PART2.style.opacity="1";
PART3.style.opacity="0";
PART4.style.opacity="1";
PART5.style.opacity="1";
PART6.style.opacity="0";
PART7.style.color="lime";
PART8.style.transform="scale(1,-1)";
PART9.style.fontSize="120%";
PARTA.style.display="none";
RCB[0].style.color="silver";
RCB[2].style.color="silver";
RCB[4].style.color="silver";
break;
case 3:
PART1.style.opacity="1";
PART2.style.opacity="1";
PART3.style.opacity="1";
PART4.style.opacity="1";
PART5.style.opacity="1";
PART6.style.opacity="1";
PART7.style.color="fuchsia";
PART8.style.transform="scale(1,1)";
PART9.style.fontSize="100%";
PARTA.style.display="inline";
RCB[0].style.color="orange";
RCB[2].style.color="orange";
RCB[4].style.color="orange";
break;
}
change_N+=1;
change_N = change_N>3 ? 0 : change_N;
return;
}
if(ET==TRIAL) { // 「使ってみる」がクリツクされたら、そのための小窓を表示する。
TRIWIN.style.display="inline";
TRIAL.style.display="none"; // 「使ってみる」ボタンは非表示にする。
return;
}
if(ET==RETBACK) { // 「隠す」がクリックされたら、小窓を非表示にする。
TRIWIN.style.display="none";
TRIAL.style.display="inline"; // 「使ってみる」ボタンを再表示する。
return;
}
if(ET.className=="sample") { // 入力サンブルの各番号がクリックされたとき、
TEXTIN.focus(); // その番号に応じた文字列をTeX入力欄に表示する。
switch (ET.id) {
case "sample01":
Sstr='MathJaxは、ウェブページ上に綺麗な数式を表示するためのオープンソースのツールです。例えば、$e^{i\\theta}=\\cos\\theta+i\\sin\\theta$ のように表示されます。
両端を\\$と\\$で囲むのは、この内側が数式であることを宣言する一つの方法です。\n
(入力サンプル:1)';
break;
case "sample02":
Sstr='両端を\\begin{align}と\\end{align}で囲むと、別行立ての数式になります。例えば、\n\\begin{align}\nx=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}\n\\end{align}\n(入力サンプル:2)';
break;
case "sample03":
Sstr='\\begin{align}\n&\\int_V\\mathrm{div}\\boldsymbol{D}\\,\\mathrm{d}V\n=\n\\int_{\\delta V}\\hspace{-0.6em}\\boldsymbol{D}\\!\\cdot\\!\\,\\mathrm{d}\\boldsymbol{S}\n=\n\\mathop{\\small\\sum}_k q_k\\hspace{3em}{\\small\\text{ガウスの定理}}\\\\\n&\\int_S\\mathrm{rot}\\boldsymbol{H}\\!\\cdot\\!\\mathrm{d}\\boldsymbol{S}\n=\n\\int_{\\delta S}\\hspace{-0.6em}\\boldsymbol{H}\\!\\cdot\\!\\mathrm{d}\\boldsymbol{s}\n=\n\\sum_k i_k\\hspace{3.1em}{\\small\\text{ストークスの定理}}\n\\end{align}\n標準の $\\Sigma$ 記号が大きめなので、一行目だけ小さくしてみました。\n
(入力サンプル:3)';
break;
case "sample04":
Sstr='\\begin{align*}\n&F(s)\n=\n\\int_0^\\infty\\hspace{-0.6em}f(t)e^{-st}\\mathrm{d}t\\hspace{5.3em}{\\small\\text{ラプラス変換}}\\\\\n&f(t)\n=\n\\frac{1}{2\\pi i}\\int_{\\sigma-i\\infty}^{\\sigma+i\\infty}\\hspace{-0.6em}F(s)e^{st}\\mathrm{d}s\\hspace{2.5em}{\\small\\text{ラプラス逆変換}} \n\\end{align*}\n(入力サンプル:4)';
break;
case "sample05":
Sstr='\\begin{align*}\n&\\nabla\\!\\cdot\\!\\boldsymbol{D}=\\rho\\\\\n&\\nabla\\!\\times\\!\\boldsymbol{E}\n=\n-\\frac{\\partial\\boldsymbol{B}}{\\partial t}\\\\\n&\\nabla\\!\\cdot\\!\\boldsymbol{B}=0\\\\\n&\\nabla\\!\\times\\!\\boldsymbol{H}\n=\n\\boldsymbol{i}+\\frac{\\partial\\boldsymbol{D}}{\\partial t}\\\\\n&\\boldsymbol{D}=\\varepsilon\\boldsymbol{E}\n\\hspace{2em}\n\\boldsymbol{B}=\\mu\\boldsymbol{H} \n\\end{align*}(入力サンプル:5)';
break;
case "sample06":
Sstr='\\begin{align}\n\\left[\n\\begin{array}{c}\ni_d\\\\\ni_q\n\\end{array}\n\\right]\n=\n\\sqrt{\\frac{2}{3}}\n\\left[\n\\begin{array}{ccc}\n\\cos\\theta&\\hspace{-0.6em}\\cos(\\theta-\\frac{2\\pi}{3})&\\hspace{-0.6em}\\cos(\\theta+\\frac{2\\pi}{3})\\\\\n\\ -\\sin\\theta\\ &\\hspace{-0.6em}-\\sin(\\theta-\\frac{2\\pi}{3})&\\hspace{-0.6em}-\\sin(\\theta+\\frac{2\\pi}{3})\n\\end{array}\n\\right]\n\\!\\cdot\\!\n\\left[\n\\begin{array}{c}\ni_u\\\\\ni_v\\\\\ni_w\n\\end{array}\n\\right]\n\\end{align}\n(入力サンプル:6)';
break;
case "sample07":
Sstr='\n\\begin{align}\n\\left[\n\\begin{array}{c}\nv_{sd}\\\\[0.8ex]\nv_{sq}\\\\[0.8ex]\n0\\\\[0.8ex]\n0\n\\end{array}\n\\right]\n=\n\\left[\n\\begin{array}{cccc}\nR_s+pL_s & -\\omega L_s & pM & -\\omega M\\\\[0.8ex]\n\\omega L_s & R_s+pL_s & \\omega M & pM\\\\[0.8ex]\npM & -(\\omega-\\omega_r)M & R_r+pL_r & -(\\omega-\\omega_r)L_r\\\\[0.8ex]\n(\\omega-\\omega_r)M & pM & (\\omega-\\omega_r)L_r & R_r+pL_r\n\\end{array}\n\\right]\n\\cdot\n\\left[\n\\begin{array}{c}\ni_{sd}\\\\[0.8ex]\ni_{sq}\\\\[0.8ex]\ni_{rd}\\\\[0.8ex]\ni_{rq}\n\\end{array}\n\\right]\n\\end{align}\n\n(入力サンプル:7)';
break;
case "sample08":
Sstr='\n$\n\\textcolor{red}{\\alpha}\n\\textcolor{green}{\\beta}\n\\textcolor{blue}{\\gamma}\n$\n\n
(入力サンプル:8)';
break;
case "sample09":
Sstr='ブラウザの種類による表示の差:
この数式は Edge, Chrome, Firefox では正常に表示されるが、IE11 では少々崩れる("$\\sigma=$"の位置が低い)
\\begin{align}\n\\sigma=\\sqrt{\\frac{1}{N}\\sum_{i=1}^N(x_i-\\mu)^2}\n\\end{align}平方根記号の斜線が垂直過ぎるのは、全ブラウザに共通の問題
(入力サンプル:9)';
break;
case "sample10": // "X" がクリックされたとき、TeX入力欄をクリアする。
Sstr="";
break;
}
TEXTIN.value=Sstr; // 上で設定した文字列をTeX入力欄に表示。
// 備忘メモ:
// IE11では、.value の代わりに.innerHTMLとしてもOKだが、
// Chrome, Firefox では、.value 以外は受け付けない。
// textareaに文字列を代入した結果は、
// divなどに代入した結果とは異なる。
// textareaでは、
// \nは改行して表示される。
// 連続空白はそのまま連続して表示される。
// divでは、
// \nは空白1文字と置き換わる。
// 連続空白は空白1文字と置き換わる。
return;
}
if(ET==TOTEX) { // 「変換」がクリックされたら、TeX入力欄の内容を
// TeX数式に変換してから、TeX出力欄に表示する。
TEXOUT.innerHTML=TEXTIN.value;
MathJax.Hub.Queue(["Typeset",MathJax.Hub,TEXOUT]);
TEXOUT.style.fontWeight="normal"; // 初期表示のときだけ太字にしていた設定を破棄。
return;
}
if(ET==DISP1||EP==DISP1||EG==DISP1||ET==TRIAL||ET==TRIWIN||EP==TRIWIN) { // 無視すべきクリックを排除。
return; // fixed小窓内は、クリックされてもイベントとみなさない。
// 理由:
// 「TeX記法」小窓の文字をマウスで領域選択できるようにする。
// 「使ってみる」の操作で「TeX記法」小窓が閉じないようにする。
}
var XXX=event.clientX; // クリックされた座標値を取得
var YYY=event.clientY;
// 「使ってみる」小窓の水色背景のTeX文字をクリックすると、
// 「TeX記法」小窓が消えてしまうので、その対策。
// (上記の「無視すべきクリックを排除」だけではカバーできなかったため追加。)
if(TRIWIN.style.display=="inline") { // 「使ってみる」小窓が表示されているときだけ実行。
var texrect = TEXOUT.getBoundingClientRect(); // 水色背景の領域がクリックされたときは無視。
var texXmin=texrect.left-2;
// 「var texXmax=texrect.left+texrect.width+2;」
// 上式では、Edge, IE11 において、水色背景の右側のピンク領域の一部で期待外れの動作あり。
// 下式に変更して救済。
var texXmax=texrect.left+500+2;
var texYmin=texrect.top-2;
var texYmax=texrect.top+texrect.height+2;
if(texXmin<=XXX && XXX<=texXmax && texYmin<=YYY && YYY<=texYmax) {
return
}
}
PPP=document.elementFromPoint(XXX,YYY); // クリックした位置にあるノードを取得。
// 取得したノードが、bタグ内のTeX文字なのか否かを判定する。
// しかし、MathJaxにより改変されてできた隠れhtml内には、
// bタブの下に多重のspanタブが生成されているため、
// TeX文字がクリックされても、直接bノードを取得できる確率は非常に小さい。
// 高確率で取得されるのはspanノードである。
// 取得したノードから、順次親ノードを辿って行き、bノードに当たればTeX文字、
// bノードに巡り会えないままbodyノードに達してしまった場合には、非該当と判定する。
while(true) {
if(PPP.nodeName=="BODY") { // TeX文字ではないときは、
// 選択されていたTeX文字のハイライト表示をリセット。
// TeX記法の小窓も非表示にする。
if(HHH != "") {
HHH.style.backgroundColor="";
HHH="";
DISP1.style.display="none";
DISP2.innerText=" ";
}
break;
} else { // まだ、TeX文字か否かを判定できないとき。
PPP=PPP.parentNode; // 判定対象を親ノードに切り替える。
if(PPP.nodeName=="B") { // TeX文字であることが判明したとき
if(HHH != "") { // まずは、以前にハイライトされていたTeX文字をリセット。
HHH.style.backgroundColor="";
HHH="";
}
HHH=PPP; // 今回クリックされたTeX文字に新たなハイライトを当てる。
HHH.style.backgroundColor="#0f0";
DISP1.style.display="inline"; // 小窓を開き、
DISP2.innerText=ffff(HHH.innerHTML); // 隠れhtmlから抽出したTeX記法を表示。
break;
}
}
}
return;
}
// ■■■
function ffff(txt) { // 隠れhtmlコードからTeX表記を抽出。
// 複雑な隠れhtmlコードの構造を示さないと説明が困難。詳細は割愛。
// (当サイトのどこかに、隠れhtmlコードの構造例を載せる予定)
var out_chr=""; // 抽出結果の文字列を収容する変数。
var indx=txt.indexOf("\",indx);
if(indx==-1) {
break;
}
indx_array.push(indx);
indx+=1;
}
var N=indx_array.length;
for(var i=0; i
",indL);
if(indR==-1) {
indR=txt.length;
}
out_chr=out_chr + txt.slice(indL,indR) + 'MathJax早見ページ
つぼラボ
導入(本案)
導入(代案)
本案導入時の文字サイズのバランス
[ABC,$ABC$,$\mathbf{ABC}$] [xyz,$xyz$,$\mathbf{xyz}$] [123,$123$,$\mathbf{123}$]
[漢字,$\text{漢字}$] [ABC,$\text{ABC}$] [xyz,$\text{xyz}$] [123,$\text{123}$]
文字サイズと図のバランス
図と文字のサイズのバランスが崩れると想定外の画面表示になる(このページでは、水色背景のTeX文字が枠外にはみ出したりする。図の上に説明文字を重ね書きしているような場合にはさらに影響が大きい)。
◎対応:
各ブラウザは下記が標準設定。これを基準にレイアウトすれば、どのブラウザでも、文字と図のサイズのバランスが同一となる。閲覧者にもこの設定を推奨するのが望ましい。
IE11: 表示-文字のサイズ-中
Chrome: 設定-デザイン-フォントサイズ-中(推奨)
Firefox: オプション-フォントと配色-サイズ-16
Edge: 文字サイズ単独での変更機能はなく、設定不要。
その他のMathJax予備知識
HTMLの本文中で、"\$"を「特殊記号ではない普通の文字」として扱いたいときには、"\$"ではなく"\\$"と入力する。
("\"は、海外フォントでは"\"となる。表示は異なるが全く同一の機能)
MathJaxの各TeXコマンドの頭に付いている"\"も、HTML記述領域内ではそのまま使えるが、JavaScript記述領域内では"\\"(="\\")とする。(「導入」の inlineMath:, Macros: や「追加変換」の \\ にこの例あり)
このような場合には、半角の"\"の代わりに全角の"¥"で代用するか、「変換回避」の項を参照して対処する。
中括弧として表示させたいときは、"\{" や "\}" と入力する。
"\%"と入力したときは、"%"という文字として表示され、それに続く文字列はコメントとは見なされない。
アルファベット(大文字・小文字)以外の文字、あるいは改行が区切り記号になる。
それ以外のときは、空白" "を入れておく。
$\intf(x)dx$ と、期待外れの表示になる。
\$\int f(x)dx\$, \$\int2f(x)dx\$, \$\int{f(x)dx}\$,
\$\int\frac{1}{x}dx\$ などとすれば、
$\int f(x)dx$, $\int2f(x)dx$, $\int{f(x)dx}$, $\int\frac{1}{x}dx$ のように正常に表示される。
以上さえ守れば、TeX記述の途中に改行は必要ではなく、長い1行にまとめても良い(コメント記号"%"を使用している場合を除く)。
em:その位置で表示されるサイズの文字 $M$ の幅を1.0emとする。
ex:その位置で表示されるサイズの文字 $x$ の高さを1.0exとする。= 0.43em。
mu: = 1/18em。
(ただし、当サイトの、MathJax記述領域外のHTML内では、px(ピクセル)の使用を原則としている)
"2.7.5"はMathJaxのバージョンを示す。互換性のないバージョンアップもあり得るので、最新バージョンへの自動更新はされない。必要に応じてホームページの作者が手作業更新。
フォントは、別途スタイルシートで指定したものとなる(ここではメイリオ)。
(全角メイリオには斜体が効かない)。
{}が無い場合、\mathit は次に続く1文字だけに作用。\it は以降の全文字に作用。以下同様。
"<" , ">" は別途 "\left< " , "\right>" などの形式で「左右括弧」として使用される。
ただし、コマンドで別の形式を指定すれば、意図的に変更することもできる。
\textstyle, \displaystyle は、それぞれ「インライン数式」,「別行立て数式」の標準形式。
空白コマンドは種類が多すぎる。TeX文字が灰色のものは使わない方が良さそう。
空白挿入 \, や字詰め \! を使っておく方が無難。
他に、<span style="font-size:150%;">\$aA\$</span> などでもサイズの一括指定は可能。
#***形式の色指定は、RGB各色の明るさを16進(0, 1, 2, ..., d, e, f )表記。
他に、<span style="color:fuchsia;">\$ABCDEFGHI\$</span> などでも文字色の一括指定は可能。
$ABCDEFGHI$ ただし、style="color:よりも、\textcolor{}{}による指定の方が優先。
(\textcolor{}{} 以外に \color{}{} も有効。しかも、extensions: に "color.js" の指定は不要。
しかし、\color には今後、仕様変更の予定があるらしいので要注意。)
代用として、htmlのスタイル指定による一括処理はできる。
<span style="display:inline-block; transform:rotate(10deg);">\$ABC\$</span>
$ABC$
<span style="display:inline-block; transform:scale(-1,1);">\$ABC\$</span>
$ABC$
<span style="display:inline-block; transform:scale(1,-1);">\$ABC\$</span>
$ABC$
この方法では、分数の分子だけを回転などは無理。しかし、「識別子挿入」によれば可能。
\mathstrut:文字の上下の突出と同一長の支柱、 \strut:標準改行幅相当の支柱。
\smash[b]:文字の下方突出が無いものとして上下位置を決める。
\smash[t]:同じく、上方突出が無いものとして上下位置を決める。
\smash: $\ \ \,$同じく、上下両方の突出を無視して上下位置を決める。
固定サイズの \Bigg などは、左/右括弧のときは \Biggl / \Biggr と、末尾に l,r を付けることを推奨。
これにより、それぞれに応じた空白調整がされるが、括弧の種類によっては見分けがつかない。
また、\Biggm のように末尾に m を付けると、括弧の左右に若干の空白が挿入される。
\left, \right, \Bigg, ... などは、上記の括弧類以外にも以下のものにも作用させることができる。
$\uparrow \Uparrow \downarrow \Downarrow \updownarrow \Updownarrow \vert \Vert \arrowvert \Arrowvert \bracevert \lceil \rceil \lfloor \rfloor / \backslash \lmoustache \rmoustache$
\{, \} $\Rightarrow$ \lbrace, \rbrace [, ] $\Rightarrow$ \lbrack, \rbrack
| $\Rightarrow$ \vert, \lvert, \rvert \| $\Rightarrow$ \Vert, \lVert, \rVert
移動量は単位なしの整数。normalsize の "\;" の 約1/10 のステップで移動。
ただし、\displaystyle にしても {} 内の文字列のサイズは変わらない。
\limits, \nolimits については「総和など」も参照。
$\hspace{6.65em}$
$abc..\Space{0px}{5ex}{0ex}...$
$abc..\Space{1px}{2ex}{0ex}...$
$abc..\Space{2px}{0ex}{1ex}...$
$abc..\Space{3px}{2ex}{2ex}...$
$abc..\Space{10px}{3ex}{2ex}_x^y...$
\Space は \Rule の縦線を非表示にするが、太さ・長さ情報は維持される。
どちらも、太さ 0px にすれば任意長の「透明支柱」として使える。
上記が MathJax 純正の枠。\boxed の内部は自動的に \displaystyle になる。
ただし、\textstyle コマンドによる解除も可能(「表示形式」参照 )。
\fbox の内部は強制的に \text モードになる。内部をTeX文字にするには、さらに\$~\$で囲む。
他にも \hbox, \mbox コマンドがあるが、枠の無い \fbox のようなもの。利用機会は少なそう。
$\sum_a^b\int_a^b$
$\displaystyle\sum_a^b\int_a^b$
\limits
(
$\sum\limits_a^b\int\limits_a^b$
$\displaystyle\sum\limits_a^b\int\limits_a^b$
)
\nolimits
(
$\sum\nolimits_a^b\int\nolimits_a^b$
$\displaystyle\sum\nolimits_a^b\int\nolimits_a^b$
)
$\bigcap \bigcup \bigodot \bigoplus \bigotimes \bigsqcup \biguplus \bigvee \bigwedge$
\limits, \nolimits 無指定のときの添字の位置は、
\displaystyle のときは上下($\raise0.3ex\int$ だけは例外)、そうでないときは右上右下。
\limits や \nolimits を指定したときは、\displaystyle 指定の有無に拘わらず、
\limits 指定で上下、\nolimits 指定で右上右下。
$y \over x$
$\displaystyle{y \over x}$
$\displaystyle{y \overwithdelims \{ \} x}$
分子 \over 分母、 分子 \overwithdelims 左括弧 右括弧 分母
$y \above 1pt x$
$\displaystyle{y \above 3pt x}$
$\displaystyle{y \abovewithdelims \{\} 2pt x}$
分子 \above 太さ 分母、 分子 \abovewithdelims 左括弧 右括弧 太さ 分母
しかし、これ専用の \leftroot, \uproot の方が便利。
移動量は単位なしの整数。normalsize の "\," の 約1/5 のステップで移動。
$\displaystyle{a\atopwithdelims (\} b}$ $\overset{\text{例えば}}{\Longrightarrow}$
$\displaystyle\left(\!\array{a\\b}\!\right\}$ \array 参照
類似コマンドとして \verb もあるが {} の使い方が変則的なので避けた方が良い。
ここでは応用範囲が広い \begin{□}...\end{□} 方式のみを扱う。
□ としては以下に示す以外に eqnarray, multline, sprit もあるが省略。
□ は \newenvironment コマンドにより自由に定義もできるが、これも割愛。
f(x)=\frac{x}{x+1}
\end{align}
\textstyle f(x)=\frac{x}{x+1}
\end{align}
\scriptstyle, \scriptscriptstyle
a=b+c \label{足し算}
\end{align}
上式の番号は$\eqref{足し算}$です。
同一ラベル名の重複使用が原因。別名に改名すれば可。
a=b+c
\end{align*}
a=b+c \tag{50}\label{重要な式}
\end{align*}
上式の番号は$\eqref{重要な式}$です。
a=b+c\\
X=u+v+w
\end{align*}
a=b+c\notag\\
X=u+v+w
\end{align}
&a=b+c\\
&X=u+v+w
\end{align*}
a&=b+c\\
X&=u+v+w
\end{align*}
a=b+&c\\
&X=u+v+w
\end{align*}
&a=b\\[□ex]
&x=y
\end{align*}
\delta_{ij}=
\begin{cases}
1&(i=j)\\
0&(i\neq j)
\end{cases}
\end{align}
どの列の揃え方も同一のときは、代表して一文字だけでも可。
\boldsymbol{A}=
\left[
\begin{array}{crl}
12 & 3.4 & 56\\
0.82 & 6 & 1\\
237 & 1 & 3.1416
\end{array}
\right]
\end{align}
smallmatrix, matrix, subarray(括弧なし),
pmatrix, bmatrix, Bmatrix, vmatrix, Vmatrix(各種括弧つき)
も使える。しかし、最も応用が効くのが array 方式。
しかし、\hfil,\hfill(空白を拡張させ文字を押しやる)による位置変更は可能。
\boldsymbol{A}=
\left[
\begin{array}{c|c:c}
12 & 3.4 & 56\\
\hdashline
0.82 & 6 & 1\\
\hline
237 & 1 & 3.1416
\end{array}
\right]
\end{align*}
\boldsymbol{E}=
\left[\
\begin{array}{ccccc}
1 & & & &\\
& 1 & & \smash{\LARGE 0} &\\
& & \smash{\ddots} & &\\
& \smash{\lower1.3ex\LARGE 0} & & 1 &\\
& & & & 1
\end{array}
\ \right]
\end{align*}
&2x+3y+6z=234\\
&23x+321y+65z=34
\end{align*}
&\hspace{0.5em}2x+\hspace{1.0em}3y+\hspace{0.5em}6z=234\\
&23x+321y+65z=\hspace{0.5em}34
\end{align*}
\begin{array}{rrrr}
2x+&3y+&6z=&234\\
23x+&321y+&65z=&34
\end{array}
\end{align*}
奇数番目の & で位置合わせされ、この間の文字列が、偶数番目の & により左右に押しやられる。
2&x+&3&y+&6&z=&234&\\
23&x+&321&y+&65&z=&34&
\end{align*}
{ } 内の数値は(1行に含まれる&の数(奇数)+1)/2 とする。
2&x+&3&y+&6&z=&234&\\
23&x+&321&y+&65&z=&34&
\end{alignat*}
a=a\\
2a=a+a\\
4a=a+a+a+a
\end{gather}
\begin{aligned}&a=b\\&b=c+3\\&c=2d\end{aligned}
\hspace{4em}
\begin{aligned}&x=y-7\\&y=z\\&z=2x+5w\end{aligned}
\end{align*}
\newcommand, \renewcommand, \operatorname, \DeclareMathOperator
$ABC\cssId{part7}{DEF}GHI$
$ABC\cssId{part8}{DEF}GHI$
$ABC\cssId{part9}{DEF}GHI$
$ABC\cssId{partA}{DEF}GHI$
式全体はもちろん、一部の文字にだけでも適用可能。
識別子で指定された部分は、スタイルシートで別途設定した属性(表示/非表示,色など)で表示される。
上の例の RotColBig や part1,2,3 ... という名の class や id のスタイルシートは下記。
(ここでは display: の様式は特に指定する必要はない。既定で inline-block; になるようだ。)
.RotColBig {transform:rotate(60deg);
color:orange; font-size:200%; }
#part1, #part2, #part3, #part4, #part5,
#part6, #part7, #part8, #part9, #partA { color;fuchsia; }
</style>
document.getElementsByClassName("RotColBig")[0],[2],[4].. (なぜか偶数)
注: 偶数は Chrome, Firefox, Edge のみ。IE11 は [0],[1],[3].. の奇数。
注: ブラウザが IE11 の場合、この変更ボタンは1回しか受け付けられない。他では4回周期で連続。
なお、これらを「使ってみる」の入力欄に貼り付けても「変更」の効果は現れない(複雑すぎるため)。
ただし、この方法では、\(, \), \[, \], \begin, \end などには対処できない。
「導入」の ignoreClass: に任意のクラス名(ここでは"texoff")を指定する。
これにより、そのクラス名のタグ内では、MathJaxの動作を禁止することができる。
\(\displaystyle\int_{-\pi}^{\pi}\)
\(\displaystyle\int_{-\pi}^{\pi}\) <!-- 1行目 -->
</span><br>
<span class="texoff">
\(\displaystyle\int_{-\pi}^{\pi}\) <!-- 2行目 -->
</span>
その後のイベント処理などでTeX文字を扱う場合には、改めてTeX文字への変換指示をし直す必要がある。
このうち、MathJax.Hub.Queueコマンドで指示した2行目だけがTeX変換されている。
なお、どの行にも該当しない変換を指示すると、全行とも変換されてしまうので要注意。
<span id="add_2"> </span> <!-- 2行目 -->
<script> // 初期画面表示後に実行されるよう、別途設定されている。
function example_for_event() {
var AD1 = document.getElementById("add_1");
var AD2 = document.getElementById("add_2");
var Content = "$\\displaystyle\\int_{-\\pi}^{\\pi}$";
AD1.innerHTML = Content;
AD2.innerHTML = Content;
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"add_2"]);
return;
}
</script>
================ 10行目は下記でも可 ================
MathJax.Hub.Queue(["Typeset",MathJax.Hub,AD2]);
================ 複数個所の指定には ================
MathJax.Hub.Queue(["Typeset",MathJax.Hub,[AD1,AD2]]);
$\displaystyle\intop_a^b$
$\pod{x+y}$
$\displaystyle\pod{x+y}$
\textbf, \textit, \textrm, \textsf, \texttt,
\mit, \oldstyle, \href, \style, \mathchoice,
\eqalign, \eqalignno, \leqalignno, \mathclose,
\mathopen, \shoveleft, \shoveright
暫くお待ちください
リンクは歓迎ですが、ページ構成の変更によりリンク切れすることもあります。
改訂履歴
"追加変換"に複数指定例を追加。
支柱→縦線。
その他、細部改良。 (2019-12-26)
TeX表記の抽出アルゴリズムを改良(\> 対応)。
MathJaxのバージョンを最新版に変更 2.7.4 → 2.7.5
説明文を見直し (2018-12-31)