ePubで縦書きを実現しているページがあったので、私もチャレンジしてみました。
以下のページを参考にしました。
びば！もばいる！（＋サーバ達）- ルビにCSS、縦書きにJavaScriptでやってみよう（ePub+iBooksでJavaScriptが動いた！）
【実験】「涅槃」を使って、EPUBファイルを縦組みで表示できるか？ ≪ ECollab Ltd.
結果は、1ページ目しか表示されず、一部のルビもずれてしまいました。
・画像1にあるように、行の最初に現れるルビは正しい位置なのですが、
行内の2番目に現れるルビは、下にずれてしまっています。
・ページ末尾の”髯貯えぬ丸顔”のあとに”を傾けて「描けども、描けども”
と続くはずですが、ここで表示が終わっています。
画面下のページ番号も、2までしかありません。
ファイルを、 http://bit.ly/bSo2la にアップロードしてみました。
ベースにしたのは、青空文庫のファイルを「青空文庫 (XHTML) -> ePub変換 Bookmarklet」
で、明朝体ルビありで変換したファイルです。
夏目漱石の「一夜」を使いました。http://www.aozora.gr.jp/cards/000148/card1086.html
縦書きのキモは、縦書き文庫さんの「涅槃」というJavaScriptです。
https://code.google.com/p/nehan/にあります。
縦書きにしたePubファイル内の構成は以下の通りです。
~/mimetype
~/META-INF/container.xml
~/1086_14935.opf
~/1086_14935.ncx
~/OEBPS/1086_14935.html
~/OEBPS/default.css
~/OEBPS/css/kentenbosen/after/sen/*.png (縦書き用記号のpng画像ファイル)
~/OEBPS/css/kentenbosen/after/ten/*.png (縦書き用記号のpng画像ファイル)
~/OEBPS/images/*.png (表示できない文字のpng画像ファイル)
~/OEBPS/img/*.gif (涅槃用のgif画像ファイル)(今回追加)
~/OEBPS/js/nehan.js (涅槃のJavaScript)(今回追加)
~/OEBPS/js/nehan-min.js (涅槃のJavaScript)(今回追加)
~/OEBPS/js/plugins.js (涅槃のJavaScript)(今回追加)
手順は以下の通りです。
(1)*.epubファイルの拡張子をzipにして展開
(2)涅槃のファイルを上記のように配置
(3)~/1086_14935.opf に、今回追加した画像ファイルとJavaScriptを追記。
…<item id=”dash.gif” href=”OEBPS/img/dash.gif” media-type=”image/gif” />…<item id=”nehan.js” href=”OEBPS/js/nehan.js” media-type=”text/javascript” />…
(4)~/OEBBPS/1086_14935.html を編集。
</head> の直前に、以下のコードを追加。
・1つめのスクリプトのnehan.js の位置を、htmlファイルから見た相対パスに変更。
・2つめのスクリプトのcharImgRoot を、htmlファイルから見た相対パスに変更。
・フォント名に日本語が入っていると何も表示されなかったので、sans-serifに変更
<script charset=”utf-8″ type=”text/javascript”
src=”./js/nehan.js”></script>
<script type=”text/javascript”>
window.onload = function(){
Nehan.LayoutMapper.start(“div”, {
charImgRoot:”./img”,
fontFamily:”sans-serif”,
filter:”direction”,
noBR: false,
onSeek: function(groupName, seekPercent){ },
onComplete: function(groupName){ },
onCompleteAll: function(){ }
});
};
</script>
(5)<body>タグの直後から、以下のdivタグでくくる。
<div class=”lp-vertical lp-width-450 lp-height-730 lp-font-size-16″>
(6)iTunes経由でiPadに転送し、iBooksで開く。
びば！もばいる！さんのページでは複数ページ表示されているので、
何かファイルか設定が抜けているような気がしています。
また時間を見つけて再チャレンジしてみようと思います。
6/29追記：
びば！もばいる！ の hilock702 さんが、ePubs.jp で
縦書きePubファイルを公開してくださいました。
http://bit.ly/bOxD6N
課題も多いですが、縦で読めるのはいわゆる「衝撃」です。
EPUBにJavaScriptを組み込む件ですが、現段階では、ビューアによって挙動がかなり異なるように思います。そして、同じiBooksでも、iPadとiPhoneとで違うような……。
例えば、Liza Dalyさんが、JavaScriptを組み込んだEPUBを作成し、iPad版のiBooksで表示したところ、吹き出しを表示させることに成功しています。
http://blog.threepress.org/2010/06/24/javascript-and-interactivity-in-ibooks/
このWebページ内にサンプルのEPUBファイルがあったので、それをダウンロードしてiPhone版のiBooksに取り込み、表示させてみたところ、JavaScriptの組み込まれた部分が全然動作しませんでした。同じWebKitのはずなのに、なぜ挙動が異なるのか、よくわかりませんでした（JavaScriptの処理エンジンの違い？）。
そういえば、もうご存じかもしれませんが、iPhone版iBooksは、ルビ表示がダメです。
具体的には、ePub.jpさんの萩原朔太郎著『詩の原理』をiPhone版iBooksに読み込ませたところ、表示に時間がかかるうえ、ルビもずれまくっていました。
http://twitpic.com/1zpivf
iPhone版iBooksはいまいちですね。
さらなる情報ありがとうございます！
規格としてはJavaScriptはサポートされていないようなので、
「せめてメジャーな2,3のビューアで表示されれば・・・」と思ったのですが、
ビューア間でも違うようですね。
ルビを元の漢字の真上に表示するのは、JavaScriptで位置決めする場合は
本文と文字のサイズをJavaScript側で調べるのが困難なのかと考えています。
ルビや縦書きを規格に取り込んでもらって、
ビューアでも正式に実装してもらいたいものです(^_^;)