2012,10,28, Sunday 『ザ セカンドドア』iBooks版を無料公開します blogのトップに戻る 　以前からpdf版を無料で公開していた>『ザ セカンドドア』のePub版を公開します。 　ePub版といっても、iPad上で読むiBooksに特化したデータになっています。他のePubブラウザでは表示が乱れると思います。 　右の表紙画像をクリックしてダウンロードしたデータを、iPad上のiBooksに転送してご覧下さい。（10月29日、データのリンク先をiPadZineに変更しました） 　無料公開するくらいですから、多少「テスト」の面も入っています。不都合な点がお知らせ下さい。 　なお、チャットページで文字を大きくすると表示が乱れます。こればかりは仕様ということでお許し下さい。 　続き▽の下にはiBooks向けに縦書き／右綴じのePubデータを作成する場合に注意する点を列挙しました。ご参考にしていただければ幸いです。 　なお、このデータは現在のところiPad専用です。iPad miniでは動作確認していませんが、たぶん読めると思います。 　iPhone4では各ファイルの１ページ目しか表示されず、読むことができませんでした。この点についてはiBooks2.0のころにあったバグが残っているのか、私の指定がどこか間違っているのか、引き続き調査をいたします。 　iBook向けの日本語縦書き書類を作るに当たり、CSSで諸設定を行います。まず、縦書き設定。 body { writing-mode : vertical-rl; -epub-writing-mode : vertical-rl; -webkit-writing-mode : vertical-rl; line-height: 1.7em; font-size: 12pt; background-color: #fff; } 　最初の３行が「縦書き」設定です。最初の１行はたぶんIE向け、２行目がePub一般向け、３行目がiBooksやMac純正ウェブブラウザのSafari、それにChrome向けに「縦書き」を指定するCSSです。iBookだけを考えるなら３行目だけでも大丈夫なはずです。 　４行目では、ルビを入れることも考えて、行間は1.7emとしました。ルビがないなら1.5emを指定すればいいと思います。 　背景色は本当は真っ白じゃなくて書籍用紙っぽい薄いベージュにしたかったのですが、iBooksの仕様上、ページ全体が背景色にならないのであきらめました。 　次に、縦中横の指定です。「!?」や「!!」など、感嘆符や疑問符が二つ並んだ場合、文字自体は半角文字を使用しますが、そのままでは文字が横倒しになってしまうので、これを指定します。 span.tcy{ writing-mode : horizontal-tb; -webkit-writing-mode : horizontal-tb; line-height:105%; padding-top:3px; } 　縦中横指定は常に「span class="tcy"」のタグで指定するので、cssもこれで。 　さらにルビ（よみがな）の指定です。 ruby { display: inline-table; position: relative; line-height: 1; margin-left: 0em; padding: 0; vertical-align: -0.1em; border:none; border-collapse: collapse; border-spacing: 0; } rb { display: table-row-group; text-align: center; padding: 0; margin: 0; border: none; } rt { display: table-header-group; line-height: 1.2; font-size: 0.5em; text-align: center; padding:0; margin: 0; border: none; } rb, rt {text-align: center;} rp {display: none;} 　細かいですね（笑）　まあ、デフォルト通りなのでわざわざ指定しなくても……というものも入っています。 　この他にもCSSはいろいろ使いましたが、一般的に使えるのはこのくらいでしょう。 　次に、「右綴じ」にする方法です。 　これはCSSではなく、ePubならではの制御用ファイル「contents.opf」にある「spine」タグ内にオプションとして指定します。 ＜spine toc="ncx" page-progression-direction="rtl"＞　　　　（「＜」や「＞」はもちろん本来は半角です） 　これを指定することで、ブック全体が右綴じになります。 　もう一つ、このePubデータを作るのに苦労したのが、チャット形式のページで使用しているアイコン画像の大きさを調整するところです。 　ePubは文字の大きさをユーザーが切り替えられるのが特徴ですので、下のようにCSSで指定しました。 .icn{ margin:3px; margin-bottom:1.5em; height:2.5em; float:left; } 　アイコンの大きさも文字の大きさに依存するようにしたのです。それでもチャットページで文字の大きさの設定を変えると表示が乱れるのは避けられませんでした。 　iBooksはなぜか「img」タグに直接このCSSを適用しても画像の大きさを変えられません。 ＜div class="icn"＞＜img src=〜……＞＜/div＞ 　という風に、親divを作ってそこにclassを適用するようにしました。 　チャット画面ではJavaScriptを使って表示／非表示を切り替えるようにしています。このように、html5を全て内包するePub形式では、従来紙の本では不可能だったプログラムを使った表現が可能になっています。iBooksのような電子書籍ブラウザを使うことを考えると、「本」としての見た目のなかでこの機能をどう使うかというのは、いろいろ可能性を感じさせてくれて想像が膨らみます。 　今回、大学の講義のネタにもするためにあえてこのような「ちょっと普通の本から外れた」表現も入れてみたということで、読みにくいようでしたらご容赦下さい。 | https://blog.tsuduki.com/index.php?e=393 | | お仕事（小説／SF） | 05:39 PM | comments (0) | trackback (x) |

この記事に対するコメントの受付は終了しています。 コメント

PAGE TOP ↑