: 2022年5月4日

定理環境のマークアップ

: ウェブ制作日記
: HTML

GW折り返し地点である今日は，一日中ずっとこれ考えてた．

定理の名前になぜか見出し6

以前から定理環境は以下のようにマークアップしていた．

<!--無名の命題-->
<div class="lemma">

<p>$n+m=0\then n=m=0$．</p>

</div>

<!--有名な定理-->
<div class="thm">

<h6>オイラーの定理</h6>

<p>$e^{\theta i} = \cos\theta + i \sin\theta$．</p>

</div>

自分的にどうかと思っているのが，定理の名前を見出し6としてマークアップしていること．これは，section の深度によって，定理の見出しのレベルがコロコロ変わるのはいかんと思って，どうせたどり着くことのない見出し6に統一してしまおうという（安易な）発想．

具体的にどういうことかというと，例えば以下は見出し2の直下に定理が来てるので，命題のタイトルは見出し3．

<h1>自然数</h1>

<h2>ペアノの公理系</h2>

<div class="prop">

<h3>帰納法の原理</h3>

</div>

次は，見出し3の直下に定理が来てるので，命題のタイトルは見出し4．

<h1>数の構成</h1>

<h2>自然数</h2>

<h3>ペアノの公理系</h3>

<div class="prop">

<h4>帰納法の原理</h4>

</div>

という風に文章の規模で定理の名前に使うマークアップが変わるのがあんまよろしくないなと思ったわけである．

しかし，定理の名前を見出し6で統一し，見出しレベルが途中で飛び越える構造の文書はやはりおかしい．そもそも定理の名前は見出しとして扱うべきかという問題があり，名無しの補題などには見出しはつけない．その命題が有名か無名かで，見出しがあったりなかったりするマークアップは，最近よく聞くアウトライン的にどうなのという事態も発生．

大昔にQiitaで自分で言及していたように，結局，以下が超無難かなと再び思ってしまった．

<div class="thm">

<div class="title">オイラーの定理</div>

<p>$e^{\theta i} = \cos\theta + i \sin\theta$．</p>

</div>

ただ，HTML5（Living Standard?）で section 要素なるものが導入されたこともあり，アウトラインという用語も飛び交っているので，数学文書の理想的なマークアップなるものの草案を一応したためておこうと朝からずっと考えていたのでした．

一つの案

<h1>自然数</h1> <!--ページタイトル-->
<p>自然数についてみんなで考えよう．</p>
<section>
  <h2>ペアノの公理</h2>
  <p>自然数が満たすべき性質を...</p>
  <section class="thm">
    <hgroup>
       <h3>定理</h3>
       <h4>再帰性定理</h4> <!--名前のある定理はhgroupで！-->
    </hgroup>
    <p>集合 $X$，...</p>
    <section class="proof">
      <h4>証明</h4>
      <p>$\N\times X$ の部分集合で...</p>
    </section>
  </section>
</section>

だいぶ複雑になったが，div 要素を一切使わず，数学文書を HTMLの精神にのっとりしっかり構造化できているのではないかと考えている．

そんなに長くない数学文書をウェブ上で発信する上で，普通の見出しは深さ2までしかいかないだろうという前提．深さ3までいくような文書は，構造を見直すなどして改良するか，そもそも考えない！　そうなると，定理のタイトルは見出し3固定．

定理が無名 or 有名で見出しがあったりなかったりする問題だが，とにかく定理の見出しは <h3>定理</h3> のようにマークアップし，名前がある場合は hgroup 要素を使ってサブタイトルのようにつける．定理 1. のように定理番号をつけたい場合は，CSSのカウンターを使って h3:after で表示すればよい．

定理環境は section で囲み，定理の種類（thm, prop, lemma, def など）を class 属性で明示．証明は更に深い section を設けて h4 要素を証明の見出しにする．

とりあえず案を出しただけで，このサイトではまだ反映していない．今執筆している今現在（2022-05-04）では，「定理 1」「定義 1」「証明」などの部分は，すべて疑似要素 :before などで表示している．これは気が変わったらCSSファイルをいじるだけで「Theorem 1.」「Defi 1.」「Pf.」などに変更できることを見越してのことだが，CSSを切ると途端にどれが定理でどこから証明が始まってるか分からなくなり，よいマークアップとはまったくいえない．<div class="proof"> などのようにマークアップしてるので，機械は分かるが，人は分からないという本末転倒なマークアップなのである．

そんなわけで，「定理」とか「証明」もちゃんと要素の内容として明示すべきと反省．その結果，上のようなマークアップ案となった．もし「定理 1」を「Thereom 1」などに変えたくなったら，プログラムで一括置換などするしかないだろう．

定理の枠を囲むには

このマークアップ案だと，定理を枠で囲めない．最初は以下の案もあった．

<section class="thm">
  <section class="statement">
    <h3>定理</h3>
    <p>...</p>
  </section>
  <section class="proof">
    <h3>証明<h3>
    <p>...</p>
  </section>
</section>

こうすれば section.statement に border を設定すれば枠で囲める．しかし，section.thm に見出しがないのでアウトラインがうまくできない．

で，よくよく記憶を掘り返せば，（やや昔の）数学書を見る限り，定理を枠で囲っている本は，松坂和夫氏の『線型代数入門』くらいしか記憶にない．セマンティックな立場で考えたとき，枠で囲みたいという発想はただのスタイリングな目的でしかないので，『HTML解体新書』（太田良典，中村直樹）にあるスタイリングを付ける目的で用いるdiv要素が最も妥当な気がしてきました．

だから，枠を囲みたい場合は以下のようにするのがいいかな．

<section class="thm">
  <div class="statement">
    <hgroup>
      <h3>定理</h3>
      <h4>再帰性定理</h4> <!--名前のある定理はhgroupで！-->
    </hgroup>
    <p>集合 $X$，...</p>
  </div>
  <section class="proof">
    <h4>証明</h4>
    <p>$\N\times X$ の部分集合で...</p>
  </section>
</section>