定理環境のマークアップとスタイルシート案

定理環境のマークアップとスタイルシート

数学的文書の定理環境をどうマークアップすべきか考えました．

どのようなHTMLにすべきか

誰でも考えつくのが次のようなマークアップ．

<div class="theorem">
<p>任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．</p>
</div>

任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．

場合によっては，以下のように定理にタイトルを付けたい場合があります．

（オイラーの公式）任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．

セマンティックな立場では，定理の名前と，その内容は分離すべきです．

<div class="theorem">
<div class="title">オイラーの公式</div>
<p>任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．</p>
</div>

定理の名前はヘッディングだと考えるのもありだと思います．

<div class="theorem">
<hn>オイラーの公式</hn>
<p>任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．</p>
</div>

しかし，その際は見出しのレベルを幾つにするかは，文書の規模によって変わってしまいます．伝説のXHTML 2.0ならばh要素を使うのですが……

<section class="theorem">
<h>オイラーの公式</h>
<p>任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．</p>
</section>

タイトル＋説明の構図ですから，dlもありといえばありでしょう．

<dl class="theorem">
<dt>オイラーの公式</dt>
<dd>任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．</dd>
</dl>

オリジナルの要素しか使っていないので一番スマートといえばスマート．ただし，この場合はdt要素が（多分）必須になります．つまりこのマークアップで統一しようとすると，全ての定理環境にタイトルを付けなくてはなりません．補題などで，タイトルを付けるほどのものではない場合にも無理矢理つけるのか，という問題が出てきます．

<dl class="theorem">
<dt>三角関数は指数関数で表せる</dt>
<dd>任意の実数 $\theta$ に対して
$$\cos\theta = \frac{e^{\theta i}+e^{-\theta i}}{2}$$
が成り立つ．</dd>
</dl>

あとで「定理 3より」などのように定理番号で参照するより，定理のタイトルで参照した方がよりウェブっぽい気がするので，これもありといえばありだとは思います．そもそもHTML+CSSには，counterの値を参照するような仕様が（多分）ないので，「定理 3より」という表現は現実的ではない気もします．

結論としては，一応，定理のタイトルも省略するのを前提としたマークアップを考えます．それには，div厨と言われても仕様がないですが，一番最初の例がよろしいのかと．

<!--タイトルなし-->
<div class="theorem">
<p>任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．</p>
</div>

<!--タイトルあり-->
<div class="theorem">
<div class="title">オイラーの公式</div>
<p>任意の実数 $\theta$ に対して
$$e^{\theta i} = \cos\theta + i\sin\theta$$
が成り立つ．</p>
</div>

定理番号などの装飾

ステートメントの前に定理 1. などのような定理番号を付けるには，擬似要素::beforeとcounterを使うのが普通でしょう．

.theorem{
  counter-increment: theorem;
}

.theorem::before{
  content: "定理 " counter(theorem)". ";
  font-weight: bold;
}

定理のタイトルを改行させるかさせないかの好みがあると思います．つまり

定理 1. オイラーの公式

任意の実数 $\theta$ に対して
$$
e^{\theta i} = \cos\theta + i\sin\theta
$$
が成り立つ．

というタイプか

定理 1. （オイラーの公式）任意の実数 $\theta$ に対して
$$
e^{\theta i} = \cos\theta + i\sin\theta
$$
が成り立つ．

というタイプにするかです．

いずれにしろ，定理番号のすぐ右にタイトルあるいはステーテメントが来るのが普通だと思うので，div.theorem直下はdisplay: inlineにするのが良いと思います．

タイトルを改行させる場合

.theorem{
  counter-increment: theorem;
}

.theorem::before{
  content: "定理 " counter(theorem)". ";
  font-weight: bold;
}

.theorem>*:first-child{
  display: inline; /*div.theoremの直下は絶対インライン*/
}

.theorem>.title{
  font-weight: bold; /*お好み装飾*/
}

タイトルを改行させない場合

.theorem{
  counter-increment: theorem;
}

.theorem::before{
  content: "定理 " counter(theorem)". ";
  font-weight: bold;
}

.theorem>*:first-child{
  display: inline; /*div.theoremの直下は絶対インライン*/
}

.theorem>.title+*{
  display: inline; /*タイトルがあった場合，その次の要素もインライン*/
}

.theorem>.title::before{
  content: "（"; /*お好み装飾*/
}

.theorem>.title::after{
  content: "）"; /*お好み装飾*/
}

:first-child擬似クラスや隣接セレクタなどを使うと表現の幅が広がりますね．