MurakamiShinyu/css-text-spacing-trim-ja.html

## css-text-spacing-trim-ja.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <title>text-spacing-trimテスト</title>
  <style>
    p {
      border: 1px solid silver;
      text-align: justify;
    }

    b {
      font-weight: bold;
      color: maroon;
    }

    i {
      font-style: normal;
      font-size: 80%;
      color: navy;
    }

    #test-ts-normal {
      text-spacing-trim: normal;
    }

    #test-ts-auto {
      text-spacing-trim: auto;
    }

    #test-ts-trim-auto {
      text-spacing-trim: trim-auto;
    }

    #test-ts-trim-start {
      text-spacing-trim: trim-start;
    }

    #test-ts-space-first {
      text-spacing-trim: space-first;
    }

    #test-ts-space-all {
      text-spacing-trim: space-all;
    }

    #test-ts-trim-all {
      text-spacing-trim: trim-all;
    }
  </style>
</head>

<body>
  <h1>文字組版用CSSプロパティ、「text-spacing-trim」テスト</h1>
  <section id="test-ts-default">
    <h2>default</h2>
    <p>
      〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
    </p>
  </section>
  <section id="test-ts-normal">
    <h2>text-spacing-trim: normal</h2>
    <p>
      〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
    </p>
  </section>
  <section id="test-ts-auto">
    <h2>text-spacing-trim: auto</h2>
    <p>
      〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
    </p>
  </section>
  <section id="test-ts-trim-auto">
    <h2>text-spacing-trim: trim-auto</h2>
    <p>
      〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
    </p>
  </section>
  <section id="test-ts-trim-start">
    <h2>text-spacing-trim: trim-start</h2>
    <p>
      〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
    </p>
  </section>
  <section id="test-ts-space-first">
    <h2>text-spacing-trim: space-first</h2>
    <p>
      〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
    </p>
  </section>
  <section id="test-ts-space-all">
    <h2>text-spacing-trim: space-all</h2>
    <p>
      〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
    </p>
  </section>
  <section id="test-ts-trim-all">
    <h2>text-spacing-trim: trim-all</h2>
    <p>
      〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
    </p>
  </section>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8" />
	<title>text-spacing-trimテスト</title>
	<style>
	p {
	border: 1px solid silver;
	text-align: justify;
	}

	b {
	font-weight: bold;
	color: maroon;
	}

	i {
	font-style: normal;
	font-size: 80%;
	color: navy;
	}

	#test-ts-normal {
	text-spacing-trim: normal;
	}

	#test-ts-auto {
	text-spacing-trim: auto;
	}

	#test-ts-trim-auto {
	text-spacing-trim: trim-auto;
	}

	#test-ts-trim-start {
	text-spacing-trim: trim-start;
	}

	#test-ts-space-first {
	text-spacing-trim: space-first;
	}

	#test-ts-space-all {
	text-spacing-trim: space-all;
	}

	#test-ts-trim-all {
	text-spacing-trim: trim-all;
	}
	</style>
	</head>

	<body>
	<h1>文字組版用CSSプロパティ、「text-spacing-trim」テスト</h1>
	<section id="test-ts-default">
	<h2>default</h2>
	<p>
	〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
	</p>
	</section>
	<section id="test-ts-normal">
	<h2>text-spacing-trim: normal</h2>
	<p>
	〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
	</p>
	</section>
	<section id="test-ts-auto">
	<h2>text-spacing-trim: auto</h2>
	<p>
	〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
	</p>
	</section>
	<section id="test-ts-trim-auto">
	<h2>text-spacing-trim: trim-auto</h2>
	<p>
	〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
	</p>
	</section>
	<section id="test-ts-trim-start">
	<h2>text-spacing-trim: trim-start</h2>
	<p>
	〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
	</p>
	</section>
	<section id="test-ts-space-first">
	<h2>text-spacing-trim: space-first</h2>
	<p>
	〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
	</p>
	</section>
	<section id="test-ts-space-all">
	<h2>text-spacing-trim: space-all</h2>
	<p>
	〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
	</p>
	</section>
	<section id="test-ts-trim-all">
	<h2>text-spacing-trim: trim-all</h2>
	<p>
	〈約物〉は、〈句点〉・〈読点〉「括弧（類）」、他！　「《英（数）》字ABC-123とか。」〈約物〉は、<b>〈句点〉</b>・<b>〈読点〉「括弧（類）」</b>、他！　<b>「<i>《英（数）》</i>字<i>ABC-123</i>とか。」</b>
	</p>
	</section>
	</body>

	</html>