縦書きテキストを美しくジャスティファイするために(iOS5編)
iOSがバージョンアップして、iOS5ではSafariやiBooksでも縦書き表示に対応されました。すでにいろいろテストされている方も多いようで、今後が楽しみです。
…と人任せにするのもなんなので、以前Mac上のWebkitで調べた縦組み行長に関して、iOS5上のSafariで試してみました。
試してみたソースは前回と同様です。
《html部分(p要素以外は各自で補足してください)》
<p id="test">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや ゆ よらりるれろわゐ ゑをん</p>
《css部分》
p#test { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; padding: 0; background-color: #ffa; /* 範囲がわかるように背景色を指定 */ font-size: 1em; height: 10em; /*text-align: justify;*/ }
その結果は…
ちゃんと表示されてる! emだけじゃなくptもpxも試してみましたが、どれもheightをfont-sizeの10倍で指定すればちゃんと10文字分表示されます。
しばらく見ないうちにWebkit改善されたか? と思ってMac上でも試してみました。
- Webkit r97540の場合
- Chrome 14.0.835.202の場合
こちらは以前と変わっていないようです。iOS版のWebkitは内部処理が違うのでしょうかね。iBooksではテストしていませんが、同じWebkitを使用しているとしたら同じ表示になるでしょうから、特に意識しなくても文字間が空きすぎずにジャスティファイできると思います。
そういやWindows環境のテストしてないな…。