2014年04月15日

InDesignのソフトリターンはepubの改行に変換されるのだ

 KindleはKF8ではレイアウトの表示機能が強化された。これからの流れとしてはepubで表現可能はレイアウトは再現するのが当たり前になる。レイアウトの機能はほとんどがスタイルシートで指定する。したがって、スタイルシートをあらかじめ作成しておけばそれをcssファイルにペーストするだけで済む。InDesignでは段落スタイルにスタイルシート名を記入しておくと、あとは書き出したepub内のスタイルシートの内容を差し替えるだけでよい。


 Kindleのスタイルシートで可能ことは「ビューア別EPUB表示テスト(電書魂)」に整理されてまとめられている。Kindleで可能なレイアウトでスタイルシートを使うものに

テキストの回り込み
罫線囲み
罫線角丸囲み
表組
背景イメージ
ドロップキャップス
ボックスシャドウ
テキストシャドウ
重ね順指定
字間アキ・ツメ
縦中横

などがある。epubはテキストだけであれば作成は簡単だが、少しレイアウト要素を追加すると、作成が煩雑になる。htmlとcssを読んでレイアウトの仕上がりを想像できなけば、効率的な作業は望めない。とはいえ上記にあるようなレイアウトのリクエストを受ければ「できません」とは言えなくなることは間違いない。

 こうしたレイアウトでスタイルシートで指定可能なものは、InDesignでスタイルシート名を段落スタイルに名にしておく。あとからスタイルシート編集する。ここで注意したいのは、epubに書き出した後、再度InDesignでレイアウト編集を行う場合だ。epubに書き出してもう一度epubを編集することはできるだけ避けたい。InDesignから再度書き出すときは、別名でepub書き出しして、スタイルシートは変更がない限り、以前ものをまるごと差し替えればよい。

 たとえば罫線囲みでは、

border

というスタイルシートを使うが、段落スタイルでも「border」にしてテキストに適用する。段落スタイルの内容は「body」のままでいい、わかりやすくするためにフォントを変更してもよい。本文フォントが明朝だったら、「border」はゴシックにしておく。

140415-01.gif
*InDesignで罫線囲みするテキストに「border」の段落スタイルを指定する。

 そうすると段落スタイル「border」は通常のテキストの指定としてスタイルシートが書き出される。

p.border {
    -adobe-ruby-align:center;
    -adobe-ruby-overhang:none;
    -epub-ruby-position:over;
    color:#000000;
    font-family:"Hiragino Kaku Gothic ProN W3", sans-serif;
    font-size:1em;
    font-style:normal;
    font-variant:normal;
    font-weight:300;
    line-height:2;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
    text-align:justify;
    text-decoration:none;
    text-indent:9px;
}

もちろんこのままではKindleでは罫線囲みにはならない。このスタイルシートの中身を丸ごと変更する。

p.border {
    border:solid 3px #cccccc;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:1em;
    padding-right:0em;
}

などとする。3ピクセルのグレースケール線幅で天と地はそれぞれ一文字分アキを設定する。またKindleでは後ろが詰まってしまうので、後ろも一文字分空けておく。これでKindle Previewerで変換してプレビューしてみよう。

140415-02.gif
*Kindle Previewerすると罫線は段落単位で作成されてしまった。

 Kindle Previewerすると、テキストには罫線がかかっている。が、段落単位で罫線が指定されてしまうではないか。意図するところは、段落をまたがって罫線で囲むことである。htmlはこうなっている(ルビタグは削除)。

<p class="border">読者に媚こびることは、読者を裏切うらぎることと等しい</p>
<p class="border">舞台などの謎が明かされた時が物語の終わる時</p>

罫線が段落それぞれに適用されていることがわかる。段落として分離されたテキストを一つの段落にするしかない。そうすれば罫線も一つになる。つまり、テキストを<br />でつなぐしかない。

<p class="border">読者に媚こびることは、読者を裏切うらぎることと等しい<br />
舞台などの謎が明かされた時が物語の終わる時</p>

このhtmlタグの修正を手動で行うのか。それは面倒である。レイアウトを修正したとき、その都度修正していると、修正忘れは必ず起こると思った方がいい。そこで、InDesignで<br />タグを書き出しそうな方法を考えてみた。InDesignで強制改行(段落内改行)ぐらいしか方法はなさそうだ。。いわゆるソフトリターン(shift+returnキー)である。ソフトリターンした行が両端揃えになるので、InDesign上の見栄えは良くないが、ソフトリターンでは段落は分離されないはずである。

140415-03.gif
*InDesign上で改行をソフトリターンで行う。

 そこでもう一度epubに書き出してSigilでepubを開いてみた。そうするとちゃんとソフトリターンは<br />に置き換えられているのである。スタイルシートを差し替えてKindle Previewerすると一つの罫線でテキストは囲まれていた。ソフトリターンの本来の使い方ではないが、epub書き出しでは使い道がありそうだ。

140415-04.gif
*書き出したepubのhtml。ソフトリターンは<br />として書き出されている。

140415-05.gif
*ソフトリターンのepubをKindle Previewerで変換。想定通りに表示されている。

 InDesignでソフトリターンしてepub書き出しすると、改行が<br />になるというのは、やってみるまでわからなかった。epub書き出しの一般パネルには「強制改行を削除」という設定がある。強制改行はソフトリターンのことなので、もちろんここはオフにして書き出す必要がある。ここをチェックすると<br />が挿されないまま書きだされる。

 InDesignの段落スタイルを使用する場合、あとでSigilで編集しないようにレイアウト指定が必要だ。htmlを分割したりは仕方がないが、htmlのタグはできるだけ触らないような工夫は必要だろう。しかし、それができれば、InDesignでは複雑なレイアウトは簡単にepubに反映できる。InDesignの段落スタイルとスタイルシートをマッチングさせておけばいいだけなのである。


◆ビューア別EPUB表示テスト(電書魂)
http://densyodamasii.com/?page_id=2066


◆InDesignでKindleのepubをラクラク作成する方法[Kindle版]
http://amzn.to/PfcrXi

◆InDesignでKindleのepubをラクラク作成する方法[ツール版]
http://bit.ly/1iSgkZZ
※PDF版とテンプレートを同梱


posted by jink0222 at 20:16 | Comment(0) | TrackBack(0) | InDesign CS6からepub | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/394742873
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。