ePubtext-align

この投稿は6年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2010 年 10 月 20 日 2,353日前)
2,690文字 (読了時間6分)

SPONSORED LINK

以前のエントリーで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の「両端揃え」設定
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タグで中央寄せ成功
spanタグで中央寄せ成功

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

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

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

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

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

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

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

ルイ・ボナパルトのブリュメール18日―初版 (平凡社ライブラリー)

ルイ・ボナパルトのブリュメール18日―初版 (平凡社ライブラリー) [書籍]

著者カール マルクス

クリエーターKarl Marx, 植村 邦彦

出版社平凡社

出版日2008-09

商品カテゴリー単行本

ページ数317

ISBN4582766498

Supported by amazon Product Advertising API

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

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

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

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

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

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

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2010 年 10 月 20 日にデザインの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

私にはポルノの定義はできないが、見ればわかる。

— ジャレド・ダイアモンド

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。