Skip to content

縦書き段組スクロール + タイポグラフィシステム + CSS分割#1

Open
fumikito wants to merge 3 commits intomainfrom
feature/vertical-columned-mode
Open

縦書き段組スクロール + タイポグラフィシステム + CSS分割#1
fumikito wants to merge 3 commits intomainfrom
feature/vertical-columned-mode

Conversation

@fumikito
Copy link
Member

Summary

  • Mode B: 縦書き段組スクロール — CSS columns + writing-mode: vertical-rl で2段組+縦スクロールを実現。行の途切れなし
  • タイポグラフィシステム — Modular Scale (1.25), Vertical Rhythm (--rhythm), CSS Custom Properties ベース。文字サイズ・行間・字間をUIから即時調整可能
  • CSS分割styles.css を7ファイルに分割: variables / reset / typography / composition / reader / controls / responsive
  • 段行スナップ — 縦書き段組で、スクロール停止時に段行境界に自動スナップ。PageDown/Space/↑↓でページ送り

閲覧モード

モード 書字方向 スクロール レイアウト
A: 縦書きスクロール vertical-rl 1段, viewport幅
B: 縦書き段組 vertical-rl CSS columns (2段/1段)
C: 横書き horizontal-tb max-width: 40em, 中央配置

Test plan

  • Mode B でサンプルテキスト (secdioned, whisky) を読み込み、縦書き2段組+縦スクロールで表示されることを確認
  • PageDown/↓/Space で段行単位のページ送りが動作し、行頭がツールバー直下に揃うことを確認
  • 文字サイズ・行間・字間のスライダーを動かしてリアルタイムで変化することを確認
  • Mode A, Mode C への切り替えが正常に動作することを確認
  • 768px以下の幅でMode Bが1段組になることを確認

🤖 Generated with Claude Code

fumikito and others added 3 commits March 9, 2026 23:38
Express + marked によるマークダウン→HTML変換サーバー、
3つの閲覧モード(A: 縦書き横スクロール、B: 縦書き段組縦スクロール、C: 横書き)、
自動縦中横・自動段落下げのトグル機能を実装。

Mode BではCSS columns + writing-mode: vertical-rl による
段組+縦スクロール方式を採用し、行の途切れなく読める形式を実現。

Co-authored-by: Claude <noreply@anthropic.com>
- ベースフォントサイズをclamp(14px, 2.2vh, 20px)でビューポート連動に変更
- Modular Scale (比率1.25) で見出しサイズを決定 (h1: 1.953rem, h2: 1.5625rem, h3: 1.25rem)
- --rhythm (= 1rem × line-height) を基準に全マージンを統一
- 行間・字間のスライダーコントロールを追加
- 固定px指定のフォントサイズ切替を--font-scaleによる相対値に置換
- blockquote, リスト, hr などのブロック要素にrhythm-alignedマージンを追加

Co-authored-by: Claude <noreply@anthropic.com>
CSS:
- styles.css を7ファイルに分割 (variables/reset/typography/composition/reader/controls/responsive)
- typography(書体) と composition(組版) の関心を明確に分離

段行スナップ:
- Mode B (縦書き段組) でスクロール停止時に段行境界にスナップ
- 左カラム→右カラムのX座標遷移から段行境界を自動検出
- PageDown/Space/↓↑ キーで段行単位のページ送り
- ツールバー高さを考慮したスクロールオフセット

Co-authored-by: Claude <noreply@anthropic.com>
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.

1 participant