Shinyu Murakami MurakamiShinyu

## epub-css-snapshot2023-checklist.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                MurakamiShinyu
                / epub-css-snapshot2023-checklist.md
            
            
              Last active
              December 30, 2023 06:57
            
          
    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モジュールを中心にチェックリストを作成した。
CSSの公式的な定義に含まれるCSSモジュール


## page-margin-boxes-image-height100.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Page Margin Boxes - Image height 100px</title>
    <style>
@page {
  size: a4;
  margin: 20%;

## issue1172-test.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<h:html xmlns:h="http://www.w3.org/1999/xhtml" xmlns:d="https://www.devever.net/ns/dedoc" lang="en" xml:lang="en">
  <h:head>
    <h:style type="text/css"><![CDATA[
@namespace url(http://www.w3.org/1999/xhtml);
@namespace d url(https://www.devever.net/ns/dedoc);
d|p { display: block; }
    ]]></h:style>
  </h:head>
  <h:body>

## issue1171-case1.html
‎‎

## case1.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>EAL float system example</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="eal-float-start-start">start-start</div>
    <div class="eal-float-start-end">start-end</div>

## small-font-size.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Small font size test</title>
</head>
<body>
  <p style="font-size: 16px">The quick brown fox jumps over the lazy dog. (font-size: 16px)</p>
  <p style="font-size: 14px">The quick brown fox jumps over the lazy dog. (font-size: 14px)</p>
  <p style="font-size: 12px">The quick brown fox jumps over the lazy dog. (font-size: 12px)</p>

## page-counter-in-running-element.html
<!DOCTYPE html>
<style>
  @page {
    @top-right {
      content: element(RunningElement);
    }
  }
  .running-element {
    position: running(RunningElement);
    color: blue;

## running-element-display-none.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TITLE</title>
  <style>
    title {
      position: running(Title);
    }
    @page {

## inline-elem-text-boundary-problem.html
<!DOCTYPE html>
<html lang="ja">
<style>
  div:nth-child(2) {
    font-family: "Noto Sans CJK JP";
  }
  div:nth-child(3) {
    font-family: "Noto Serif CJK JP";
  }
  div:nth-child(4) {

## latin-chars-arial.html
<style>
  :root {
    font-family: "Noto Sans CJK JP", sans-serif;
    line-height: 1.5;
  }
  dd {
    font-family: "Arial", serif;
  }
</style>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Page Margin Boxes - Image height 100px</title>
	<style>
	@page {
	size: a4;
	margin: 20%;
	<?xml version="1.0" encoding="UTF-8"?>
	<h:html xmlns:h="http://www.w3.org/1999/xhtml" xmlns:d="https://www.devever.net/ns/dedoc" lang="en" xml:lang="en">
	<h:head>
	<h:style type="text/css"><![CDATA[
	@namespace url(http://www.w3.org/1999/xhtml);
	@namespace d url(https://www.devever.net/ns/dedoc);
	d\|p { display: block; }
	]]></h:style>
	</h:head>
	<h:body>
	<!DOCTYPE html>
	<html lang="ja">
	<style>
	div:nth-child(2) {
	font-family: "Noto Sans CJK JP";
	}
	div:nth-child(3) {
	font-family: "Noto Serif CJK JP";
	}
	div:nth-child(4) {
	<style>
	:root {
	font-family: "Noto Sans CJK JP", sans-serif;
	line-height: 1.5;
	}
	dd {
	font-family: "Arial", serif;
	}
	</style>