血統の森+はてな

旧はてなダイアリーの自動インポートによるアーカイブです。

EPUB3におけるウェブフォント指定のちょっとした落とし穴(メモ)

あらすぢ

id:momdo:20130827:p1
EPUB版点字図書(点字記号フォント埋め込み版)をつくってみた | すちゃらかコーダー
点字だけのepubを@kzakzaさんが作成するも、手元のHTC J butterflyで見ることができなかった(全部豆腐になる)、という話。

なぜか?

2013-09-08追記:どうもHTC j butterflyでの挙動が怪しいというか、もとepubが同名で何度か差し替えられているのでうまく追試できていない(つまり、ここに書いてあることが確からしいかどうか、少し疑問の余地があることに注意)。自前でテストビルドしろってことか…。
2013-09-11追記:ここで書いていることは、テストが不完全なために不正確で誤りを含んでいます。ご利用は計画的に。
当初、epub中のCSS

@font-face {
	font-family: Braille6;
	src: url('font/braille6.woff') format('woff'),
	src: url('font/braille6.ttf')  format('truetype');
}

p,h1 {
	font-family: "Segoe UI Symbol", Braille6, monospace; 
}

このように記述されており、一見何の問題もないように思われる。(もちろん妥当なスタイルシートである)。ところでEPUB3仕様は独自のCSSプロファイルを持っており、CSS3 Fonts仕様について次のように記載されている。

EPUB 3 CSS Profile は、[CSS3Fonts-20110324] で定義されている構文と [CSS3Fonts] で定義されているセマンティクスを使用し、CSS Fonts Module Level 3 [CSS3Fonts] 仕様書で定義されている @font-face ルールと記述子を包含している。

CSS Viewport を持つ Reading System は、@font-face ルールを使用して埋め込みの OpenType [OpenType] と WOFF [WOFF] フォントをサポートしなければならない(must)。

Editor's Draft仕様*1によれば、いわゆるウェブフォントはWOFF、TrueType、OpenType、EOF(Embedded OpenType)、SVG Fontの5つがあげられているが、このうちOpenTypeとWOFFのみがEPUB3リーダーに必須という扱いになっている。

ところが、Himawari Readerの中の人とのやりとりによると、少なくとも現段階のHimawari Readerは、AndroidWebkitコンポーネントから来る制約のために、WOFFを扱うことができず、OpenTypeのみのサポートという状況とのこと。*2これはおそらく、他のAndroid上のEPUBリーダーにも当てはまると思われる。

つまり、最初のCSSではWOFFは無視され、またTrueTypeも読み取られないために、事実上ウェブフォントが効いていないという状況のため、手元のHTC J butterflyではすべて豆腐になってしまったと。したがって、EPUB3のプロファイルに沿ったウェブフォントは次のように記述するのが現時点でのベストプラクティスということになる、か。

@font-face {
  font-family: Braille6;
  /* src: url('font/braille6.woff') format('woff'), */ /* Android端末ではうまくいかないことがあるので、WOFFを同梱しない(!) */
  src: url('font/braille6.otf')  format('opentype'); /* OpenTypeは問題なかった */
}

p,h1 {
  font-family: "Apple Braille", "Segoe UI Symbol", Braille6, monospace; /* iOSは専用のフォントがあるらしい。Linuxディストリは未調査 */
}

とまあ、OpenTypeだけでいいんじゃあという。しかし、圧縮したフォントを扱えないというのは何とも不便な話であり、これが点字というものすごい狭い範囲だから素のフォントで全く問題ないものの、ある程度大きなファイルとなると全くネットワークとストレージに優しくないという。このAndroidwebkitガーという現象、往年のIEガーを彷彿とさせて何とももにょる形に。


さて、上記で点字は一応表示されるようになったけれども、実はまだ豆腐になっていると言う状況。具体的には http://twitpic.com/dc2yyk *3のとおりで、空白部分が豆腐になってしまっている、と。

これはHimawariの人がFontForgeで解析をしたところ、このEPUBで使用している点字に割り当てられたU+2800の区画に、ウェブフォントで用いたフォントがコードポイントになにもフォント情報を持っていない*4、と。

なお、余談だけれども、BRAILLE PATTERN BLANK (U+2800)はBLANKであってSPACEでないあたりがミソ。CategoryはSPACE (U+0020)のようなSeparatorではなく、あくまでSymbol扱いという。空白という名の文字、フォールバックとか難しそう(フォント周りの実装とかまったく詳しくないですが)。*5

*1:4.3 Font reference: the src descriptor http://dev.w3.org/csswg/css-fonts/#src-desc。なお、http://www.w3.org/blog/CSS/2013/09/05/resolutions-109/ によれば近日中に本仕様はCRに移行する見込み。

*2:そのあたりのやりとりは https://twitter.com/HimawariReader/status/375781943117242368 この辺から。そのことに直接言及はないけれども、文脈からして私はそう判断している。

*3:なお、リンク先はHimawariの人の端末のSS…と一応補足。

*4:https://twitter.com/HimawariReader/status/375828987521425408 http://twitpic.com/dc5aid

*5:U+2800は[So]、U+0020は[Zs]。 http://www.fileformat.info/info/unicode/char/2800/index.htm http://www.fileformat.info/info/unicode/char/0020/index.htm http://www.unicode.org/reports/tr44/#General_Category_Values