Skip to content

Instantly share code, notes, and snippets.

@MurakamiShinyu

MurakamiShinyu/text-spacing-trim-space-first-test.html

Last active October 26, 2023 17:57
Show Gist options
  • Save MurakamiShinyu/ea7fdd45e655f97fb64545c444db9099 to your computer and use it in GitHub Desktop.
Save MurakamiShinyu/ea7fdd45e655f97fb64545c444db9099 to your computer and use it in GitHub Desktop.
Download ZIP
行頭約物処理のテスト [text-spacing-trim space-first... test]
Raw
text-spacing-trim-space-first-test.html
<!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%;
@bottom-center {
font-size: 0.75em;
content: counter(page);
}
}
html {
line-height: 1.5;
font-family: "Hiragino Sans", "Meiryo", sans-serif;
}
table.test {
inline-size: 100%;
}
table.test td > div {
border: 1px solid #ccc;
margin: auto;
inline-size: 20em;
break-inside: avoid;
}
table.test td:nth-child(1) {
text-spacing-trim: trim-auto;
}
table.test td:nth-child(2) {
text-spacing-trim: space-first;
}
table.test td:nth-child(3) {
text-spacing-trim: space-all; /* for UAs space-start not-supported */
text-spacing-trim: space-start;
}
ul {
padding-inline-start: 1em;
}
#headlines .test ul {
padding-inline-start: 0;
list-style: none;
}
#headlines .test li {
border-inline-start: 0.75em solid #888;
padding-inline-start: 0.25em;
margin-block-end: 1em;
}
#ebooks .test p {
margin: 0;
text-align: justify
}
#body-text-indent .test p {
text-indent: 1em;
}
</style>
</head>
<body>
<h1>行頭約物処理のテスト [text-spacing-trim space-first... test]</h1>
<section id="ebooks">
<h2>電子書籍（同様の形式のサイトも含む） [e-Books (incl. sites)]</h2>
<p>段落間を空けず、段落先頭（強制改行直後）が全角開き括弧以外なら全角スペースで字下げ。text-align:justifyあり。<br>
[No space between paragraphs, space-indented if first character is not a bracket. with text-align:justify]
</p>
<table class="test">
<thead>
<th>行頭約物すべて詰める (trim-auto) </th>
<th>折り返し行頭のみ詰める (space-first) </th>
<th>行頭約物すべて詰めない (space-start) </th>
</thead>
<tbody>
<td>
<div>
<p>　いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>　ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>　のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>　れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
<td>
<div>
<p>　いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>　ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>　のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>　れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
<td>
<div>
<p>　いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>　ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>　のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>　れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
</tbody>
</table>
</section>
<section id="headlines">
<h2>見出し一覧 [Headline lists]</h2>
<table class="test">
<thead>
<th>行頭約物すべて詰める (trim-auto) </th>
<th>折り返し行頭のみ詰める (space-first) </th>
<th>行頭約物すべて詰めない (space-start) </th>
</thead>
<tbody>
<td>
<div>
<ul>
<li>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき</li>
<li>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや</li>
<li>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ</li>
<li>のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</li>
<li>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた</li>
<li>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</li>
</ul>
</div>
</td>
<td>
<div>
<ul>
<li>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき</li>
<li>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや</li>
<li>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ</li>
<li>のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</li>
<li>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた</li>
<li>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</li>
</ul>
</div>
</td>
<td>
<div>
<ul>
<li>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき</li>
<li>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや</li>
<li>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ</li>
<li>のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</li>
<li>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた</li>
<li>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</li>
</ul>
</div>
</td>
</tbody>
</table>
</section>
<section id="lists">
<h2>リスト [Lists]</h2>
<table class="test">
<thead>
<th>行頭約物すべて詰める (trim-auto) </th>
<th>折り返し行頭のみ詰める (space-first) </th>
<th>行頭約物すべて詰めない (space-start) </th>
</thead>
<tbody>
<td>
<div>
<ul>
<li>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき</li>
<li>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや</li>
<li>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ</li>
<li>のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</li>
<li>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた</li>
<li>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</li>
</ul>
</div>
</td>
<td>
<div>
<ul>
<li>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき</li>
<li>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや</li>
<li>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ</li>
<li>のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</li>
<li>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた</li>
<li>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</li>
</ul>
</div>
</td>
<td>
<div>
<ul>
<li>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき</li>
<li>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや</li>
<li>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ</li>
<li>のおくやまけふこ、えてあさきゆめみ、しゑひもせすいろはにほへとちりぬ、るをわ「かよたれそつ」</li>
<li>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた</li>
<li>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</li>
</ul>
</div>
</td>
</tbody>
</table>
</section>
<section id="list-like">
<h2>brタグで区切られた番号付きリストもどき [Numbered list-like, br-separated]</h2>
<table class="test">
<thead>
<th>行頭約物すべて詰める (trim-auto) </th>
<th>折り返し行頭のみ詰める (space-first) </th>
<th>行頭約物すべて詰めない (space-start) </th>
</thead>
<tbody>
<td>
<div>
<p>（１）いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき<br>
（２）ゆめみしゑひもいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや<br>
（３）「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ<br>
（４）のおくやまけふこ、えてあさきゆめみしゑひもせいろはにほへとちりぬ、るをわ「かよたれそつ」<br>
（５）「ねならむうゐのおく、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた<br>
（６）れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</p>
</div>
</td>
<td>
<div>
<p>（１）いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき<br>
（２）ゆめみしゑひもいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや<br>
（３）「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ<br>
（４）のおくやまけふこ、えてあさきゆめみしゑひもせいろはにほへとちりぬ、るをわ「かよたれそつ」<br>
（５）「ねならむうゐのおく、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた<br>
（６）れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</p>
</div>
</td>
<td>
<div>
<p>（１）いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき<br>
（２）ゆめみしゑひもいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや<br>
（３）「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ<br>
（４）のおくやまけふこ、えてあさきゆめみしゑひもせいろはにほへとちりぬ、るをわ「かよたれそつ」<br>
（５）「ねならむうゐのおく、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた<br>
（６）れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを</p>
</div>
</td>
</tbody>
</table>
</section>
<section id="body-no-indent">
<h2>本文、字下げなし [Body without first-line indent (common on the web)]</h2>
<table class="test">
<thead>
<th>行頭約物すべて詰める (trim-auto) </th>
<th>折り返し行頭のみ詰める (space-first) </th>
<th>行頭約物すべて詰めない (space-start) </th>
</thead>
<tbody>
<td>
<div>
<p>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
<td>
<div>
<p>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
<td>
<div>
<p>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
</tbody>
</table>
</section>
<section id="body-space-indent">
<h2>本文、全角スペースで字下げ [Body with space-indented]</h2>
<table class="test">
<thead>
<th>行頭約物すべて詰める (trim-auto) </th>
<th>折り返し行頭のみ詰める (space-first) </th>
<th>行頭約物すべて詰めない (space-start) </th>
</thead>
<tbody>
<td>
<div>
<p>　いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>　ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>　「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>　のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>　「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>　れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
<td>
<div>
<p>　いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>　ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>　「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>　のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>　「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>　れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
<td>
<div>
<p>　いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>　ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>　「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>　のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>　「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>　れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
</tbody>
</table>
</section>
<section id="body-text-indent">
<h2>本文、text-indentで字下げ [Body with text-indented]</h2>
<table class="test">
<thead>
<th>行頭約物すべて詰める (trim-auto) </th>
<th>折り返し行頭のみ詰める (space-first) </th>
<th>行頭約物すべて詰めない (space-start) </th>
</thead>
<tbody>
<td>
<div>
<p>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
<td>
<div>
<p>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
<td>
<div>
<p>いろはにほへ、とち「りぬるをわか」よたれ、そつねならむうゐ、のおくや「まけふこえて」あさき。</p>
<p>ゆめみしゑひもせすいろ、はにほへとちり「ぬる、をわかよたれそ」つねならむうゐのおくや。</p>
<p>「まけふこえてあさきゆめ」みしゑひもせす、いろはに「ほへとちりぬるを」わかよたれそつねならむうゐ。</p>
<p>のおくやまけふこ、えてあさきゆめみ、しゑひも、せすいろはにほへとちりぬ、るをわ「かよたれそつ」</p>
<p>「ねならむうゐのおくやま、けふこえてあ「さきゆめみ」しゑひも、せすいろはにほへと、ちりぬるをわかよた。</p>
<p>れそつねならむう、ゐのおくやまけふこえてあさきゆめみしゑひもせす、いろはにほへとちりぬるを。</p>
</div>
</td>
</tbody>
</table>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment