Mongolian Script ViewerのCSS Columns解決策

伝統モンゴル文字ビューアの開発で、テキスト折り返し処理に長期間苦労していた。最終的に、CSS Columnsレイアウトモデルが最も安定した解決策だと判明した。

当初、Flexboxを試みた。親要素にdisplay: flexとflex-direction: columnを指定し、子要素を縦に並べる。しかし、長いテキストが画面外に突き抜けてしまい、折り返しを制御できなかった。

次に、white-space: nowrapとinline-blockの組み合わせを試した。これである程度機能したが、複数記事を表示する際、記事間の区切りが不明瞭になった。

CSS Columnsモデルの実装：

.mongolian-article-container {
  height: calc(行数 * 行の高さ + パディング);
  column-width: 60px;
  column-gap: 20px;
  column-fill: auto;
  writing-mode: vertical-lr;
  box-sizing: border-box;
  padding: 20px;
  overflow-x: auto;
}

この方法の鍵は、記事全体の高さを正確に計算することだった。行数、行の高さ、パディングを組み合わせて総高さを算出し、それをheightプロパティに設定する。

function calculateArticleHeight(lineCount, lineHeight, padding) {
  return (lineCount * lineHeight) + (padding * 2);
}

column-fill: autoにより、テキストは自動的に次のカラムに折り返される。overflow-x: autoにより、すべてのカラムが画面に収まらない場合、横スクロールが可能になる。

box-sizing: border-boxも重要だった。これにより、パディングとボーダーが指定されたheightに含まれる。デフォルトのcontent-boxでは、パディングが高さに追加され、計算が狂ってしまう。

現在のビューアはシンプル版で、最新の記事のみを表示する。完全版では記事リスト、追加・編集機能を統合する必要があるが、核心のテキスト表示ロジックは完成した。この安定したCSS基盤の上に、残りの機能を構築していく。