iBooks用のePub作成覚え書き（text-alignハックと明朝体とか）

高橋文樹

2010 年 10 月 20 日
読了3分（1,993文字）
css iPad フォント電子書籍

この投稿は 14年前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

以前のエントリーでtext-alignについて云々したと思うんですが、解決できなかった問題が二つほど解決したので、一応書いておきます。

これまでもさんざ検索してきましたが、まだePubのCSSに関する情報は探すのムズいですね。

まだ情報が少ないというのもあるのですが、色んなプレイヤーが色んなこと書きまくってる印象です。

これまでのCSSについて何かを書く人なんて、Web制作業についている人か日曜Webクリエイターか情報系の大学生のどれかだと思うんですが、ePubに関してはこれに加えて出版関係の人とブログは嫌いだけど本は出したい人がいりまじっててわけがわかりません。

特にInDesignから云々みたいな話題が多過ぎて、探すのが大変です。これもAdobeのフォーラムが検索結果にほとんど挙がってこない仕様のせいでしょうか…

明朝体問題

さて、「ハムスターに水を」のePubは本文をiPadにのみインストールされているヒラギノ明朝にしようと思っていたんですが、挫折していました。

で、これがTwitter上で@HowManyFilesさんとやりとりしたおかげで原因判明。

/*ダメ*/
body{
	font-family:'HiraMinProN-W3', serif;
}
/*オーケー*/
body{
	font-family:'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', serif;
}

ヒラギノ明朝で表示

この通り、美しい明朝体で表示されるようになりました。

要するに、日本語で指定しなきゃダメってことですね。

なお、@HowManyFilesさんははてなダイアリーでePubのテンプレートファイルを公開されています。

他にもルビとかテキスト寄せとか圏点とか色々と追求されているので、一度見てみることをお勧めします。

テキスト寄せ問題

中央寄せにならない

これは以前書いたテキスト両端揃えができないというのとは別の問題で、「テキスト寄せの指定が無視される」というものです。

「ハムスターに水を」のトップページでは名前と扉辞を中央寄せするつもりだったんですが、これがなぜかできませんでした。

.author_name{
  text-align:center !important;
}
.author_epigraph{
  text-align:center !important;
  margin-top: 2em;
}

iBooksの「両端揃え」設定

さんざんググった結果、Beating iBooks Bugsという心強いタイトルのブログ記事がヒットし、解決。この人はあれですね、ePubの関係者さんなんですかね。

このブログの要旨は以下の通り。

iBooksの設定で「両端揃え」がオンになっていると、すべてのpタグのtext-alignプロパティがjustifyに上書きされる。
とりあえずtext-alignの指定を変えたいpタグの中にspanタグを追加するとcssに書いた指定が適用される
iBooksはdivやpやspanにfont-familyの指定を許していないが、これもpタグの中にciteタグを追加してそこにcssを記入することで解決する

おっしゃる通り、以下を追記してみました。

HTML

<p class="author_name"><span>高橋 文樹</span></p>
<p class="author_epigraph">
    <span>この物語をすべての非正社員と<br />
    すべてのヤリマンに捧げる。</span>
</p>

CSS

.author_name span{
  font-size:1.5em;
}
/*この指定が必要かわかりませんが、一応*/
.author_epigraph span{
	color:#000000;
}

spanタグで中央寄せ成功

これで解決。ちゃんとセンター寄せになりました。

興味深いのはePub関係者らしきLizさんがこうした記事を書いたことに異議を唱える人がいたことです。

確かにCSSハックというと、Web制作者の間では悪手の極みみたいな捉え方をされているので、こうしたことを当事者が言っていいのかってのもありますね。

spanはともかく、citeタグは「引用元を示す」という意味があるので、font-familyを適用するため（見栄えを調整するため）に使うのは間違っています。

Web2.0でさんざ言われたように、テキストはセマンティック（意味的である＝適切な意味を持つ）でなければならないはずですからね。

興味のある方は当該記事のコメント欄を読んでみてください。

個人的には歴史は繰り返す、一度目は悲劇として、二度目は喜劇としてという言葉をciteタグ使いつつ思い出します。この言葉便利ですよね〜。

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

というわけで、主に2つのトピックについて書いてみました。

次回予告：そうはいっても電子出版はやさしい(2)

前回は次回予告とかいっておきながら、全然違うことを書く結果となりましたが、こうしてePubを出版してみて色々思うところがありました。こんな感じ。

PDF作ってみたけど「このまま小説を書くことなく人生が終わっていくのでは？」というぐらい大変だった。一時データがInDesignのままではブレークスルーは訪れないと思う
iBooksの仕様上、アプリみたいなアップデートは行えない？　だったらアプリの方がいいかも
Lulu.comの決済画面が英語というのは厳しすぎるし、ファイルも追加できないので、自前で決済システム作るか？

こうした雑感をそのうちどこかでまとめる予定です。

破滅派七号では電子出版奮闘記みたいなものも載りますので、お楽しみに。