Tech Racho エンジニアの「?」を「!」に。
  • プレス・実績・お知らせ

続・EPUBでのtext-align:justifyと-epub-text-align-lastを知る

以前書いたtext-align-lastについて、その後Working Draftの更新などがありましたので、続きです。

現在のステータス

text-align-lastについて記載されているCSS Text Module Level 3は、2014/11/14現在、Last Call Working Draftのステータスです。

CSS Working Groupとしては概ね仕様案が固まり、外部からのフィードバックを受け付けるステータスと思って良いでしょう。

以前の状況

以前参照した20121113版では、text-align-lastについて、以下のようになっていました。

  • start, end, left, right, center, justifyの場合: 最終行をその位置にそろえる
  • autoの場合:
    • text-align:justifyの場合:
      • text-justify:distributeの場合: 最終行もjustifyにする
      • text-justify:distribute以外の場合: 最終行はstartにそろえる
    • text-align:justify以外の場合: 最終行もtext-alignに従う
  • 1行しかない場合は、text-align:start endの場合を除き、text-alignよりtext-align-lastが優先される

以上のルールにより、以下のようなHTML([CODE-1])では、pのサイズをよほど小さくしない限り、左寄せになる仕様でした。

HTML:

<p>This is test.</p>

CSS:

p {
  text-align: center;
  text-align-last: left;
}

従来の問題点

整合性より、直感的でない、実用上使いづらいという点が問題だったのでしょう。

そもそもtext-align-lastは、「両端揃えしたいが、最終行の余った部分まで均等割り付けするのはおかしい。最終行は先頭揃えにすべきだ」という常識的なルールを設定するために用意されたはずです。ですので、初期値はautoで、この挙動としては「justify時も最終行はstart寄せ」になっています。

この視点で見ると、1行の時にtext-align-lastがtext-alignより優先する理由もわかります。つまり、短い行を不自然な均等割り付けさせないためのプロパティなのだから、短い1行にも適用されなくてはいけないわけです。

しかし、[CODE-1]のような記述でセンタリングしないのは、あまり直感的ではありません。プロパティ名から受けるイメージとしては、「1行しかないのだし関係ないだろう」「pタグの中に画像が1つあるだけなのだから、関係ないだろう」と感じるのが普通だと思います。

だいたい、text-align-lastをjustify以外で使うケースがあるのか?いったい誰がうれしいのか?混乱を招くだけではないのか?当然そのような意見もあり、この仕様は何回か更新されています。
過去の議論の例

変更点20131010

Working Draftは随時アップデートがされていますが、text-align-lastに関しては、20131010版にて、以下の変更が加えられました。

Changed ‘text-align-last’ to depend on ‘text-align: justify’.

具体的には以下の下線部分が追加されています。

This property describes how the last line of a block or a line right before a forced line break is aligned when ‘text-align’ is ‘justify’. If a line is also the first line of the block or the first line after a forced line break, then, unless ‘text-align’ assigns an explicit first line alignment (via ‘start end’), ‘text-align-last’ takes precedence over ‘text-align’.

これにより、text-align-lastプロパティは、text-align:justifyの時のみ作用するように変更されました。よって、[CODE-1]の場合、センタリングすることになります。

unless ‘text-align’ assigns an explicit first line alignment (via ‘start end’),の部分が残っていて「?」となりますが、おそらく消し忘れでしょう。

これによって、かなり直感的な挙動になりました。

  • デフォルトでは、text-alignは1行でも複数行でもそのまま効く。ただし、justifyのみ、短い行はstart寄せになる。
  • text-align-lastを指定すると、justifyの場合の挙動のみ変更できる。設定しても、text-align:centerの場合などは作用しない。

欠点としては、機能・自由度が減っている(justify以外の場合に最終行の位置を変更したいケースは、本当に絶対無いのか?)点が挙げられるでしょう。仕様を制作事情に寄せすぎで、プロパティレベルではもう少しプリミティブな方が望ましい気もします。

変更点Editor's Draft

Working Draft内にも注記があるとおり、本記事作成時点でのEditor's Draftでは、以下の変更がされています。

  • 20131010の変更はキャンセル
  • text-alignはtext-align-allとtext-align-lastを一度に指定するshorthandプロパティとなる
  • text-align-allは従来のtext-alignに概ね相当する
  • text-alignにjustify-all以外を指定すると、text-align-lastはautoにリセットされる

非常におもしろい変更です。

これにより、20131010版と同様の直感的な使い勝手を実現しつつ、明示的に指定することでjustify以外の場合の最終行位置を変更することも可能になります。
仕様のシンプルさと利用頻度を考えれば、justify-allが必要かどうかはやや疑問です。

なお、「text-align-default」のようなshorthandプロパティを新設するのではなく既存のtext-alignを置き換えている理由は、単純に互換性のためです。
text-alignプロパティはCSSが登場したころからあるプロパティです。既存コンテンツの互換性はもちろんですが、急に「これからはtext-alignではなくtext-align-defaultを使ってね」と言ったら、世界中にいる大量のHTML/CSSコーダーが発狂してしまいます。

懸念点としては、プロパティが増えている点が挙げられるでしょう。特にtext-alignがshorthandに変更されているため、JavaScriptから値を取得するようなケースでどのような副作用が生じるか、慎重な検討が必要と思われます。

EPUBの場合

ここで、例によってEPUBの場合の特例が生じます。

EPUB3では、「基本的にCSS2.1を参照する」「text-align-lastなど一部のプロパティのみCSS3の各モジュールを参照する」ことになっています(ちなみにsyntaxはEPUB3制定時点のものを、semanticsは最新のものを参照しています)。

仮に現在のEditor's DraftがそのままWorking Draftに反映されるとどうなるかというと、

  • text-align-lastは最新のWorking Draftを参照するため、text-align:justifyに依存することはない
  • text-alignはCSS2.1のものを参照するため、shorthandではなく、text-align-lastを初期化することもない

ということで、20131110より前の挙動に戻ることになります。

これはEPUBがCSS3過渡期に制定された都合上、中途半端に参照していることで生じた矛盾と言えるでしょう。

手っ取り早い解決方法としては、EPUBの仕様をアップデートしてCSS3Textのtext-alignとtext-align-allを参照させてしまうのが良さそうですが、影響範囲に注意が必要なうえあまりエレガントではありませんね。IDPF側の議論はあまりウォッチできていないのですが、何か良い案はあるのでしょうか。

まとめ

このように、justifyとtext-align-lastに関しては、まだCSSWGでも明確な答えが出ていない状況です。
コンテンツ制作者側からのフィードバックも募集しているようですので、気づいた点があればwww-styleなどに送ってみると良いかもしれません。


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。