「輪郭を描き直すときに見出し記法がうまく反映されない場合がある」の不具合対応で終了。
装体調整で何とかなるかと思ったが,かえってややこしくなるので,描写 HTML 取得時に見出し階層を指定出来るようにした。
昨日,15日24歩についてまとめながら,区切り線記法の線種と見出し階層の関係について整理する必要を感じたため軽くまとめて終了。
下線形見出しや階層区切り線で用いる線種は二本線・一本線・破線・点線の4種としていたが,それに対し,9日17歩で考えた10種は多過ぎる。どれが使えてどれが使えないのか,用者を混乱させる懸念がある。
4種に絞り込んでしまうことも考えたが,atx 式見出しとの互換性はともかく,10種案も極めて整合的なものではあり捨て難い。
ここで,二本線・一本線・破線・点線を出放りとしつつ,他の線種でも代替出来るようにすることを考え始めた。つまり,10の線種を4階層に振り分けてしまえばいい。以下のように,意外と綺麗に振り分けられる。
<!-- 第1階層 -->
=====
+++++
*****
<!-- 第2階層 -->
-----
= = =
+ + +
<!-- 第3階層 -->
- - -
: : :
* * *
<!-- 第4階層 -->
. . .
これに装体指定の機能を持たせてもいいだろう。元々第1階層見出しの下線は太い一本線だったので,代替しても大きな違和感はない。各見出し階層に相応しいように装体はいくらでも調整出来る。
従来の見出し未満の区切り線記法に,見出し階層を越えられる「階層区切り線」を加える。以下のように,唯一通常の区切り線と区別出来る見出し記号 #
(全角 #
も可)を使う。
* 第1階層
** 第2階層
#========================#
第1階層段落。
#------------------------#
第2階層段落。
#- - - - - - - - - - - - #
第3階層段落。
#. . . . . . . . . . . . #
第4階層段落。
##
第1階層段落(# の数でも調整出来る)。
従来の区切り線記法は,HTML において対応する <hr>
の性質上,見出し未満の区切りにしか使えなかった。
見出し階層を作った後で描写全体に対するフッター的なものを書こうとすると第1階層見出しを作る必要があるが,しばしば大袈裟に感じられることがある。
今回の検討当初は,「空見出し」という概念を主に考えていた。区切り線の長さは任意であるべきなので,どう弄っても自然な形で階層を調整出来そうになかった。その点,見出し内容を空に出来れば手っ取り早い。
しかし,等号も星号も区切り線に使う予定なので,==
のように第2階層以降で内容を空にすると衝突することになる。
区切り線の方を見直しても,--
が区切り線なら ==
はやはり二重の区切り線であってほしい。直感性,下線形見出しとの整合性を考えるとこれは捨て難い。星号による区切り線はそれに比べればまだ転用の余地があったが,その代わり *
を使う Markdown の区切り線記法との互換性が損われる。
そもそも,「空見出し」という概念にも無理がある。文字を書くから見出しなのだし,実質的に区切り線なのだから,直感的とは言い難い。
ここで,唯一区切り線記法と被らない見出し記号である番号記号を思い出した。
番号記号による見出しは,ハッシュタグや駒手記法との衝突を避けつつ atx 式見出しとある程度互換性を持たせるため,##
のように2個以上を条件に対応していた。個人的に好きな記法ではなかったこともあり,おまけのような扱いで,ここまで気付かなかった。
すでに「空見出し」に難を感じていて,区切り線記法での対応に立ち返っていたことで,この ##
が特殊な区切り線とみなせる特徴を持っていることに気付いた。記号を2個以上繰り返す,区切り線に見える記法で,実際,普文の枠線的な装飾に使われることが多い記号でもある。
特に,区切り線記法としての統一感・直感性を保てる2個で第1階層を表せるということは決定的に重要な点で,見出し記号の個数と階層関係が一致しないとどうしてもちぐはぐに見えてしまう。これは,衝突を回避したとしても等号・星号では解決出来ない問題だ。区切り線記号としての最短形が見出し記号としての第1階層に対応しうる唯一の記号が番号記号だった。
ただし,通常の区切り線記号と異なり,個数が階層に対応するため,普文の装飾を兼ねられないという問題があった。上位階層の区切り線を普文上で目立つように書けない。
これは,最新の区切り線記法と下線形見出し記法の検討(9日17歩,19歩)を踏まえ,見出し階層に対応する4種の区切り線と組み合わせる形で解決することにした。つまり,第1階層から順に最短形で #==#
,#--#
,#- -#
,#. .#
というように区切り線と組み合わせることが出来るようにする。これがまた都合が良いことに,よくある装飾に見える。
9日15歩以後,見出しの下線と区切り線は長さで区別出来るようになっているため,区切り線の装体にはある程度多様性を持たせて問題ない。一方,見出しの下線は階層を表す装体になっているため,一定の制限が必要になる。この点でもぴったり噛み合った。
別に2個以上で良いだろうと実装した区切り線記法,おまけ感覚で付けた番号記号による見出し記法,最近の拡張方針……何気ない全てがパズルの要素だったかのように思える神秘的な閃きだった。
この階層区切り線の考案を機に,番号記号による見出しは常に2個を最上位階層とすることにした。つまり,*
,=
と ##
で始まる見出しはともに最上位階層を表す。
これまで,異なる見出し記号を併用することは特に想定しておらず,実際使われていないはずなので,記号の個数は単純に計算していた。見出し階層は相対的な個数で決まるため,*
で始まる見出しがあると ##
は第2階層になる。これは階層区切り線と整合しない。
特に仕様として決めていたことではないため,ここで厳密化することにした。
HTML と CSS の機能的には,可接性を保ちつつ見出し要素を隠すことは造作もないが,SEO 上の懸念が多少ある。今の検索演心の評価理積みはそこまで単純ではないだろうが,伝統的に見出し要素は隠すべきではないとされてきただけに,どこまで不利になるか分からない。出来るだけ行儀の良い実装方法を見つけたい。
そもそも見出し要素を空にしてはいけないのか,<section>
あたりを使って上手く誤魔化せないか,など色々考えてみたが,どれも多かれ少なかれ怪しさが残る。
見出しの無い階層区切りというのは HTML の想定外だったのだろう。
::after
}{double
}{果した}{調整余地}{font-weight
}...見分けにくかった見出し装体の視認性が大きく向上した(修正前・修正後)。
まず,これまで中景輪符が <h1>
で始まるか <h2>
で始まる(前後景輪一覧)かで描写内の見出し装体も1階層ずつずれていたが,これはいったん固定することにした。
ずれるのも HTML の文書構造からみれば間違った表現ではなく,中景輪符の表現も少し変えるべきかと考えていたが,これもなかなか難しい。中景輪符の知名部は,現状 <h1>
でも <h2>
でも font-size: 1.4em
,font-weight: bold
,letter-spacing: 0.05em
という装体になっている。輪郭という情報単位の粒度を考えた時,これ以下は小さ過ぎ,これ以上は大き過ぎという所だ。
他の要素も,要素同士の対比を考えて細かく装体を調整しているため,それらまで見出し装体の変化に合わせると保守性に悪影響を及ぼす。将来的にどうかはともかく,現時点でそこまでする利点は無いだろう。
CSS では h1 ~ .dln h2, h2 ~ .dln h3
のように兄弟結合子を使えば簡単に実装出来る。
あくまでも描写内での見出し階層で装体を固定することにした上で,第1階層から第4階層までの描写内見出しには二本線・一本線・破線・点線と4種類の下線を付けることにした。これまでは第1階層に2px,第2階層に1pxの一本下線のみだった。
二本線は border-style
の double
では制御しにくいため ::after
を使い,1pxの線に2pxの間隔をあけた。また,点線も舞覧によって破線より目立ってしまう場合があるため,色を調整することにした。
最初は,第1階層の二本線,第2階層の一本線があれば十分かと思ったが,結局文字サイズだけの変化ではぱっと見分かりにくい。各描写内見出しに図形的な特徴があった方が良い。
文字サイズは,これまで 1.3em
,1.2em
,1.1em
,1.05em
,1em
だったのを 1.3em
,1.2em
,1.15em
,1.1em
,1.05em
とした。
1.3em
から 1.1em
まで0.05em刻みの方が数字的には綺麗かと思ったが,下線で特徴を付けても,特に第1階層と第2階層が一見して見分けにくかった(画面撮り)。それ以下は使用頻度も低いので0.05em刻みでも大きな問題はないだろう。
letter-spacing
や font-weight
の調整余地はもう少しありそうだが,視認性の改善という目的は十二分に果したのでここで一段落とした。
2pxの一本線よりも1pxの二本線の方がすっきりした印象になるのが意外だった。
<h1>
}{<h3>
}...見出し記法実装に関しては一段落した(デライト公式での解説)。
結果的に,Org-Mode,主要なウィキ実装,AsciiDoc,Markdown の方式に幅広く対応出来ることになり,当初想定よりずっと洗練されたものになった。
見出しの扱いは簡単なようで意外に複雑で,デルン初期実装では早期に実装していたものの,デライトに合わせた再実装がなかなか難しかった。出来てみれば,時間をかけただけのことはある。
昔の輪郭には見出しを使ったものも少なくないため,これらの可読性が向上し,SEO にも寄与してくれることが期待出来る。
見出し記号には,当初予定していた星号に加え,要望による等号,実装途中で条件付きで取り入れられることに気付いた番号記号を採用した。半角・全角の区別は無い。
実装しながら,最初の見出し記号の数も任意にした方が都合が良いことに気付き,最初の見出し記号の数を基準とすることにした。最初の見出し記号の数を下回る見出し記号が現れた場合は,それを新たな基準にする。
いずれにせよ,HTMLで見出し階層を飛ばすのは良くないとされているため,こうせざるをえないのだが,中景輪符の捉え方で,見出し記号2つで始めた方が直感的と感じる人もいるだろう。この仕様を利用して,見送るつもりだった番号記号も採用出来た。
見出し装体に関しては,文字を適当な大きさ・太さにして,h3 要素までは下線を入れるという,特筆すべきことはあまり無いものに落ち着いた。
見出し記号が多様化したこともあり,3月30日9歩で作った見出し装体素案から星号部分を除いた形になった。
実際試してみると,これくらいあっさりしていた方が気軽に使いやすい。これ以上装飾すると目障りになりそうだ。
当初,HTML 上で見出し階層がずれても装体を維持するように調整するつもりだったが,これはいったん保留とした。現状,中景輪符が h1 でも h2 でも同じ装体になっていることに合わせようとしたが,本来これは変わった方が自然なので,後でまとめて調整した方がいいだろう。
見出し記法実装の一段落(10歩)をもって DIL 0.2 にあった主要な記法を全て取り込んだため,長らく定まっていなかったデラングの版存を 0.03 と定めた。
デラングの版存に関しては,時印を元に適切な版存を自動適用するという方向で検討するようになっている(3月7日14歩)。それはそれとして,管理上版号も欲しいと考えていたが,なかなかまとまりが付かなかったこともあり,特に版号を与えていなかった。
キリの良いところでデラング 0.01 とするか,などとぼんやり考えていたが,これだけ長いこと弄っていて 0.01 というのも出し惜しみが過ぎると感じていた。
この見出し記法実装をもって旧デルン実装で主に利用していた DIL 0.2 を取り込み終え,開発予定のまま棚上げになっていた DIL 0.3 を置換することになるため,点零記法でこれに相当する 0.03 が丁度良いのではないかと気付いた。
デラング 0.01 は DIL 0.1 の,デラング 0.02 は DIL 0.2 の別名としておく。