こんにちは。Web担当の西野です。
先日、文字の縦書きの実装をしました。縦書き実装は何度かやったことがあるので余裕！と思っていたら、Safariで予期せぬ表示になってしまいました。（Google Chrome、Microsoft Edge、Firefoxでは問題ありませんでした。）
根本的な解決はできていないのですが、備忘録として残しておきます。
まずこちらをご覧ください。左に画像のブロック、右に縦書きテキストと横書きテキストのブロックがあり、これらをflexboxで横並びにしています。そして、縦書きにしたいブロックのみにwriting-mode: vertical-rl;を設定しました。
See the Pen Vertical Writing-01 by Nishino Shiho (@jagzomcc_Nishino) on CodePen.
Google Chromeだと問題ありませんが、Safariだと明らかにおかしな表示になっています。
まず、こちらの記事（Webで縦書きコンテンツ〜Safariには気を付けろ！）にあった解決策を実施しました。
縦書きにしたいブロックの一段階上の親要素にwriting-mode: vertical-rl;を設定しました。
See the Pen Vertical Writing-02 by Nishino Shiho (@jagzomcc_Nishino) on CodePen.
おっ！？いい感じになったか！？…と思いきや、横書きテキストのブロックも縦書きになってしまっています。当たり前ですが。
親要素にvertical-rl;を設定しているので、縦書きになってしまった横書きテキストはどう足掻いても横書きにできませんでした。この件について何かよい方法があればぜひ教えていただきたいです…
最終的にflexboxでのレイアウトを諦めました。positionで無理やりレイアウトを実現しました。これならSafariでも問題なく表示されています。
See the Pen Vertical Writing-03 by Nishino Shiho (@jagzomcc_Nishino) on CodePen.
ブロック内に、縦書きテキストと横書きテキストが混在していなければ、こちらの記事（Webで縦書きコンテンツ〜Safariには気を付けろ！）の方法で解決できるかと思います。
当初は縦書きブロックの親要素には横幅サイズを指定していませんでしたが、サイズを指定すると、意図した表示になりました。
今回は縦書き要素にwidth:50%;を指定しています。
See the Pen Vertical Writing-04 by Nishino Shiho (@jagzomcc_Nishino) on CodePen.
特殊なケースなので、あまりこの事象に遭遇する人はいないかもしれません。
最後まで読んでくださってありがとうございました！
こんにちは。Web担当の西野です。
先日、文字の縦書きの実装をしました。
縦書き実装は何度かやったことがあるので余裕！と思っていたら、
Safariで予期せぬ表示になってしまいました。
（Google Chrome、Microsoft Edge、Firefoxでは問題ありませんでした。）
根本的な解決はできていないのですが、備忘録として残しておきます。
縦書きレイアウトを組んでみた
まずこちらをご覧ください。
左に画像のブロック、右に縦書きテキストと横書きテキストのブロックがあり、
これらをflexboxで横並びにしています。
そして、縦書きにしたいブロックのみにwriting-mode: vertical-rl;を設定しました。
See the Pen Vertical Writing-01 by Nishino Shiho (@jagzomcc_Nishino) on CodePen.
Google Chromeだと問題ありませんが、Safariだと明らかにおかしな表示になっています。
解決策を探す
まず、こちらの記事（Webで縦書きコンテンツ〜Safariには気を付けろ！）にあった解決策を実施しました。
縦書きにしたいブロックの一段階上の親要素にwriting-mode: vertical-rl;を設定しました。
See the Pen Vertical Writing-02 by Nishino Shiho (@jagzomcc_Nishino) on CodePen.
おっ！？いい感じになったか！？…と思いきや、
横書きテキストのブロックも縦書きになってしまっています。当たり前ですが。
親要素にvertical-rl;を設定しているので、縦書きになってしまった横書きテキストはどう足掻いても横書きにできませんでした。
この件について何かよい方法があればぜひ教えていただきたいです…
最終的に無理やり解決
最終的にflexboxでのレイアウトを諦めました。
positionで無理やりレイアウトを実現しました。
これならSafariでも問題なく表示されています。
See the Pen Vertical Writing-03 by Nishino Shiho (@jagzomcc_Nishino) on CodePen.
ブロック内に、縦書きテキストと横書きテキストが混在していなければ、
こちらの記事（Webで縦書きコンテンツ〜Safariには気を付けろ！）の方法で解決できるかと思います。
縦書きブロックの親要素に横幅サイズを指定する方法でも解決できました
当初は縦書きブロックの親要素には横幅サイズを指定していませんでしたが、
サイズを指定すると、意図した表示になりました。
今回は縦書き要素にwidth:50%;を指定しています。
See the Pen Vertical Writing-04 by Nishino Shiho (@jagzomcc_Nishino) on CodePen.
終わりに
特殊なケースなので、あまりこの事象に遭遇する人はいないかもしれません。
最後まで読んでくださってありがとうございました！