ルビにCSS、縦書きにJavaScriptでやってみよう（ePub+iBooksでJavaScriptが動いた！）

前回はルビと縦書きに結構惨敗しちゃったわけですが、
他の方法が無いか調べたり、アドバイスをもらったりしたので
再チャレンジしてみました。

少し前進し、ちょっと希望が見えてきた感じです。

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

■まずは動画をご覧あれ

いつも通りですが、動画を用意したのでコチラをご覧ください。
大体どういう風に見えるかが伝わるかと思います。

結論から言えば、

  • ルビはCSSを使えば表示可能
    但し、現状では1ページ目だけしか表示できない
  • 縦書きは、「涅槃（詳細は後述）」というJavaScriptを使えば
    まぁまぁきれいに表示可能
    ページ開きが逆なことは別途対応が必要
  • 何より、JavaScriptが動いた！！

今回の一番の収穫は、JavaScriptが動いたことですね。

■ルビを表示するCSSはコレ！

ルビ表示用CSSに関して、こちらのページを参考にしました

1. HTMLにルビ表記を記入する

ルビ表記は、「漢字」に対して「かんじ」というルビを振りたい場合、
「<ruby>漢字<rp>（</rp><rt>かんじ<rt><rp>）</rp></ruby>」と書きます
※必ずタグは小文字で書きましょう。
RubySource

こうしておくと、下記のように表示されます。

  • ルビ対応の場合：rubySuccess
  • ルビ非対応の場合：rubyFailed

細かい意味は下記の通り

HTMLタグ 使い方
ruby ルビを振りたい漢字からルビまでをコレで囲む
rp ルビ対応している場合、表示しない文字をコレで囲む
rt 振りたいルビの内容をコレで囲む

この書き方はHTML5に準拠しておりますので、将来も安心です。

2. CSSに下記を追記する

続いて、CSSに以下を追加しましょう。
これで、ルビ表記に対応していないブラウザ（例えばiBooks）でも
ルビ表示できるようになります。

body{
    line-height: 2em;/*A:iPadでルビをきれいに表示する行間*/
}

ruby {
    position: relative;/*B:現状では消しておくほうが良い*/
    top: 0;
    bottom: 0;
    padding: 0;
    line-height: 1em;
    }

rp {
    display: none;
    }

rt {
    position: absolute;/*B:現状では消しておくほうが良い*/
    top: -1em;
    left: 0;
    font-size: 50%;
    line-height: 1.2em;
    white-space: nowrap;
    text-indent: 0;
    }

a:link rt,

a:visited rt {
    text-decoration: none;
}

3. 表示してみる

ePubにコンパイルして、表示してみましょう。
コンパイルした後は、CSSや画像ファイルを忘れないように。

Firefoxで表示するも良し、iBooksで表示するも良し、
見たいもので表示してください。

ちなみに、CSSのコードの中の”B”の部分を削除せずに表示すると、
ルビが表示されます（下図 左ページ）が、
2ページ目以降はルビを振った文字が空白になってしまいます（下図 右ページ）。

rubyCSS-Success2page

rubyCSStypeB今はルビを表示する方法がみつからないので、Bの部分を消しておきましょう。
その場合、表示される結果は右図のようになります。



■涅槃を使って縦書き表示しよう

さて、今後は縦書きにチャレンジです。
※「涅槃」は縦書き文庫さんのJavaScriptです

1. 涅槃のダウンロードサイトから、ファイルセットをダウンロードする

https://code.google.com/p/nehan/downloads/listから、
「nehan-1.0.5.3-rev2.zip」をダウンロードします。

2. ダウンロードしたファイルを下記のようにコピーする

HTMLファイルと同じフォルダにimgフォルダをいれ、
さらに同じフォルダに「js」というフォルダをつくり、ここに「.js」の全ファイルを入れます。

nehan-folder

3. 縦書きしたいHTMLファイルの</head>の前に以下を書き加える

赤字箇所がミソです。

<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",
      filter:"direction",
      noBR: false,
      onSeek: function(groupName, seekPercent){ },
      onComplete: function(groupName){ },
      onCompleteAll: function(){ }
    });
  };
</script>

</head>…
4. <body>の中の縦書きしたい部分を指定する

縦書きしたい最初の部分に、

<div class="lp-vertical lp-width-450 lp-height-730 lp-font-size-16">

を入れ、
最後の部分に

</div>

を入れましょう。

なお、上記は縦置きにしたiBooks用に最適化した横幅・高さになっています。
これで、きれいに縦書き表示できるはずです。

▼涅槃で縦書き表示した場合の注意点

nehan-littleStrange但し、縦書きした本を再度開くと、
右図のように「次ページの文字の一部」が表示されます（右下部）。

フォントの大きさを変えれば消えるのですが、
動きがおかしくなるので使う際には注意が必要です。


■サンプルファイルのダウンロード先（6/28追記）

ePubs.jpに、ここで使用したePubファイルを置いておきました。
気になる方は使ってみてください。
http://epubs.jp/watch_video.php?v=OOR14BMSOHNG

ラベル:

6 件のコメント:

  1. 匿名2010年6月14日 17:45

    おー既にチャレンジしている方！　参考になりました。ありがとうございます。

    返信削除
  2. 匿名2010年6月26日 19:19

    素晴らしい記事ですね。
    私もチャレンジしてみましたが、iBooks 1.1 では縦書きにはなるものの、1ページ目しか表示されませんでした。

    返信削除
  3. hilock7022010年6月26日 19:23

    チャレンジお疲れ様です。
    あれ？涅槃でよければ2ページ目以降も縦書きになると思いますがいかがですか？
    （動画をご参照ください）

    とはいえ、やっぱりページめくりが逆（本から指定できない）なのは致命的ですよねー。

    返信削除
  4. 匿名2010年6月28日 12:40

    動画拝見しました。確かに複数ページになってますね。
    元の(x)htmlファイルはSigilか何かで作られたのでしょうか？。
    縦書きを実現しているepubファイルの実物があれば、色々なビューアで動かして見たいところです。

    めくり方向が固定無いのは、見ていて何だか変な気分です。。。

    返信削除
  5. hilock7022010年6月29日 2:02

    ePubファイルは
    テキストエディタで編集したHTMLファイルを
    eCubでコンパイルしております。

    ここで使用したファイルを
    ePubs.jpにアップロードしておきましたので、
    よろしければお使いください。

    めくり方向のとんでもない違和感にびっくりしますよ(笑)

    返信削除
  6. 匿名2010年6月29日 7:29

    ありがとうございます！。ePubs.jp でダウンロードしました。
    縦書きで複数ページでよめました。びっくりです。
    特に横に傾けて見開き2pにした場合には、真ん中から読み始めるので二度びっくりです(笑)
    ちなみにStanzaで見るときれいに横書きでした。

    とくに文学作品は縦書きだと読みやすさが違いますね。規格に正式に盛り込まれると嬉しいなぁと思いました。

    返信削除

登録: コメントの投稿 (Atom)