LaHTML - CSS による自動番号付けと Javascript による相互参照

2019/10/24 山田 泰司株式会社あいはら <taiji@aihara.co.jp>, Taiji YamadaAIHARA Electrical Engineering Co., Ltd. <taiji@aihara.co.jp>

概要

HTML+CSS でも LaTeX のような自動番号付けと相互参照を実現したい。そこで、CSS には自動番号付けをするための擬似要素 before とカウンタがサポートされているので、番号付けにはそれをそのまま利用して LaTeX のような自動番号付けを実現する。

加えて、相互参照に必要な自動 id 付け、ならびに、目次、図目次、表目次の自動リスティング、数式の自動番号付け、そして、脚注、索引の自動リスティングを実現する。

さらに加えて、BibTeX 形式に対応した参考文献リストのアイテム自動生成を実現する。

既存の CSS による自動番号付けの問題点

しかし、既存の CSS による自動番号付けでは、番号付けされた文字列を取得する方法がないので、相互参照の際に「§1.1.1」などのような文字列を構成できない。

Javascript による既存の CSS による自動番号付けの問題点の解決

よって、Javascript を利用して、既存の CSS による自動番号付け規則に従って、番号付けされた文字列を要素に格納することで問題点を解決するこれはサイト『html で「なんちゃって LaTeX」』で実現している手法とは異にして HTML の 擬似要素 before とカウンタを有効利用していることに留意。。ちなみに、本稿は本機能の実例を示すために不自然な章立てになっているのであしからず。

自動番号付けの使い方

以下を HTML ソースの head 部に加えるだけであるまだそのようには整理していないのでソースを参照。

<link rel="stylesheet" type="text/css" href="https://www.aihara.co.jp/~taiji/common/article.css"/>
<script type="text/javascript" src="https://www.aihara.co.jp/~taiji/common/article.js"></script>

但し、スタイルシートの方は自動番号付けの規則を記述しているだけなので、代わりに利用者でオリジナルの番号付けの規則を用意しても構わない。以下ではこのスタイルシートでの例を説明する。

h1, h2, h3, h4, h5, h6 タグの自動番号付け

h1, h2, h3, h4, h5, h6 タグのうち h2, h3, h4, h5 タグはそのまま番号付けを行う。h1 タグは part クラスまたは chapter クラスに属していれば番号付けを行う。h6 タグは subparagraph クラスに属していれば番号付けを行う。これらは ast クラスに属していれば番号付けは行わない。

LaTeX の「部・章・節・段落」と h1, h2, h3, h4, h5, h6 タグの関係

LaTeX の「部・章・節・段落」とセクション h1, h2, h3, h5, h6 タグの関係
depth 段落 LaTeX コマンド HTML タグ HTML クラス 番号付け 番号付け lang="ja"
0 part h1 part Part I 第 I 部
1 chapter h1 chapter Chapter 1 第 1 章
2 section h2 1 1
3 小節 subsection h3 1.1 1.1
4 小々節 subsubsection h4 1.1.1 1.1.1
5 段落 paragraph h5 1.1.1.1 1.1.1.1
6 小段落 subparagraph h6 subparagraph 1.1.1.1.1 1.1.1.1.1
h1, h2, h3, h4, h5, h6 タグへの data-before-text-content 属性値の格納

例えば、小節 subsection に相当する h3 タグの擬似要素 before のスタイルの content 属性が counter(section) "." counter(subsection) " " であるとき、section, subsection カウンタの値を展開した文字列 "1.1 " が data-before-text-content 属性の値として格納される。

また、例えば、部 part に相当する h1 タグの擬似要素 before のスタイルの content 属性が "Part" counter(part, upper-roman) " " であるとき、upper-roman スタイルは無視して、part カウンタの値を展開した文字列 "Part 1 " が data-before-text-content 属性の値として格納される。

h1, h2, h3, h4, h5, h6 タグへの自動 id 付け

h1, h2, h3, h4, h5, h6 タグが id を持たない場合、番号付けされた文字列がそのタグの id となるここで、末尾の空白は削られ、他の空白は「_」となる。。例えば、"1.1" や "Part_1" が上例での id となる。但し、同名の id は許されないため、重なる場合は順に "1.1" "2_1.1" "3_1.1" と先頭に連番が付与される相互参照するようなものは独自の id を与えておくことをお勧めする。。この id が LaTeX における label コマンドによるラベルに相当することになる。

h1, h2, h3, h4, h5, h6 の相互参照

以下のようにすれば、相互参照として文書内リンクおよび、空の span タグへの番号付けされた文字列の補完が行われる。

<a href="#1.1">§<span></span></a> → §

文書内リンクが不要で、空の span タグへの番号付けされた文字列の補完のみを行いたいときは以下のようにする。

但し、これらは equation クラスに属していないものとする。

§<span data-target_id="1.1"></span> → §

図表の自動番号付け

図見出しfigcaption タグで連番で「」のように番号付けされる。表見出しは table 内の caption タグで連番で「」のように番号付けされる。これらは ast クラスに属していれば番号付けは行わない。

これらのタグへの data-before-text-content 属性値の格納と自動 id 付けについては、h1, h2, h3, h4, h5, h6 タグと同様の規則で処理される。

図表の相互参照

よって、図表の相互参照も h1, h2, h3, h4, h5, h6 と同様に処理され、以下のようにすればよい。

<a href="#図_1"><span></span></a> → 
<span data-target_id="図_1"></span> → 
<a href="#表_1"><span></span></a> → 
<span data-target_id="表_1"></span> → 

参考文献の自動番号付け

参考文献bibliography クラスに属する ul 内の li タグで連番で「」のように番号付けされる。

<h3 class="ast">参考文献</h3>
<ul class="bibliography">
  <li>:</li>
</ul>

このタグへの data-before-text-content 属性値の格納と自動 id 付けについては、h1, h2, h3, h4, h5, h6 タグと同様の規則で処理される。

ul タグの代わりに ol タグを利用してもよく、若干スタイルが異なる。

<h3 class="ast">参考文献</h3>
<ol class="bibliography">
  <li>:</li>
</ol>

参考文献の相互参照

よって、参考文献相互参照h1, h2, h3, h4, h5, h6 タグと同様に処理され、以下のようにすればよい。

文献 <a href="#[1]"><span></span></a> → 文献 
文献 <span data-target_id="[1]"></span> → 文献 

番号付けの自動リスティングの使い方

目次の自動リスティング

tableofcontents クラスに属する空の ul タグには、目次が自動リスティングされる。

<h3 class="ast">目次</h3>
<ul class="tableofcontents"></ul>

既定では最大 depth は 4 つまり段落 paragraph と小段落 subparagraph はリスティングされない。 part と chapter は id が無くても、つまり文書内リンクが貼れなくてもリスティングされる。id を持つ h2, h3, h4, h5, h6 タグは文書内リンクが貼れるので、つまり、番号付けされていなくてもリスティングされる。

以下はこのページそのものの目次の自動リスティングの例である。

目次

tableofcontents クラスに属する空の ol タグには、目次が上例とは異なる形式で自動リスティングされる。

<h3 class="ast">目次</h3>
<ol class="tableofcontents"></ol>

目次

    図目次、表目次の自動リスティング

    listoffigures クラスもしくは listoftables クラスに属する空の ul タグには、図目次表目次が自動リスティングされる。

    <h3 class="ast">図目次</h3>
    <ul class="listoffigures"></ul>
    
    <h3 class="ast">表目次</h3>
    <ul class="listoftables"></ul>

    図目次

    表目次

    listoffigures クラスもしくは listoftables クラスに属する空の ol タグには、図目次表目次が上例とは異なる形式で自動リスティングされる。

    <h3 class="ast">図目次</h3>
    <ol class="listoffigures"></ol>
    
    <h3 class="ast">表目次</h3>
    <ol class="listoftables"></ol>

    図目次

      表目次

        数式の自動番号付け - MathJax の場合

        MathJax は自動の番号付き数式に対応しているので、その機能を使えばよい。それには MathJax の Javascript を読み込む前に以下のように tags オプションを指定する。

        <script>
        MathJax = {
          tex: {
            tags: 'ams',
          },
        };
        </script>

        そうすれば TeX の equation 環境で自動の番号付き数式が得られる。

        \begin{equation}\label{eq:Euler_product}
        \sum_{\forall n \in \mathbb{N}_+}\frac1n = \prod_{\forall p\text{: 素数}}\frac1{1-\frac1p}
        \end{equation}

        数式の例 - MathJax の場合

        オイラーの積:
        \begin{equation}\label{eq:Euler_product} \sum_{\forall n \in \mathbb{N}_+}\frac1n = \prod_{\forall p\text{: 素数}}\frac1{1-\frac1p} \end{equation}
        ライプニッツの公式:
        \begin{equation}\label{eq:Leibniz_formula} \sum_{\forall m\text{: 奇数}}\frac{(-1)^\frac{m-1}2}m = \prod_{\forall p\text{: 奇数の素数}}\frac1{1 - \frac{(-1)^\frac{p-1}2}p} = \sum_{\forall p\text{: 奇数の素数}}\frac{(-1)^\frac{p-1}2}p = \frac\pi4 \end{equation}
        リーマンゼータ関数 \(\zeta(2)\):
        \begin{equation*} \sum_{\forall n \in \mathbb{N}_+}\frac1{n^2} = \frac{\pi^2}6 \end{equation*}
        リーマンゼータ関数 \(\zeta(-1)\):
        \begin{equation}\label{eq:Riemann_zeta_function} \sum_{\forall n \in \mathbb{N}_+}n = -\frac1{12} \end{equation}
        リーマンゼータ関数 \(\zeta(s)\) とオイラー積:
        \begin{equation}\label{eq:Riemann_zeta_function_and_Euler_product} \sum_{\forall n \in \mathbb{N}_+}\frac1{n^s} = \prod_{\forall p\text{: 素数}}\frac1{1-\frac1{p^s}} \end{equation}
        ネイピア数 \(e\):
        \begin{equation}\label{eq:Napier_s_constant} \sum_{\forall n \in \mathbb{N}_0}\frac1{n!} = e \end{equation}

        番号付き数式の相互参照 - MathJax の場合

        MathJax による番号付き数式相互参照には label コマンドで名付けた文字列で eqref コマンドで参照すればよい。

        式 \eqref{eq:Euler_product}
        式 \eqref{eq:Euler_product} \eqref{eq:Leibniz_formula} \eqref{eq:Riemann_zeta_function} \eqref{eq:Riemann_zeta_function_and_Euler_product} \eqref{eq:Napier_s_constant}

        数式の自動番号付け - KaTeX の場合

        KaTeX は自動の番号付き数式には対応していないが、将来 MathJax のような自動の番号付き数式に対応するかもしれない。よって、競合しない方策をここで提供するものとする。

        数式は equation クラスに属し、ast クラスに属さない div タグ内の KaTeX スクリプトに、既に tag コマンドがなければ、連番が tag コマンドによって挿入される。

        <div class="equation">
          \[
          \sum_{\forall n \in \mathbb{N}_+}\frac1n = \prod_{\forall p\text{: 素数}}\frac1{1-\frac1p}
          \]
        </div>

        このタグの tag コマンドの内容がこのタグの data-tag-text-content の属性値となる。また、このタグが id を持たない場合、eq: に連番を添えたものが id となる。

        数式の例 - KaTeX の場合

        オイラーの積:
        \[ \sum_{\forall n \in \mathbb{N}_+}\frac1n = \prod_{\forall p\text{: 素数}}\frac1{1-\frac1p} \]
        ライプニッツの公式:
        \[ \sum_{\forall m\text{: 奇数}}\frac{(-1)^\frac{m-1}2}m = \prod_{\forall p\text{: 奇数の素数}}\frac1{1 - \frac{(-1)^\frac{p-1}2}p} = \sum_{\forall p\text{: 奇数の素数}}\frac{(-1)^\frac{p-1}2}p = \frac\pi4 \]
        リーマンゼータ関数 \(\zeta(2)\):
        \[ \sum_{\forall n \in \mathbb{N}_+}\frac1{n^2} = \frac{\pi^2}6 \]
        リーマンゼータ関数 \(\zeta(-1)\):
        \[ \sum_{\forall n \in \mathbb{N}_+}n = -\frac1{12} \]
        リーマンゼータ関数 \(\zeta(s)\) とオイラー積:
        \[ \sum_{\forall n \in \mathbb{N}_+}\frac1{n^s} = \prod_{\forall p\text{: 素数}}\frac1{1-\frac1{p^s}} \]
        ネイピア数 \(e\):
        \[ \sum_{\forall n \in \mathbb{N}_0}\frac1{n!} = e \]

        番号付き数式の相互参照 - KaTeX の場合

        KaTeX による番号付き数式相互参照h1, h2, h3, h4, h5, h6 タグと同様に処理され、以下のようにすればよい。但し、span タグequation クラスに属するものとする。

        式 <a href="#eq:1"><span class="equation"></span></a>
        式 <span class="equation" data-target_id="eq:1"></span>

        この規則に従えば KaTeX に限らず MathJax でも適用可能である。

        脚注紙媒体ではない HTML での脚注の表示位置の扱いが少々悩ましい。

        footnote クラスに属する span タグ脚注として、section タグまたは article タグまたは header タグの末尾に footnote クラスに属する ul タグとして自動リスティングされるsection, article, header の子孫ではない footnote クラスに属する span タグについては特に何もしないスタイルによって上付きの文字列で表示される。

        <span class="footnote">脚注</span>

        または、footnote クラスに属する span タグ脚注として、footnote クラスに属する空の ul タグに自動リスティングされるfootnote クラスに属する span タグの中の footnote クラスに属する span タグについては特に何もしないスタイルによって上付きの文字列で表示される。

        <span class="footnote">脚注</span>
        <ul class="footnote"></ul>

        これらは両立できないので、footnote クラスに属する空の ul タグが存在すれば、前者は適用されない。

        ちなみに、これらの ul タグの代わりに ol タグで実現するものも用意してある。

        索引

        index クラスに属する span タグ索引語として、index クラスに属する空の ul タグ索引として並べ替えられて自動リスティングされる。

        <span class="index">索引語</span>
        <h3 class="ast">索引</h3>
        <ul class="index"></ul>

        索引からは紙媒体ゆえのページ番号ではなく近接する h1, h2, h3, h4, h5, h6 タグまたはfigcaption タグまたはcaption タグの data-before-text-content なければ索引語ごとの通し番号からの索引語へのリンクが貼られる。

        記号付き箇条書き・番号付き箇条書き・見出し付き箇条書き

        HTML の記号付き箇条書き

        まず、素の HTML の ul タグでこれを記載してみる。アスタリスクが添えられているものはインラインスタイルで list-style: none; を指定している。

        さて、上記、一般的な UA では '•' '◦' '◼' 記号のビュレットで印字されているかと思う。

        次の itemize クラスに属する ul タグは LaTeX 風のビュレットにしてある。アスタリスク〜なるものは title 属性で擬似要素の内容を ::before { content: attr(title); } のようにを指定している。アスタリスクが添えられているものはインラインスタイルで list-style: none; を指定する代わりに ast クラスに属する li タグを用いてもよい。

        上記、この itemize クラスの方は LaTeX に倣って '•' '-' '*' '・' 加えて '◼' '◦' '◻' 記号のビュレットを用意しておいた。

        次の ul.content, ul.content li タグはクラスに様々な記号の名前を記すことによって、柔軟なビュレットの指定を可能にしている。例えば、ul class="content prefix-black_right-pointing_triangle", ul class="prefix-section_sign", li class="prefix-interrobang", li class="prefix-reversed_pilcrow_sign" などのように HTML に記述している。

        HTML の番号付き箇条書き

        まず、素の HTML の ol タグでこれを記載してみる。アスタリスクが添えられているものはインラインスタイルで list-style: none; を指定している。アスタリスクに 0 が添えられているものはインラインスタイルで value="0" を指定している。

        1. 数学をいかに使うか, 志村 五郎, ちくま学芸文庫, 2010/12/10
          1. はじめに*
          2. 記号,特に行列について*0.
          3. 線形代数の使い方
          4. Hermite行列その他
          5. ベクトル積から外積代数まで
          6. 四元数環の重要性
          7. Clifford代数とスピン群
          8. 複素解析,特に楕円関数
          9. テータ関数と保型関数
          10. Riemannのテータ関数とDedekindの \(η\)
          11. Lebesgue積分とFourier解析
          12. Fourier変換からメタプレクティック群へ
          13. 代数で何を教えるべきか
          14. 附録*
            1. 行列の指数関数*A1.
            2. \(SL_2(\mathbf{Z})\)の生成元*A2.
            3. 定理7.1の証明*A3.
            4. 定理5.1の証明*A4.
            5. Riemannのテータ級数の収束*A5.
            6. Mellin変換*A6.
            7. Lürothの定理の証明*A7.
            8. \(GL_2(\mathbf{C})\)の表現とその応用*A8.
          15. 文献*
        2. 数学の好きな人のために, 志村 五郎, ちくま学芸文庫, 2012/2/1
          1. はじめに*
          2. Gauss‐Bonnetの公式
          3. 非ユークリッド幾何学
          4. 確率についての雑感
          5. 初等整数論のやり方と多元還
          6. 定積分の近似計算からRiemann予想まで
          7. 微分方程式の使い方
          8. 多様体からLie群へ
          9. de Rhamの定理
          10. \(p\)-進体とその使い方
          11. あとがき*
        3. 数学で何が重要か, 志村 五郎, ちくま学芸文庫, 2013/5/8
          1. はじめに*
          2. コの字型の原理
          3. 実数論は教える必要があるか
          4. ピタゴラスの定理からHilbertの第三問題まで
          5. 入学試験と数学オリンピック
          6. Galoisを超えて
          7. 問題の重要性と数学者の趣味
          8. 代数的整数論で何に注意すべきか
          9. 代数群における類と強近似定理
          10. Quadratic Diophantine equations, the class number, and the mass formula
            1. The basic setting and two ternary cases
            2. The class number and mass of and orthogonal group
            3. Precise forms of the main formulas
            4. Formulation in terms of adeles and generalizations
            5. Some more comments on the mass
            6. Additional comments on formula (21) and some remarks
            7. References*
          11. 私が会った外国数学者達
          12. 附録*
            1. 微分方程式の解の単独性*A1.
            2. 多様体間の写像\(φ\)に対する\(dφ\)*A2.
            3. 放物的部分群*A3.
            4. \(p\)-進数続論*A4.
          13. 引用文献*
        4. 数学をいかに教えるか, 志村 五郎, ちくま学芸文庫, 2014/8/6
          1. はじめに*
          2. 外国語,特に英語,の教え方*0.
          3. いかに教えたか
          4. ゆとり教育から勲章まで
          5. 掛け算の順序
          6. 昔の教科書からはじめて思いつく話
          7. 部分積分とその発展
          8. 悪い証明と間違え易い公式
          9. \(ζ(s)\) の値
          10. \(L\)-関数の値
          11. Euler数とEuler多項式
          12. 『数学で何が重要か』の訂正と類体論について
            1. 谷山豊全集について*附録 1.
            2. ふしぎにいのちながらえて*附録 2.
          13. 文献*

        さて、上記、一般的な UA では深さに関わらず数字のカウンタで印字されているかと思う。

        次の enumerate クラスに属する ol タグは LaTeX 風のカウンタにしてある。アスタリスク〜なるものは title 属性で擬似要素の内容を ::before { content: attr(title); } のようにを指定している。

        1. 数学をいかに使うか, 志村 五郎, ちくま学芸文庫, 2010/12/10
          1. はじめに*
          2. 記号,特に行列について*0.
          3. 線形代数の使い方
          4. Hermite行列その他
          5. ベクトル積から外積代数まで
          6. 四元数環の重要性
          7. Clifford代数とスピン群
          8. 複素解析,特に楕円関数
          9. テータ関数と保型関数
          10. Riemannのテータ関数とDedekindの \(η\)
          11. Lebesgue積分とFourier解析
          12. Fourier変換からメタプレクティック群へ
          13. 代数で何を教えるべきか
          14. 附録*
            1. 行列の指数関数*A1.
            2. \(SL_2(\mathbf{Z})\)の生成元*A2.
            3. 定理7.1の証明*A3.
            4. 定理5.1の証明*A4.
            5. Riemannのテータ級数の収束*A5.
            6. Mellin変換*A6.
            7. Lürothの定理の証明*A7.
            8. \(GL_2(\mathbf{C})\)の表現とその応用*A8.
          15. 文献*
        2. 数学の好きな人のために, 志村 五郎, ちくま学芸文庫, 2012/2/1
          1. はじめに*
          2. Gauss‐Bonnetの公式
          3. 非ユークリッド幾何学
          4. 確率についての雑感
          5. 初等整数論のやり方と多元還
          6. 定積分の近似計算からRiemann予想まで
          7. 微分方程式の使い方
          8. 多様体からLie群へ
          9. de Rhamの定理
          10. \(p\)-進体とその使い方
          11. あとがき*
        3. 数学で何が重要か, 志村 五郎, ちくま学芸文庫, 2013/5/8
          1. はじめに*
          2. コの字型の原理
          3. 実数論は教える必要があるか
          4. ピタゴラスの定理からHilbertの第三問題まで
          5. 入学試験と数学オリンピック
          6. Galoisを超えて
          7. 問題の重要性と数学者の趣味
          8. 代数的整数論で何に注意すべきか
          9. 代数群における類と強近似定理
          10. Quadratic Diophantine equations, the class number, and the mass formula
            1. The basic setting and two ternary cases
            2. The class number and mass of and orthogonal group
            3. Precise forms of the main formulas
            4. Formulation in terms of adeles and generalizations
            5. Some more comments on the mass
            6. Additional comments on formula (21) and some remarks
            7. References*
          11. 私が会った外国数学者達
          12. 附録*
            1. 微分方程式の解の単独性*A1.
            2. 多様体間の写像\(φ\)に対する\(dφ\)*A2.
            3. 放物的部分群*A3.
            4. \(p\)-進数続論*A4.
          13. 引用文献*
        4. 数学をいかに教えるか, 志村 五郎, ちくま学芸文庫, 2014/8/6
          1. はじめに*
          2. 外国語,特に英語,の教え方*0.
          3. いかに教えたか
          4. ゆとり教育から勲章まで
          5. 掛け算の順序
          6. 昔の教科書からはじめて思いつく話
          7. 部分積分とその発展
          8. 悪い証明と間違え易い公式
          9. \(ζ(s)\) の値
          10. \(L\)-関数の値
          11. Euler数とEuler多項式
          12. 『数学で何が重要か』の訂正と類体論について
            1. 谷山豊全集について*附録 1.
            2. ふしぎにいのちながらえて*附録 2.
          13. 文献*

        上記、この enumerate クラスの方は LaTeX に倣って '1' 'a' 'i' 'A' 'I' 加えて 'α' 'い' から始まるカウンタを用意しておいた。

        ちなみに、カウンタの一部で定義上 0 から始められずに fallback で 0 を適切に表記できていることを確認。

        次の ol.content, ol.content li タグはクラスに様々なカウンタの名前を記すことによって、細かなカウンタの指定を可能にしている。例えば、ol class="content upper-roman", ol class="content decimal" などのように HTML に記述している。また、ol.content.decimal タグの中の li タグのインラインスタイルで counter-reset: decimal -1 とすることで、li[value="0"] に相当することも行なっている。

        1. 数学をいかに使うか, 志村 五郎, ちくま学芸文庫, 2010/12/10
          1. はじめに*
          2. 記号,特に行列について*0.
          3. 線形代数の使い方
          4. Hermite行列その他
          5. ベクトル積から外積代数まで
          6. 四元数環の重要性
          7. Clifford代数とスピン群
          8. 複素解析,特に楕円関数
          9. テータ関数と保型関数
          10. Riemannのテータ関数とDedekindの \(η\)
          11. Lebesgue積分とFourier解析
          12. Fourier変換からメタプレクティック群へ
          13. 代数で何を教えるべきか
          14. 附録*
            1. 行列の指数関数*A1.
            2. \(SL_2(\mathbf{Z})\)の生成元*A2.
            3. 定理7.1の証明*A3.
            4. 定理5.1の証明*A4.
            5. Riemannのテータ級数の収束*A5.
            6. Mellin変換*A6.
            7. Lürothの定理の証明*A7.
            8. \(GL_2(\mathbf{C})\)の表現とその応用*A8.
          15. 文献*
        2. 数学の好きな人のために, 志村 五郎, ちくま学芸文庫, 2012/2/1
          1. はじめに*
          2. Gauss‐Bonnetの公式
          3. 非ユークリッド幾何学
          4. 確率についての雑感
          5. 初等整数論のやり方と多元還
          6. 定積分の近似計算からRiemann予想まで
          7. 微分方程式の使い方
          8. 多様体からLie群へ
          9. de Rhamの定理
          10. \(p\)-進体とその使い方
          11. あとがき*
        3. 数学で何が重要か, 志村 五郎, ちくま学芸文庫, 2013/5/8
          1. はじめに*
          2. コの字型の原理
          3. 実数論は教える必要があるか
          4. ピタゴラスの定理からHilbertの第三問題まで
          5. 入学試験と数学オリンピック
          6. Galoisを超えて
          7. 問題の重要性と数学者の趣味
          8. 代数的整数論で何に注意すべきか
          9. 代数群における類と強近似定理
          10. Quadratic Diophantine equations, the class number, and the mass formula
            1. The basic setting and two ternary cases
            2. The class number and mass of and orthogonal group
            3. Precise forms of the main formulas
            4. Formulation in terms of adeles and generalizations
            5. Some more comments on the mass
            6. Additional comments on formula (21) and some remarks
            7. References*
          11. 私が会った外国数学者達
          12. 附録*
            1. 微分方程式の解の単独性*A1.
            2. 多様体間の写像\(φ\)に対する\(dφ\)*A2.
            3. 放物的部分群*A3.
            4. \(p\)-進数続論*A4.
          13. 引用文献*
        4. 数学をいかに教えるか, 志村 五郎, ちくま学芸文庫, 2014/8/6
          1. はじめに*
          2. 外国語,特に英語,の教え方*0.
          3. いかに教えたか
          4. ゆとり教育から勲章まで
          5. 掛け算の順序
          6. 昔の教科書からはじめて思いつく話
          7. 部分積分とその発展
          8. 悪い証明と間違え易い公式
          9. \(ζ(s)\) の値
          10. \(L\)-関数の値
          11. Euler数とEuler多項式
          12. 『数学で何が重要か』の訂正と類体論について
            1. 谷山豊全集について*附録 1.
            2. ふしぎにいのちながらえて*附録 2.
          13. 文献*

        HTML の見出し付き箇条書き

        まず、素の HTML の dl dt dd タグでこれらを記載してみる。UA の既定のスタイルでは dt タグ、改段落のち字下げして dd タグであろうかと思う。HTML5 より前は dl[compact] 属性なるものがあった。

        集合\(\mathbf{Z}\)
        整数全体の集合
        集合\(\mathbf{Q}\)
        有理数全体の集合、有理数体
        集合\(\mathbf{R}\)
        実数全体の集合、実数体
        集合\(\mathbf{C}\)
        複素数全体の集合、複素数体
        集合\(\varnothing\)
        空集合
        実数\(\det(A)\)
        \(n\)次の正方行列\(A\)の行列式
        次数\(n\)
        \(n\in\mathbf{N}\)
        集合\(\mathbf{N}\)
        自然数全体の集合
        集合\(M_n(F)\)
        体\(F\)をとり、\(F\)の元を成分とする\(n\)次の正方行列全体の集合、全行列環
        体\(F\)
        例えば\(\mathbf{Q}\), \(\mathbf{R}\), \(\mathbf{C}\)のいずれか
        集合\(GL_n(F)\)
        \(F\)上の\(n\)次の一般線形群 \(GL_n(F) = \{X\in M_n(F) \mid \det(X) \ne 0\}\)
        集合\(SL_n(F)\)
        \(F\)上の\(n\)次の特殊線形群 \(SL_n(F) = \{X\in GL_n(F) \mid \det(X) = 1\}\)
        行列\(1_n\in GL_n(F)\)
        \(1_n = \mathrm{diag}[\underbrace{1,\ldots,1}_n] \)
        行列\(X\)
        正方行列\(X = \mathrm{diag}[\underbrace{X_1,\ldots,X_r}_{n_1+\cdots+n_r}] \)
        次数の列\(n_1,\ldots,n_r\)
        正方行列\(X_1,\ldots,X_r\)の次数

        このように、HTML5 より前に存在した dl[compact] は廃止されてしまったので、それを再現しつつ、現状はそれを dl.description と等価なものにしておく。

        集合\(\mathbf{Z}\)
        整数全体の集合
        集合\(\mathbf{Q}\)
        有理数全体の集合、有理数体
        集合\(\mathbf{R}\)
        実数全体の集合、実数体
        集合\(\mathbf{C}\)
        複素数全体の集合、複素数体
        集合\(\varnothing\)
        空集合
        実数\(\det(A)\)
        \(n\)次の正方行列\(A\)の行列式
        次数\(n\)
        \(n\in\mathbf{N}\)
        集合\(\mathbf{N}\)
        自然数全体の集合
        集合\(M_n(F)\)
        体\(F\)をとり、\(F\)の元を成分とする\(n\)次の正方行列全体の集合、全行列環
        体\(F\)
        例えば\(\mathbf{Q}\), \(\mathbf{R}\), \(\mathbf{C}\)のいずれか
        集合\(GL_n(F)\)
        \(F\)上の\(n\)次の一般線形群 \(GL_n(F) = \{X\in M_n(F) \mid \det(X) \ne 0\}\)
        集合\(SL_n(F)\)
        \(F\)上の\(n\)次の特殊線形群 \(SL_n(F) = \{X\in GL_n(F) \mid \det(X) = 1\}\)
        行列\(1_n\in GL_n(F)\)
        \(1_n = \mathrm{diag}[\underbrace{1,\ldots,1}_{n}] \)
        行列\(X\)
        正方行列\(X = \mathrm{diag}[\underbrace{X_1,\ldots,X_r}_{n_1+\cdots+n_r}] \)
        次数の列\(n_1,\ldots,n_r\)
        正方行列\(X_1,\ldots,X_r\)の次数

        BibTeX 形式による参考文献リストのアイテム自動生成

        セレクタ .bibliography li.external a[href] の場合

        .bibliography li.external タグが、

        <li class="external"><a href="https://ci.nii.ac.jp/ncid/BA69903102.bib">https://ci.nii.ac.jp/ncid/BA69903102.bib</a></li>
        のように外部サイトの BibTeX 形式の URL を指定すると、そのデータから参考文献リストのアイテムの内容を自動的に埋め込む。これには注意事項があって、これを実現するには「オリジン間リソース共有(CORS: Cross-Origin Resource Sharing)」の制限を回避する必要があり、同一ドメインのプロキシを利用せざるを得ない。そのようなプロキシを用意できないサイトでは次の別の方法を検討のこと。

        セレクタ .bibliography li.local a[href] の場合

        .bibliography li.local タグが、

        <li class="local"><a href="bibliography.bib">BA69903102</a></li>
        <li class="local"><a href="bibliography.bib">10.2307/2375064</a></li>
        <li class="local"><a href="bibliography.bib">30021753988</a></li>
        <li class="local"><a href="bibliography.bib">weber2002lehrbuch</a></li>
        のようになっていた場合、BibTeX 形式のローカルファイルを参照し、指定されたキーとして a タグの内容をキーとして、そのデータのエントリから参考文献リストのアイテムの内容を自動的に埋め込む。ここで、ローカルファイルは別々でも構わない。この場合、「オリジン間リソース共有(CORS: Cross-Origin Resource Sharing)」の制限は受けないので同一ドメインのプロキシは不要となる。

        セレクタ .bibliography li pre.bib の場合

        .bibliography li pre.bib タグが、

        <li>
        <pre class="bib">
        @book{weber2002lehrbuch,
          title={Lehrbuch Der Algebra},
          author={Weber, H.},
          number={第 1 巻},
          isbn={9780821832585},
          series={Ams Chelsea Publishing},
          url={https://books.google.co.jp/books?id=Eb0\_uK4GyYkC},
          year={2002},
          publisher={AMS Chelsea Pub.}
        }</pre>
        </li>
        のようになっている場合、そのテキストを BibTeX 形式とみなして参考文献リストのアイテムの内容を自動的に埋め込む。

        参考文献リストのアイテム自動生成における注意事項

        .bibliography li a[href] タグは内外に関わらず XMLHttpRequest しているので、クライアントに高コストである。よって、Javascript の console.log にて整形済みの出力を常に印字するようにしてあるので、ソースはコメントアウトし、その出力結果をコピー&ペーストして使用することをお勧めする。

        参考文献

        ちなみに、上記の参考文献は「志村五郎 著, “数学をいかに使うか,” ちくま学芸文庫, 筑摩書房, 2010.」の巻末の「文献」にて「本文の中で一度しか引かなかったものはここには入っていない。」とあるので、「✔」マークが後ろについているものが「本文の中で一度しか引かなかったもの」にあたる。

        h1 h1, h2, h3, h4, h5, h6 タグの自動番号付けの試験

        h1.part.ast

        h1.chapter.ast[style='counter-reset: section;']

        h2

        h3

        h4

        h5
        h6.subparagraph
        h6
        h5

        h4

        h3

        h2

        参考文献

        参考文献

        1. 西来路 文朗, 清水 健一:「素数が奏でる物語 − 2つの等差数列で語る数論の世界 (ブルーバックス)」p.123, 講談社, 2015.
        2. 西来路 文朗, 清水 健一:「素数が奏でる物語 − 2つの等差数列で語る数論の世界 (ブルーバックス)」pp.132-138, 講談社, 2015.
        3. 中村 亨: 「リーマン予想とはなにか - 全ての素数を表す式は可能か (ブルーバックス)」p.44, 講談社, 2015.
        4. 大栗 博司: 「大栗先生の超弦理論入門 (ブルーバックス)」pp.281-286, 2013.
        5. 中村 亨: 「リーマン予想とはなにか - 全ての素数を表す式は可能か (ブルーバックス)」pp.29-30, 講談社, 2015.
        6. 中村 亨: 「リーマン予想とはなにか - 全ての素数を表す式は可能か (ブルーバックス)」p.52, 講談社, 2015.
        7. 芹沢 正三: 「数論入門 ― 証明を理解しながら学べる (ブルーバックス)」p.114, 講談社, 2008.
        8. 芹沢 正三: 「数論入門 ― 証明を理解しながら学べる (ブルーバックス)」p.115, 講談社, 2008.
        9. 芹沢 正三: 「数論入門 ― 証明を理解しながら学べる (ブルーバックス)」p.116, 講談社, 2008.
        10. 志村 五郎: 「数学をいかに教えるか (ちくま学芸文庫)」p.68, 2014.
        11. 堀 源一郎: 「ハミルトンと四元数 ― 人・数の体系・応用」pp.118-122, 2007.
        12. 堀 源一郎: 「ハミルトンと四元数 ― 人・数の体系・応用」pp.122-125, 2007.

        索引

        フォントサイズの確認

        UA、MathJax, KaTeX でフォントサイズが異なるので以下を参考にされたし。ちなみに、WhatFont ブックマークレットでサイズを確認した。

        value, Gecko, Blink/WebKit
        HTML absolute fontsize
        50%, 8px, -
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        xx-small(56.25%), 9px, -
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        x-small(68.75%), 10px, 10px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        75%, 12px, 12px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        small(81.25%), 13px, 13px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        medium(100%), 16px, 16px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        large(118.7%), 18px, 18px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        x-large(143.75%), 24px, 24px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        xx-large(175%), 32px, 32px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        250%, 40px, 40px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        300%, 48px, 48px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        450%, 72px, 72px
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        value, Gecko/Blink/WebKit, SeaMonkey
        HTML relative fontsize
        smaller4, 8px(50%), 8px(50%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        smaller3, 9px(56.25%), 9px(56.25%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        smaller2, 11px(68.75%), 10px(62.5%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        smaller, 13px(81.25%), 13px(81.25%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        medium, 16px(100%), 16px(100%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        larger, 19px(118.75%), 18px(112.5%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        larger2, 23px(143.75%), 24px(150%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        larger3, 28px(175%), 32px(200%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        larger4, 33px(206.25%), 48px(300%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        larger5, 40px(250%), 72px(450%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        larger6, 48px(300%), 108px(675%)
        \(\sqrt{2}\) が,なぜ不思議なのか? \(\sqrt{2}\) − why mysterious?
        command, MathJax, KaTeX
        MathJax|Katex fontsize
        \tiny, 8px, 10px
        \(\tiny\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \sixptsize, -, 12px
        \(\sixptsize\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \scriptsize, 11px, 14px
        \(\scriptsize\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \footnotesize, -, 16px
        \(\footnotesize\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \small, 14px, 17px
        \(\small\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \normalsize, 16px, 19px
        \(\normalsize\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \large, 19px, 23px
        \(\large\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \Large, 23px, 28px
        \(\Large\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \LARGE, 28px, 33px
        \(\LARGE\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \huge, 33px, 40px
        \(\huge\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        \Huge, 40px, 48px
        \(\Huge\sqrt{2}\text{ が,なぜ不思議なのか? }\sqrt{2}\text{ why mysterious?}\)
        われわれの言語を整備した文法が数学なのであるから,われわれは数学から逃れられない.実在が数学的なのではなく,われわれが言語に潜在している性質を総動員するから数学的になるのである.- 吉田夏彦
        - 足立恒雄, √2の不思議, ちくま学芸文庫, p. 156, 2007/2/10

        まとめ

        以下のこれまで説明した HTML+CSS の規則とLaTeX コマンドとの対応をまとめておく。

        HTML+CSS と LaTeX コマンド対応
        HTML+CSS LaTeX 摘要
        h1.part, h1.chapter, h2, h3, h4, h5, h6.subparagraph part, chapter, section, subsection, subsubsection, paragraph, subparagraph コマンド 小節小々節段落小段落のタイトル
        figcaption figure 環境 caption コマンド 図見出し
        table caption table 環境 caption コマンド 表見出し
        ul.bibliography/ol.bibliography thebibliography 環境 参考文献
        ul.tableofcontents/ol.tableofcontents tableofcontents コマンド 目次
        ul.listoffigures/ol.listoffigures listoffigures コマンド 図目次
        ul.listoftables/ol.listoftables listoftables コマンド 表目次
        *[id='id'] label コマンド ラベル
        a[href='#id'] または span[data-target_id='id']、数式は span.equation[data-target_id='id'] ref コマンド、文献は cite コマンド、数式は eqref コマンド 相互参照
        TeX に同じ equation 環境 番号付き数式 - MathJax
        div.equation \[…\] 番号付き数式 - KaTeX
        span.footnote footnote コマンド 脚注
        ul.footnote/ol.footnote - 脚注リスト
        span.index index コマンド 索引語
        ul.index printindex コマンド 索引
        ul.itemize itemize 環境 記号付き箇条書き
        ol.enumeate enumerate 環境 番号付き箇条書き
        dl.description description 環境 見出し付き箇条書き
        1. item
        2. item
          1. item
          2. item
            1. item
            2. item
              1. item
              2. item
              3. item
                1. item
                2. item
                1. item
                2. item
                3. item
              4. item
            3. item
            4. item
          3. item
            1. item
            2. item
        3. item