css-sizing/sizing-ttb-rl.svg

<svg xmlns='http://www.w3.org/2000/svg' width="420" height="240">

<style>
:root { transform: translate(.5px, .5px); font-size: 18px; }
text,tspan { font-family: sans-serif; text-anchor: middle; fill: currentColor; }
.vertical > tspan { text-anchor: start; }
.text-end text, .text-end tspan { text-anchor: end; }
.text-start text, .text-start tspan { text-anchor: start; }
.size      { color: red; font-weight: bold; }
.direction { color: black; }
</style>
<defs>
	<linearGradient id="direction-hg" x1="0" x2="100%" y1="0" y2="0">
<stop stop-color="black" stop-opacity="1" offset="0" />
<stop stop-color="black" stop-opacity="1" offset=".1" />
<stop stop-color="black" stop-opacity=".2" offset=".25" />
<stop stop-color="black" stop-opacity=".2" offset=".75" />
<stop stop-color="black" stop-opacity="1" offset=".9" />
<stop stop-color="black" stop-opacity="1" offset="1" />
	</linearGradient>
</defs>

<rect fill="white" x="0" y="0" width="100%" height="100%" />
	<g transform="translate(40,60)">

<rect stroke="black" stroke-width="7" fill="#f3f3f3" width="300" height="150" />

		<g class="direction" transform="translate(255, 15)">
			<g>
<path d="M 15 10 h -235 m 1 1" stroke="url(#direction-hg)" stroke-width="3" />
<path d='M -215 10 v -5 l -10 5 l 10 5 v -5' fill="currentcolor" />
<text x="-105" y="15">ブロック方向</text>
			</g>
			<g>
				<g transform="rotate(90)">
<path d="M 0 0 h 110 m 1 1" stroke="url(#direction-hg)" stroke-width="3" />
<path d='M 110 0 v -5 l 10 5 l -10 5 v -5' fill="currentcolor" />
				</g>
<text y="60">行内</text>
<text y="80">方向</text>
			</g>
		</g>

		<g style="color: #444; font-style: italic;" transform="translate(15, 135)" class="text-start">
<text>縦組</text>
		</g>
		<g transform="translate(180, 85)">
<text style="writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 40px; font-weight: bold; color: #ccc;">中文</text>
		</g>

		<g class="size">
			<g transform="translate(150, -30)">
<path d="M -150 18 v -10 h 300 v 10" stroke="currentcolor" stroke-width="3" fill="transparent" />
<text>横幅 = ブロックサイズ</text>
			</g>
			<g transform="translate(330, 0)rotate(90)translate(75, 0)">
<path d="M -76 18 v -10 h 150 v 10" stroke="currentcolor" stroke-width="3" fill="transparent" />
<text>縦幅 = 行内サイズ</text>
			</g>
		</g>
	</g>
</svg>