ブログの伝統モンゴル文字投稿で、長年にわたって悩まされてきたレイアウトバグをついに解決した。縦書きのモンゴル文字が、画面を横切る「水平リボン」のように表示されてしまう問題だ。

原因は、blog-theme.jsが自動的に適用するdisplay: flexと、blog-theme.cssの縦書きレイアウトルールの衝突だった。JavaScriptが言語モードを検出し、適切なクラスを追加する前に、flexboxレイアウトが適用されてしまっていた。

解決策は二段階だった。第一に、blog-theme.jsの実行タイミングを修正した。スクリプト全体をDOMContentLoadedイベントリスナーで囲むことで、HTMLが完全に読み込まれてから実行されるようにした。

第二に、CSSのレイアウト戦略を変更した。Flexboxを諦め、white-space: nowrapを使った親要素と、inline-blockの縦書き子要素を組み合わせる方式に変更した。

.mongolian-vertical-container {
  white-space: nowrap;
  overflow-x: auto;
}
​
.mongolian-vertical-container p {
  display: inline-block;
  writing-mode: vertical-lr;
  margin-right: 20px;
}

この方法が伝統モンゴル文字に適している理由は、ブラウザが想定している東アジアの縦書き（右から左への改行）と、モンゴル文字の縦書き（左から右への改行）が逆だからだ。FlexboxやCSS Multi-columnといった最新のレイアウト技術は、CJK（中国語・日本語・韓国語）の縦書きを前提としており、モンゴル文字には適さない。

さらに、言語切り替えスイッチャーにも改良を加えた。mn-trad（伝統モンゴル文字）投稿では、スイッチャーを「ロック」し、他の言語に切り替えられないようにした。これはdata-is-vertical="true"属性とJavaScriptのチェックで実装した。

この知見を「📙 伝統モンゴル文字Webレイアウト作成マニュアル」として文書化した。15年間の試行錯誤の結果が、再現可能な手法として確立された。