h1: タイトル

h2: サブタイトル

h3: 見出し1

h4: 見出し2

h5: 見出し3

h6: 見出し4

通常のブラウザのヘッダのマージンのサイズは、h1〜h3で減、h3〜h6で増、となっているが、ここではh1〜h6で減とする。

line-height: 行の高さ

およそ font-size の 1.2 倍だということらしいが、実際に各ブラウザでみてみると、フォントに依存して嫌に低かったり（特に MS 系フォント、平成明朝、など由来）、嫌に高かったり（特に小塚明朝、など由来、それほど多くない）、マチマチである。

新しめの和文フォントではほどほどに高くて、筆者は読みやすいと考える。あまりにギチギチだと行が長いときに読みづらい。だからと言って、小塚明朝のように、どうしたことが嫌に高くても間が抜ける。

ブラウザでマチマチなのは、もしかすると、ルビの高さがフォントで定義されていて、フォントサイズにその高さを加算した値から算出しているのではないかと思ったが、よくわからない。

とは言え、フォントの設定により行間がマチマチなのは非常に読みづらいので、もう決め打ちしてしまうことにした。

もっとも読みやすかったブラウザ Firefox 上で計測した結果、フォントサイズ 16pt のときにバウンディングボックスの高さが 24.5pt なので、1.5 倍と 1.6 倍を試してみたが、やはり正確に \(\frac{24.5}{16}\) がよいようだ。以下の CSS をどこかに書いておけばよい。

body {
  line-height: 1.53125;
}

hr: 水平線

通常のブラウザの水平線のボーダーのサイズは、上下左右が1,1,1,1となっているが、ここでは高さのみ1とする。

✓Tooltips

ツールチップを、無論のこと Javascript を使わずに実現する。以下のスタイルを使い方によって選ぶことができ、振る舞いをみるにはマウスをホバーしてみるとよい。

よくある「ツールチップが邪魔で下の要素が選べない」みたいなことは防いでいるのでストレスがないと思われ。

✓詳細・サマリ

details[open] > summary にて、無論のこと Javascript を使わずにアニメーションを実現する。

@media screen {
details:not(.horizontally):not(.diagonally)[open]:not(.noanimation) > summary ~ * {
  animation: details-vertically-open 1.6s ease;
}
}
@keyframes details-vertically-open {
  0% {
    opacity: 0;
    max-height: 0;
  }
  100% {
    opacity: 1;
    max-height: 100vh;
  }
}

閉じるときのアニメーションは、どうしたらいいか解らない。閉じるときも素早くてもよいのでアニメーションした方がベターだと思う。

Safari ではなぜか初回しかアニメーションしないので、致し方なく Javascript によるアニメーションをこちらにて実現した。移行もしやすく設計し、加えて、閉じるときのアニメーションにも対応したので、多少寿命は長い方策と言えるだろう (2021/08/15 追記)。

✓タブ

タブを、無論のこと Javascript を使わずに実現する。「Functional CSS Tabs Revisited」と「Functional CSS Tabs Re-Revisited」を参考にしてパディングの調整をしやすくした。前者はシンプルで使いやすいのだがタブが一行に制限されているなどの欠点がある。後者は欠点が解消されているが、途中でフォントサイズを零にするなどの荒技？を使っているので少々トリッキーである。ここでは後者を筆者が調整した CSS の実現例、内容を解説を兼ねて紹介する。オリジナルも手元では残してあるので、クラス名は tabs を tabset などと変更させてもらった。その他、細かい変更点はタブの枠線を角丸にした。いずれもレガシーなブラウザには配慮していないので注意。ちなみに、後者は元々レガシーなブラウザにかなり配慮しており、必ずオリジナルをあたること。

.tabset {
  position: relative;
  margin-top: 1em;
  height: var(--tabset-height, 25em);
  clear: both;
}
.tabset > .tab {
  float: left;
}
.tabset > .tab > label {
  position: relative;
  background: #0001;
  border-color: #0003;
  padding: .5em;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: .5em .5em 0 0;
}
.tabset > .tab > input[type='radio'] {
  display: none;
}
.tabset > .tab > div {
  background: var(--background-color, white);
  border-color: #0003;
  position: absolute;
  top: calc(1.3em + .5em - 2px);
  left: 0; right: 0; bottom: 0;
  padding: .5em;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}
.tabset > .tab > input[type='radio']:checked ~ label ~ div {
  z-index: 1;
}
.tabset > .tab > input[type='radio']:checked ~ label {
  z-index: 2;
  background: var(--background-color, white);
  border-color: #0003;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: .5em .5em 0 0;
}

.tabset {
  --tab-padding-factor: .4;
  font-size: 0;
  margin-top: var(--font-size, 16px);
}
.tabset:after {
  clear: both;
  content: '';
  display: table;
}
.tabset > .tab {
  display: inline;
}
.tabset > .tab > label {
  background: #0001;
  border-color: #0003 #0003 #0000 #0003;
  display: inline-block;
  font-size: var(--font-size, 16px);
  left: 1px;
  margin-left: -1px;
  padding: calc(var(--font-size, 16px) * var(--tab-padding-factor));
  position: relative;
  vertical-align: bottom;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-radius: .5em .5em 0 0;
}
.tabset > .tab > input[type='radio'] {
  clip: rect(0 0 0 0);
  height: 0;
  opacity: 0;
  position: fixed;
  width: 1px;
  z-index: -1;
}
.tabset > .tab > .tab_wear {
  display: inline;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 0;
  width: 0;
}
.tabset > .tab > .tab_wear > .tab_body {
  box-sizing: border-box;
  display: block;
  background: var(--background-color, white);
  border-color: #0003;
  padding: .5em;
  float: left;
  font-size: var(--font-size, 16px);
  margin-top: -1px;
  width: 100%;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}
.tabset > .tab > input[type='radio']:checked ~ label {
  background: var(--background-color, white);
  border-color: #0003;
  padding-bottom: calc(var(--font-size, 16px) * var(--tab-padding-factor) + 1px);
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: .5em .5em 0 0;
  z-index: 1;
}
.tabset > .tab > input[type='radio']:checked ~ .tab_wear {
  display: inline;
}

<div class="tabset">

<div class="tab">
<input type="radio" checked="" name="tabset-1" id="tabset-1-1">
<label for="tabset-1-1">タブ 1</label>
<div class="tab_wear"><div class="tab_body">

<h2>タブ 1</h2>
タブ 1

</div></div>
</div>

<div class="tab">
<input type="radio" name="tabset-1" id="tabset-1-2">
<label for="tabset-1-2">タブ 2</label>
<div class="tab_wear"><div class="tab_body">

<h2>タブ 2</h2>
タブ 2

</div></div>
</div>

</div>

function document_automatic_tabset_setting()
{
  let tabset_index = 0;
  for (const tabset of document.body.querySelectorAll('.tabset')) {
    let tab_index = 0;
    ++tabset_index;
    for (const tab of tabset.querySelectorAll('.tabset > .tab')) {
      const input = tab.querySelector(".tabset > .tab > input[type='radio']");
      const label = tab.querySelector(".tabset > .tab > input[type='radio'] ~ label");
      ++tab_index;
      input.name = `tabset-${tabset_index}`;
      input.id = `tabset-${tabset_index}-${tab_index}`;
      label.setAttribute('for', `tabset-${tabset_index}-${tab_index}`);
    }
    console.log(tabset.outerHTML);
  }
}
window.addEventListener('load', function() {
  document_automatic_tabset_setting();
});

筆者が手を加えたのは、レガシーブラウザを犠牲にして調整のしやすさを優先にしたので注意されたい。本節を参考にするなら、くれぐれもオリジナルも参考にしていただきたい。

CSS 変数（カスタムプロパティ）定義とその振る舞いの調査

表題について、ちょっと勘違いしそうになったが、きちんと確かめて納得したので、その過程を残しておく。よく考えてみたら当然の振る舞いなのだが、将来はこういうことが可能になるのかもしれない。

まず、--font-size: calc(1em); を div で定義する。変数定義が効いていることを確認するために、同時に --foreground-color: blue; も併せて定義しておく。

次に、--font-size: 1em; を div で定義する。変数定義が効いていることを確認するために、同時に --foreground-color: darkgreen; も併せて定義しておく。

最後に、--font-size: 16px; を div で定義する。変数定義が効いていることを確認するために、同時に --foreground-color: magenta; も併せて定義しておく。

そもそもスタイル属性で CSS 変数の定義ができることからの、仕組みのちょっとした勘違いだったのだが、普通のプログラミング言語なら「遅延評価」なるものが後から実装されたりして、基本的には評価した値を保持しておく方が効率的なのだが、CSS/HTML はとにかく文字列のまま保持しておいて使うときに評価するというのが基本的な設計思想なのだろう。なので、特段、違和感というものはない。

もし、こうした仕様が必要とされるなら（私は必要なのだが）、--font-size: eval(1em); などということになろうか。意外と将来そういった関数が導入されるかもしれない (2021/07/18 記)。

そもそも、変数を使うときには var が必要となるのに、変数名に「--」などという接頭辞が必要となっていること自体「設計ミス」な気もするので多くを期待しても虚しいだけかもしれない。

✓table[border] の廃止と代替スタイルについて

ここの話題は CSS 変数（カスタムプロパティ）とその寿命に関係する。

さて、table[border] つまり、テーブルの border 属性が HTML Live Standard で廃止ということで、ブラウザが事実上サポートを続けるかもしれないが、準備はしておきたいと思った。

本節の末尾で紹介するクラス付きテーブルスタイル table.border を使うと、border 属性付きテーブルとほぼ等価な見栄えになる。左がブラウザ既定、右がこのスタイルによる実現である。

これで実用的には十分なのかもしれないが、多少汎用性を持たせよう。border="2" と指定したときのようにスタイルファイルで見栄えを実現する。そのために CSS 変数を活用してみよう。インラインスタイル定義としてテーブルの属性 style="--table-border-width: 2px;" を付記すればよい。左がブラウザ既定、右がこのスタイルによる実現である。

Firefox, Chrome, Safari それぞれが異なるのでまったく同じにはならないが、むしろより自然な様相になってると思う。

さて、せっかくここまで再現できたので、少し調子に乗って他によく使われる table[border][rules='all'] だけはサポートしておこうと思った。

本節の末尾で紹介するクラス付きテーブルスタイル table.border_rules-all を使うと、border, rules='all' 属性付きテーブルとほぼ等価な見栄えになる。左がブラウザ既定、右がこのスタイルによる実現である。

素晴らしい！実用上、これらの属性（但し、rules='all' のときのみ）がブラウザで廃止されても困らない。

一応、border="5" としたときの対応として、インラインスタイル定義としてテーブルの属性 style="--table-border-width: 5px;" を付記したものも実現しておこう。

rules='all' 以外のクラスもいずれ作成しておくかもしれない。

さて、ここで style="--table-border-width: 5px;" などを付記しているので、万が一次のテーブルで枠線が太いままだったら困る。最初の例の表をそのまま載せてみる。

流石に変数が上書きされてしまうようなことはない。からくりは CSS 変数はスタイルの継承によって参照・定義されるので、この場合、これらは要素の継承関係にはないので、意図しない変数の変更には至らない。至極当たり前のことなのだが、前節に引き続き、実際に確認してみて納得できた次第である。

では、最後にこのスタイルファイルを紹介しておく。

table.border {
  border-color: darkgray;
  border-style: outset;
  border-width: var(--table-border-width, 1px);
  border-collapse: separate;
  border-spacing: var(--table-border-spacing, 2px);
}
table.border > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border-color: darkgray;
  border-style: inset;
  border-width: var(--table-td-border-width, 1px);
}
table.border_rules-all {
  border-style: outset;
  border-width: var(--table-border-width, 1px);
  border-collapse: collapse;
}
table.border_rules-all > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  border-style: solid;
  border-width: var(--table-td-border-width, 1px);
}

但し、SeaMonkey ではセレクタ :is() が働かないので多少工夫を要するのだが、時間が解決する問題だと思うのでそのままにしておく。

実はこのページそのもののスタイルの影響で、上例は table[border] の方がブラウザ、特に Firefox の既定の見栄えから多少異なっている。いずれ対応するつもりだ対応したが、プレーンな状態のをこちらに転載しておく。

コメント行削除、TSV, CSV テーブル化、テーブル偶奇背景色スタイル

この３つは独立しているが、一つの例で説明は事足りると思うので、詳しく順を追って説明する。しかし、表の例を打ち込むのが面倒なので Javascript で具体的な計算をした結果を算出するところから始める。

[問題] 正 \(n\) 角形からなる正 \(f\) 面体 \(\mathscr{P}\) の、それぞれの頂点に集まる辺の個数 \(m\) 、\(\mathscr{P}\) のすべての辺の個数 \(e\)、\(\mathscr{P}\) のすべての頂点の個数 \(v\) には以下の関係がある。

\[ \frac{nf}{2} = \frac{mv}{2} = e \] \[ v - e + f = 2 \] \[ (n - 2)(m - 2) \lt 4 \]

\((n, m)\) の \(2 \lt n, 2 \lt m\) において取り得る組み合わせを Javascript で \(n \lt 100, m \lt 100\) まで求めよ。

[解答例] 以下の Javascript を書けばよい。上記の第３式は他の式から導かれるが、下記の \(f\) を求める式はその過程で得られる。

console.log(`# 2 < n, 2 < m, f = 4*m/(2*n - m*n + 2*m), v = n*f/m, e = n*f/2`);
console.log(`𝒫,𝑛,𝑚,𝑣,𝑒,𝑓`);
for (let n=3; n<100; ++n)
  for (let m=3; m<100; ++m)
    if ((n-2)*(m-2) < 4) {
      const f = 4*m/(2*n - m*n + 2*m);
      const v = n*f/m;
      const e = n*f/2;
      console.log(`正${f}面体,${n},${m},${v},${e},${f}`);
    }

以下では console.log 関数の代わりに document.writeln 関数に書き換えて、実際にこのドキュメントに pre タグ内に書き込んでいる。これは CSV 形式であることがわかるだろう。

さて、この pre タグ内のコメント行を削除してしまう Javascript を適用してみる。具体的には、後述の施しをした上で、remove_comment_BOL_sharp クラスをもつ pre に CSV 形式を書けばよい。

さて、この pre タグ内の CSV 形式をテーブルに直してしまう Javascript を適用してみる。具体的には、後述の施しをした上で、csv クラスをもつ pre に CSV 形式を書けばよい。

以下の参考文献の表「図2-6」が書けた。ここでは、プログラムで確認したが、正多面体は「正4面体」,「正8面体」,「正20面体」,「正6面体」,「正12面体」の５種類に限ることを示している。

参考文献

• 日比 孝之 (著), 多角形と多面体 図形が織りなす不思議世界 (ブルーバックス), p.47, 2020/10/22.

ところで、第３式を確認しておかないのは気持ち悪いので導いておく。参考文献と同じになるかどうかはわからない。 \begin{gather} \frac{nf}{2} = e\implies f = \frac{2e}{n},\\ \frac{mv}{2} = e\implies v = \frac{2e}{m}. \end{gather} 第２式にこれらを代入すると、 \begin{gather} \frac{2e}{m} - e + \frac{2e}{n} = 2\\\implies \frac{2en - emn + 2em}{mn} = 2\implies 2en - emn + 2em = 2mn\\\implies e(2n - mn + 2m) = 2mn\implies e\left(4 - (mn - 2n - 2m + 4)\right) = 2mn\implies\\ e\left(4 - (m - 2)(n - 2)\right) = 2mn.\\ \end{gather} \(e\), \(m\), \(n\) は正であるので、 \begin{gather} (n - 2)(m - 2) \lt 4. \end{gather} 見返してみると参考文献とは若干異なるが、恣意的に変えたわけでもなく同じ結果が得られた。本題に戻ろう。

このように HTML+Javascript で動的にテーブルを構成する Javascript の使用例を示した。多用するとこのページのようにブラウザが「遅い！」と警告を発するので、生成物をコピーして HTML に貼り付けた方がいいかもしれない。一応、準備の施し方法を説明しておく。以下を HTML ヘッダに書いておいて、上述の説明通りにすればよい。

<script defer src="path_to/comment-remover.js" onload="
window.addEventListener('load', function() {
  selector_children_remove_comment_BOL_char('pre.remove_comment_BOL_sharp');
});
"></script>
<script defer src="path_to/table-constructors.js" onload="
window.addEventListener('load', function() {
  selector_children_convert_csv_to_table('pre.csv');
});
"></script>

本ページはあくまで技術実証を目的としているので、このままにしておく。ちなみに、「グリフ — Unicode のグリフで似て異なるもの」では、CSV 形式から相当凝ったテーブルを作成したり、「グリフ — レガシーコンピューティング用の記号、塗りつぶし、囲み用の記号、技術用記号」では、Javascript から TSV 形式を生成し、行列を転置した上でテーブルを作成したり、いろいろ技術を試みている。興味がある方は HTML ソースにあたると良いだろう。

Unicode と数式: MathJax または KaTeX

\(\TeX\), MathJax, \(\KaTeX\) による、数学用英数字記号を中心に、その使われ方をまとめておく。但し、MathJax ではいくつか問題が残っている。

グリフ	Unicode	\(\TeX\)			\TeX				備考
 	⟨ ⟩	\( \)				 				空白
!	⟨!⟩	\(!\)				!				感嘆符/階乗記号
"	⟨"⟩	\("\)				"				ダブルクォーテーションマーク
#	⟨#⟩	\(\#\)				\#				番号記号/シャープ
$	⟨$⟩	\(\$\)				\$				ドル通貨記号
%	⟨%⟩	\(\%\)				\%				パーセント記号
&	⟨&⟩	\(\&\)				\&				アンパサンド/アンド記号
'	⟨'⟩	\('\)				'				アポストロフィ
(	⟨(⟩	\((\)				(				始め丸括弧
)	⟨)⟩	\()\)				)				終わり丸括弧
*	⟨*⟩	\(*\)				*				アスタリスク
+	⟨+⟩	\(+\)				+				正号
,	⟨,⟩	\(,\)				,				カンマ
-	⟨-⟩	\(-\)				-				ハイフン/負号
.	⟨.⟩	\(.\)				.				ピリオド/終止符
/	⟨/⟩	\(/\)				/				スラッシュ/斜線
:	⟨:⟩	\(:\)				:				コロン
;	⟨;⟩	\(;\)				;				セミコロン
<	⟨<⟩	\(<\)			<				より小不等号
=	⟨=⟩	\(=\)				=				等号
>	⟨>⟩	\(>\)				>				より大不等号
?	⟨?⟩	\(?\)				?				疑問符
@	⟨@⟩	\(@\)				@				アットマーク/単価記号

[	⟨[⟩	\([\)				[				始め角括弧
\	⟨\⟩	\(\backslash\)			\backslash			バックスラッシュ/逆斜線
]	⟨]⟩	\(]\)				]				終わり角括弧
^	⟨^⟩	\(\hat{}\)			\hat{}				サーカムフレックスアクセント
^	⟨^⟩	\(\text{\textasciicircum}\)	\text{\textasciicircum}		サーカムフレックスアクセント
_	⟨_⟩	\(\_\)				\_				アンダースコア
`	⟨`⟩	\(`\)				`				グレーブアクセント

{	⟨{⟩	\(\{\)				\{				始め波括弧
|	⟨|⟩	\(|\)				|				縦線
}	⟨}⟩	\(\}\)				\}				終わり波括弧
~	⟨~⟩	\(\tilde{}\)			\tilde{}			チルダ
~	⟨~⟩	\(\text{\textasciitilde}\)	\text{\textasciitilde}		チルダ

 	⟨ ⟩	\(~\)				~				ノーブレークスペース
¡	⟨¡⟩	 				 				逆さ感嘆符
¢	⟨¢⟩	\(\cent\)			\cent				セント通貨記号
£	⟨£⟩	\(\pounds\)			\pounds				ポンド通貨記号
¤	⟨¤⟩	\(\currency\)			\currency			不特定通貨記号
¥	⟨¥⟩	\(\yen\)			\yen				円通貨記号
¦	⟨¦⟩	 				 				破断線
§	⟨§⟩	 				 				節記号
©	⟨©⟩	\(\copyright\)			\copyright			著作権表示記号
ª	⟨ª⟩	 				 				女性序数標識
«	⟨«⟩	 				 				始め二重山括弧引用記号
¬	⟨¬⟩	\(\neg\)			\neg				否定記号
­	⟨­⟩	\(\text{-}\)			\text{-}			ソフトハイフン
®	⟨®⟩	\(\circledR\)			\circledR			登録商標記号
¯	⟨¯⟩	 				 				マクロン
°	⟨°⟩	\(\degree\)			\degree				度
±	⟨±⟩	\(\pm\)				\pm				正負号
²	⟨²⟩	\(^2\)				^2				上付き2
³	⟨³⟩	\(^3\)				^3				上付き3
´	⟨´⟩	\('\)				'				アキュートアクセント
µ	⟨µ⟩	\(\mu\)				\mu				マイクロ記号
¶	⟨¶⟩	 				 				段落記号
·	⟨·⟩	\(\cdot\)			\cdot				中点
¸	⟨¸⟩	 				 				セディラ
¹	⟨¹⟩	\(^1\)				^1				上付き1
º	⟨º⟩	 				 				男性序数標識
»	⟨»⟩	 				 				終わり二重山括弧引用記号
¼	⟨¼⟩	 				 				4分の1
½	⟨½⟩	 				 				2分の1
¾	⟨¾⟩	 				 				4分の3
¿	⟨¿⟩	 				 				逆さ疑問符

×	⟨×⟩	\(\times\)			\times				乗算記号
Ø	⟨Ø⟩	\(\text{\O}\)			\text{\O}			ラテン大文字Oに斜線

÷	⟨÷⟩	\(\div\)			\div				除算記号
ø	⟨ø⟩	\(\text{\o}\)			\text{\o}			ラテン小文字Oに斜線

Ϙ	⟨Ϙ⟩	\(\Qoppa\)			\Qoppa				古代ギリシャ大文字コッパ
ϙ	⟨Ϙ⟩	\(\qoppa\)			\qoppa				古代ギリシャ小文字コッパ

℀	⟨℀⟩	 				 				Account Of
℁	⟨℁⟩	 				 				Addressed To The Subject
ℂ	⟨ℂ⟩	\(\mathbb{C}\)			\mathbb{C}			複素数集合
℃	⟨℃⟩	\(^\circ\mathrm{C}\)		^\circ\mathrm{C}		Degree Celsius/摂氏度
℄	⟨℄⟩	 				 				Centre Line Symbol
℅	⟨℅⟩	 				 				Care Of
℆	⟨℆⟩	 				 				Cada Una
ℇ	⟨ℇ⟩	\(\Euler\)			\Euler				Euler Constant/オイラー定数
℈	⟨℈⟩	\(\scruple\)			\scruple			Scruple/スクループル (単位) 
℉	⟨℉⟩	\(^\circ\mathrm{F}\)		^\circ\mathrm{F}		Degree Fahrenheit/華氏度
ℊ	⟨ℊ⟩	\(\mathscr{g}\)			\mathscr{g}			重力加速度
ℋ	⟨ℋ⟩	\(\mathscr{H}\)			\mathscr{H}			ハミルトニアン
ℌ	⟨ℌ⟩	\(\mathfrak{H}\)		\mathfrak{H}			ヒルベルト空間
ℍ	⟨ℍ⟩	\(\mathbb{H}\)			\mathbb{H}			四元数集合
ℎ	⟨ℎ⟩	\(h\)				h				Planck Constant/プランク定数
ℏ	⟨ℏ⟩	\(\hslash\)			\hslash				プランク定数	​	ħ	⟨ħ⟩	\(\hbar\)			\hbar				ディラック定数
ℐ	⟨ℐ⟩	\(\mathscr{I}\)			\mathscr{I}			 
ℑ	⟨ℑ⟩	\(\mathfrak{I}\)		\mathfrak{I}			虚部
ℒ	⟨ℒ⟩	\(\mathscr{L}\)			\mathscr{L}			ラプラス変換記号
ℓ	⟨ℓ⟩	\(\ell\)			\ell				リットル記号	​	𝓁	⟨𝓁⟩	\(\mathscr{l}\)			\mathscr{l}			長さ記号
℔	⟨℔⟩	 				 				L B Bar Symbol/听記号
ℕ	⟨ℕ⟩	\(\mathbb{N}\)			\mathbb{N}			自然数集合
№	⟨№⟩	 				 				Numero Sign/ナンバー記号
℗	⟨℗⟩	 				 				Sound Recording Copyright/音楽著作権記号
℘	⟨℘⟩	\(\wp\)				\wp				Weierstrass の楕円関数
ℙ	⟨ℙ⟩	\(\mathbb{P}\)			\mathbb{P}			素数集合
ℚ	⟨ℚ⟩	\(\mathbb{Q}\)			\mathbb{Q}			有理数集合
ℛ	⟨ℛ⟩	\(\mathscr{R}\)			\mathscr{R}			リーマン積分記号
ℜ	⟨ℜ⟩	\(\mathfrak{R}\)		\mathfrak{R}			実部
ℝ	⟨ℝ⟩	\(\mathbb{R}\)			\mathbb{R}			実数集合
℞	⟨℞⟩	 				 				Prescription Take
℟	⟨℟⟩	 				 				Response
℠	⟨℠⟩	 				 				Service Mark
℡	⟨℡⟩	 				 				Telephone Sign/電話記号
™	⟨™⟩	 				 				Trade Mark Sign/トレードマーク記号
℣	⟨℣⟩	 				 				Versicle
ℤ	⟨ℤ⟩	\(\mathbb{Z}\)			\mathbb{Z}			整数集合
℥	⟨℥⟩	\(\Ounce\)			\Ounce				Ounce Sign/薬用オンス記号
Ω	⟨Ω⟩	\(\Ohm\)			\Ohm				Ohm Sign/オーム記号
℧	⟨℧⟩	\(\mho\)			\mho				Inverted Ohm Sign/逆さオーム記号
ℨ	⟨ℨ⟩	\(\mathfrak{Z}\)		\mathfrak{Z}			
℩	⟨℩⟩	 				 				Turned Greek Small Letter Iota
K	⟨K⟩	 				 				Kelvin Sign/ケルビン記号
Å	⟨Å⟩	\(\Angstroem\)			\Angstroem			Angstrom Sign/オングストローム記号
ℬ	⟨ℬ⟩	\(\mathscr{B}\)			\mathscr{B}			ベルヌーイ多項式
ℭ	⟨ℭ⟩	\(\mathfrak{C}\)		\mathfrak{C}			 
℮	⟨℮⟩	 				 				Estimated Symbol/e-マーク
ℯ	⟨ℯ⟩	\(\mathscr{e}\)			\mathscr{e}			ネイピア数
ℰ	⟨ℰ⟩	\(\mathscr{E}\)			\mathscr{E}			起電力
ℱ	⟨ℱ⟩	\(\mathscr{F}\)			\mathscr{F}			フーリエ変換記号
Ⅎ	⟨Ⅎ⟩	\(\Finv\)			\Finv				クラウディウスのディガンマ
ℳ	⟨ℳ⟩	\(\mathscr{M}\)			\mathscr{M}			行列
ℴ	⟨ℴ⟩	\(\mathscr{o}\)			\mathscr{o}			ランダウ記法
ℵ	⟨ℵ⟩	\(\aleph\)			\aleph				アレフ記号
ℶ	⟨ℶ⟩	\(\beth\)			\beth				ヴェート記号
ℷ	⟨ℷ⟩	\(\gimel\)			\gimel				ギメル記号
ℸ	⟨ℸ⟩	\(\daleth\)			\daleth				ダレット記号
ℹ	⟨ℹ⟩	 				 				Information Source
℺	⟨℺⟩	 				 				
℻	⟨℻⟩	 				 				Facsimile Sign/FAX 記号
ℼ	⟨ℼ⟩	 				 				ギリシャ黒板太字 π
ℽ	⟨ℽ⟩	 				 				ギリシャ黒板太字 γ
ℾ	⟨ℾ⟩	 				 				ギリシャ黒板太字 Γ
ℿ	⟨ℿ⟩	 				 				ギリシャ黒板太字 Π
⅀	⟨⅀⟩	 				 				ギリシャ黒板太字 Σ
⅁	⟨⅁⟩	 				 				 
⅂	⟨⅂⟩	 				 				 
⅃	⟨⅃⟩	 				 				 
⅄	⟨⅄⟩	\(\Yup\)			 				 
ⅅ	⟨ⅅ⟩	 				 				ラテン黒板斜体太字 D
ⅆ	⟨ⅆ⟩	 				 				ラテン黒板斜体太字 d
ⅇ	⟨ⅇ⟩	 				 				ラテン黒板斜体太字 e
ⅈ	⟨ⅈ⟩	 				 				ラテン黒板斜体太字 i
ⅉ	⟨ⅉ⟩	 				 				ラテン黒板斜体太字 j
⅊	⟨⅊⟩	 				 				Property Line
⅋	⟨⅋⟩	\(\invamp\)			 				線形論理の乗法的論理和記号
⅌	⟨⅌⟩	 				 				Per Sign
⅍	⟨⅍⟩	 				 				Aktieselskab/スカンディナビア諸国における株式会社
ⅎ	⟨ⅎ⟩	 				 				クラウディウスの小文字ディガンマ
⅏	⟨⅏⟩	 				 				サマリア文字記号

∀	⟨∀⟩	\(\forall\)			\forall				全称量化記号
∁	⟨∁⟩	\(\complement\)			\complement			差集合
∂	⟨∂⟩	\(\partial\)			\partial			偏微分記号
∃	⟨∃⟩	\(\exists\)			\exists				存在量化記号
∄	⟨∄⟩	\(\nexists\)			\nexists			否定存在量化記号
∅	⟨∅⟩	\(\emptyset\)			\emptyset			空集合
∆	⟨∆⟩	\(\Delta\)			\Delta				インクリメント記号
∇	⟨∇⟩	\(\nabla\)			\nabla				ナブラ記号

\textasciicircum, \textasciitilde, \(\cent\), \(\pounds\), \(\currency\), \(\copyright\), \(\degree\), \(\O\), \(\o\), \(\Qoppa\), \(\qoppa\), \(\Euler\), \(\scruple\), \(\Ounce\), \(\Ohm\), \(\Angstroem\), \(\Yup\), \(\invamp\) は MathJax で未サポート。

\(\cent\), \(\pounds\), \(\currency\), \(\Qoppa\), \(\qoppa\), \(\Euler\), \(\scruple\), \(\Ounce\), \(\Ohm\), \(\Angstroem\), \(\Yup\), \(\invamp\) は \(\KaTeX\) で未サポート。

\(\TeX\) 数式コマンドと Unicode コードポイント

\(\TeX\) 数式コマンドとして提供されていたグリフが、今やユニコードでもサポートされている。ややこしいのが、かねてからサポートされていたグリフは前の方のコードポイントにあって、アルファベット一揃いは後ろの方のコードポイントに割り当てられていることである。

よって、アルファベットなどのコードポイントが昇順に並んでいることを前提にプログラミングすると痛い目にあることになる。

以下にローマ字をまとめておく。

• \(\TeX\) コマンド \mathnormal
  … \(\mathnormal{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathnormal{abcdefghijklmnopqrstuvwxyz \imath{}\jmath{}}\) \(\mathnormal{0123456789}\)
• Unicode, Latin Italic
  … ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyzıȷ
• \(\TeX\) コマンド \mathbf
  … \(\mathbf{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathbf{abcdefghijklmnopqrstuvwxyz}\) \(\mathbf{0123456789}\)
• Unicode, Mathematical Bold
  … 𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐗𝐘𝐙 𝐚𝐛𝐜𝐝𝐞𝐟𝐠𝐡𝐢𝐣𝐤𝐥𝐦𝐧𝐨𝐩𝐪𝐫𝐬𝐭𝐮𝐯𝐰𝐱𝐲𝐳 𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗
• \(\TeX\) コマンド \mathit
  … \(\mathit{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathit{abcdefghi\imath{}j\jmath{}klmnopqrstuvwxyz}\) \(\mathit{0123456789}\)
• Unicode, Mathematical Italic
  … 𝐴𝐵𝐶𝐷𝐸𝐹𝐺𝐻𝐼𝐽𝐾𝐿𝑀𝑁𝑂𝑃𝑄𝑅𝑆𝑇𝑈𝑉𝑊𝑋𝑌𝑍 𝑎𝑏𝑐𝑑𝑒𝑓𝑔ℎ𝑖𝑗𝑘𝑙𝑚𝑛𝑜𝑝𝑞𝑟𝑠𝑡𝑢𝑣𝑤𝑥𝑦𝑧𝚤𝚥
• \(\TeX\) コマンド \boldsymbol
  … \(\boldsymbol{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\boldsymbol{abcdefghijklmnopqrstuvwxyz}\) \(\boldsymbol{0123456789}\)
• Unicode, Mathematical Bold Italic
  … 𝑨𝑩𝑪𝑫𝑬𝑭𝑮𝑯𝑰𝑱𝑲𝑳𝑴𝑵𝑶𝑷𝑸𝑹𝑺𝑻𝑼𝑽𝑾𝑿𝒀𝒁 𝒂𝒃𝒄𝒅𝒆𝒇𝒈𝒉𝒊𝒋𝒌𝒍𝒎𝒏𝒐𝒑𝒒𝒓𝒔𝒕𝒖𝒗𝒘𝒙𝒚𝒛
• \(\TeX\) コマンド \mathscr
  … \(\mathscr{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathscr{abcdefghijklmnopqrstuvwxyz}\) \(\mathscr{0123456789}\)
• Unicode, Mathematical Script
  … 𝒜ℬ𝒞𝒟ℰℱ𝒢ℋℐ𝒥𝒦ℒℳ𝒩𝒪𝒫𝒬ℛ𝒮𝒯𝒰𝒱𝒲𝒳𝒴𝒵 𝒶𝒷𝒸𝒹ℯ𝒻ℊ𝒽𝒾𝒿𝓀𝓁𝓂𝓃ℴ𝓅𝓆𝓇𝓈𝓉𝓊𝓋𝓌𝓍𝓎𝓏
• Unicode, Mathematical Bold Script
  … 𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩 𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃
• \(\TeX\) コマンド \mathfrak
  … \(\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathfrak{abcdefghijklmnopqrstuvwxyz}\) \(\mathfrak{0123456789}\)
• Unicode, Mathematical Fraktur
  … 𝔄𝔅ℭ𝔇𝔈𝔉𝔊ℌℑ𝔍𝔎𝔏𝔐𝔑𝔒𝔓𝔔ℜ𝔖𝔗𝔘𝔙𝔚𝔛𝔜ℨ 𝔞𝔟𝔠𝔡𝔢𝔣𝔤𝔥𝔦𝔧𝔨𝔩𝔪𝔫𝔬𝔭𝔮𝔯𝔰𝔱𝔲𝔳𝔴𝔵𝔶𝔷
• Unicode, Mathematical Bold Fraktur
  … 𝕬𝕭𝕮𝕯𝕰𝕱𝕲𝕳𝕴𝕵𝕶𝕷𝕸𝕹𝕺𝕻𝕼𝕽𝕾𝕿𝖀𝖁𝖂𝖃𝖄𝖅 𝖆𝖇𝖈𝖉𝖊𝖋𝖌𝖍𝖎𝖏𝖐𝖑𝖒𝖓𝖔𝖕𝖖𝖗𝖘𝖙𝖚𝖛𝖜𝖝𝖞𝖟
• \(\TeX\) コマンド \mathbb
  … \(\mathbb{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathbb{abcdefghijklmnopqrstuvwxyz}\) \(\mathbb{0123456789}\)
• Unicode, Mathematical Double-Struck
  … 𝔸𝔹ℂ𝔻𝔼𝔽𝔾ℍ𝕀𝕁𝕂𝕃𝕄ℕ𝕆ℙℚℝ𝕊𝕋𝕌𝕍𝕎𝕏𝕐ℤ 𝕒𝕓𝕔𝕕𝕖𝕗𝕘𝕙𝕚𝕛𝕜𝕝𝕞𝕟𝕠𝕡𝕢𝕣𝕤𝕥𝕦𝕧𝕨𝕩𝕪𝕫 ⅅⅆⅇⅈⅉ ℽℾℿ⅀ 𝟘𝟙𝟚𝟛𝟜𝟝𝟞𝟟𝟠𝟡
• \(\TeX\) コマンド \mathsf
  … \(\mathsf{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathsf{abcdefghijklmnopqrstuvwxyz}\) \(\mathsf{0123456789}\)
• Unicode, Mathematical Sans-Serif
  … 𝖠𝖡𝖢𝖣𝖤𝖥𝖦𝖧𝖨𝖩𝖪𝖫𝖬𝖭𝖮𝖯𝖰𝖱𝖲𝖳𝖴𝖵𝖶𝖷𝖸𝖹 𝖺𝖻𝖼𝖽𝖾𝖿𝗀𝗁𝗂𝗃𝗄𝗅𝗆𝗇𝗈𝗉𝗊𝗋𝗌𝗍𝗎𝗏𝗐𝗑𝗒𝗓 𝟢𝟣𝟤𝟥𝟦𝟧𝟨𝟩𝟪𝟫
• Unicode, Mathematical Sans-Serif Bold
  … 𝗔𝗕𝗖𝗗𝗘𝗙𝗚𝗛𝗜𝗝𝗞𝗟𝗠𝗡𝗢𝗣𝗤𝗥𝗦𝗧𝗨𝗩𝗪𝗫𝗬𝗭 𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇 𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵
• Unicode, Mathematical Sans-Serif Italic
  … 𝘈𝘉𝘊𝘋𝘌𝘍𝘎𝘏𝘐𝘑𝘒𝘓𝘔𝘕𝘖𝘗𝘘𝘙𝘚𝘛𝘜𝘝𝘞𝘟𝘠𝘡 𝘢𝘣𝘤𝘥𝘦𝘧𝘨𝘩𝘪𝘫𝘬𝘭𝘮𝘯𝘰𝘱𝘲𝘳𝘴𝘵𝘶𝘷𝘸𝘹𝘺𝘻
• Unicode, Mathematical Sans-Serif Bold Italic
  … 𝘼𝘽𝘾𝘿𝙀𝙁𝙂𝙃𝙄𝙅𝙆𝙇𝙈𝙉𝙊𝙋𝙌𝙍𝙎𝙏𝙐𝙑𝙒𝙓𝙔𝙕 𝙖𝙗𝙘𝙙𝙚𝙛𝙜𝙝𝙞𝙟𝙠𝙡𝙢𝙣𝙤𝙥𝙦𝙧𝙨𝙩𝙪𝙫𝙬𝙭𝙮𝙯
• \(\TeX\) コマンド \mathtt
  … \(\mathtt{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathtt{abcdefghijklmnopqrstuvwxyz}\) \(\mathtt{0123456789}\)
• Unicode, Mathematical Monospace
  … 𝙰𝙱𝙲𝙳𝙴𝙵𝙶𝙷𝙸𝙹𝙺𝙻𝙼𝙽𝙾𝙿𝚀𝚁𝚂𝚃𝚄𝚅𝚆𝚇𝚈𝚉 𝚊𝚋𝚌𝚍𝚎𝚏𝚐𝚑𝚒𝚓𝚔𝚕𝚖𝚗𝚘𝚙𝚚𝚛𝚜𝚝𝚞𝚟𝚠𝚡𝚢𝚣 𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿
• \(\TeX\) コマンド \mathcal
  … \(\mathcal{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathcal{abcdefghijklmnopqrstuvwxyz}\) \(\mathtt{0123456789}\)

紫色で示したものは旧来から存在したグリフで、Unicode ではそれに対応するアルファベットを数式用グリフのコード領域に完備する形で用意されている。

以下にギリシャ文字をまとめておく。

• \(\TeX\) コマンド \Alpha\Beta …
  … \(\Alpha\Beta\Gamma\varGamma\Delta\varDelta\Epsilon\Zeta\Eta\Theta\varTheta\Iota\Kappa\Lambda\varLambda\Mu\Nu\Xi\varXi\Omicron\Pi\varPi\Rho\Sigma\varSigma\Tau\Upsilon\varUpsilon\Phi\varPhi\Chi\Psi\varPsi\Omega\varOmega\nabla\Stigma\Digamma\pamDigamma\) \(\alpha\beta\gamma\delta\epsilon\varepsilon\zeta\eta\theta\vartheta\iota\kappa\varkappa\lambda\mu\nu\xi\omicron\pi\varpi\rho\varrho\sigma\varsigma\tau\upsilon\phi\varphi\chi\psi\omega\nabla\stigma\partial\digamma\pamdigamma\)
• Unicode, non Mathematical
  … ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡ΢ΣΤΥΦΧΨΩϴ∇ αβγδεζηθικλμνξοπρςστυφχψω ϐϑϕϖϘϙϚϛϜϝϞϟϠϡ
• Unicode, Mathematical Bold
  … 𝚨𝚩𝚪𝚫𝚬𝚭𝚮𝚯𝚰𝚱𝚲𝚳𝚴𝚵𝚶𝚷𝚸𝚹𝚺𝚻𝚼𝚽𝚾𝚿𝛀𝛁 𝛂𝛃𝛄𝛅𝛆𝛇𝛈𝛉𝛊𝛋𝛌𝛍𝛎𝛏𝛐𝛑𝛒𝛓𝛔𝛕𝛖𝛗𝛘𝛙𝛚𝛛𝛜𝛝𝛞𝛟𝛠𝛡𝟊𝟋
• Unicode, Mathematical Italic
  … 𝛢𝛣𝛤𝛥𝛦𝛧𝛨𝛩𝛪𝛫𝛬𝛭𝛮𝛯𝛰𝛱𝛲𝛳𝛴𝛵𝛶𝛷𝛸𝛹𝛺𝛻 𝛼𝛽𝛾𝛿𝜀𝜁𝜂𝜃𝜄𝜅𝜆𝜇𝜈𝜉𝜊𝜋𝜌𝜍𝜎𝜏𝜐𝜑𝜒𝜓𝜔𝜕𝜖𝜗𝜘𝜙𝜚𝜛
• Unicode, Mathematical Bold Italic
  … 𝜜𝜝𝜞𝜟𝜠𝜡𝜢𝜣𝜤𝜥𝜧𝜨𝜩𝜪𝜫𝜬𝜭𝜮𝜯𝜰𝜱𝜲𝜴 𝜶𝜷𝜸𝜹𝜺𝜻𝜼𝜽𝜾𝜿𝝀𝝁𝝂𝝃𝝄𝝅𝝆𝝇𝝈𝝉𝝊𝝋𝝌𝝍𝝎𝝏𝝐𝝑𝝒𝝓𝝔𝝕
• Unicode, Mathematical Sans-Serif Bold
  … 𝝖𝝗𝝘𝝙𝝚𝝛𝝜𝝝𝝞𝝟𝝠𝝡𝝢𝝣𝝤𝝥𝝦𝝧𝝨𝝩𝝪𝝫𝝬𝝭𝝮𝝯 𝝰𝝱𝝲𝝳𝝴𝝵𝝶𝝷𝝸𝝹𝝺𝝻𝝼𝝽𝝾𝝿𝞀𝞁𝞂𝞃𝞄𝞅𝞆𝞇𝞈𝞉𝞊𝞋𝞌𝞍𝞎𝞏℩
• Unicode, Mathematical Sans-Serif Bold Italic
  … 𝞐𝞑𝞒𝞓𝞔𝞕𝞖𝞗𝞘𝞙𝞚𝞛𝞜𝞝𝞞𝞟𝞠𝞡𝞢𝞣𝞤𝞥𝞦𝞧𝞨𝞩 𝞪𝞫𝞬𝞭𝞮𝞯𝞰𝞱𝞲𝞳𝞴𝞵𝞶𝞷𝞸𝞹𝞺𝞻𝞼𝞽𝞾𝞿𝟀𝟁𝟂𝟃𝟄𝟅𝟆𝟇𝟈𝟉

特にギリシャ文字については、\(\TeX\) コマンドとの対応表をまとめておく。

大文字 \TeX		小文字 \TeX				装飾立体⍽	装飾立体太字⍽	装飾斜体⍽	装飾斜体太字⍽	太字⍽		斜体太字⍽	読み		その他
\(\Alpha\) \Alpha	\(\alpha\) \alpha			Α ⟨Α⟩	α ⟨α⟩	𝚨 ⟨𝚨⟩	𝛂 ⟨𝛂⟩	𝛢 ⟨𝛢⟩	𝛼 ⟨𝛼⟩	𝜜 ⟨𝜜⟩	𝜶 ⟨𝜶⟩	𝝖 ⟨𝝖⟩	𝝰 ⟨𝝰⟩	𝞐 ⟨𝞐⟩	𝞪 ⟨𝞪⟩	アルファ		Ɑ ⟨Ɑ⟩ ɑ ⟨ɑ⟩
\(\Beta\) \Beta	\(\beta\) \beta					Β ⟨Β⟩	β ⟨β⟩	𝚩 ⟨𝚩⟩	𝛃 ⟨𝛃⟩	𝛣 ⟨𝛣⟩	𝛽 ⟨𝛽⟩	𝜝 ⟨𝜝⟩	𝜷 ⟨𝜷⟩	𝝗 ⟨𝝗⟩	𝝱 ⟨𝝱⟩	𝞑 ⟨𝞑⟩	𝞫 ⟨𝞫⟩	ベータ		ϐ ⟨ϐ⟩
\(\Gamma\) \Gamma	\(\gamma\) \gamma			Γ ⟨Γ⟩	γ ⟨γ⟩	𝚪 ⟨𝚪⟩	𝛄 ⟨𝛄⟩	𝛤 ⟨𝛤⟩	𝛾 ⟨𝛾⟩	𝜞 ⟨𝜞⟩	𝜸 ⟨𝜸⟩	𝝘 ⟨𝝘⟩	𝝲 ⟨𝝲⟩	𝞒 ⟨𝞒⟩	𝞬 ⟨𝞬⟩	ガンマ		ᴦ ⟨ᴦ⟩ ℾ ⟨ℾ⟩ ℽ ⟨ℽ⟩
\(\varGamma\) \varGamma	 					 	 	 	 	𝛤 ⟨𝛤⟩	 	𝜞 ⟨𝜞⟩	 	 	 	𝞒 ⟨𝞒⟩	 	〃		 
\(\Delta\) \Delta	\(\delta\) \delta			Δ ⟨Δ⟩	δ ⟨δ⟩	𝚫 ⟨𝚫⟩	𝛅 ⟨𝛅⟩	𝛥 ⟨𝛥⟩	𝛿 ⟨𝛿⟩	𝜟 ⟨𝜟⟩	𝜹 ⟨𝜹⟩	𝝙 ⟨𝝙⟩	𝝳 ⟨𝝳⟩	𝞓 ⟨𝞓⟩	𝞭 ⟨𝞭⟩	デルタ		ẟ ⟨ẟ⟩
\(\varDelta\) \varDelta	 					 	 	 	 	𝛥 ⟨𝛥⟩	 	𝜟 ⟨𝜟⟩	 	 	 	𝞓 ⟨𝞓⟩	 	〃		 
\(\Epsilon\) \Epsilon	\(\varepsilon\) \varepsilon		Ε ⟨Ε⟩	ε ⟨ε⟩	𝚬 ⟨𝚬⟩	𝛆 ⟨𝛆⟩	𝛦 ⟨𝛦⟩	𝜀 ⟨𝜀⟩	𝜠 ⟨𝜠⟩	𝜺 ⟨𝜺⟩	𝝚 ⟨𝝚⟩	𝝴 ⟨𝝴⟩	𝞔 ⟨𝞔⟩	𝞮 ⟨𝞮⟩	イプシロン(記号)	 
 			\(\epsilon\) \epsilon			 	ϵ ⟨ϵ⟩	 	𝛜 ⟨𝛜⟩	 	𝜖 ⟨𝜖⟩	 	𝝐 ⟨𝝐⟩	 	𝞊 ⟨𝞊⟩	 	𝟄 ⟨𝟄⟩	イプシロン	 
\(\Zeta\) \Zeta	\(\zeta\) \zeta					Ζ ⟨Ζ⟩	ζ ⟨ζ⟩	𝚭 ⟨𝚭⟩	𝛇 ⟨𝛇⟩	𝛧 ⟨𝛧⟩	𝜁 ⟨𝜁⟩	𝜡 ⟨𝜡⟩	𝜻 ⟨𝜻⟩	𝝛 ⟨𝝛⟩	𝝵 ⟨𝝵⟩	𝞕 ⟨𝞕⟩	𝞯 ⟨𝞯⟩	ゼータ		 
\(\Eta\) \Eta		\(\eta\) \eta				Η ⟨Η⟩	η ⟨η⟩	𝚮 ⟨𝚮⟩	𝛈 ⟨𝛈⟩	𝛨 ⟨𝛨⟩	𝜂 ⟨𝜂⟩	𝜢 ⟨𝜢⟩	𝜼 ⟨𝜼⟩	𝝜 ⟨𝝜⟩	𝝶 ⟨𝝶⟩	𝞖 ⟨𝞖⟩	𝞰 ⟨𝞰⟩	イータ		 
\(\Theta\) \Theta	\(\theta\) \theta			ϴ ⟨ϴ⟩	θ ⟨θ⟩	𝚹 ⟨𝚹⟩	𝛉 ⟨𝛉⟩	𝛳 ⟨𝛳⟩	𝜃 ⟨𝜃⟩	𝜭 ⟨𝜭⟩	𝜽 ⟨𝜽⟩	𝝧 ⟨𝝧⟩	𝝷 ⟨𝝷⟩	𝞡 ⟨𝞡⟩	𝞱 ⟨𝞱⟩	シータ記号	 
\(\varTheta\) \varTheta	\(\vartheta\) \vartheta			Θ ⟨Θ⟩	ϑ ⟨ϑ⟩	𝚯 ⟨𝚯⟩	𝛝 ⟨𝛝⟩	𝛩 ⟨𝛩⟩	𝜗 ⟨𝜗⟩	𝞗 ⟨𝞗⟩	𝟅 ⟨𝟅⟩	𝝝 ⟨𝝝⟩	𝞋 ⟨𝞋⟩	𝜣 ⟨𝜣⟩	𝝑 ⟨𝝑⟩	シータ		 
\(\Iota\) \Iota	\(\iota\) \iota					Ι ⟨Ι⟩	ι ⟨ι⟩	𝚰 ⟨𝚰⟩	𝛊 ⟨𝛊⟩	𝛪 ⟨𝛪⟩	𝜄 ⟨𝜄⟩	𝜤 ⟨𝜤⟩	𝜾 ⟨𝜾⟩	𝝞 ⟨𝝞⟩	𝝸 ⟨𝝸⟩	𝞘 ⟨𝞘⟩	𝞲 ⟨𝞲⟩	イオタ		 
\(\Kappa\) \Kappa	\(\kappa\) \kappa			Κ ⟨Κ⟩	κ ⟨κ⟩	𝚱 ⟨𝚱⟩	𝛋 ⟨𝛋⟩	𝛫 ⟨𝛫⟩	𝜅 ⟨𝜅⟩	𝜥 ⟨𝜥⟩	𝜿 ⟨𝜿⟩	𝝟 ⟨𝝟⟩	𝝹 ⟨𝝹⟩	𝞙 ⟨𝞙⟩	𝞳 ⟨𝞳⟩	カッパ		 
 			\(\varkappa\) \varkappa			 	ϰ ⟨ϰ⟩	 	𝛞 ⟨𝛞⟩	 	𝜘 ⟨𝜘⟩	 	𝝒 ⟨𝝒⟩	 	𝞌 ⟨𝞌⟩	 	𝟆 ⟨𝟆⟩	カッパ記号	 
\(\Lambda\) \Lambda	\(\lambda\) \lambda			Λ ⟨Λ⟩	λ ⟨λ⟩	𝚲 ⟨𝚲⟩	𝛌 ⟨𝛌⟩	𝛬 ⟨𝛬⟩	𝜆 ⟨𝜆⟩	𝜦 ⟨𝜦⟩	𝝀 ⟨𝝀⟩	𝝠 ⟨𝝠⟩	𝝺 ⟨𝝺⟩	𝞚 ⟨𝞚⟩	𝞴 ⟨𝞴⟩	ラムダ		 
\(\varLambda\) \varLambda	 				 	 	 	 	𝛬 ⟨𝛬⟩	 	𝜦 ⟨𝜦⟩	 	 	 	𝞚 ⟨𝞚⟩	 	〃		 
\(\Mu\) \Mu		\(\mu\) \mu				Μ ⟨Μ⟩	μ ⟨μ⟩	𝚳 ⟨𝚳⟩	𝛍 ⟨𝛍⟩	𝛭 ⟨𝛭⟩	𝜇 ⟨𝜇⟩	𝜧 ⟨𝜧⟩	𝝁 ⟨𝝁⟩	𝝡 ⟨𝝡⟩	𝝻 ⟨𝝻⟩	𝞛 ⟨𝞛⟩	𝞵 ⟨𝞵⟩	ミュー		 
\(\Nu\) \Nu		\(\nu\) \nu				Ν ⟨Ν⟩	ν ⟨ν⟩	𝚴 ⟨𝚴⟩	𝛎 ⟨𝛎⟩	𝛮 ⟨𝛮⟩	𝜈 ⟨𝜈⟩	𝜨 ⟨𝜨⟩	𝝂 ⟨𝝂⟩	𝝢 ⟨𝝢⟩	𝝼 ⟨𝝼⟩	𝞜 ⟨𝞜⟩	𝞶 ⟨𝞶⟩	ニュー		 
\(\Xi\) \Xi		\(\xi\) \xi				Ξ ⟨Ξ⟩	ξ ⟨ξ⟩	𝚵 ⟨𝚵⟩	𝛏 ⟨𝛏⟩	𝛯 ⟨𝛯⟩	𝜉 ⟨𝜉⟩	𝜩 ⟨𝜩⟩	𝝃 ⟨𝝃⟩	𝝣 ⟨𝝣⟩	𝝽 ⟨𝝽⟩	𝞝 ⟨𝞝⟩	𝞷 ⟨𝞷⟩	グザイ		 
\(\varXi\) \varXi	 					 	 	 	 	𝛯 ⟨𝛯⟩	 	𝜩 ⟨𝜩⟩	 	 	 	𝞝 ⟨𝞝⟩	𝞷 ⟨𝞷⟩	〃		 
\(\Omicron\) \Omicron	\(\omicron\) \omicron			Ο ⟨Ο⟩	ο ⟨ο⟩	𝚶 ⟨𝚶⟩	𝛐 ⟨𝛐⟩	𝛰 ⟨𝛰⟩	𝜊 ⟨𝜊⟩	𝜪 ⟨𝜪⟩	𝝄 ⟨𝝄⟩	𝝤 ⟨𝝤⟩	𝝾 ⟨𝝾⟩	𝞞 ⟨𝞞⟩	𝞸 ⟨𝞸⟩	オミクロン	 
\(\Pi\) \Pi		\(\pi\) \pi				Π ⟨Π⟩	π ⟨π⟩	𝚷 ⟨𝚷⟩	𝛑 ⟨𝛑⟩	𝛱 ⟨𝛱⟩	𝜋 ⟨𝜋⟩	𝜫 ⟨𝜫⟩	𝝅 ⟨𝝅⟩	𝝥 ⟨𝝥⟩	𝝿 ⟨𝝿⟩	𝞟 ⟨𝞟⟩	𝞹 ⟨𝞹⟩	パイ		ℿ ⟨Ʊ⟩
\(\varPi\) \varPi	\(\varpi\) \varpi			 	ϖ ⟨ϖ⟩	 	𝛡 ⟨𝛡⟩	𝛱 ⟨𝛱⟩	𝜛 ⟨𝜛⟩	𝜫 ⟨𝜫⟩	𝝕 ⟨𝝕⟩	 	𝞏 ⟨𝞏⟩	𝞟 ⟨𝞟⟩	𝟉 ⟨𝟉⟩	パイ(記号)	 
\(\Rho\) \Rho		\(\rho\) \rho				Ρ ⟨Ρ⟩	ρ ⟨ρ⟩	𝚸 ⟨𝚸⟩	𝛒 ⟨𝛒⟩	𝛲 ⟨𝛲⟩	𝜌 ⟨𝜌⟩	𝜬 ⟨𝜬⟩	𝝆 ⟨𝝆⟩	𝝧 ⟨𝝧⟩	𝞀 ⟨𝞀⟩	𝞡 ⟨𝞡⟩	𝞺 ⟨𝞺⟩	ロー		 
 			\(\varrho\) \varrho			 	ϱ ⟨ϱ⟩	 	𝛠 ⟨𝛠⟩	 	𝜚 ⟨𝜚⟩	 	𝝔 ⟨𝝔⟩	 	𝞎 ⟨𝞎⟩	 	𝟈 ⟨𝟈⟩	ロー記号		 
\(\Sigma\) \Sigma	\(\sigma\) \sigma			Σ ⟨Σ⟩	σ ⟨σ⟩	𝚺 ⟨𝚺⟩	𝛔 ⟨𝛔⟩	𝛴 ⟨𝛴⟩	𝜎 ⟨𝜎⟩	𝜮 ⟨𝜮⟩	𝝈 ⟨𝝈⟩	𝝨 ⟨𝝨⟩	𝞂 ⟨𝞂⟩	𝞢 ⟨𝞢⟩	𝞼 ⟨𝞼⟩	シグマ		⅀ ⟨Ʊ⟩
\(\varSigma\) \varSigma	\(\varsigma\) \varsigma			 	ς ⟨ς⟩	 	𝛓 ⟨𝛓⟩ 	𝛴 ⟨𝛴⟩	𝜍 ⟨𝜍⟩	𝜮 ⟨𝜮⟩	𝝇 ⟨𝝇⟩	 	𝞁 ⟨𝞁⟩	𝞢 ⟨𝞢⟩	𝞻 ⟨𝞻⟩	(ファイナル)シグマ	 
\(\Tau\) \Tau		\(\tau\) \tau				Τ ⟨Τ⟩	τ ⟨τ⟩	𝚻 ⟨𝚻⟩	𝛕 ⟨𝛕⟩	𝛵 ⟨𝛵⟩	𝜏 ⟨𝜏⟩	𝜯 ⟨𝜯⟩	𝝉 ⟨𝝉⟩	𝝩 ⟨𝝩⟩	𝞃 ⟨𝞃⟩	𝞣 ⟨𝞣⟩	𝞽 ⟨𝞽⟩	タウ		 
\(\Upsilon\) \Upsilon	\(\upsilon\) \upsilon			Υ ⟨Υ⟩	υ ⟨υ⟩	𝚼 ⟨𝚼⟩	𝛖 ⟨𝛖⟩	𝛶 ⟨𝛶⟩	𝜐 ⟨𝜐⟩	𝜰 ⟨𝜰⟩	𝝊 ⟨𝝊⟩	𝝪 ⟨𝝪⟩	𝞄 ⟨𝞄⟩	𝞤 ⟨𝞤⟩	𝞾 ⟨𝞾⟩	ウプシロン	Ʊ ⟨Ʊ⟩ ʊ ⟨Ʊ⟩
\(\varUpsilon\) \varUpsilon	 				 	 	 	 	𝛶 ⟨𝛶⟩	 	𝜰 ⟨𝜰⟩	 	 	 	𝞤 ⟨𝞤⟩	 	〃		 
\(\Phi\) \Phi		\(\phi\) \phi				Φ ⟨Φ⟩	φ ⟨φ⟩	𝚽 ⟨𝚽⟩	𝛗 ⟨𝛗⟩	𝛷 ⟨𝛷⟩	𝜑 ⟨𝜑⟩	𝜱 ⟨𝜱⟩	𝝋 ⟨𝝋⟩	𝝫 ⟨𝝫⟩	𝞅 ⟨𝞅⟩	𝞥 ⟨𝞥⟩	𝞿 ⟨𝞿⟩	ファイ		 
\(\varPhi\) \varPhi	\(\varphi\) \varphi			 	ϕ ⟨ϕ⟩	 	𝛟 ⟨𝛟⟩	𝛷 ⟨𝛷⟩	𝜙 ⟨𝜙⟩	𝜱 ⟨𝜱⟩	𝝓 ⟨𝝓⟩	 	𝞍 ⟨𝞍⟩	𝞥 ⟨𝞥⟩	𝟇 ⟨𝟇⟩	ファイ(記号)	 
\(\Chi\) \Chi		\(\chi\) \chi				Χ ⟨Χ⟩	χ ⟨χ⟩	𝚾 ⟨𝚾⟩	𝛘 ⟨𝛘⟩	𝛸 ⟨𝛸⟩	𝜒 ⟨𝜒⟩	𝜲 ⟨𝜲⟩	𝝌 ⟨𝝌⟩	𝝬 ⟨𝝬⟩	𝞆 ⟨𝞆⟩	𝞦 ⟨𝞦⟩	𝟀 ⟨𝟀⟩	カイ		 
\(\Psi\) \Psi		\(\psi\) \psi				Ψ ⟨Ψ⟩	ψ ⟨ψ⟩	𝚿 ⟨𝚿⟩	𝛙 ⟨𝛙⟩	𝛹 ⟨𝛹⟩	𝜓 ⟨𝜓⟩	𝜳 ⟨𝜳⟩	𝝍 ⟨𝝍⟩	𝝭 ⟨𝝭⟩	𝞇 ⟨𝞇⟩	𝞧 ⟨𝞧⟩	𝟁 ⟨𝟁⟩	プサイ		ᴪ ⟨ᴪ⟩
\(\varPsi\) \varPsi	 					 	 	 	 	𝛹 ⟨𝛹⟩	 	𝜳 ⟨𝜳⟩	 	 	 	𝞧 ⟨𝞧⟩	 	〃		 
\(\Omega\) \Omega	\(\omega\) \omega			Ω ⟨Ω⟩	ω ⟨ω⟩	𝛀 ⟨𝛀⟩	𝛚 ⟨𝛚⟩	𝛺 ⟨𝛺⟩	𝜔 ⟨𝜔⟩	𝜴 ⟨𝜴⟩	𝝎 ⟨𝝎⟩	𝝮 ⟨𝝮⟩	𝞈 ⟨𝞈⟩	𝞨 ⟨𝞨⟩	𝟂 ⟨𝟂⟩	オメガ		 
\(\varOmega\) \varOmega	 					 	 	 	 	𝛺 ⟨𝛺⟩	 	𝜴 ⟨𝜴⟩	 	 	 	𝞨 ⟨𝞨⟩	 	〃		 
 			\(\nabla\) \nabla			 	∇ ⟨∇⟩	 	𝛁 ⟨𝛁⟩	 	𝛻 ⟨𝛻⟩	 	𝜵 ⟨𝜵⟩	 	𝝯 ⟨𝝯⟩	 	𝞩 ⟨𝞩⟩	ナブラ		 
\(\Stigma\) \Stigma	\(\stigma\) \stigma			Ϛ ⟨Ϛ⟩	ϛ ⟨ϛ⟩	 	 	 	 	 	 	 	 	 	 	スティグマ	 
 			\(\partial\) \partial			 	∂ ⟨∂⟩	 	𝛛 ⟨𝛛⟩ 	 	𝜕 ⟨𝜕⟩	 	𝝏 ⟨𝝏⟩	 	𝞉 ⟨𝞉⟩	 	𝟃 ⟨𝟃⟩	パーシャル	 
\(\Digamma\) \Digamma	\(\digamma\) \digamma			Ϝ ⟨Ϝ⟩	ϝ ⟨ϝ⟩	𝟊 ⟨𝟊⟩	𝟋 ⟨𝟋⟩	 	 	 	 	 	 	 	 	ディガンマ	 
\(\pamDigamma\) \pamDigamma	\(\pamdigamma\) \pamdigamma	Ͷ ⟨Ͷ⟩	ͷ ⟨ͷ⟩	 	 	 	 	 	 	 	 	 	 	パンフィリアディガンマ	 

\mathnormal, \(\Alpha\), \(\Beta\), \(\Epsilon\), \(\Zeta\), \(\Eta\), \(\Iota\), \(\Kappa\), \(\Mu\), \(\Nu\), \(\Omicron\), \(\Rho\), \(\Tau\), \(\Chi\), \(\Stigma\), \(\stigma\), \(\Digamma\), \(\digamma\), \(\pamDigamma\), \(\pamdigamma\), \(\Koppa\), \(\koppa\), \(\Sampi\), \(\sampi\) は MathJax で未サポート。

\(\Stigma\), \(\stigma\), \(\Digamma\), \(\digamma\), \(\pamDigamma\), \(\pamdigamma\), \(\Koppa\), \(\koppa\), \(\Sampi\), \(\sampi\) は \(\KaTeX\) で未サポート。

\(\Rho, \Digamma, \digamma, x\in \R^n\), \(\UN{d}{f}\)

a[href]: アンカー要素とハイパーリンク属性

コストの係るリンクは下線ありとし、それ以外は無しとする。

以下のすべてのブロック要素は文字サイズに応じた字下げを行う。

pre: 整形済みテキスト要素

pre

table>caption,tbody: 表とキャプションと表本体要素

figure>img,figcaption: 図とイメージと図のキャプション要素

figure>blockquote,figcaption>cite: 図とブロック引用と図のキャプションと引用要素

blockquote: ブロック引用要素

blockquote

fieldset>legend: フィールドセットとそのキャプション要素

address: 連絡先要素

iframe: インラインフレーム要素

form>fieldset>legend, form>label: フォームとフィールドセットとそのキャプションとラベル要素

form>input: フォームと入力要素

form>input[type="hidden"]: フォームと隠れ型入力要素

<input type="hidden" name="name0" value="value0">
<input type="hidden" name="name1" value="value1">
<input type="hidden" name="name2" value="value2">
<input type="submit">

form>input[type="text"]: フォームとテキスト型入力要素

form>input[type="search"]: フォームと検索型入力要素

form>input[type="tel"]: フォームと電話番号型入力要素

form>input[type="url"]: フォームとURL型入力要素

form>input[type="email"]: フォームと電子メール型入力要素

form>input[type="password"]: フォームとパスワード型入力要素

form>input[type="date"]: フォームと日付型入力要素

form>input[type="month"]: フォームと月型入力要素

form>input[type="week"]: フォームと週型入力要素

form>input[type="time"]: フォームと時刻型入力要素

form>input[type="datetime-local"]: フォームとローカル日時型入力要素

form>input[type="number"]: フォームと数値型入力要素

form>input[type="range"]: フォームと範囲型入力要素

form>input[type="range"]: フォームと色型入力要素

form>input[type="checkbox"]: フォームとチェックボックス型入力要素

form>input[type="radio"]: フォームとラジオ型入力要素

form>input[type="file"]: フォームとファイル型入力要素

form>input[type="submit"], form>input[type="reset"]: フォームと送信・リセット型入力要素

form>input[type="image"]: フォームとイメージ型入力要素

input[type="button"]: ボタン型入力要素

フォームと属性入力要素

form>input[autofocus]: フォームとオートフォーカス属性入力要素

form>input[placeholder]: フォームとプレースホルダー属性入力要素

form>input[required]: フォームと必須属性入力要素

form>input[pattern]: フォームとパターン属性入力要素

form>input[min][max]: フォームと最小/最大属性入力要素

form>input[step]: フォームとステップ属性入力要素

form>input[type="autocomplete"]: フォームと自動補完属性入力要素とデータリスト要素

button: ボタン要素

select>option: 選択とオプション要素

form>datalist: フォームと自動補完属性入力要素とデータリスト要素

form>optgroup: フォームとオプショングループ要素

textarea: テキストエリア要素

progress: プログレス要素

meter: メーター要素

details>summary: 詳細と要約要素

本頁における Gear Bar の bookmarklet addin

フォントサイズ設定 in Gear Bar

本頁の右上に鎮座している Gear Bar と名付けた、ページのカスタマイズ用ポップアップエリアを、ブックマークレットを利用して任意のサイトに一時的に導入することが可能だ。以下のブックマークレットをブックマークしておき、お好きなサイトでこのブックマークを選べばよい。以下はひとまず、フォントサイズ設定のみを導入してある。

まだ開発段階だが、現時点でのコードを貼っておく。ボタンが上手く表示されないサイトもままあるので要調査である。スタイルの z-index 属性かと思ったが、そうでもなさそう。

javascript:(() => {
let tiptools_style = document.getElementById('tiptools_style');
if (!tiptools_style) {
  tiptools_style = document.createElement('style');
  tiptools_style.id = 'tiptools_style';
  tiptools_style.innerHTML = `
.tooltip .tip {
  display: none;
  position: absolute;
  width: 5em;
  padding: .25em;
  margin: .25em;
  background: white;
  border: none; border-radius: .25em;
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .25);
  z-index: 32761;
  pointer-events: none;
}
:not([style*="text-align: right;"]) .tooltip .tip {
  transform: translate(0%, 50%);
}
[style*="text-align: right;"] .tooltip .tip {
  transform: translate(-100%, 50%);
}
.tooltip:hover .tip {
  display: inline-block;
}
`;
  document.head.insertBefore(tiptools_style, document.head.firstChild);
}
let gear_div = document.getElementById('gear_bar');
if (!gear_div) {
  gear_div = document.createElement('div');
  gear_div.id = 'gear_bar';
  gear_div.setAttribute('style', `
position: fixed; right: .125em; top: .125em;
background-color: #ffffff77;
border-radius: .25em;
text-align: right;
z-index: 32760;
`);
  gear_div.innerHTML = `
<span hidden id="⎆">⎆</span>

<button class="tooltip" onclick="
for (let element of this.parentNode.childNodes) {
  if (element == this) continue;
  element.hidden = !element.hidden;
}"><span class="tip" style="width: 16em;">␦ Open/Close Customization</span>⚙</button>
`;
  document.body.insertBefore(gear_div, document.body.firstChild);
}
let fontsize_label = document.getElementById('gear_fontsize');
if (!fontsize_label) {
  fontsize_label = document.createElement('label');
  fontsize_label.id = 'gear_fontsize';
  fontsize_label.innerHTML = `
font size:
<select onchange="
document.body.style.fontSize = event.target.value;
">
<option value="43.75%"			> 7pt	(43.75%)</option>
<option value="50.00%"			> 8pt	(50.00%)</option>
<option value="56.25%"			> 9pt	(56.25%)</option>
<option value="62.50%"			> 10pt	(62.50%)</option>
<option value="68.75%"			> 11pt	(68.75%)</option>
<option value="75.00%"			> 12pt	(75.00%)</option>
<option value="81.25%"			> 13pt	(81.25%)</option>
<option value="87.50%"			> 14pt	(87.50%)</option>
<option value="100.00%"	selected	> 16pt	(100.00%)</option>
<option value="106.25%"			> 17pt	(106.25%)</option>
<option value="131.25%"			> 21pt	(131.25%)</option>
<option value="156.25%"			> 25pt	(156.25%)</option>
<option value="187.50%"			> 30pt	(187.50%)</option>
<option value="225.00%"			> 36pt	(225.00%)</option>
<option value="268.75%"			> 43pt	(268.75%)</option>
<option value="325.00%"			> 52pt	(325.00%)</option>
<option value="387.50%"			> 62pt	(387.50%)</option>
<option value="462.50%"			> 74pt	(462.50%)</option>
<option value="556.25%"			> 89pt	(556.25%)</option>
<option value="668.75%"			> 107pt	(668.75%)</option>
<option value="800.00%"			> 128pt	(800.00%)</option>
<option value="962.50%"			> 154pt	(962.50%)</option>
</select>
`;
  const sibling = document.getElementById('⎆');
  if (sibling) {
    if (sibling.hidden) fontsize_label.hidden = true;
    sibling.parentNode.insertBefore(fontsize_label, sibling);
  }
}
})();

一応、設計方針を説明しておくと、スタイルシートや Javascript コードは、一つ一つは子品なので本サイトからファイルを読み込んでもよいのだが、利用者はこういった類の技術は外部サイトに依存せず手元に確保した方が安心だろうと考え、ブックマークレットに極力埋め込む方針とする。あるサイズを超えるようなら、外部読み込みにするのもあるかもしれない。

他のこうした類の技術もこの形態で提供するようにして、Gear Bar からさまざまな頁の調整や自サイト向けのデバッグ等に有用なブックマークレットを随時、何処かに載せておく予定である。このサイトはあくまで技術実証用ページであるので、いずれ、まとまったページに誘導する。

CDN リセッタ CSS in Gear Bar

スタイルシートの調整にはリセッタ CSS を活用することがあるが、CDN(Content Delivery Network) で配布されているものから選んで、閲覧中のページに適用することができる。開発時の調査のために、以下のブックマークレットを活用するとよい。

この頁の右上の Gear Bar ではサイト所有のリセッタやブラウザの既定値なども提供されているが、流石にそれらをブックマークレットに搭載するのは大きなお世話だと思うので、各自で工夫して頂きたい。それでも CDN のリセッタを気軽に試せるのは有用だろう。ちなみに、destyle CSS で各ブラウザの既定のスタイルをも取り除いたまったく素の挙動が伺えるのが興味深い。以下にコードを紹介しておくので、各自で工夫するための参考にして頂きたい。

javascript:(() => {
let tiptools_style = document.getElementById('tiptools_style');
if (!tiptools_style) {
  tiptools_style = document.createElement('style');
  tiptools_style.id = 'tiptools_style';
  tiptools_style.innerHTML = `
.tooltip .tip {
  display: none;
  position: absolute;
  width: 5em;
  padding: .25em;
  margin: .25em;
  background: white;
  border: none; border-radius: .25em;
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .25);
  z-index: 32761;
  pointer-events: none;
}
:not([style*="text-align: right;"]) .tooltip .tip {
  transform: translate(0%, 50%);
}
[style*="text-align: right;"] .tooltip .tip {
  transform: translate(-100%, 50%);
}
.tooltip:hover .tip {
  display: inline-block;
}
`;
  document.head.insertBefore(tiptools_style, document.head.firstChild);
}
let gear_div = document.getElementById('gear_bar');
if (!gear_div) {
  gear_div = document.createElement('div');
  gear_div.id = 'gear_bar';
  gear_div.setAttribute('style', `
position: fixed; right: .125em; top: .125em;
background-color: #ffffff77;
border-radius: .25em;
text-align: right;
z-index: 32760;
`);
  gear_div.innerHTML = `
<span hidden id="⎆">⎆</span>

<button class="tooltip" onclick="
for (let element of this.parentNode.childNodes) {
  if (element == this) continue;
  element.hidden = !element.hidden;
}"><span class="tip" style="width: 16em;">␦ Open/Close Customization</span>⚙</button>
`;
  document.body.insertBefore(gear_div, document.body.firstChild);
}
let resetter_label = document.getElementById('gear_cdn_resetter_css');
if (!resetter_label) {
  resetter_label = document.createElement('label');
  resetter_label.id = 'gear_cdn_resetter_css';
  resetter_label.innerHTML = `
CDN resetter:
<select onchange="(() => {\
const re_resetter_css = /.*\\/(destyle|reset|remedy|reboot|normalize|sanitize)(\\.min)?\\.css/;\
function last_link_resetter_css()\
{\
  let rv = null;\
  const sels = document.querySelectorAll('link[href]');\
  for (let sel of sels)\
    if (sel.href.match(re_resetter_css))\
      rv = sel;\
  return rv;\
}\
function remove_link_resetter_css()\
{\
  const sels = document.querySelectorAll('link[href]');\
  for (let sel of sels)\
    if (sel.href.match(re_resetter_css))\
      sel.parentNode.removeChild(sel);\
}\
function insert_link_resetter_css(url)\
{\
  remove_link_resetter_css();\
  const css_element = document.createElement('link');\
  document.head.insertBefore(css_element, document.head.firstChild);\
  css_element.id = 'link-resetter-css';\
  css_element.rel = 'stylesheet';\
  css_element.setAttribute('href', url);\
}\
insert_link_resetter_css(event.target.value);\
})();\
">
<option value="nothing" selected							>none</option>
<option value="https://cdn.jsdelivr.net/npm/destyle.css@2.0.2/destyle.css"		>destyle</option>
<option value="https://cdn.jsdelivr.net/npm/modern-css-reset@1.4.0/dist/reset.min.css"	>reset</option>
<option value="https://cdn.jsdelivr.net/npm/cssremedy@0.1.0-beta.2/css/remedy.css"	>remedy</option>
<option value="https://cdn.jsdelivr.net/npm/bootstrap-reboot@4.5.4/reboot.css"		>bootstrap-reboot</option>
<option value="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css"		>normalize</option>
<option value="https://cdn.jsdelivr.net/npm/sanitize.css@12.0.1/sanitize.min.css"	>sanitize</option>
</select>
`;
  const sibling = document.getElementById('⎆');
  if (sibling) {
    if (sibling.hidden) resetter_label.hidden = true;
    sibling.parentNode.insertBefore(resetter_label, sibling);
  }
}
})();

リンクし忘れ章節項目 in Gear Bar

HTML 執筆途中で節の ID は書いてあるが、それへのリンクや目次などがまだ用意されていない段階がある。その際にもその節の校正などに手っ取り早くリンクのための URL を作成できれば便利である。かつ、HTML 執筆で ID は書いてあるのに適切なリンクをし忘れたまま放置してしまっていることに気づかせる効果もある。以下のブックマークレットを活用するとよい。「§」章マークを押すと適用する。

ブックマークレットともなると文字列のエスケープのネストなど、ちょっと困惑する場面に Javascript でさえ直面する。まだ荒削りであることは了承いただきたい。仕組み上、先のコードとかなり被るが、そのままコードを載せておく。

javascript:(() => {
let tiptools_style = document.getElementById('tiptools_style');
if (!tiptools_style) {
  tiptools_style = document.createElement('style');
  tiptools_style.id = 'tiptools_style';
  tiptools_style.innerHTML = `
.tooltip .tip {
  display: none;
  position: absolute;
  width: 5em;
  padding: .25em;
  margin: .25em;
  background: white;
  border: none; border-radius: .25em;
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .25);
  z-index: 32761;
  pointer-events: none;
}
:not([style*="text-align: right;"]) .tooltip .tip {
  transform: translate(0%, 50%);
}
[style*="text-align: right;"] .tooltip .tip {
  transform: translate(-100%, 50%);
}
.tooltip:hover .tip {
  display: inline-block;
}
`;
  document.head.insertBefore(tiptools_style, document.head.firstChild);
}
let gear_div = document.getElementById('gear_bar');
if (!gear_div) {
  gear_div = document.createElement('div');
  gear_div.id = 'gear_bar';
  gear_div.setAttribute('style', `
position: fixed; right: .125em; top: .125em;
background-color: #ffffff77;
border-radius: .25em;
text-align: right;
z-index: 32760;
`);
  gear_div.innerHTML = `
<span hidden id="⎆">⎆</span>

<button class="tooltip" onclick="
for (let element of this.parentNode.childNodes) {
  if (element == this) continue;
  element.hidden = !element.hidden;
}"><span class="tip" style="width: 16em;">␦ Open/Close Customization</span>⚙</button>
`;
  document.body.insertBefore(gear_div, document.body.firstChild);
}
let section_links_button = document.getElementById('gear_insert_missing_section_links');
if (!section_links_button) {
  section_links_button = document.createElement('button');
  section_links_button.id = 'gear_insert_missing_section_links';
  section_links_button.setAttribute('class', 'tooltip');
  section_links_button.setAttribute('onclick', `
(() => {
  for (let e of document.body.querySelectorAll('h2[id],h3[id],h4[id],h5[id],h6')) {
    let a = e.parentNode.querySelector(\`a[href='#\${e.id}']\`);
    if (!a) {
      a = document.createElement('a');
      a.setAttribute('href', \`#\${e.id}\`);
      a.setAttribute('style', "vertical-align: top;");
      a.innerHTML = '⍻';
      e.insertBefore(a, e.firstChild);
      console.log(a.outerHTML);
    }
  }
})();
`);
  section_links_button.innerHTML = `
<span class="tip" style="width: 16em;">␦ Insert Missing Section Links</span>§
`;
  const sibling = document.getElementById('⎆');
  if (sibling) {
    if (sibling.hidden) section_links_button.hidden = true;
    sibling.parentNode.insertBefore(section_links_button, sibling);
  }
}
})();

章節項目のヘッダマーク挿入 in Gear Bar

先のと似ているが、HTML 執筆途中だが章立てをわかりやすくみたい段階がある。章節項目の番号を挿入することで適切に見出しがなされているかを確認できる。以下のブックマークレットを活用するとよい。「🕮」本マークを押すと適用する。こちらを押してから先の「§」章マークを押すとよい、どちらでもよい。

これもまだ荒削りであることは了承いただきたい。仕組み上、先のコードとかなり被るが、そのままコードを載せておく。(2021/06/25 更新) TeX 風に asterisk クラスに属するタグについては章節番号を付記しない設計にしました。

javascript:(() => {
let tiptools_style = document.getElementById('tiptools_style');
if (!tiptools_style) {
  tiptools_style = document.createElement('style');
  tiptools_style.id = 'tiptools_style';
  tiptools_style.innerHTML = `
.tooltip .tip {
  display: none;
  position: absolute;
  width: 5em;
  padding: .25em;
  margin: .25em;
  background: white;
  border: none; border-radius: .25em;
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .25);
  z-index: 32761;
  pointer-events: none;
}
:not([style*="text-align: right;"]) .tooltip .tip {
  transform: translate(0%, 50%);
}
[style*="text-align: right;"] .tooltip .tip {
  transform: translate(-100%, 50%);
}
.tooltip:hover .tip {
  display: inline-block;
}
`;
  document.head.insertBefore(tiptools_style, document.head.firstChild);
}
let gear_div = document.getElementById('gear_bar');
if (!gear_div) {
  gear_div = document.createElement('div');
  gear_div.id = 'gear_bar';
  gear_div.setAttribute('style', `
position: fixed; right: .125em; top: .125em;
background-color: #ffffff77;
border-radius: .25em;
text-align: right;
z-index: 32760;
`);
  gear_div.innerHTML = `
<span hidden id="⎆">⎆</span>

<button class="tooltip" onclick="
for (let element of this.parentNode.childNodes) {
  if (element == this) continue;
  element.hidden = !element.hidden;
}"><span class="tip" style="width: 16em;">␦ Open/Close Customization</span>⚙</button>
`;
  document.body.insertBefore(gear_div, document.body.firstChild);
}
let header_marks_button = document.getElementById('gear_insert_header_marks');
if (!header_marks_button) {
  header_marks_button = document.createElement('button');
  header_marks_button.id = 'gear_insert_header_marks';
  header_marks_button.setAttribute('class', 'tooltip');
  header_marks_button.setAttribute('onclick', `
(() => {
  const r = /^H([1-6])/;
  function document_trace_header(p, H)
  {
    const header_mark_class_name = '_header_mark';
    H.tags.push(p.tagName);
    if (p.tagName) {
      const m = p.tagName.match(r);
      if (m && !p.classList.contains('asterisk')) {
	const h = parseInt(m[1]);
	if (h < H.previous_h)
	  for (let i = h + 1; i <= 6; ++i)
	    H.numbers[i - 1] = 0;
	++H.numbers[h - 1];
	let numbering = '';
	for (let i = 1 + H.h_delta; i<=h; ++i)
	  numbering += \`_\${H.numbers[i - 1]}\`;
	let mark;
	switch (h + H.h_delta) {
	case 1: mark = \`🕮\${H.numbers[0 - H.h_delta]}\`; break;
	case 2: mark = \`🕅\${H.numbers[1 - H.h_delta]}\`; break;
	case 3: mark = \`§\${H.numbers[2 - H.h_delta]}\`; break;
	case 4: mark = \`§\${H.numbers[2 - H.h_delta]}.\${H.numbers[3 - H.h_delta]}\`; break;
	case 5: mark = \`§\${H.numbers[2 - H.h_delta]}.\${H.numbers[3 - H.h_delta]}.\${H.numbers[4 - H.h_delta]}\`; break;
	case 6: mark = \`¶\${H.numbers[5 - H.h_delta]}\`; break;
	case 7: mark = \`¶\${H.numbers[5 - H.h_delta]}.\${H.numbers[6 - H.h_delta]}\`; break;
	}
	if (!p.id) p.id = numbering;
	let q = p.querySelector(\`.\${header_mark_class_name}\`);
	if (q) q.parentNode.removeChild(q);
	if (H.h_delta < h) p.innerHTML = \`<span class='\${header_mark_class_name}'>\${mark} </span>\${p.innerHTML}\`;
	console.log(p.outerHTML);
	H.previous_h = h;
      }
    }
    for (let e of p.childNodes)
      document_trace_header(e, H);
    H.tags.pop();
  }
  let H = { h_delta: 1, previous_h: 0, tags: [], numbers: (new Array(6)).fill(0), };
  document_trace_header(document.body, H);
})();
`);
  header_marks_button.innerHTML = `
<span class="tip" style="width: 16em;">␦ Insert Header Marks & Ids</span>🕮
`;
  const sibling = document.getElementById('⎆');
  if (sibling) {
    if (sibling.hidden) header_marks_button.hidden = true;
    sibling.parentNode.insertBefore(header_marks_button, sibling);
  }
}
})();

目次挿入 in Gear Bar

適切に見出しがなされているかをさらに確認するために、目次を強引に挿入してしまおう。以下のブックマークレットを活用できる。

少々荒削りな箇所は修正された。他所の荒削りな箇所はまだ修正していないので了承いただきたい。仕組み上、先のコードとかなり被るが、そのままコードを載せておく。

javascript:(() => {
let tiptools_style = document.getElementById('tiptools_style');
if (!tiptools_style) {
  tiptools_style = document.createElement('style');
  tiptools_style.id = 'tiptools_style';
  tiptools_style.innerHTML = `
.tooltip .tip {
  display: none;
  position: absolute;
  width: 5em;
  padding: .25em;
  margin: .25em;
  background: white;
  border: none; border-radius: .25em;
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .25);
  z-index: 32761;
  pointer-events: none;
}
:not([style*="text-align: right;"]) .tooltip .tip {
  transform: translate(0%, 50%);
}
[style*="text-align: right;"] .tooltip .tip {
  transform: translate(-100%, 50%);
}
.tooltip:hover .tip {
  display: inline-block;
}
`;
  document.head.insertBefore(tiptools_style, document.head.firstChild);
}
let gear_div = document.getElementById('gear_bar');
if (!gear_div) {
  gear_div = document.createElement('div');
  gear_div.id = 'gear_bar';
  gear_div.setAttribute('style', `
position: fixed; right: .125em; top: .125em;
background-color: #ffffff77;
border-radius: .25em;
text-align: right;
z-index: 32760;
`);
  gear_div.innerHTML = `
<span hidden id="⎆">⎆</span>

<button class="tooltip" onclick="
for (let element of this.parentNode.childNodes) {
  if (element == this) continue;
  element.hidden = !element.hidden;
}"><span class="tip" style="width: 16em;">␦ Open/Close Customization</span>⚙</button>
`;
  document.body.insertBefore(gear_div, document.body.firstChild);
}
let contents_button = document.getElementById('gear_insert_contents');
if (!contents_button) {
  contents_button = document.createElement('button');
  contents_button.id = 'gear_insert_contents';
  contents_button.setAttribute('class', 'tooltip');
  contents_button.addEventListener('click', ()=>{

/*
   make html contents
*/
function make_html_contents(h_lambda, h_upsilon, h_delta)
{
  const r = /^H([1-6])/;
  let html = '';
  function document_trace_header(p, H)
  {
    const header_mark_class_name = '_header_mark';
    H.tags.push(p.tagName);
    if (p.tagName) {
      const m = p.tagName.match(r);
      if (m && !p.classList.contains('asterisk')) {
        let li_html = '';
        const h = parseInt(m[1]);
        if (h < H.previous_h)
          for (let i = h + 1; i <= 6; ++i)
            H.numbers[i - 1] = 0;
        ++H.numbers[h - 1];
        let numbering = '';
        for (let i = 1 + H.h_delta; i<=h; ++i)
          numbering += `_${H.numbers[i - 1]}`;
        let mark;
        switch (h + H.h_delta) {
        case 1: mark = `🕮${H.numbers[0 - H.h_delta]}`; break;
        case 2: mark = `🕅${H.numbers[1 - H.h_delta]}`; break;
        case 3: mark = `§${H.numbers[2 - H.h_delta]}`; break;
        case 4: mark = `§${H.numbers[2 - H.h_delta]}.${H.numbers[3 - H.h_delta]}`; break;
        case 5: mark = `§${H.numbers[2 - H.h_delta]}.${H.numbers[3 - H.h_delta]}.${H.numbers[4 - H.h_delta]}`; break;
        case 6: mark = `¶${H.numbers[5 - H.h_delta]}`; break;
        case 7: mark = `¶${H.numbers[5 - H.h_delta]}.${H.numbers[6 - H.h_delta]}`; break;
        }
        if (!p.id) p.id = numbering;
        let q = p.querySelector(`.${header_mark_class_name}`);
        if (q) q.parentNode.removeChild(q);
        if (!(h < h_lambda) && !(h_upsilon < h)) {
          if (H.previous_h != h)
            li_html += (H.previous_h < h ?
                        /*'  '.repeat(Math.max(0, H.previous_h - H.h_lambda)) + */'<ul>'.repeat(h - H.previous_h) :
                        /*'  '.repeat(Math.max(0, h - H.h_lambda)) + */'</ul>'.repeat(H.previous_h - h)) + '\n';
          if (!(h < H.h_lambda))
            li_html += /*'  '.repeat(h - H.h_lambda) + */`<li>${mark} <a href="#${p.id}">${p.innerHTML}</a></li>\n`;
          if (H.h_delta < h) p.innerHTML = `<span class='${header_mark_class_name}'>${mark} </span>${p.innerHTML}`;
          //console.log(p.outerHTML);
          H.previous_h = h;
        }
        html += li_html;
      }
    }
    for (let e of p.childNodes)
      document_trace_header(e, H);
    H.tags.pop();
  }
  let H = { h_lambda: h_lambda ? h_lambda : 1, h_upsilon: h_upsilon, h_delta: h_delta ? h_delta : 1, previous_h: /*0*/h_lambda - 1, tags: [], numbers: (new Array(6)).fill(0), };
  document_trace_header(document.body, H);
  html += `${('</ul>'.repeat(H.previous_h - (H.h_lambda - 1)))}\n`;
  return html;
}
function document_insert_contents()
{
  const id = '_contents';
  let e;
  if ((e = document.getElementById(id))) {
    e.parentNode.removeChild(e);
    return;
  }
  const html = `\
<aside id='${id}' style="clear: right; float: right; padding-left: .5em;">
<h2 class="contents asterisk">Contents</h2>
<div>
${make_html_contents(2, 4)}
</div>
</aside>
`
  if (!false && (e = document.body.querySelector('h2')))
    e.outerHTML = html + e.outerHTML;
  else if ((e = document.body.querySelector('h1')))
    e.outerHTML = e.outerHTML + html;
}
document_insert_contents();

});
  contents_button.innerHTML = `
<span class="tip" style="width: 16em;">␦ Insert Contents</span>⇱
`;
  const sibling = document.getElementById('⎆');
  if (sibling) {
    if (sibling.hidden) contents_button.hidden = true;
    sibling.parentNode.insertBefore(contents_button, sibling);
  }
}
})();

ページタイトル to copy in Gear Bar

サイトのページタイトルってどうやってコピーすればいいのでしょうか。タイトルらしき文字列を選択しようとしても画像だったりリンクで選択しにくかったりが多い。このブックマークレットは導入すれば Gear Bar にそのページのタイトルと H1 タグ文字列をコピー用に載せてくれる。

これはなかなか便利だ。仕組み上、先のコードとかなり被るが、そのままコードを載せておく。

javascript:(() => {
let tiptools_style = document.getElementById('tiptools_style');
if (!tiptools_style) {
  tiptools_style = document.createElement('style');
  tiptools_style.id = 'tiptools_style';
  tiptools_style.innerHTML = `
.tooltip .tip {
  display: none;
  position: absolute;
  width: 5em;
  padding: .25em;
  margin: .25em;
  background: white;
  border: none; border-radius: .25em;
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .25);
  z-index: 32761;
  pointer-events: none;
}
:not([style*="text-align: right;"]) .tooltip .tip {
  transform: translate(0%, 50%);
}
[style*="text-align: right;"] .tooltip .tip {
  transform: translate(-100%, 50%);
}
.tooltip:hover .tip {
  display: inline-block;
}
`;
  document.head.insertBefore(tiptools_style, document.head.firstChild);
}
let gear_div = document.getElementById('gear_bar');
if (!gear_div) {
  gear_div = document.createElement('div');
  gear_div.id = 'gear_bar';
  gear_div.setAttribute('style', `
position: fixed; right: .125em; top: .125em;
background-color: #ffffff77;
border-radius: .25em;
text-align: right;
z-index: 32760;
`);
  gear_div.innerHTML = `
<span hidden id="⎆">⎆</span>

<button class="tooltip" onclick="
for (let element of this.parentNode.childNodes) {
  if (element == this) continue;
  element.hidden = !element.hidden;
}"><span class="tip" style="width: 16em;">␦ Open/Close Customization</span>⚙</button>
`;
  document.body.insertBefore(gear_div, document.body.firstChild);
}
let text_set_to_copy_span = document.getElementById('gear_text_set_to_copy');
if (!text_set_to_copy_span) {
  text_set_to_copy_span = document.createElement('span');
  text_set_to_copy_span.id = 'gear_text_set_to_copy';
  text_set_to_copy_span.setAttribute('style', 'font-size: small;');
  text_set_to_copy_span.innerHTML = `
<label> title: <input type="text" id="gear_text_set_to_copy_page_title"/></label>
<label> h1: <input type="text" id="gear_text_set_to_copy_page_h1"/></label>
`;
  const sibling = document.getElementById('⎆');
  if (sibling) {
    if (sibling.hidden) text_set_to_copy_span.hidden = true;
    sibling.parentNode.insertBefore(text_set_to_copy_span, sibling);
  }
}
document.querySelector('#gear_text_set_to_copy_page_title').value = document.title;
if (document.querySelector('h1')) document.querySelector('#gear_text_set_to_copy_page_h1').value = document.querySelector('h1').innerText;
})();

utf8-base64 codec

h4[id=preface]

h4[id=appendix]

h5[id=appendix_A]

h5[id=appendix_B]