Skip to content

Instantly share code, notes, and snippets.

View MurakamiShinyu's full-sized avatar

Shinyu Murakami MurakamiShinyu

View GitHub Profile
@MurakamiShinyu
MurakamiShinyu / mojikumi-css-text-spacing.md
Last active April 14, 2024 02:20
InDesign文字組アキ量設定をCSS text-spacing-trimで

InDesign文字組アキ量設定に対応するCSSのプロパティ指定

InDesignの文字組みアキ量設定

文字組み設定の手引き (PDF) の「3 定義済み文字組み設定の特徴」から:

  • ①行末約物半角
  • ②行末受け約物半角・段落1字下げ(起こし全角)
  • ③行末受け約物半角・段落1字下げ(起こし食い込み)*
  • ④約物全角・段落1字下げ*
@MurakamiShinyu
MurakamiShinyu / epub-ua-string.md
Last active April 7, 2024 07:11
EPUB閲覧アプリのUA文字列

EPUB閲覧アプリのUA文字列を調べた

UA文字列を表示するJavaScriptを埋め込んだEPUBを作成して、各EPUB閲覧アプリで開いてUA文字列を調べた。

show-ua-string.epub

作り方:

show-ua-string.htmlを作成

@MurakamiShinyu
MurakamiShinyu / css-text-4-memo-ja.md
Last active April 14, 2024 03:00
CSS Text Level 4 を読む(抄訳)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>text-spacing-trimテスト</title>
<style>
p {
border: 1px solid silver;
text-align: justify;
@MurakamiShinyu
MurakamiShinyu / text-spacing-trim-space-first-test.html
Last active October 26, 2023 17:57
行頭約物処理のテスト [text-spacing-trim space-first... test]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>行頭約物処理のテスト [text-spacing-trim space-first... test]</title>
<style>
@page {
size: A4 landscape;
margin: 5%;
@MurakamiShinyu
MurakamiShinyu / epub-css-test-memo.md
Last active January 9, 2024 02:38
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" の範囲しかサポートしていない。

モダンブラウザ系

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日本語の文節区切りでの行分割(word-break: auto-phrase)のテスト</title>
</head>
<body>
<h1>日本語の文節区切りでの行分割(word-break: auto-phrase)のテスト</h1>
<h2>word-break: auto-phrase</h2>
<!doctype html>
<style>
@page {
size: 210mm 210mm;
marks: crop cross;
bleed: 3mm;
margin: -3mm;
}
body {
margin: 0;
<!DOCTYPE html>
<style>
@page {
margin: -8px;
bleed: 12px;
marks: crop cross;
background-color: cyan;
background-image: url(https://avatars.githubusercontent.com/u/8237330?s=200&v=4);
}
img {