2017.09.26

お仕事

css講座縦書きにしてみよう

みなさんiOS11にアップデートされましたか？
画面の動画が撮れるとか、デフォルトでQRコードが読み取れるとか、気になるところはあるけれど、様子をうかがっています。うるしです。

アップデートしていないので、iPhoneの話は置いといて、今日はcssで縦書きにする方法です。
私も最近まで、縦書きは環境によっては無理だと思っていて、やったことがありませんでした。
最近縦書きにする機会があったので、意外と出来るということ知った次第です。

cssで縦書きにしてみよう

では、まず縦書きにする文章を用意しましょう。

<p>かねた一郎さま　9月19日<br>
 あなたは、ごきげんよろしいほで、けっこです。<br>
あした、めんどなさいばんしますから、おいで んなさい。<br>
とびどぐもたないでくなさい。</p>

css 基本の形はこれです

p { writing-mode: vertical-rl; }

IE用、safari用も追加しましょう

p {
    -webkit-writing-mode: vertical-rl; /*safari*/
    -ms-writing-mode: tb-rl; /*IE*/
    writing-mode: vertical-rl;
}

このままだと、罫線で囲ってみたりするとわかるのですが、IEとedgeでは縦書き要素の高さがブラウザの高さになってしまいます。
そんな時はdisplay: inline-block;にしてみましょう。

p {
    -webkit-writing-mode: vertical-rl; /*safari*/
    -ms-writing-mode: tb-rl; /*IE*/
    writing-mode: vertical-rl;
    display: inline-block;
}

出来ました。

かねた一郎さま　9月19日
あなたは、ごきげんよろしいほで、けっこです。
あした、めんどなさいばんしますから、おいでんなさい。
とびどぐもたないでくなさい。

さて、文章の中に日付がありますね。数字が横向きになっていると思います。
これを縦中横にしてみましょう。

<span class="yoko">9</span>月<span class="yoko">19</span>日

css 基本の形

.yoko {
    text-combine-upright: all;
}

これにもIE用、safari用を追加しましょう

.yoko {
    -webkit-text-combine: horizontal; /*safari*/
    -ms-text-combine-horizontal: all; /*IE*/
    text-combine-upright: all;
}

できました。

縦中横は他にも方法があるようなので調べてみてください。

縦にしたら、横に戻したい時もある。というわけで横書きバージョンはこちら

p {
    -webkit-writing-mode: horizontal-tb; /*safari*/
    -ms-writing-mode: lr-tb; /*IE*/
    writing-mode: horizontal-tb;
}

難しいと思って避けてきたそこのあなた、縦書きに挑戦してみては？