Momo Uta 309 - Home

戯曲をEPUB3化する道(3) – Kinoppy用のCSSでハマった

前々回 → 戯曲をEPUB3化する道(1)
前回 → 戯曲をEPUB3化する道(2) – ZIPアーカイブをつくるFuelPHP用のパッケージ

と、いうわけで。戯曲の電子書籍化の道をコツコツ歩んでいる。
戯曲のテキストファイルを内部形式に変換するものはつくった。それをEPUB3用のXHTMLやopfやナビゲーション文書として書き出すものもつくった。それらを手作業でEPUB3にもしてみた。

が、ビューアによって見え方が違うという点で、つまづいた。

戯曲のセリフ部分は、登場人物名、なんらかのスペース、セリフ、という形式で表記されることが多い。市販の戯曲とかそうなっていると思う。上演台本も同じだ。

ひとつのセリフを、HTMLとして正しい感じに既述すると、例えばこうなるんじゃないかと思う。

<p><span class='character'>登場人物名</span><span class='line-text'>せりふの内容</span></p>

ひとつの段落に、登場人物名とセリフが書いてある。で、span要素で、その文字列の意味を定義する、というノリ。

製作中のコンバータも、こんな感じのHTMLを吐くようにしていた。
そしてテキトーにCSSを記述し、見栄えを整えた。結果、縦書き表示可能なChromeではうまく表示できたのだが、手持ちのEPUBビューアで見てみると、期待通りの表示にならなかった。テキトーではダメだな、と思った。

なので、テストページを作って、EPUBビューアでの見栄えを検証しつつ、CSSをどー書いたらいいのか試行錯誤してみることにした。

のが先週末くらいかのぅ。毎日コツコツしかいじっていなので、進みが遅いことこの上ない。

さて。以下、長いよ。

検証に使ったのは、以下のリーダー。

検証用に書いたHTMLは、まずはこれ。

>
<!-- 検証用その1 -->
<div class='box-2'>
<p><span class='label'>ラベル</span><span class='text'>テキスト</span></p>
<p><span class='label'>ラベル2</span><span class='text'>テキストテキスト</span></p>
<p><span class='label'>ラベル3</span><span class='text'>テキストテキストテキストテキスト</span></p>
<p><span class='label'>ラベルよん</span><span class='text'>テキストテキストテキストテキストテキストテキストテキストテキスト</span></p>
</div>

こんなCSS書いてみた。

/* 検証その1のCSS */
.box-2 p {
  background-color: #ffb;
  position: relative;
  margin: 0;
  padding-top: 10em;
  padding-bottom: 0.5em;
}
.box-2 p .label {
  background-color: #eff;
  position: absolute;
  height: 8em;
  top: 0;
  padding-bottom: 1em;
  text-align: right;
}
.box-2 p .text {
  display: block;
  background-color: #fef;
}

背景色を付けてあるのは、もちろん検証用。

ちなみに12行目の “top: 0;“は、最初、”margin: -9em;“って書いてあった。セリフはpaddingでインデントし、登場人物の位置はネガティブマージンで調整、という考え方。が、Chromeでしかうまく表示できなかった。ので、”top: 0;“に変えて、検証を始めてみた次第。

このコードは、Chromeだとうまくいく。JSベースのEPUBリーダBiB/iで見ると、こうなる↓。

20141212_001_bibi

BiB/iでの表示

戯曲では、この「ラベル」部分に登場人物名が、「テキスト部分」にセリフ本文が入る。微調整はしたいところだが、まぁ問題はない。あと、縦書き文書では、text-align:right;になるのがいまいち釈然としない。

Kindle Readerでも問題なかった。

20141212_002_kindle

Kindle Previewerでの表示

だが、Adobe Digital EditionsとKinoppyでは、うまく表示されなかった。

Adobe Digital Editionsだとこうなる。ぎゃー。

20141212_004_adobi-de

Adobe Digital Editionsでの表示

Kinoppyでも同様。

20141212_003_kinoppy

kinoppyでの表示(1)

いろいろ試行錯誤した末に、諦めてfloatを使うことにした。使いたくなかったけど。floatとかtext-alignとか、縦書き表示だと、leftで上、rightで下になるとか、正直気持ち悪い。でも我慢だ。

/* 検証その2のCSS */
.box-3 p {
  background-color: #ffb;
  margin: 0;
  padding-bottom: 0.5em;
}
p .label {
  display: block;
  background-color: #eff;
  height: 8em;
  padding-bottom: 1em;
  float: left;
  text-align: right;
}
p .text {
  display: block;
  background-color: #fef;
  margin-top: 10em;
}

label“と”text“クラスはインライン要素<span>で使うが、”display:block;”でブロック要素として扱う用に。

結果、Adobe Digital Editionsでも、上の図の、Kindle Previewerと同じように表示されるようになった。が、Kinoppyではこうなった。うぎゃーー。

20141212_005_kinoppy_2

Kinoppyでの表示(2)

ぐちゃぐちゃだった。

さらに妥協して、HTMLとCSSをこう書き直した。pを廃止、spanも廃止、ぜんぶdivで。意味と記法が乖離している感じがして、なんかきもい。

<!-- 検証その3 -->
<div class='box-4'>
<div class='line'><div class='label'>ラベル</div><div class='text'>テキスト</div></div>
<div class='line'><div class='label'>ラベル2</div><div class='text'>テキストテキスト</div></div>
<div class='line'><div class='label'>ラベル3</div><div class='text'>テキストテキストテキストテキスト</div></div>
<div class='line'><div class='label'>ラベルよん</div><div class='text'>テキストテキストテキストテキストテキストテキストテキストテキスト</div></div>
</div>

/* 検証その3 */
.box-4 .line {
  background-color: #ffb;
  margin: 0;
  padding-bottom: 0.5em;
}
.box-4 .line .label {
  background-color: #eff;
  height: 8em;
  padding-bottom: 1em;
  float: left;
  text-align: right;
}
.box-4 .line .text {
  background-color: #fef;
  margin-top: 10em;
}

が、Kinoppyだけはうまく表示されなかった。で、さらに手抜きな妥協をし、「ここは他と重ならないブロック要素だぜ!」という念を込めて、labelクラスとtextクラスに透明の枠線を追加してみた。

/* 検証その3-b */
.box-4 .line {
  background-color: #ffb;
  margin: 0;
  padding-bottom: 0.5em;
}
.box-4 .line .label {
  background-color: #eff;
  height: 8em;
  padding-bottom: 1em;
  float: left;
  text-align: right;
  border: 1px solid transparent;
}
.box-4 .line .text {
  background-color: #fef;
  margin-top: 10em;
  border: 1px solid transparent;
}

他のビューアでも Kinoppyでも、ほぼ同じ見栄え表示されるようになった。↓

20141212_006_kinoppy_3

Kinoppyでの表示(3)

Android版のKinoppyでも、おおむねこのように表示された。

気持ち的にはいまいちすっきりしないけど、とりあえずこんな感じで進めてみようと思う。

まとめ。

  1. EPUBでは、ネガティブマージンとかpositionとかは、使わない方がよさげ
  2. Kinoppyには気をつけろ

※上述のHTML, CSSでお気づきの点がありましたら、コメント欄でご指摘頂けると大変助かります。

関連記事:

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] 戯曲をEPUB3化する道(3) – Kinoppy用のCSSでハマった […]

  2. […] 戯曲をEPUB3化する道(3) – Kinoppy用のCSSでハマった […]

  3. […] 戯曲をEPUB3化する道(3) – Kinoppy用のCSSでハマった […]