Shinyu Murakami MurakamiShinyu

EPUBリーダーのCSS仕様適合性チェックリスト

はじめに

最新のEPUB仕様であるEPUB 3.3では、「EPUB 3は、CSS Snapshot で定義されたCSSをサポートする」と明記されている（§1.3.3 Relationship to CSS）。いくつかの -epub- 接頭辞付きのCSSプロパティは後方互換性のために残されてはいるが、「EPUB制作者は接頭辞なしのプロパティを使用するべきで、リーディングシステムは現行のCSS仕様をサポートするべき」、「Working Groupは、EPUBの次のメジャーバージョンでこれらの接頭辞付きプロパティをサポートする見込みがないため、現在これらの接頭辞付きプロパティを使用しているEPUBクリエーターは、サポートが可能になり次第、接頭辞なしバージョンに移行することを推奨する」とのことである（$6.3.1.3 Prefixed properties）。

それでは各社のEPUBリーディングシステムが現行のCSS仕様をどれだけサポートしているのか、-epub- 接頭辞付きプロパティはもう使わなくてよいのか、気になるところである。そこで、CSS Snapshot 2023 でCSSの公式的な定義とされているCSSモジュールを中心にチェックリストを作成した。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Page context and page-margin boxes box-sizing test</title>
	<style>
	@page {
	size: 820px;
	margin: auto;
	padding: 10px;

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>Test font-kerning and 'palt'</title>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
	:root {
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.5;

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Test leader() in Table of Contents</title>
	<style>
	@page {
	@bottom-center {
	content: counter(page);
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Check devicePixelRatio</title>
	<script>
	window.onload = () => {
	devicePixelRatioValue.textContent = window.devicePixelRatio;
	actualBorderWidthValue.textContent = testBorder.getBoundingClientRect().height;
	};

	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<style>
	@page {
	size: 560px 790px;
	margin: 63px 72px 63px;
	}
	html {

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Root element styles should be inherited to page context</title>
	<style>
	:root {
	color: maroon;
	font-family: "Georgia", serif;
	font-variant: small-caps;

	@page {
	margin: 8%;
	@bottom-center {
	writing-mode: horizontal-tb;
	font-size: 67%;
	content: "– " counter(page) " –";
	}
	}
	@page :first {
	margin: 0;

Shinyu Murakami MurakamiShinyu

EPUBリーダーのCSS仕様適合性チェックリスト

はじめに

CSSの公式的な定義に含まれるCSSモジュール