引用ブロックとインライン引用に関する考察
プレーン
箇条書き
引用ブロック
引用ブロック内の箇条書き
箇条書き
箇条書き
箇条書き
プレーン
who.icon箇条書き
箇条書き
Text Quotation text
箇条書き quotation 箇条書き
Quotation
箇条書き
箇条書き
以下の記述は、あくまでスタイリングを行った人自身Nrem.iconの設計意図にすぎないことを差し引いて読む必要があります。
机上の空論では意味がありません。完成物を見た人が実際に受ける印象が作成者の意図通りのものであるとは限りません
「つもり」になるだけなら幼児にもできるということです
table:引用ブロックとインライン引用の対照表
書式の対象 行全体 行の一部（インライン要素）
スケール感・視覚的重量 ひとかたまり 部分的、局所的、文の一部
引用の基本単位 文章。一行から複数の段落 一語句、一節、一段落
（直接の言及箇所をピンポイントで提示する使用法が多い）
マーカー 行頭側の境界線/中程度の太さ 下線/細め × 引用符アイコン
（想定値 2.5px - 3.5px） （想定幅 2px - 2.5px）
背景色 背景色、一回り小さい文字サイズ
余白 字下げによる余白 引用符アイコンの領域（左端）、通常テキストとの境界（左右端）
行末全体に偏在（右側） テキストの上側
導線、重心 行頭の区切り線（左側） / 左寄せ 段落の baseline（下方向） / テキストの流れる方向
基本的な考え方
引用ブロックのスケール感・視覚的な重量 > インライン引用のスケール感・視覚的な重量
引用ブロックのスタイルを再構築してインライン要素に落とし込んだもの
この制約下における俄然性と必然性を重視している
大雑把に要約すると、結果的に引用ブロックを縮小して-90°回転させる形となっている
border
下線は消去法。上・右・下・左の四択を検討したところ、どうも下側以外に成立させる余地がないらしい
border のみでは「引用文」であることが伝わらないため、引用符アイコンを追加
寸法の相関関係
padding-top > 引用符アイコンのシングルクォート一つ分の太さ ≈ border-bottom + padding-bottom ≈ 左右端のpaddingの和
この引用記法の下線について
引用ブロック記法の border-width > インライン引用記法の border-width
border-bottom:（下線）
1. 背景領域の一部分として提示される必要がある
テキストと同じレイヤーに見えてはいけない
明度が文字色に近しいほど「強調」的な印象に近づく
background-color:とのコントラストが肝要
面積の小さな部品を視認させるにはより大きなコントラストが必要になるが、border 1px（Cosenseの引用ブロックの境界線）は面積が零に近しい下限であり、background-color:と分離するためのコントラストの下限が上限に近しい
2. 引用ブロック側の border-width:を変更することによって、引用ブロックとインライン引用に同一の配色を適用しつつ、インライン引用の「下線」のコントラストを下げることを可能にしている
引用ブロックとインライン引用に同一の配色を適用しつつ配色を流用するために引用ブロック側を変更しているのであり、もし配色を異にするのであれば、太さを同じにする必要はない
もし細かく調整するならこの前提は不要
もっとも、標準の引用ブロックの無彩色 border 1px のままでは「同じ構成要素」であることを示唆する近似色に調整する難易度が上がるのではないか
インライン引用記法の具体的な使われ方のうち、「直接の言及箇所を提示する」使用法は既知の下線の用法と類似性や親和性があるのではないかというのが、「下線」であることを正当化したい作成者の不確かな根拠です
この叩き台の最初の版を書いた人：Nrem.iconNrem