EPUB CSS仕様適合性テスト 評価メモ

epub-css-test-memo.md

EPUBリーダーのCSS仕様適合性テストの評価メモ

スプレッドシート「EPUBリーダー表示チェック（JAGAT XMLパブリッシング準研究会）2023」 https://docs.google.com/spreadsheets/d/1xKDlL4TrMHMa1qq2QsWcXLEGMPjx-JWcTdaw_8KkftE/edit#gid=0

EPUBリーダー毎の評価メモ

今回の調査で分かったことは、モダンCSSをサポートしているのはモダンブラウザエンジンを利用しているEPUBリーダーのみであるということ。そうではないEPUBリーダーでは、基本的に EPUB 3.0 で規定されていた "EPUB 3 CSS Profile" の範囲しかサポートしていない。

モダンブラウザ系

モダンブラウザエンジンを使うEPUBリーダー

• Kobo：iOS版アプリ、Android版アプリ
  • 各OS標準のブラウザエンジンが使われているよう
• Apple Books：iOS版アプリ、Mac
  • WebKit
• MURASAKI：Mac
  • WebKit
• BOOK☆WALKER
  • 各OS標準のブラウザエンジンが使われているよう
• BiB/i
  • 各OS上のブラウザで動く
• Vivliostyle Viewer
  • 各OS上のブラウザで動く
• Thorium Reader
  • Chromium

モダンブラウザ系以外

独自レイアウトエンジン（あるいは古いブラウザエンジン）を使うEPUBリーダー

• Kindle
• Kobo：専用電子ペーパー端末、Windows、Mac
• honto：iOS版アプリ、Android版アプリ
• Kinoppy：iOS版アプリ、Android版アプリ、Windows
• Voyager：Android版アプリ、Windows
• 超縦書：Windows
  • 古いChromium（たぶん2014年ごろ）がベースに使われているよう（FlexboxはOKだが、CSS変数やGrid LayoutはNG）

「メジャーなEPUBリーダー」

以下のメモで、「メジャーなEPUBリーダーでサポート」というのは、モダンブラウザ系＋Kindle でサポートされていることを意味する。

CSSモジュール毎の評価メモ

• CSS Conditional Rules Level 3
  • @supports ルール
    • モダンブラウザ系でのみサポートされている
    • @supports は特定のCSSプロパティがサポートされているかどうかでスタイルを切り替えるためのものだが、これを使う場合 @supports 自体がサポートされていない場合を考慮して使う必要がある。つまり、@supports (display: flex) { ... /* Flexboxを使用したスタイル */ } のように使うならばよいが、@supports not (display: flex) { ... /* Flexboxを使用しないスタイル */ } という使い方はできない。
• Selectors Level 3
  • 部分文字列マッチング属性セレクタ [att^=val] / 部分文字列マッチング属性セレクタ[att$=val] / 部分文字列マッチング属性セレクタ[att*=val] / :root 擬似クラス / :nth-child() 擬似クラス / :nth-last-child() 擬似クラス / :nth-of-type() 擬似クラス / :nth-last-of-type() 擬似クラス / :last-child 擬似クラス / :only-child 擬似クラス / :first-of-type 擬似クラス / :last-of-type 擬似クラス / :only-of-type 擬似クラス / :empty 擬似クラス / :not 擬似クラス / ::first-letter 擬似要素 / ::before 擬似要素 / ::after 擬似要素 / 後続兄弟結合子 E ~ F
    • メジャーなEPUBリーダーでサポートされている
    • Kinoppy、Voyager でNG
  • ::first-line 擬似要素
    • モダンブラウザ系以外では、honto でOK
• CSS Cascading and Inheritance Level 4
  • all プロパティ
    • モダンブラウザ系でのみサポートされている
    • ただし、BiB/i でNG
  • プロパティの値 initial
    • メジャーなEPUBリーダーでサポートされている
    • honto、Kinoppy、Voyager でNG
  • プロパティの値 unset / プロパティの値 revert
    • モダンブラウザ系でのみサポートされている
• CSS Values and Units Level 3
  • 長さの単位 rem
    • すべてのEPUBリーダーでサポートされている。
  • 長さの単位 ch / 長さの単位 vw / 長さの単位 vh / 長さの単位 vmin / 長さの単位 vmax / 長さの単位 Q
    • モダンブラウザ系以外では、Kobo、honto、超縦書（Q 以外）でOK
• CSS Custom Properties for Cascading Variables Module Level 1
  • CSS変数
    • モダンブラウザ系でのみサポートされている
• CSS Color Level 4
  • opacity プロパティ
    • モダンブラウザ系以外では、Kindleの一部の種別、Kobo、超縦書 でOK
  • rgb() 関数のコンマなし形式　例: rgb(0 255 0 / .5) / 16進数のRGBA形式（8桁） / 16進数のRGBA形式（4桁） / hsl() 関数 / hwb() 関数
    • モダンブラウザ系でのみサポートされている
• CSS Backgrounds and Borders Level 3
  • 複数の背景画像
    • モダンブラウザ系以外では、Kobo、超縦書 でOK
  • border-radius プロパティ
    • メジャーなEPUBリーダーでサポートされている
    • Voyager でNG
  • border-image プロパティ
    • モダンブラウザ系以外では、Kobo、超縦書 でOK
  • box-shadow プロパティ
    • メジャーなEPUBリーダーでサポートされている
    • honto、Kinoppy、Voyager でNG
• CSS Images Level 3
  • グラデーション関数 linear-gradient() / グラデーション関数 radial-gradient() / グラデーション関数 repeating-linear-gradient() / グラデーション関数 repeating-radial-gradient()
    • モダンブラウザ系以外では、Kobo、超縦書 でOK
  • object-fit プロパティ contain / object-fit プロパティ cover / object-position プロパティ
    • モダンブラウザ系以外では、超縦書 でOK
• CSS Fonts Level 3
  • @font-face ルール
    • モダンブラウザ系以外では、Kobo、超縦書 でOK
  • unicode-range 記述子
    • モダンブラウザ系以外では、Kobo、超縦書 でOK
  • font-kerning プロパティ / font-variant プロパティ / font-feature-settings プロパティ
    • モダンブラウザ系でのみサポートされている
• CSS Writing Modes Level 3
  • writing-mode プロパティ vertical-rl / text-orientation プロパティ upright / text-orientation プロパティ sideways
    • モダンブラウザ系以外では、honto、Kinoppy、Voyager でOK
• CSS Multi-column Layout Level 1
  • 段組 2段組 / 段組 段間罫 / 段抜き：column-span プロパティ / 段バランス：column-fill: balance / 段バランス：column-fill: auto
  • モダンブラウザ系でのみサポートされている
  • ただし、BOOK☆WALKER Android版アプリ でNG
• CSS Flexible Box Module Level 1
  • Flexboxによる上下中央揃え
    • モダンブラウザ系以外では、超縦書 でOK
• CSS User Interface Module Level 3
  • box-sizing プロパティ border-box / box-sizing プロパティ content-box
    • モダンブラウザ系以外では、Kobo、超縦書 でOK
  • outline プロパティ
    • メジャーなEPUBリーダーでサポートされている
    • honto、Voyager でNG
• CSS Containment Module Level 1
  • contain プロパティ
    • モダンブラウザ系でのみサポートされている
• CSS Transforms Level 1
  • transform プロパティ
    • モダンブラウザ系でのみサポートされている
• CSS Compositing and Blending Level 1
  • mix-blend-mode プロパティ/ isolation プロパティ/ background-blend-mode プロパティ
    • モダンブラウザ系でのみサポートされている
• CSS Counter Styles Level 3
  • @counter-style ルール
    • モダンブラウザ系でのみサポートされている
    • ただし、Vivliostyle Viewer でNG
  • 定義済みカウンタースタイル cjk-decimal / 定義済みカウンタースタイル lower-greek / 定義済みカウンタースタイル hiragana / 定義済みカウンタースタイル hiragana-iroha / 定義済みカウンタースタイル katakana / 定義済みカウンタースタイル katakana-iroha / 定義済みカウンタースタイル cjk-earthly-branch / 定義済みカウンタースタイル cjk-heavenly-stem / 定義済みカウンタースタイル japanese-informal
    • モダンブラウザ系以外では、Kindle、Kobo、honto、超縦書 で一部がOK