読者です 読者をやめる 読者になる 読者になる

overprint

印刷とそれ以上の何かについて(少し電子書籍寄り)。気が向いただけでは更新されません。

縦書きテキストを美しくジャスティファイするために(iOS5編)

iOSがバージョンアップして、iOS5ではSafariiBooksでも縦書き表示に対応されました。すでにいろいろテストされている方も多いようで、今後が楽しみです。

…と人任せにするのもなんなので、以前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上でも試してみました。

  • Chrome 14.0.835.202の場合


こちらは以前と変わっていないようです。iOS版のWebkitは内部処理が違うのでしょうかね。iBooksではテストしていませんが、同じWebkitを使用しているとしたら同じ表示になるでしょうから、特に意識しなくても文字間が空きすぎずにジャスティファイできると思います。


そういやWindows環境のテストしてないな…。