Skip to content

Instantly share code, notes, and snippets.

View MurakamiShinyu's full-sized avatar

Shinyu Murakami MurakamiShinyu

27 followers · 3 following
View GitHub Profile
@MurakamiShinyu
MurakamiShinyu / small-font-size.html
Last active May 17, 2023 02:34
<!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>
@MurakamiShinyu
MurakamiShinyu / case1.html
Last active May 13, 2023 09:14 — forked from spring-raining/case1.html
EAL two partitions
<!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>
@MurakamiShinyu
MurakamiShinyu / issue1171-case1.html
Created May 13, 2023 09:10
‎‎​
@MurakamiShinyu
MurakamiShinyu / issue1172-test.xhtml
Last active May 13, 2023 08:20
vivliostyle.js/issue1172
<?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>
@MurakamiShinyu
MurakamiShinyu / page-margin-boxes-image-height100.html
Last active May 13, 2023 03:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Page Margin Boxes - Image height 100px</title>
<style>
@page {
size: a4;
margin: 20%;
@MurakamiShinyu
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モジュール

@MurakamiShinyu
MurakamiShinyu / test-font-kerning-palt-ja.html
Last active January 16, 2023 10:25
<!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;
@MurakamiShinyu
MurakamiShinyu / toc-leader.html
Created January 11, 2023 01:05
<!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);
}
@MurakamiShinyu
MurakamiShinyu / checkDevicePixelRatio.html
Last active January 3, 2023 01:24
<!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;
};
@MurakamiShinyu
MurakamiShinyu / ruby-page-float-test.html
Last active October 26, 2021 16:39
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
@page {
size: 560px 790px;
margin: 63px 72px 63px;
}
html {