縦文字を使った場合の注意点(Safari)
備忘録です。
Chromeなどは、縦書き文字を使う際、外部要素にwidth:auto;でも問題なく枠内に文字が収まるが、Safariだと枠内に収まらない事象を発見。
この場合には、明示的にwidthを指定しなければならないという事象に遭遇しました。
例)トップページなどで良く使うカルーセル処理内でのコンセプト(キャプション)表示の例
■HTML文
1 2 3 4 5 6 | <div class="carousel-caption"> <div class="catch"> <p>革新的なデザインと技術で、ビジネスを次のレベルへ</p> <p>信頼のパートナーとして、成功を支えるウェブソリューション</p> </div> </div> |
■CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .carousel-caption{ display:block; width:auto; position:absolute; top:8%; right:10%; left:auto; } .carousel-caption .catch{ writing-mode: vertical-rl; font-weight:900; } .carousel-caption .catch p{ display:table; font-family: var(--font-noto); color:var(--font-color); white-space: nowrap; text-shadow: 2px 0 3px rgba(255 255 255), 0 2px 3px rgba(255 255 255), 2px 2px 3px rgba(255 255 255), -2px 0 3px rgba(255 255 255), -2px 2px 3px rgba(255 255 255), 0 -2px 3px rgba(255 255 255), -2px -2px 3px rgba(255 255 255), 2px -2px 3px rgba(255 255 255); } |
上記の通り、width:auto;で、Chrome、Edgeは問題なく表示されるものの、Safariにおいて、該当の文言が右側によってしまい画面内に収まらない事象が発生。
■対処方法
最終的には、Chromeのシミュレータ画面でwidthを取得し、その幅を指定して修正対応。
1 2 3 4 | .carousel-caption{ width:60px; ： } |
すでに改修されているかもしれませんが、備忘録も兼ねて掲載。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
