記事本文の読み下す文章に1行45字の上限を置く (#3228)

[ma91n]

Fixes #3228

やったこと

記事本文の読み下す文章に1行 45 字の上限（article-measure = text-body × measure-chars = 15.6px × 45 = 702px）を置いた。値は _variables.styl が持ち、ルールは .article-entry の直下の文章の箱（p / ul / ol / dl / blockquote / h1〜h6 / hr / details / .note-container）にだけ max-width を当てる。列（.container / col-md-9）は動かさない（#3222 の「ページの最大幅は種類で変えない」のまま）。

コード・表・図・埋め込みは上限の外で、列の幅をそのまま使う。

設計判断を含むので Draft。

集めた材料

(a) 他サービスの本文幅（2026-09 実測、playwright で getBoundingClientRect / getComputedStyle）

サービス	段落の幅	文字	行間	1行の字数	1280 → 1920px で
Zenn	708px	16px	30.4px（1.9）	44.3字	変わらない
Qiita	708px	17px	28.9px（1.7）	41.6字	変わらない（1280px では 668px = 39.3字）
はてなブログ（staff）	836px	17px	29.75px（1.75）	49.2字	変わらない（1280px では 788px = 46.4字）
note	未確認				ページが bot 向けの 404 を返した
このブログ（変更前）	819 / 954px	15.6px	27.3px（1.75）	52.5 / 61.2字	画面幅に比例

3サービスとも本文の幅を画面幅に比例させず、固定の幅を中央に置いている。字数は 41〜49 字の帯。

(b) 段落の字数と行数（source/_posts/**/*.md 全 1,487 本・47,499 段落。全角1・ASCII 0.5 で数えた）

段落あたり中央値 62.5 字（平均 77.8・p90 154）。1記事の段落数は中央値 28。

1行の字数	段落あたりの行数（平均）	1行で終わる段落	3行以上	5行以上
22.5字（375px・351px）	3.94	11.9%	64.8%	31.9%
44.6字（768px・696px）	2.24	34.6%	32.5%	6.2%
43.8字（1025〜1199px・684px）	2.27	33.7%	33.3%	6.6%
52.5字（1200〜1399px・819px）	1.98	41.8%	24.7%	3.4%
61.2字（1400px〜・954px）	1.78	49.0%	18.3%	1.7%
45字（上限 702px）	2.22	35.2%	31.9%	6.1%

• 954px の画面で 45 字にすると、総行数は 1.25 倍（84,430 → 105,425 行）。行が増える段落は 41.8%
• 1200〜1399px（819px）比では 1.12 倍
• 45 字の行数（2.22）は 768〜1199px の読者が既に見ている行数（2.24〜2.27）と同じ。広い画面の読者だけが 1.78 行の「横に長い段落」を読んでいた

(c) 上限の外に置くもの（コード・表・図）

もの	件数	702px に狭めたときの影響
コードブロック（```）	7,898	横スクロールの要るブロックが 954px で 8.6%・819px で 14.6% → 702px で 24.1%（1行の列数 116 / 98 → 83。最長行の中央値 60・p75 83・p90 112）
表	679	列数の中央値 3。5列以上が 14.4%、7列以上が 2.4%。5列以上が .scroll の横スクロールに落ちやすくなる
画像（width 属性あり）	6,065	76.2% が実寸 702px 超（中央値 1020px）。954px 超は 58.8%。狭めると縮小が増えるだけ

この3つは行として読み下す対象ではないので、上限の外に置いた。.article-entry の直下に来る要素を生成 HTML 全記事で数えると、文章の箱（p 47,332 / h2 8,205 / h3 6,005 / ul 5,109 / h4 1,971 / blockquote 869 / ol 761 / h5 401 / note 226 / details 187 / hr 132 / dl 4）と列幅で置くもの（figure.highlight 6,840 / img 4,614 / .scroll 810 / .code-block 621 / figure 122 / iframe 108 / .mermaid-svg 56）にきれいに割れる。<p> の直下に <img> が来る形は全記事で 1 件だけ。

右に残る空き（1200〜1399px で 117px、1400px〜で 252px）はサイドバーとの間隔（44px）に足される。本文の左端は動かない。列を狭めてサイドバーを寄せる形は採らない（他ページと枠を共有している #3222）。

(d) 幅 1400px 以上の読者の割合

未確認。 ga4_pv.json / ga_cache.json は path・pv・title だけで、画面幅も deviceCategory も持たない。

採った案と捨てた案

採った: (1) 文章の箱に上限幅。 読み下しの帯は「字数」の話なので、幅の側で解く。値は段の値（text-body）に字数を掛けて導き、px を直接書かない（段を動かせば追従する）。Stylus の 15.6px * 45 は同じ単位の積なので unquote は要らない（コンパイル後は max-width: 702px の1行）。

捨てた: (2) text-body を幅で可変にする。 954px を 45 字に収めるには 21px が要り、段の台帳（#2971）と「1つの要素のサイズは1箇所」（#1927 / #1928）に触る。さらに本文見出しの em の梯子・コード 13px との比・行間 1.75 の帯がすべて連動して動く。字が大きくなるほど 1画面の情報量も落ちる。

捨てた: .article-entry 全体（コード・表・図も含めて）に上限。 Zenn / Qiita はこの形だが、あちらは列そのものが 708px。ここでは列を他ページと共有しているので、列いっぱいの 954px を使えるものまで 702px に狭めることになり、(c) のとおりコードの横スクロールが 3 倍近くに増える。

捨てた: 列（col-md-9）を狭めてサイドバーを寄せる。 記事ページだけ枠が変わり、#3222 の「ページの最大幅は種類で変えない」と衝突する。

実測（/articles/20260804a/。コードと表がある記事）

画面幅		段落の幅	1行の字数（15.6px 換算）	1行目の実文字数	h2 の罫線	コードブロック	表の受け皿	目次の左端
1280px	前	819px	52.5	66	819px	819px	819px	945px
	後	702px	45.0	56	702px	819px	819px	945px
1440px	前	954px	61.2	75	954px	954px	954px	1070px
	後	702px	45.0	56	702px	954px	954px	1070px
1920px	前	954px	61.2	75	954px	954px	954px	1310px
	後	702px	45.0	56	702px	954px	954px	1310px

• 1行目の実文字数は Range で1文字ずつ矩形を取って数えた値（英数字が半角ぶんなので換算より多い）
• 目次・サイドバー・タイトル・メタ行・画像（720px）の位置と大きさは前後で変わらない
• 1025〜1199px（684px）以下は上限に届かないので変化なし
• make css の前後差分は追加した2ルール（本文の上限・スタイルガイドの見本）だけ。css_lint.mjs / font_size_lint.mjs / スタイルガイドの textlint は通過

確認ポイント

• /articles/20260804a/ を 1440px 以上で開き、段落が 702px で折り返し、コードブロック・表が列いっぱい（954px）まで伸びていること。h2 の罫線は文章の右端で止まる
• /specials/styleguide/ の「幅」の節。表に「文章の1行」の列、本文の下に上限の見本（帯 702px と 702px = 15.6px × 45字）が出る。このページの段落自身が上限を受けているので、帯は段落の右端と揃う
• 1280px でも同じ（819px 列の中で 702px）
• 1199px 以下は変化なし

残した論点

• コードブロックが文章より 117〜252px 右へ出る。 意図した形（列幅を使う）だが、右端が2段になる見た目は好みが割れる。コードも 702px に入れるなら横スクロールが 8.6% → 24.1% になる、という数字を材料に判断してほしい
• 45 字という値。 帯の上限（35〜45）を採った。40 字（624px）にすると行数がさらに 1.09 倍（2.43 行）になり、3行以上の段落が 37.7% に増える。Zenn 44.3・Qiita 41.6 の間に入っている
• details の中のコードは 702px に収まる（箱に従う）。折りたたみの中のコードだけ幅が違う形を避けるなら、details を上限の外に出すことになるが、そのときは中の文章が 954px に戻る
• We're hiring の帯の説明文（.career-counseling.article-entry > p）にも上限が効く。1116px の帯で 71 字だった1行が 45 字になる。読み下す文なので意図どおりと判断した
• 1400px 以上の読者の割合は GA から取れない。取れる形（screenResolution / deviceCategory）に update-cache.yml を広げるかは別の話
• <p> の直下に <img> が来る 1 件は画像が 702px に縮む。:has() で外す手はあるが1件のために選択子を増やさない

🤖 Generated with Claude Code