伝統モンゴル文字のビューアをGoogle Apps Scriptで実装する際、縦書きテキストの折り返し処理に長時間苦労した。最終的に、CSS Columnsレイアウトモデルを使った解決策にたどり着いた。

当初、flexboxを使った実装を試みた。親要素にdisplay: flexとflex-direction: columnを指定し、子要素を縦に並べる方式だ。しかし、これではテキストが折り返される位置を制御できなかった。長いテキストは画面外に突き抜けてしまう。

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

最終的に、CSS Columnsモデルが最も安定していることがわかった。親要素にheightを指定し、column-widthでカラムの幅を制御し、column-fill: autoで自動的に折り返させる。box-sizing: border-boxを併用することで、パディングとボーダーも計算に含められる。

この実装で重要だったのは、記事全体の高さを正確に計算することだった。行数×行の高さ＋パディングで総高さを算出し、それを親要素のheightに設定する。これにより、記事が適切に折り返され、次の記事が正しい位置に表示される。

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