SVGを利用してEPUBで縦組みを実現する
現状の電子書籍のよく指摘される問題点に、「縦組みができない」「ルビが振れない」点があります。現在のEPUBの仕様では縦書きやルビ表示に関しての取り決めが存在しないため、縦組みやルビをEPUBで扱いたい場合は工夫が必要です。そこで最後に、SVGを使って縦組みのEPUBデータを作ってみましょう。
手作業で縦組みのSVGを作成するのは面倒ですので、今回はIllustrator CS3～CS5とJavaScriptを使って自動的に生成します（Illustrator CS5は座標系が異なるので、最後に位置を調整する必要があります）。元になるテキストには、青空文庫にある「蜘蛛の糸」（芥川龍之介）を使用します。
- ・青空文庫「蜘蛛の糸 芥川龍之介」
- http://www.aozora.gr.jp/cards/000879/files/92_14545.html
蜘蛛の糸の冒頭部分だけを今回は使用する
テキストを用意したら、Illustratorを起動して600×800ピクセルの新規ドキュメントを作成します。
600×800ピクセルサイズのドキュメントを作成する
続いて、以下のスクリプトをテキストエディターで入力し、拡張子を.jsxとして保存します。Illustratorからスクリプトを実行すると、自動的に縦組みでテキストがレイアウトされます。このスクリプトは縦書きで1ページ分しか処理できませんので、より複雑な処理が必要な場合は筆者のサイトの情報を参照してください。
- ・Adobe Illustrator CS4自動化作戦
- http://www.openspc2.org/book/IllustratorCS4/
■縦書きスクリプト
// 縦書き用レイアウトスクリプト
(function(){
var startX = 520; // 520pt
var startY = 800; // 800px;
var stepX = 40; // 1文字のサイズ
var stepY = 28 ; // 1文字のサイズ
var fsize = 22; // 文字サイズ
var maxW = 14; // 横14文字まで
var maxH = 28; // 縦20文字まで
var fileObj = File.openDialog("テキストファイルを選択して下さい", "*.txt", false);
if (!fileObj) return; // キャンセルされたら何もしない
var flag = fileObj.open("r");
if (!flag){
alert("ファイルが開けませんでした");
return;
}
var x = startX;
var y = startY;
var countY = 0;
var countX = 0;
while(!fileObj.eof){
var c = fileObj.readch(); // 1文字だけ読み込む
var n = c.charCodeAt(0);
if ((n == 10) || (n == 13)){
y = startY;
countY = 0;
x = x - stepX;
countX++;
if (countX >= maxW) break; // 最大文字数を超えたら終了
}
if(n < 32) continue;
var txtObj = activeDocument.textFrames.add();
txtObj.contents = c;
txtObj.paragraphs[0].size = fsize; // 文字サイズを設定
txtObj.top = y;
txtObj.left = x;
y = y - stepY;
countY++;
if (countY < maxH) continue;
y = startY;
countY = 0;
x = x - stepX;
countX++;
if (countX >= maxW) break; // 最大文字数を超えたら終了
}
})();
ファイルメニューから「スクリプト」＞「その他...」を選択する
縦書き用のスクリプトファイルを選択する
元のテキストファイルを選択する
自動的に縦組みでレイアウトされる
位置などを調整して保存する
Illustratorでの位置の調整が終わったらSVG形式で保存し、エディターで開いて<svg>～</svg>の範囲をコピーします。コピーしたSVGをSigilでXHTML内にペーストすれば準備完了です。
SigilにSVGデータをペーストする。SVGのテキストはSigil上で修正できる
完成したEPUBデータをiPadのiBooksなどで確認します。SVGに対応しているiBooksでは期待通り縦組みで表示され、SVGに対応していないStanzaでは横組みで表示されます。
iBooksでの表示。おおよそ期待通りに表示されている。句読点は調整すれば、よりきれいに表示できる
Stanzaでの表示。インラインSVGに対応していないため横組みになってしまう。改行も無視されている
SVGでは、文字の表示位置やサイズを指定できるのでルビ（ふりがな）も表示できます。Illustratorを使ってルビを作成し、SVG形式で書き出して、Sigilにコピー＆ペーストします。テキスト情報なのでいったんコピー＆ペーストしてしまえば、後はSigil上で編集できます。
Illustratorでルビの位置とサイズを設定しておく
テキストなのでSigilで読み込んで編集できる
SigilでEPUB形式として保存したらiPadで確認します。iBooksではほぼ期待通りに表示されますが、iPadを横向けにして見開き表示に切り替えると一部の文字が表示されません。横向けを考慮するなら、縦組みの開始位置を変更する必要があります。また、SVGで組んだテキストはリーダー（iBooks）側で文字サイズが変更できません。
iBooksでなくStanzaやBookSelfLTなどSVG未対応のビューワーで表示すると横組みになり、ルビは本文に混じってしまいます。SVGによる縦組みやルビは、限定された環境でのみ利用できるものと考えた方がよいでしょう。
iBooksでは縦書きでルビも表示された
iPadを横にすると見開きになる。すると、一部表示されないところが出てしまう
StanzaとBookSelfLTでの表示。ルビの文字が文章中に紛れ込んでしまう
◆
次回は、動画を含む複雑なレイアウトの電子書籍データを作成します。
CSSやJavaScriptで縦組みを表現する
縦組みはSVGのほかに以下で配布されているCSSを使っても実現できます。
- ・縦書きWebページプロジェクト
- http://freefielder.jp/tate/
ただし、リーダー側で文字サイズを変更すると表示が崩れます。また、iBooksでは本の綴じ方向を指定できないのでページをめくる方向が逆になり、直感的ではありません（i文庫HDでは綴じ方向を指定できます）。
このほかにも、iBooks限定であればJavaScriptを使ってCSSを生成する方法もあります。
- ・びば！もばいる！（＋サーバ達）【ルビにCSS、縦書きにJavaScriptでやってみよう（ePub+iBooksでJavaScriptが動いた！）】
- http://hilock702.blogspot.com/2010/06/cssjavascriptibooksjavascript.html
