イイダリョウのブログ。縦書きCSSやってみた(writing-mode、text-orientation、text-combine-upright)2019-07-17縦書きCSSやってみた(writing-mode、text-orientation、text-combine-upright)CSS前からやってみたかった縦書きCSS。業務でやる機会もまだなさそうなので概要だけでも体験したく触ってみた。縦書き(writing-mode)、文字回転(text-orientation)、縦中横(text-combine-upright)の3つのプロパティがあります。それではいきましょう!縦書き(writing-mode)まずはベースとなるHTMLコードをば。松島や</p></section>こんなんでましった。CodePen.ま、普通に書くと横書きですわな。Webは西洋で生まれたので左から右の横書きの世界(アラブ圏では右から左の横書きだけども)。俳句は縦書きで詠みたいもの。vertical-rl;}writing-modeというプロパティを使う。縦書きの値はvertical-rlでっす。コンテンツは左から右へ水平に、上から下へ垂直方向に流れます。次の水平な行は、前の行の下に配置されます。コンテンツは上から下へ垂直に、右から左へ水平方向に流れます。次の垂直な行は、前の行の左に配置されます。コンテンツは上から下へ垂直に、左から右へ水平方向に流れます。次の垂直な行は、前の行の右に配置されます。コンテンツは上から下へ垂直に、また垂直方向に並べられる書体を含むすべてのグリフを右へ横倒しにします。コンテンツは上から下へ垂直に、また垂直方向に並べられる書体を含むすべてのグリフを左へ横倒しにします。UseでみるにIEだけ別の書式になるみたい。※参考:https://caniuse.com/#search=writing-modeななんと、調べるとこんなん。*/}ベンプレ(-ms-)だけならまだしも値(tb-rl)までも違うんかい!ハッキリ思った。(ベンプレだけなら書いてやろうかという気もしてたが)文字回転(text-orientation)次の例。「松島」を「TOKYO」にしてみた。CodePen.見ての通り、デフォでは半角英数は90度回転する。ローマ字の回転をなくす。CodePen.CSSコード。text-orientationプロパティを設定する。upright;}値はuprightです。90°回転させ、縦書き文字のグリフは自然にレイアウトされます。書かれているものとみなすので注意してください。指定されているものとします。90°回転したようにレイアウトします。場合は左へ回転します。※参考:https://caniuse.com/#search=text-orientationうーむ、残念ながらIEだけでなくEdgeも非対応。Safariはベンプレ-webkit-必要。値は一緒だから書いてもいいかな...。縦中横(text-combine-upright)さて、今度は数字を入れてみる。「TOKYO」を「15夜(じゅうごや)」にしてみる。え?漢字で書けって?仰る通りなのだが実験なので、メンゴ。15夜や</p></section>CSSはTOKYOと同じtext-orientationを設定しているので90度回転はしない。CodePen.しかし、2桁だと「じゅうごや」ではなく「いちごや」とも読めちゃう。なんど、text-combine-uprightを使うと日本語縦書き組版独特の書式「縦中横(たてちゅうよこ)」がCSSでも再現できる!inDesignなどのDTPソフトではお馴染みな表現。意味・解説|編集・組版|デザイン・編集・製版工程|DTP・印刷用語集やってみた。CodePen.text-combine-uprightは全体にかけてしまうと全体が横書きに回転してしまう。縦中横をかけたい場所だけをspanタグで囲う。tatecyuを命名した。何も特別な処理をしません。タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。範囲外の整数値は不正です。MDNただし、Safariはベンプレ(-webkit-)必要でしかも値(horizontal)も異なる。ちなみにEdgeは標準で対応している模様。uaeでtext-combine-uprightを調べるとなぜか0件。(わかりにくい...)※参考:https://caniuse.com/#search=text-combine-uprightおまけ:ルビ縦書き専用の書き方ではないけど、縦書き系の情報でよく併記されているので、やってみた。ルビとは「ふりがな」のこと。これもinDesigなどの日本語組版ではお馴染みな表現だがHTMLが対応してくれているのは嬉しい。class="tatecyu">15</span><rt>じゅうご</rt></ruby>夜や</p></section>ルビを付けたい箇所をrubyで囲ってrtでルビを書く。最後に縦書きCSS用の3つのプロパティを体験した感想。ベンプレをつけるのはギリギリ我慢できても値まで違うのは耐えられないですね。いうことで縦書き表現writing-modeでIEをまず切りすてる覚悟を決めたのですが、縦中横でSafariの値も違うとは、覚えられねい!基本的に縦書きCSSはデフォルトの半角英数90度回転をベースを前提とし、できるだけ半角文字を使わない原稿作成を心がければwriting-mode一つで完結するかもしれない(それであればIEのベンプレ対策もしてあげてもいいかなw)。早くベンプレなしで全ブラウザ(IE以外)が対応してくれることを祈ります。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-08-31【CSS】scroll-snapでスナップ(引っかかり)のあるスクロールがまったくカン・タン・だ!スナップ(ひっかかり)のあるスクロールをするのに昔はJSを利...2019-08-24【CSS】form用のリセット設定(ノーマライズCSS、リセットCSSとの比較)フォームのCSSって結構手間がかかったり、効いてくれなかったり...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。