moreaki · April 22, 2026 21:42
diff --git a/README.md b/README.md
diff --git a/inline-size-proof.html b/inline-size-proof.html
 <!doctype html>
 <meta charset="utf-8">
 <title>SVG inline-size visual proof</title>
 <style>
  @page { size: 420px 360px; margin: 0 }
  body { margin: 0; font-family: sans-serif; }
  .label { font: 12px sans-serif; margin: 8px 0 4px 8px; color: #333; }
  .row { display: flex; align-items: flex-start; gap: 12px; margin-left: 8px; }
  svg { border: 1px solid #ddd; }
 </style>
 <div class="label">vertical-rl + inline-size: 200px</div>
 <div class="row"><svg xmlns="http://www.w3.org/2000/svg"
     width="100" height="300" viewBox="0 0 100 300">

  <text x="62.5" y="25" inline-size="200"
    style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;">
    テキストは１０文字後に折り返されます。</text>

 </svg></div>
 <div class="label">direction: rtl + inline-size: 200px</div>
 <div class="row"><svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="250" y="30"
    style="font: 20px PakType Naqsh; inline-size: 200px; direction: rtl;">
    هذا النص يلتف في 200 بكسل.</text>

 </svg></div>
diff --git a/rtl-inline-size.html b/rtl-inline-size.html
 <style>@page { size: 300px 100px; margin: 0 } body { margin: 0 }</style><svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="250" y="30"
    style="font: 20px PakType Naqsh; inline-size: 200px; direction: rtl;">
    هذا النص يلتف في 200 بكسل.</text>

 </svg>
diff --git a/rtl-inline-size.svg b/rtl-inline-size.svg
diff --git a/vertical-inline-size.html b/vertical-inline-size.html
 <style>@page { size: 100px 300px; margin: 0 } body { margin: 0 }</style><svg xmlns="http://www.w3.org/2000/svg"
     width="100" height="300" viewBox="0 0 100 300">

  <text x="62.5" y="25" inline-size="200"
    style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;">
    テキストは１０文字後に折り返されます。</text>

 </svg>
diff --git a/vertical-inline-size.svg b/vertical-inline-size.svg
	<!doctype html>
	<meta charset="utf-8">
	<title>SVG inline-size visual proof</title>
	<style>
	@page { size: 420px 360px; margin: 0 }
	body { margin: 0; font-family: sans-serif; }
	.label { font: 12px sans-serif; margin: 8px 0 4px 8px; color: #333; }
	.row { display: flex; align-items: flex-start; gap: 12px; margin-left: 8px; }
	svg { border: 1px solid #ddd; }
	</style>
	<div class="label">vertical-rl + inline-size: 200px</div>
	<div class="row"><svg xmlns="http://www.w3.org/2000/svg"
	width="100" height="300" viewBox="0 0 100 300">

	<text x="62.5" y="25" inline-size="200"
	style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;">
	テキストは１０文字後に折り返されます。</text>

	</svg></div>
	<div class="label">direction: rtl + inline-size: 200px</div>
	<div class="row"><svg xmlns="http://www.w3.org/2000/svg"
	width="300" height="100" viewBox="0 0 300 100">

	<text x="250" y="30"
	style="font: 20px PakType Naqsh; inline-size: 200px; direction: rtl;">
	هذا النص يلتف في 200 بكسل.</text>

	</svg></div>
	<style>@page { size: 300px 100px; margin: 0 } body { margin: 0 }</style><svg xmlns="http://www.w3.org/2000/svg"
	width="300" height="100" viewBox="0 0 300 100">

	<text x="250" y="30"
	style="font: 20px PakType Naqsh; inline-size: 200px; direction: rtl;">
	هذا النص يلتف في 200 بكسل.</text>

	</svg>
	<style>@page { size: 100px 300px; margin: 0 } body { margin: 0 }</style><svg xmlns="http://www.w3.org/2000/svg"
	width="100" height="300" viewBox="0 0 100 300">

	<text x="62.5" y="25" inline-size="200"
	style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;">
	テキストは１０文字後に折り返されます。</text>

	</svg>