Skip to content

feat(ui): let the chat text size be changed - #64

Merged
smileygames merged 3 commits into
mainfrom
60-chat-text-size
Aug 23, 2026
Merged

feat(ui): let the chat text size be changed#64
smileygames merged 3 commits into
mainfrom
60-chat-text-size

Conversation

@smileygames

Copy link
Copy Markdown
Member

Closes #60

会話面(#room)の文字サイズを、キーボード(Ctrl + = / - / 0)とヘッダのピッカーから変えられるようにした。寸法は #room 自身に載るカスタムプロパティであるため、参加者パネル・診断面・端末・入力欄には継承経路が無い。

段は 0.71.6rem の離散の梯子で両端が上下限、保持は localStoragepullcept.room-font-size)。既定は 1rem で、これまでの見た目を変えない。

会話面(`#room`)の文字サイズを読む側が変えられるようにする。

効く範囲は会話面だけである。範囲は宣言ではなく置き場所で成立させた——寸法は
`#room` 自身に載るカスタムプロパティ `--room-font-size` であり、参加者パネル・
診断面・端末・入力欄はこの要素の子孫ではないため継承経路が無い。`:root` に載せ
れば四つとも巻き込む。端末は特に巻き込めない。xterm.js は自前の寸法から桁数と
行数を計算するため、上から降ってきた寸法は CLI が使える幅を変える。

既定値は現在の見た目のままとした。`1rem`、つまりこれまで出ていたブラウザ既定で
ある。`.message .body` には `font-size` が無く、`body` にも `html` にも `:root`
にも無いため、会話面だけが寸法を与えられずに来ていた。「大きい」はここから来て
いるが、設定していない画面が勝手に変わらないことを優先する。面どうしの揃え直し
は別の判断である。

寸法は行全体に効く。発言者名と時刻と行の最大幅を `rem` から `em` へ移した。本文
だけが大きくなり、それに付く名前と時刻が据え置かれる形は、一つの行が二つの面か
ら来ているように読める。最大幅を `rem` で固定すると、文字が大きくなるほど一行の
文字数が減る——最大幅が持つべきものは文字数のほうである。既定ではどちらも従来と
同じ値に解決する。

段は `0.7`〜`1.6rem` の離散の梯子で、その両端が上下限である。既定より下を細かく
取ったのは、観察が「大きい」である以上、使われるのが下方向であるためである。梯子
に無い値が保存されていた場合は既定へ戻す——梯子の外からは段を進めず、理由を出さ
ずに効かなくなるためである。

保持は `localStorage`(`pullcept.room-font-size`)。画面の設定であって参加者の
属性ではない(#40 の形)。参加者クラスでの書き分けはしない(#39)。

操作は `Ctrl` + `=` / `-` / `0` と、`診断` の隣のピッカーの両方に置いた。キー
だけにしないのは、既定が現状維持である以上、見つけられない操作の裏に直し方を置
けば知っている者だけが直せるためである。キー操作は既定動作を止める。webview 自
身のズームが同じキーに割り当たっており、そちらは効かせないと決めた四つを巻き込
むため、止めなければ範囲の限定そのものが成立しない。

#60
@smileygames smileygames linked an issue Aug 23, 2026 that may be closed by this pull request
@smileygames smileygames self-assigned this Aug 23, 2026
Claude Lin & Lay added 2 commits August 24, 2026 07:52
`ROOM_FONT_SIZE_KEYS` の `_` を他のキーと同じく引用符付きに揃え、`.message` の
二つのコメント塊の間に空行を入れて、色の説明と寸法の説明が別々の塊として読める
ようにした。挙動は変わらない。

#60
効かせない面は参加者パネル・診断面・端末・入力欄の四つであるのに、継承経路の
段落が「他の三つ」と書いていた。webview のズームの段落も三つしか挙げておらず、
同じ節の中で数が二通りあった。どちらも四つに揃えた。

#60

@smileygames smileygames left a comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

自己レビュー(auto モード)

判定 = pass。

完了条件の照合

完了条件 結果 根拠
会話面の文字サイズを変えられる Ctrl + = / - / 0windowkeydown)とヘッダの #room-font-size
参加者パネル・診断面・端末・入力欄の寸法が変わらない --room-font-size の宣言位置が #room 自身。#participants#conversation の兄弟、#diagnostics#composer#room の兄弟であり、いずれも継承経路を持たない
再起動しても保たれる localStorage キー pullcept.room-font-size
上限と下限がある ROOM_FONT_SIZES の両端。stepRoomFontSizeMath.min / Math.max が梯子の外へ出さない
設定していない状態の見た目が変更前と同じ 下の算術を参照

既定値の保存(算術で確認)

単位を rem から em へ移した3箇所が、既定 1rem で従来値へ解決することを確認した。

  • .message — 変更前は font-size 無し(16px を継承)。変更後 var(--room-font-size) = 1rem = 16px。同値。
  • .message .meta0.78rem12.48px)→ 0.78em。親 .message16px なので 12.48px。同値。
  • .messagemax-width46rem736px)→ 46em。親基準 16px なので 736px。同値。

padding-left: 0.7remborder-left: 3pxrem / px のまま据え置き。行の装飾が本文と一緒に太らない。意図した非対称と読んだ。

制約の照合

  • 参加者クラスでの書き分けなし(#39)— 寸法は .message に一律。話者別の分岐は無い。 ✅
  • localStorage 保持(#40 の形)— アカウント側ではなく画面側。 ✅
  • 端末を巻き込まない — src/main.ts の xterm fontSize: 13 は無変更。 ✅

実装の健全性

  • storedRoomFontSize() — 未設定時 getItemnullNumber(null)0 で梯子に無いため既定へ落ちる。破損値も NaN で同じ経路。梯子の外を握らないので stepRoomFontSizeindexOf-1 を返す状態に入らない。
  • applyRoomFontSize(..., save=false) を起動時の復元に使い分けている。選んでいない画面へ値を書き込まない。完了条件5の裏側として効いている。
  • ROOM_FONT_SIZE_KEYS0 が段 0 を持つため、参照側が undefined 判定で偽値と切り分けている。妥当。

ヘッダ

#titlebar select の既存スタイル(font: inherit / --surface / 枠 / 角丸 / padding)が新しいピッカーへそのまま乗る。追加の CSS 無しで揃う。配置は .spacer の後ろ、診断 の手前で、右寄せの並びに入る。

逸脱

無し。3コミットに分かれているが、内訳は本体・整形2トークン・docs 内の数詞の不一致(三つ / 四つ)の修正で、いずれも本 PR の対象ファイル内。範囲外の変更は無い。

docs/0-requirements.md は同 PR 内で更新済み(分割していない)。

残す観察点

event.preventDefault() が webview 自身のズームより先に効くかは、ブラウザの外で検証できない。この一点だけは未計測であり、docs/0-requirements.md の未実装(実機未確認)へ記載済み。実機確認はマージ後の main で行う。

CI = 2件とも pass。auto モードにつき人手のゲート無し。マージへ進む。

@smileygames
smileygames merged commit ceea5f9 into main Aug 23, 2026
2 checks passed
@smileygames
smileygames deleted the 60-chat-text-size branch August 23, 2026 22:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(ui): let the chat text size be changed

1 participant