{需要がある}{地味ながら}{厳密に考える}{見分けが付く}{開いている時}{実装出来た}{現仕様}{万能ではない}{`resize: vertical`}{高過ぎず}...=}(115)

{希哲16年3月30日の開発 K#F85E/A-E74C-7061}

描写欄高さ問題きっかけ自動リサイズ機能字数計実装出来た。ほか装体調整など。

出振るい済み

自動リサイズ機能

旧輪郭選り手では,描写欄出放り高さ新規描出フォーム10em再描出フォーム15emとしていたが,新輪郭選り手ではたまたま15em統一されていた画面撮り10emでは長文書きにくいのでこれはこれでいいかと思ったが,やはり新規描出フォーム一言だけや知名だけの描出使うことも多いためこの高さでは邪魔臭い

ここで,予てからぼんやり検討していた自動リサイズ機能導入考えた一応 resize: vertical設定してあるが,万能ではない10emから20em程度までの範囲で,改行毎に自動リサイズさせる。導入予定字数計では字数情報必要になるため,一緒に行数保持させることにした。

実際に試してみると,1em刻みでも2em刻みでも違和感があったため,10emから19emまで1.5em刻みリサイズするようにした画面撮り初期状態最大自動リサイズ19emだと個人機でも低過ぎず高過ぎずスマートフォン縦向き柔品キーボード表示させてもちょうど収まる程度の高さになる。折り返し多い1行もありうるため,厳密にするなら字数考えるべきだが,とりあえずはこれで様子を見ることにした。

再描出フォームに関しては,さほど目立つものでもなく,描写部高さ合わせて描写欄開くようになっている現仕様悪くないので,現状維持様子見しておく。

字数計

字数行数保持出来たことで字数計難無く実装出来た描出ボタン時印左側邪魔にならないように表示させてみた字数計の様子

下見字数分けようかと思っていたが,下見開いている時下見字数置換すれば十分であることに気付いた一応見分けが付くようにに「」を付けるようにした。

これも,厳密に考える特殊な文字符号などを考慮する必要があるが,キリがないのでとりあえず .length による概算でよしとしておく。

字数計は,地味ながら意外に需要があることを市場調査通して知った自分でもたまに欲しくなることがあった。

{Aejs}{Aejs 整備}{希哲16年2月24日}{進捗記録}{希哲16年2月24日の開発}{希哲16年2月24日の進捗}{番無し輪郭}{修正しておいた}{誤記述}{表示されていない}...=}(93)

{希哲16年2月24日7歩 K#F85E/A-E74C-3C7E}

進捗時限記録中略

以下の番無しに関する不具合修正終了手定め出振るい済み

これも優先順位微妙な問題だったが,たまに試し描きしていく人はいるのでここで修正しておくことにした。

番無し描出不能不具合

数ヶ月前気付いた番無し描出出来なくなっている不具合だが,金風整備中断したまま出振るい出来ない Aejs問題なので,優先度低さもあり放置していた

まず手定め環境原因突き止めると,@DG.bld..drw() 内で <spn.strk>参照方法間違えているだけで,ごくわずか修正済むことが分かった

通常避けたい方法だが,次回Aejs 出振るいまでもう少しかかりそうなので,最新の Aejs修正し,それに合わせて本番環境ae.jsVim修正した

前後景輪数表示不具合

これは気付いてから半年くらい経つ気がするが,何度か起きている前後景輪数表示不具合が,また番無し限って起きていた。これも深刻な問題ではな目立つものでもないので放置していた

前回同様,n_fgn_bgNULL初期化することで対応した

作業自体1分かからないことなので原因究明追い追いやっていく……と,これを書いている途中でまた発生しばらく様子を見る

前後景部における自分の自我アイコン表示不具合

作業中番無し輪郭前後景部における自分(録入り中の自我)自我アイコン表示されていないことに気付いた太字にはなっている)

これも単純な誤記述原因だったため修正しておいた

{HTML}{駒手記法}{進捗記録}{あれ}{希哲16年2月20日13歩}{神秘的な}{別に}{実装した}{付けた}{階層区切り}...=}(248)

{希哲16年2月15日24歩 K#F85E/A-E74C-1EF9}

進捗時限記録中略

不意に閃いた階層区切り線」についての方針まとめて終了

従来の見出し未満区切り線記法に,見出し階層越えられる階層区切り線」を加える。以下のように,唯一通常の区切り線区別出来る見出し記号 #全角 使う

* 第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階層になる。これは階層区切り線整合しない。

特に仕様として決めていたことではないため,ここで厳密化することにした。

実装上の課題

仕様完璧思えるが,実装上の課題残った

HTMLCSS機能的には,可接性ちつつ見出し要素隠すことは造作もないが,SEO 上の懸念多少ある。今の検索演心評価理積みはそこまで単純ではないだろうが,伝統的に見出し要素隠すべきではないとされてきただけに,どこまで不利になるか分からない出来るだけ行儀の良い実装方法見つけたい

そもそも見出し要素にしてはいけないのか,<section> あたりを使って上手く誤魔化せないか,など色々考えてみたが,どれも多かれ少なかれ怪しさ残る

見出しの無い階層区切りというのは HTML想定外だったのだろう。

{高い}{消え入る}{垢抜けない}{L字型}{Markdown の見出し記法}{二本線}{使っていた}{見出し装体素案}{見出し装体}{思い出した}...=}(31)

{見出しについて思い出したこと K#F85E/A-E74C-0235}

余談ですが,L字型見出しスタイルは昔希哲館のサイト使っていたことがあったのを,おかげで思い出しました

というより,L字型自体は CSS見出し的なものを装飾するのに,昔から(とりあえずこれでみたいな感じで)よく使われているパターンなので,自然に試したのだと思います。 さんのアイデア面白いのはそれを複数本にするというところだと思うのですが,最初の第1階層がデザインとして野暮ったい上につまらない(昔の CSS 解説サイトみたい)のが個人的には痛いです。この第1階層は実際に使ってみても想像以上にダサい代物であるということは黒歴史として後世に伝えていきたいです。

それが階層の表現であることに気付く前に,とりあえず折り曲げてみた感じに見えてしまうというか……。デザインにおけるダサさというのは,要は「削れるものをとりあえずくっつけている」感じなのです。「いるかそれ?」と思われたら負けで,それが垢抜けない印象になるわけです。その意味では,むしろ「(見本のように)並べてみないと良さが分からないデザイン」になっていると思います。

ちなみに,その案に一貫性があるとすれば下層に行くに従って左線の数が増えていくことになりますが,この方式は階層的に小さい見出しが不必要な目立ち方をする上に気持ち悪いことになるのは目に見えているな,と思ってにしたのが見出し装体素案です。


経験上,見出しはとにかく目立つ要素で,下手に凝ろうとするとデザイン的な事故になる可能性高いので,「引き算」が重要と感じています。

その帰結が,文字下線だけで階層を表現する,という現在のスタイルです。初見では目立たない単なる区切り線ですが,二本線が次第に消え入るような一貫した表現で,階層を判別する必要十分な機能を持たせています。おまけに,デライトでも導入予定の Markdown の見出し記法にも一致しています。自分でいうのも何ですが,これ以上の案を出す,というのは結構難しいデザインの課題だと思います。

ただ,デザインというのは感覚でするものでも好き嫌いでするものでもないので,納得出来ないことをどんどん投げつけてくれる さんとのこういう議論言語化のために非常に有意義だとも感じています。

{進捗記録}{文字装飾記法}{`<small>`}{置き換えられる}{補足部区}{注意部区}{一段階目}{希哲16年1月24日4歩}{強調度}{注意記法}...=}(73)

{希哲16年1月24日16歩 K#F85E/A-E74C-1FEF}

注意記法補足記法についての再検討終了

4歩を以下のように修正した。強調度に応じて三段階となる補足記法同様

!--
小さな注意書き
--

!!--
通常の注意書き
--

!!!--
重要な注意書き
--

装体は,23日2歩下敷きに,境界線背景色無しで font-size: 0.8em 程度にした小書きのものを加える。この場合,一段階目注意部区補足部区装体的に区別出来なくなるが,そもそも小さな注意書き補足違い曖昧なものなので自然といえば自然だ。


そもそも注意書き目立つように書かれるものばかりではない,というところに引っかかっていた

二段階三段階かは迷ったが,二段階にして後から追加出来なくなるよりは,三段階にして一段階目無用の長物になる後悔の方が小さい


当初,記号の数で「重要度」を表すことにしていたが,内容重要性装体目立たせ方は必ずしも一致しないので,「強調度」程度の意味合いにしておくべきかもしれない。


ダッシュ記法への応用考えた

例えばデラング文書では,目次項目末尾<small>----輪郭記法</small> などと書いているが,これを ?----輪郭記法置き換えられるかもしれない。

23日12歩書いた小書き括弧記法を使わずに文字を小さくしたいと思うことはたまにあった」とはこのことだったが,あくまでも文字装飾記法の一種である文字サイズ記法フォント記法<small> 相当の表現完全に代替は出来ない。

=}
{目立つ}

{}