はじめに

こんにちは。CMA制作部スタッフNyaayamaです。

先日、縦書きのテキストを中央寄せにするためFlexboxを使って配置したところ、Windows環境でのFirefoxのみ左寄せになってしまい、解決までに時間がかかりました。
インターネット上で同じような現象の記事がなかなか見つからず、解決までに少し時間がかかったので、同じ挙動で悩んでいるかたのために、対処法を記しておきます。

【環境】

Firefox 142.0.1
windows 11

【現象】

縦書きテキストを中央に配置しようとflexboxを使用してみたのですが、Winsdows環境でのFirefoxのみ左に寄せになり、ブラウザのサイズをリサイズすると中央に再配置されるという謎現象でした。
ページのリロード時には左寄せでテキストが配置され、瞬間的に中央に再配置されます。

私調べでは、読み込み時にフォントの高さやレンダリングがmacとwindowsのFireFoxで違うためにflexの計算がずれる、webフォントのレンダリングの影響、などが理由として挙げられるようですが、実際どうなんでしょうか⋯？

▼下記が挙動がおかしかった記述

HTML

<section>
  <img src="/assets/dest/img/qiita/mountain.jpg" alt="アルプスの画像" width="1080" height="682">
  <h1>この縦書きのテキストを<br>中央寄せにしたい</h1>
</section>

CSS

section{
    margin:  100px auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
}
section img{
    width: 70%;
    height: auto;
    display: block;
}
section h1{
    width: 30%;
    font-size: 30px;
    writing-mode: vertical-rl;
    font-feature-settings: initial;
    display: flex;
    align-items: center;
}

上記の書き方でMacのFirefoxでは縦書きが意図して中央寄せになりました。

【解決方法】

WindowsのFirefoxでは意図しない動きになったので、結局Flexboxを使わず、テキストをdivタグで囲む記述に修正しました。

HTML

<section>
  <img src="/assets/dest/img/qiita/mountain.jpg" alt="アルプスの画像" width="1080" height="682">
  <div class="_txtWrap"><h1>この縦書きのテキストを<br>中央寄せにしたい</h1></div>
</section>

CSS


section{
    margin:  100px auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
section img{
    width: 70%;
    height: auto;
    display: block;
}
section ._txtWrap{
    width: 30%;
    text-align: center;// センター寄せ
}
section ._txtWrap h1{
    margin-inline: auto;
    writing-mode: vertical-rl;
    font-size: 30px;
    display: inline-block; // inline-blockにする
    text-align: start;
}

こちらでFlexboxに振り回されることなく、Firefoxでの挙動も解消され、きれいに表示されました。

まとめ

今回はWindows環境のFirefoxで縦書きテキストの挙動の解決方法についてご紹介しました。
もし同じ挙動が見られる場合は、Flexbox以外の方法も試してみてください。