入力中のテキストにフォーカスする
テキストエディターのカーソル行を強調するデザインには、大まかに二つの方式がある
この二つはちょうど正反対のアプローチだといえる
#注意誘導
カーソル行暗転方式
背景色の暗転
多くのテキストエディターにおける標準的なUI
カーソル行の表示のみを変更する
シンプルかつ効果的
実装も簡単なので誰もが最初に思いつくものだろう
行全体の輪郭を暗転させると、他の行との明瞭なコントラストを得られる
カーソル迷子対策として有力
カーソル行の背景色が文字色に近づくことでわずかにテキストのコントラストを低下させる(視認性に影響を与えない程度)
「相対的なカーソル行ハイライト」の方式
Nrem.iconカーソル行の背景を明るくすると共に、カーソル行以外の前景要素を目立たなくすることで注意を誘導する
相対的な強調
カーソル行
背景をわずかに明転させることで、カーソル行の輪郭が目立つようにする
カーソルのない行
テキストや画像など前景要素のopacityや濃淡を落として視認性を低下させる
操作の意図と文脈に関係のないUIの要素を目立たないようにする
自然に注意の焦点が定まり没入感が得られる
導線に基づいて前景要素をフィルタリングする
画面内にある重要性の低い要素を視覚的に"遠ざける"
部品にフォーカスのある文脈と目的論的解釈目的に基づいて、そのとき注意を向けられる必要性の薄い前景要素が背景要素化されるように画面全体の要素の表示を動的に変化させる
横断的にパターンに基づいて複数の部品の状態を管理しなければならない
(雑な喩え)オブジェクト指向に対するアスペクト指向のようなもの
「相対的なカーソル行ハイライト」は(当時)新しく作成したAureole/Eclipseテーマの一部として実装したもの
カーソル行の強調表示を再考して、透明なnavbarとpageの輪郭の立体感とセットで連動するUI連動させるUIとして設計した
後にモジュール化するにあたって分割された
相対的なカーソル行ハイライトUserCSS
編集周りのUIの配色を統一するUserCSS
これは配色がそのままになっているので、Cosenseネイティブのテーマに適用してもそのままでは調整不足
table:「Anĝela Osto」との比較
Aŭreolo (this) Anĝela Osto
カーソル行の文字 そのまま そのまま
カーソル行の背景 わずかに明転 暗転
その他の行の文字 読めなくならない程度に薄くする そのまま
その他の行の背景 そのまま そのまま
このカーソル行強調のスタイルは、Markdownエディタにおいて「フォーカスモード」と命名されているものと基本的な発想が同じものとなっている
#車輪の再発明
既存のMarkdownエディタの表示は自分の思い描いていたものとのズレがあるので、不満点(というより差異)を洗い出した
微調整にあたって、MarkText の「Focus Mode」を先行例として参考にした(GIF画像は公式ドキュメントより)https://gyazo.com/e38468ffedc13c985a086a291fc75d0d
table:MarkTextとの差異
MarkText Aŭreolo
カーソル行の背景色 そのまま わずかに明るくする
カーソル行の文字色 そのまま そのまま、またはわずかに強める
カーソル行以外の背景色 そのまま そのまま
カーソル行以外の文字色 大幅に薄くする 薄くする
ページ余白 そのまま そのまま
Markdownエディターのものは、カーソル行以外のテキストのコントラストの下がり幅がかなり大きい
Markdownエディタはどれもほぼ同じ表示のものとなっている
最初にこのスタイルを流行らせたエディタがあるのだろう
カーソルのない行のテキストがかなり見えづらくなる
前景色だけでコントラストに差をつける都合だろうか?
同ページ内の他の箇所を参照しながら書くのに向いていない。編集箇所の前後の文脈を読み返すのにもワンクッション要する
フォーカスモードとはいうが、かえってワーキングメモリや注意資源に負担をかけるのではないか
(ライトテーマ時)画面が全体的に白くなって眩しい
余計な情報に注意が向けられないようにするためだろうけど、(端的な感想として)これはやりすぎだと思う
このページ内のどこかの行をクリックすれば実際の表示変化の度合いを確かめることができる。
#カーソル