5. MathML Tips集(装飾編)

5.1 数式の色を変える

数式の色を変えるには, mathcolor属性を利用して, 次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathcolor="#FF0000">a</mi>
  <mo mathcolor="#00FF00">+</mo>
  <mn mathcolor="#0000FF">3</mn>
</math>
リスト5.1 数式の色を変える
a + 3
図5.1 数式の色を変える場合の表示例

ここで, mathcolor属性の値は, CSSのcolorプロパティと同様に, #につづけて, 色の赤, 緑, 青の成分をそれぞれ2ケタの16進数で00FFの間の値で書きます. リスト5.1だと, #FF0000は赤, #00FF00は緑, #0000FFは青をそれぞれ表しています. また, mathcolor属性の値には, HTMLで使われているredlimeblueといった色名を用いることもできます. ですから, 色名を用いて次のように書くこともできます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathcolor="red">a</mi>
  <mo mathcolor="lime">+</mo>
  <mn mathcolor="blue">3</mn>
</math>
リスト5.2 色名を用いて数式の色を変える
a + 3
図5.3 色名を用いて数式の色を変える場合の表示例

5.2 数式を太字にする

数式を太字にするには, mathvariant属性の値をboldにして, 次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi>
  <mo>-</mo>
  <mn mathvariant="bold">4</mn>
  <mo mathvariant="bold">+</mo>
  <mi mathvariant="bold">b</mi>
</math>
リスト5.3 数式を太字にする
a - 4 + b
図5.3 数式を太字にする場合の表示例

<mi>b</mi>のような内容が1文字のアルファベットのmiは, 通常, 斜体で表されます. これは, そのようなmimathvariant属性の既定値がitalicであるためです. 詳しくは, 5.5 mathvariantの既定値を見て下さい. しかし, mathvariant属性の値をboldにすると, 太字にはなりますが斜体でなくなります. 斜体を保ったまま太字にするには, 5.4 数式を太字の斜体にするを見て下さい.

5.3 数式を斜体にする

数式を斜体にするには, mathvariant属性の値をitalicにして, 次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi>
  <mo>-</mo>
  <mn mathvariant="italic">4</mn>
  <mo mathvariant="italic">+</mo>
  <mi mathvariant="italic">b</mi>
</math>
リスト5.4 数式を斜体にする
a - 4 + b
図5.4 数式を斜体にする場合の表示例

<mi>b</mi>のような内容が1文字のアルファベットのmiではmathvariant属性の既定値はitalicです. このため, mathvariant属性の値をitalicにしなくても斜体として表されます. 詳しくは, 5.5 mathvariantの既定値を見て下さい.

5.4 数式を太字の斜体にする

数式を太字の斜体にするには, mathvariant属性の値をbold-italicにして次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi>
  <mo>-</mo>
  <mn mathvariant="bold-italic">4</mn>
  <mo mathvariant="bold-italic">+</mo>
  <mi mathvariant="bold-italic">b</mi>
</math>
リスト5.5 数式を太字の斜体にする
a - 4 + b
図5.5 数式を太字の斜体にする場合の表示例

5.5 mathvariantの既定値

mathvariant属性の既定値は, <mi>b</mi>のような内容が1文字のアルファベットのmiではitalicです. それ以外の場合はnormalです. 例えば, <mi>sin</mi><mi>cos</mi>momnは, 既定値はnormalです. 図5.6の上の式は, mathvariant属性が既定値の場合, 中の式は, mathvariant属性をnormalとした場合, 下の式は, mathvariant属性をitalicとした場合です. 上の式と中の式ではxのみが, 上の式と下の式ではx以外が, それぞれ表示のされ方が違っているのが分かるでしょう.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>sin</mi>
  <mo>&ApplyFunction;</mo>
  <mi>x</mi>
  <mo>+</mo>
  <mn>5</mn>
</math>
<br/>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathvariant="normal">sin</mi>
  <mo>&ApplyFunction;</mo>
  <mi mathvariant="normal">x</mi>
  <mo mathvariant="normal">+</mo>
  <mn mathvariant="normal">5</mn>
</math>
<br/>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathvariant="italic">sin</mi>
  <mo>&ApplyFunction;</mo>
  <mi mathvariant="italic">x</mi>
  <mo mathvariant="italic">+</mo>
  <mn mathvariant="italic">5</mn>
</math>
リスト5.6 mathvariant属性の既定値
sin x + 5
sin x + 5
sin x + 5
図5.6 mathvariant属性の既定値

5.6 分数の記号を斜線(/)にする

1/2のように, 分数の記号を斜線(/)にするには, bevelled属性をtrueにして, 次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac bevelled="true">
    <mn>1</mn>
    <mn>2</mn>
  </mfrac>
</math>
リスト5.7 分数の記号を斜線(/)にする
1 2
図5.7 分数の記号を斜線(/)にする場合の表示例

bevelled属性はtrueまたはfalseのどちらかをとり, 既定値はfalseです. bevelled属性をfalseにした場合, 分数の記号は横線(-)で表されます.

5.7 分数の記号の太さを変える

分数の記号の太さを変えるには, linethickness属性を利用して次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac linethickness="thick">
    <mrow>
      <mfrac linethickness="medium">
        <mrow>
          <mfrac linethickness="thin">
            <mn>1</mn>
            <mi>x</mi>
          </mfrac>
          <mo>+</mo>
          <mn>1</mn>
        </mrow>
        <mi>x</mi>
      </mfrac>
      <mo>+</mo>
      <mn>1</mn>
    </mrow>
    <mi>x</mi>
  </mfrac>
</math>
リスト5.8 分数の記号の太さを変える
1 x + 1 x + 1 x
図5.8 分数の記号の太さを変える場合の表示例

ここで, thickは通常より太くすること, mediumは通常通り, thinは通常より細くすることをそれぞれ表しています. thickness属性の既定値はmediumです. また, thickness属性は太さを直接数値で指定することもできます. 1mediumに相当し, 0は何も引かないこと, 2は通常の2倍の太さの線を引くこと, 3は通常の3倍の太さの線を引くことにそれぞれ相当します. 数値を使って分数の記号の太さを変える例を次に示します.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac linethickness="2">
    <mrow>
      <mfrac linethickness="1">
        <mrow>
          <mfrac linethickness="0">
            <mn>1</mn>
            <mi>x</mi>
          </mfrac>
          <mo>+</mo>
          <mn>1</mn>
        </mrow>
        <mi>x</mi>
      </mfrac>
      <mo>+</mo>
      <mn>1</mn>
    </mrow>
    <mi>x</mi>
  </mfrac>
</math>
リスト5.9 数値を使って分数の記号の太さを変える
1 x + 1 x + 1 x
図5.9 数値を使って分数の記号の太さを変える場合の表示例

さらに, linethickness属性は, 1mmのように数値+単位という形で直接太さを指定することもできます. 数値と単位を使って分数の記号の太さを変える例を次に示します.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac linethickness="1mm">
    <mi>a</mi>
    <mi>b</mi>
  </mfrac>
  <mo>+</mo>
  <mfrac linethickness="1pt">
    <mi>c</mi>
    <mi>d</mi>
  </mfrac>
</math>
リスト5.10 数値と単位を使って分数の記号の太さを変える
a b + c d
図5.10 数値と単位を使って分数の記号の太さを変える場合の表示例

5.8 分子を左寄せ,中央寄せ,右寄せする

分子を左寄せ,中央寄せ,右寄せするには, numalign属性を用いて, 次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac numalign="left">
    <mn>1</mn>
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mn>1</mn>
    </mrow>
  </mfrac>
  <mo>+</mo>
  <mfrac numalign="center">
    <mn>1</mn>
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mn>1</mn>
    </mrow>
  </mfrac>
  <mo>+</mo>
  <mfrac numalign="right">
    <mn>1</mn>
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mn>1</mn>
    </mrow>
  </mfrac>
</math>
リスト5.11 分子を左寄せ,中央寄せ,右寄せする
1 x + 1 + 1 x + 1 + 1 x + 1
図5.11 分子を左寄せ,中央寄せ,右寄せする場合の表示例

ここで, leftは左寄せ, centerは中央寄せ, rightは右寄せをそれぞれ表します. numalign属性の既定値は, centerです.

5.9 分母を左寄せ,中央寄せ,右寄せする

分母を左寄せ,中央寄せ,右寄せするには, denomalign属性を用いて, 次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac denomalign="left">
    <mrow>
      <mi>a</mi>
      <mo>-</mo>
      <mi>b</mi>
    </mrow>
    <mi>c</mi>
  </mfrac>
  <mo>+</mo>
  <mfrac denomalign="center">
    <mrow>
      <mi>a</mi>
      <mo>-</mo>
      <mi>b</mi>
    </mrow>
    <mi>c</mi>
  </mfrac>
  <mo>+</mo>
  <mfrac denomalign="right">
    <mrow>
      <mi>a</mi>
      <mo>-</mo>
      <mi>b</mi>
    </mrow>
    <mi>c</mi>
  </mfrac>
</math>
リスト5.12 分母を左寄せ,中央寄せ,右寄せする
a - b c + a - b c + a - b c
図5.12 分母を左寄せ,中央寄せ,右寄せする場合の表示例

ここで, leftは左寄せ, centerは中央寄せ, rightは右寄せをそれぞれ表します. denomalignの既定値はcenterです.

5.10 文字の大きさを変える

文字の大きさを変えるには, mathsize属性を利用して次のように書きます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathsize="6pt">a</mi>
  <mo mathsize="9pt">+</mo>
  <mi mathsize="12pt">b</mi>
  <mo mathsize="15pt">+</mo>
  <mi mathsize="18pt">c</mi>
</math>
リスト5.13 文字の大きさを変える
a + b + c
図5.13 文字の大きさを変える場合の表示例

mathsize属性は, 数値+単位という形で文字の大きさを指定します.

5.11 様々な不等号

4.10 等号や不等号で, "≥"や"≤"の書き方は説明しました. MathMLでは, ">"や"<"に"="を組み合わせた"≧"や"≦"等を書くことができます. "≧"にはgE, "≦"にはlEという実体参照を使います.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>c</mi>
  <mo>&gE;</mo>
  <mn>3</mn>
</math>
<br/>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>d</mi>
  <mo>&lE;</mo>
  <mn>3</mn>
</math>
リスト5.14 様々な不等号
c 3
d 3
図5.14 様々な不等号の表示例

5.12 単位

単位を書くには, mimathvariant属性をnormalにして利用します. また, 数値と単位の間には, rspace属性をthickmathspaceにしたmoを使ってInvisibleTimesという実体参照を入れます. 例えば, 1mは次のように書かれます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mn>1</mn>
  <mo rspace="thickmathspace">&InvisibleTimes;</mo>
  <mi mathvariant="normal">m</mi>
</math>
リスト5.15 単位
1 m
図5.15 単位の表示例

ここで, morspace属性をthickmathspaceとしているのは, 数値と単位の間を空けないためです. また, mimathvariant属性をnormalとしているのは, 一般に単位は直立体で書くことになっているためです.

5.13 複雑な単位

複数の単位のかけ算や割り算, 累乗となっている単位を表すには, 通常の数式と同じようにmomsupを用います. 例えばN·mやm3/sは次のように書かれます.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mn>1.8</mn>
  <mo rspace="thickmathspace">&InvisibleTimes;</mo>
  <mrow>
    <mi mathvariant="normal">N</mi>
    <mo>&middot;</mo>
    <mi mathvariant="normal">m</mi>
  </mrow>
</math>
<br/>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>Q</mi>
  <mo rspace="thickmathspace">&InvisibleTimes;</mo>
  <mrow>
    <msup>
      <mi mathvariant="normal">m</mi>
      <mn>3</mn>
    </msup>
    <mo>/</mo>
    <mi mathvariant="normal">s</mi>
  </mrow>
</math>
リスト5.16 複雑な単位
1.8 N · m
Q m 3 / s
図5.16 複雑な単位の表示例

middotは, 点(·)を表す実体参照です. 単位の途中のかけ算を表す点(·)は表示すべきです.

5.14 単位を含む計算

単位を含む計算を書くには, 基本的に通常の計算と同じように書きます. 例えば, 次のものは, 流量を計算する例です.

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mn>4</mn>
  <mo rspace="thickmathspace">&InvisibleTimes;</mo>
  <msup>
    <mi mathvariant="normal">m</mi>
    <mn>2</mn>
  </msup>
  <mo>&times;</mo>
  <mn>5</mn>
  <mo rspace="thickmathspace">&InvisibleTimes;</mo>
  <mrow>
    <mi mathvariant="normal">m</mi>
    <mo>/</mo>
    <mi mathvariant="normal">s</mi>
  </mrow>
  <mo>=</mo>
  <mn>20</mn>
  <mrow>
    <msup>
      <mi mathvariant="normal">m</mi>
      <mn>3</mn>
    </msup>
    <mo>/</mo>
    <mi mathvariant="normal">s</mi>
  </mrow>
</math>
リスト5.17 単位を含む計算
4 m 2 × 5 m / s = 20 m 3 / s
図5.17 単位を含む計算の表示例