2020年04月01日

縦書き(writing-mode: vertical-rl;)を使用した時の注意点

お世話になっております。SeekNextの佐藤です。

今回は直近の案件で生じた縦書き(writing-mode: vertical-rl;)を使用した際におきたバグについて書いていきます。

以下のようなグローバルメニューを制作しました。(細かい部分は省略しています。)

<nav>
  <ul>
    <li><a href="#">お知らせ</a></li>
    <li><a href="#">施術メニュー</a></li>
    <li><a href="#" class="">縁について</a></li>
    <li><a href="#/" class="current">ホーム</a></li>
  </ul>
</nav>
ul {
  display: flex;
}
li {
  margin-right: 20px;
}
a {
  writing-mode: vertical-rl;
  display: inline-block;
  padding: 15px 3px;
  letter-spacing: 5px;
}
縦書きを用いたグローバルメニュー

その際にchromで見ると上記のような表示になり、問題なかったのですが、safariで見ると以下のような見た目になってしまいました。

縦書きを用いたグローバルメニュー(safariでの見た目)

左右のmarginが効いておらず、以下のような見た目になっていました。原因は何なのかとsafariの検証ツールを用いて要素を検証しました。

liの要素を検証ツールで確認した結果

上記の画像を見てもわかるように、liのwidthが正常に機能しておらず、marginが効いていませんでした。よってliにwidthを設定してあげることで解決しました。(今回はmin-widthを設定しました。)

li {
  margin-right: 20px;
  // 追加
  min-width: 40px;
}

IEでのバグも難敵ですが、意外とsafariも結構こんなバグが生じるという感覚が最近は感じています。ただ、これも経験だと自分に言い聞かせて日々仕事に取り組んでいます!

以上、「縦書き(writing-mode: vertical-rl;)を使用した時の注意点」でしたが、参考になれば幸いです。