writing-mode: vertical-rl; とdisplay: flex; を併用するとsafariとfirefoxで崩れる問題の解決策

CSSの writing-mode: vertical-rl; はテキストを縦書きにする際に便利なプロパティですが、display: flex; と組み合わせると、SafariやFirefoxでレイアウトが崩れることがあります。特に、縦書きの部分の幅がゼロになる、要素が正しく表示されないなどの問題が発生します。この記事では、この問題の原因と複数の解決策を詳しく解説します。

問題の原因

writing-mode: vertical-rl; を display: flex; と併用すると、ブラウザによってはFlexboxのレイアウト計算が正常に行われず、要素の幅や位置が崩れることがあります。これは、Flexboxが要素のサイズや方向を計算する際、縦書きの設定が干渉し、レイアウトが意図しない形で崩れるためです。

解決策

方法1: 親要素に writing-mode: vertical-rl; を設定する

一つの簡単な方法として、縦書きにしたいエリア全体をラップする親要素に writing-mode: vertical-rl; を適用し、個別の要素には writing-mode を設定しない方法があります。これにより、Flexboxの影響を受ける部分と縦書きの部分を分離することができます。

<style>
  .wrapper {
    display: flex;
  }

  .vertical {
    writing-mode: vertical-rl;
  }

  .horizontal {
    writing-mode: horizontal-tb;
  }
</style>

<div class="wrapper">
  <div class="vertical">
    <p>縦書きのテキスト</p>
  </div>
  <div class="horizontal">
    <p>通常のテキスト</p>
  </div>
</div>

方法2: display: inline-flex; を使用する

display: flex; の代わりに display: inline-flex; を使用すると、SafariやFirefoxでの崩れを防ぐことができます。inline-flex はフレックスコンテナの機能を維持しつつ、要素の表示がインライン扱いになるため、縦書きとの相性が向上します。

<style>
  .container {
    display: inline-flex;
    writing-mode: vertical-rl;
    border: 1px solid #ccc;
  }

  .item {
    padding: 10px;
    background-color: #f0f0f0;
  }
</style>

<div class="container">
  <div class="item">縦書きアイテム1</div>
  <div class="item">縦書きアイテム2</div>
</div>

方法3: CSS Grid を利用する

Flexboxを使わずに、CSS Gridを使って縦書きのレイアウトを構築する方法もあります。CSS Gridは2次元のレイアウトに適しており、縦書きとの組み合わせでも安定した表示が可能です。

<style>
  .grid-container {
    display: grid;
    grid-auto-flow: column;
    writing-mode: vertical-rl;
    gap: 10px;
  }

  .grid-item {
    background-color: #e0e0e0;
    padding: 10px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">縦書きグリッド1</div>
  <div class="grid-item">縦書きグリッド2</div>
</div>

方法4: 特定の要素だけ writing-mode: horizontal-tb; で縦書きを解除する

親要素に writing-mode: vertical-rl; を設定した場合、その中でも縦書きにしたくない部分には、writing-mode: horizontal-tb; を適用して縦書きを解除します。これにより、柔軟に縦書きと横書きを使い分けることができます。

<style>
  .parent {
    writing-mode: vertical-rl;
    display: flex;
  }

  .child-horizontal {
    writing-mode: horizontal-tb;
  }
</style>

<div class="parent">
  <div>縦書き部分</div>
  <div class="child-horizontal">横書き部分</div>
</div>

まとめ

writing-mode: vertical-rl; と display: flex; の組み合わせによるSafariとFirefoxでの崩れは、CSSの設定によって回避できます。親要素に writing-mode を設定したり、inline-flex やCSS Gridを活用することで、縦書きレイアウトの問題を解消し、ブラウザ間の表示崩れを防ぐことができます。適切な対策を取り入れることで、より安定した縦書きデザインを実現しましょう。