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

## 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>