Skip to content

Instantly share code, notes, and snippets.

@MurakamiShinyu
Last active January 9, 2024 02:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save MurakamiShinyu/0ab8187a15d638d9557ef9ceab0a85d4 to your computer and use it in GitHub Desktop.
EPUB CSS仕様適合性テスト 評価メモ

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment