iBooks（iPad）で縦書きはまだ難しい【動画あり】

色々ePub作成に関して試しているhilock702です。

今回は、日本語で本を作る上で必須になるであろう「ルビ」と「縦書き」が
iBooks上でどこまでできるのか、試してみました。

※本項の「IE」とは、Internet Explorerの略称です。

※ePubに関する全体の目次はコチラ

■まずは動画をご覧あれ

ルビや縦書きがどういう風に見えるのか、動画にまとめてみました。
一発撮りなので、言葉とか聴きづらい部分もあるかと思いますがご容赦ください。。。

※ちなみに、この動画の前半（辞書やアンダーラインを使ってみる）はコチラです。

■ルビはHTML5準拠の書式でもiBooksでは表示されず

ここから、スクリーンキャプチャを合わせて動画の中身をご紹介。

ルビは、HTML5の標準タグとして策定される見込みです。（クリックで参考先へジャンプ）
そして、iPadはHTML5に対応していると言われている。
ということは、iBooksでもHTML5対応していて、ルビ表示できるんじゃ！？

試してみました。 
結果は・・・ルビ表示できませんでした。。。（右図参照）

同じファイルをIE5.5で表示したら出たので、HTMLファイルは問題無いと思います。
（IEでの表示結果：下図 左、HTMLソース：下図 右）

■縦書きはCSSを使えば表示可能。但し、ページ開きが逆

続いて、縦書きについて見てみましょう。

縦書きは以下の2つの方法で試しました。

• 「writing-mode」というIE独自のタグを使う（クリックで参考先にジャンプ）
• 縦書き用CSSを使う（クリックで参考先にジャンプ）

1. 「writing-mode」というIE独自のタグを使った場合

IEでの表示は右図の通りです。ちゃんと縦書きになっていますね。
ちなみに、Firefox（3.6）やSafari（4.0）では横書きになってしまいます。

同じファイルをePubにしてiBooksで見てみると、横書きのままでした。
まぁ、IEの独自拡張タグなので「そりゃ表示できないよなぁ」と納得です。

2. 縦書き用CSSを使う

「縦書きWebページプロジェクト」さんのCSSをお借りしました。

さっそく表示してみると、Firefox（3.6）やSafari（4.0）でも縦書き表示できています。

ePubにしてiBooksで見てみると、無事表示できました。

しかし、ページめくりが逆になる・・・。
縦書きの本を読むとき、本来はページの左側をめくって次のページに進むはずですが、
iBooksだと右側をめくらないといけません。
（右図が、次ページに進む際の操作の様子）

ユーザ視点で考え、これは「使えない」なぁと思います。

また、このCSSを使った場合、
下図のように、一行あたりの文字数がiBooksの縦書き幅を超えてしまうと、
表示がおかしくなってしまいました。
（文字が途中で切れる。切れた残りは、次のページに変な風に表示される）

結論から言えば、iBooksで縦書きはまだ使えないと思います。
JEPAが検討したePub日本語版の仕様検討がiBooksに実装されることを願うしかないですね。

今回使用したePubファイルが欲しい方はメールやコメント等でご連絡下さい。
（CSSの二次配布について確認しなきゃなんないので・・・。）