縦書き

2016-02-06

こんにちは、氷翠です。

今日はWEB上のデザインに関して、縦書きに関することです。

もちろん、もともとはアルファベットの集合のテキストファイルなので、縦書きなんて概念自体がなかったものですが、今ではCSS3の力によって、縦書き、読み方も右から左へなんてことができるようになってきています。
スタイルシートのプロパティで昨日の夜できるかどうかの実験。
もちろん、それなりの情報をしいれてきてから。

<p>あいうえおかきくけこ</p>
<p>あいうえお<span class="tcy">10</span>年かきくけこ</p>
<p>あいうえおかきくけこ</p>
<p>あいうえお１２123かきくけこ</p>
<p>あいうえおａｂｃｅｆｇかasきくけこ</p>

単純な文字列です。
もちろん、これは画面上では横書きになって表示されます。

で、ここでスタイルシートを設定します。

p {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

こんなの。
意外と単純なものです。プレフィックスは、safari系、IE系のものです。
「vertical」…縦、「rl」…右から左に。
そんな意味かと思います。
で、これをこのまま表示させると…
左の隅に縦に１行で表示されました。
それではいかんとおもい、DIVボックスで囲んで、右にfloatをかける。右寄せにしてあげれば、問題はないはず。
さらに、

div {
    float:right;
    padding:10px;
    border:1px solid #000;
    width:500px;
    height:200px;
}
p {
    float:right;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

こんな感じで、DIVボックスに枠線をつけたてあげるとわかりやすいかなと思った。
あとは、Pタグを右寄せで詰めていくと、右から左にいくので、こんな値に。
こうすれば、見やすくなりました。

そして、現在、気になるのは、ぶら下がりも気になるところだけど、今はとにかく「縦中横」！
もともとDTPも経験している氷翠は気になってしょうがない。

ありました。

ということで、上記のHTMLの中に、SPANタグがあったと思います。二けたの数字を囲んでいます。

このクラスに対して縦中横の指定をします。

.tcy {
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: digits 2;
    text-combine-upright: horizontal;
}

今回もこれだけ。
大したことしてないけど、これで縦中横ができます。

ただ、英語のサイトでの解説によると、この縦中横が実装されているのは、ほとんどのブラウザで実装されています。ただ、Firefoxは「Not Suported」ってなっていました。つまりサポートしていないという…一番使うブラウザなのに！

Chromeが一番きれいに表示してくれます。
safariも問題なし。
IEは11からサポートしているみたい。
なので、Firefoxももう少ししたら正式に実装されるんじゃないかと。

日本人に優しいWEBデザインも今後、増えていくんじゃないでしょうか。

縦書き好きな氷翠も楽しみです。