Safariで縦書き（writing-mode: vertical-rl）の文章が横にずれる・画面の外へはみ出す原因は、position: absoluteで配置した横書きの箱の中に、縦書きの要素を入れていることです。Safariはこの組み合わせのとき箱の幅を正しく計算できず、箱が細くつぶれて文章だけが外へ押し出されます。外側の箱にもwriting-mode: vertical-rlを指定すれば、CSS1行で直ります。この記事では、実際に制作の現場で相談を受けた症状をもとに、原因の仕組み、直し方、効かない対処法、Windowsでの確認方法までを解説します。
Safariだけで起きる「縦書きのずれ」の症状
症状は「iPhoneで見ると、メインビジュアルの上に置いた縦書きのキャッチコピーが写真の外へはみ出す」というものです。ChromeやAndroidでは正しく表示されるため、Windowsで制作していると公開後まで気づかないことがよくあります。
実際に相談を受けたケースでは、次のような見え方になっていました。
- 写真の中に入っている文章が、最後の1列だけになっている
- 残りの文章は写真の右外にはみ出し、白い文字がクリーム色の背景に乗っているので見えない
- ページ全体が縮んで表示され、写真が左に寄って細く見える
- ページを横にスワイプできてしまう
ページが縮んで見えたり、横にスワイプできたりするのは、はみ出した文章の分だけページの横幅が広がっているからです。iPhoneのSafariは、広がったページ全体を画面に収めようとして表示を縮小します。白い文字が背景に溶けて見えないときは、何もないように見える場所を長押しして文字を選択してみてください。青く選択された範囲に、見えなくなった文章があります。
原因：横書きの絶対配置の箱に、縦書きの要素を入れている
原因は、横書きの箱の幅を「中身の縦書きの幅」に合わせて決めるときに、Safariがその幅をほぼ0として計算してしまうことです。問題になるのは、次のようなHTMLとCSSの組み合わせです。
<div class="hero">
<div class="hero__inner">
<p>静かな午後に<br>一杯の珈琲と<br>…</p>
</div>
</div>.hero {
position: relative;
}
.hero__inner {
position: absolute; /* 写真の右下に置く */
right: 0;
bottom: 0;
}
.hero__inner p {
writing-mode: vertical-rl; /* 縦書きは中のpだけ */
padding-right: 20px;
}position: absoluteの箱は、幅を指定しないと中身の幅に合わせて自動で縮みます。外側の.hero__innerは横書きのまま、中のpだけが縦書きなので、ブラウザは「横書きの箱の中にある縦書きの文章が、横に何px必要か」を計算しなければなりません。
Chromeはこの幅を正しく計算しますが、Safariは縦書きの文章の幅を含めずに計算します。当社でSafariと同じ描画エンジン（WebKit 26）を使い、幅390pxの画面で検証した結果は次のとおりです。
| 要素 | Chrome | Safari（WebKit） |
|---|---|---|
| 外側の箱（.hero__inner）の幅 | 164px | 20px（padding分だけ） |
| 縦書きの文章（p）の幅 | 164px | 164px |
| ページ全体の横幅 | 390px | 510px（120pxはみ出し） |
Safariでは外側の箱が20pxの細い箱になり、right: 0で右端に寄せられるのはこの細い箱だけです。文章自体は164pxの幅があるため、箱の左端から右へ向かってはみ出します。写真の中に最後の1列しか残らないのはこのためです。
直し方：外側の箱にもwriting-modeを指定する
外側の箱にも縦書きの指定を付けるだけで直ります。既存のCSSの後ろに、次の3行を追加してください。
.hero__inner {
writing-mode: vertical-rl;
}
外側も中身も縦書きにそろうと、ブラウザは「縦書きの箱の中の縦書きの文章」として素直に幅を計算できるようになります。先ほどと同じ条件で検証すると、Safariでも外側の箱が164pxになり、ページの横幅も390pxに収まりました。スマートフォン表示とPC表示のどちらにも効きます。
もう1つの直し方は、外側の箱をやめて、縦書きの要素そのものを絶対配置にする方法です。こちらも検証でSafariの崩れが直ることを確認しています。
.hero__inner p {
position: absolute;
right: 0;
bottom: 0;
writing-mode: vertical-rl;
}width: max-content では直らない
「中身の幅に合わせればいい」と考えて外側の箱にwidth: max-contentを指定しても、Safariでは直りません。検証では、指定前と同じく外側の箱は20pxのままでした。max-contentも「中身の幅」を計算して決める値なので、Safariが縦書きの幅を測り間違える問題をそのまま引き継いでしまいます。width: 200pxのように固定値を指定すれば見た目は直りますが、文字数やフォントサイズを変えるたびに調整が必要になるため、おすすめしません。
Windowsで制作していてもSafariの崩れを確認する方法
Safariの表示確認は、iPhoneの実機で見るのが最も確実です。実機が手元にないときや、原因を数値で確かめたいときは、次の方法が使えます。
- iPhoneの実機で表示し、横にスワイプできないか、白い文字の場所を長押しで選択して確認する
- Macがある場合は、iPhoneをケーブルでつなぎ、MacのSafariの「開発」メニューから実機のページを検証する
- Windowsだけの場合は、Playwrightという検証ツールに付属するWebKit（Safariと同じ描画エンジン）でページを開いて確認する
どの方法でも、ブラウザの開発者ツールのコンソールで次の1行を実行すると、ページがはみ出しているかを数値で確認できます。2つの数字が同じなら正常、左の数字が大きければどこかの要素が画面からはみ出しています。
console.log(document.documentElement.scrollWidth, window.innerWidth);制作の現場で決めておきたい縦書きのルール
縦書きは和の雰囲気や上品さを出しやすく、飲食店・旅館・和菓子店などのサイトでよく使われる表現です。一方で、ブラウザごとの差が出やすい部分でもあります。制作の現場では、次の3点をルールにしておくと同じ崩れを防げます。
- 縦書きの要素を絶対配置の箱に入れるときは、外側の箱にも
writing-modeを付ける - 「なぜか横にスクロールできる」「ページ全体が縮んで見える」ときは、はみ出している要素を先に探す
- 仕上げの確認は、Chromeだけでなく必ずiPhoneのSafariでも行う
よくある質問
Q. Chromeでは崩れないのに、なぜSafariだけ崩れるのですか？
A. 横書きの箱の中にある縦書きの要素の幅を計算する方法が、ブラウザごとに違うためです。ChromeとSafariは描画エンジンが異なり、Safari（WebKit）はこの組み合わせで縦書きの幅を含めずに箱の幅を決めてしまいます。
Q. iPhoneのChromeで見ても崩れますか？
A. 多くの場合、崩れます。iPhone版のChromeは、Safariと同じWebKitで表示しているのが一般的だからです。「iPhoneでは崩れて、AndroidのChromeでは崩れない」ときは、この問題を疑ってください。
Q. 絶対配置を使っていなくても起きますか？
A. 起きます。幅を中身に合わせて自動で決める箱なら、同じ問題が起きます。当社の検証では、floatで寄せた箱、display: inline-blockの箱、display: flexの子要素のどれでも、Safariでは外側の箱がpadding分の幅までつぶれました。これらの箱の中に縦書きの要素を入れるときも、外側の箱にwriting-modeを付けてください。
Q. 外側の箱を縦書きにすると、ほかのレイアウトに影響しますか？
A. 外側の箱の中身が縦書きの文章だけなら、影響はほとんどありません。箱の中に横書きの要素（ボタンやアイコンなど）も入れている場合は、その要素にwriting-mode: horizontal-tbを指定して横書きに戻してください。
まとめ
Safariで縦書きの文章が横にずれる・はみ出すのは、横書きの絶対配置の箱に縦書きの要素を入れているのが原因です。外側の箱にもwriting-mode: vertical-rlを指定すれば、CSS1行で直ります。width: max-contentでは直らない点と、Windowsで制作しているとChromeでは気づけない点に注意してください。THREE D PLUSでは、縦書きなどの表現を含めたWebサイトの制作・改修を行っています。表示崩れでお困りの際は、お気軽にご相談ください。
