[css-sizing][css-writing-modes] Convert ASCII diagrams to SVG.

tabatkins · tabatkins · commit 7b4e6415d15b · 2018-06-13T15:04:31.000-07:00
diff --git a/css-sizing-3/images/sizing-ltr-tb.svg b/css-sizing-3/images/sizing-ltr-tb.svg
@@ -0,0 +1,77 @@
+<svg xmlns='http://www.w3.org/2000/svg' width="460" height="280">
+	<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: hsl(120, 80%, 30%); }
+		.direction { color: hsl(240, 80%, 50%); }
+		.side      { color: hsl(  0, 80%, 40%); }
+	</style>
+	<defs>
+		<linearGradient id="direction-hg" x1="0" x2="100%" y1="0" y2="0">
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="0" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".1" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".25" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".75" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".9" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="1" />
+		</linearGradient>
+		<linearGradient id="direction-vg" x1="0" x2="0" y1="0" y2="100%">
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="0" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".2" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".35" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".8" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".9" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="1" />
+		</linearGradient>
+	</defs>
+	<rect fill="white" x="0" y="0" width="100%" height="100%" stroke="black"/>
+	<g transform="translate(60,80)">
+		<rect stroke="black" stroke-width="7" fill="#f3f3f3" width="300" height="150" />
+		<g class="direction">
+			<g>
+				<path d="M 30 25 h 235 m 1 1" stroke="url(#direction-hg)" stroke-width="3" />
+				<path d='M 265 25 v -5 l 10 5 l -10 5 v -5' fill="currentcolor" />
+				<text x="150" y="30">inline direction</text>
+			</g>
+			<g transform="translate(45, 75)">
+				<path d="M 0 -60 v 110 m 1 1" stroke="url(#direction-vg)" stroke-width="3" />
+				<path d='M 0 50 h -5 l 5 10 l 5 -10 h -5' fill="currentcolor" />
+				<text>block</text>
+				<text y="20">direction</text>
+			</g>
+		</g>
+		<g style="color: black; font-style: italic;" transform="translate(285, 115)" class="text-end">
+			<text>horizontal</text>
+			<text y="20">writing mode</text>
+		</g>
+		<g class="side" style="font-size: 14px">
+			<g transform="translate(-10, 75) rotate(-90)">
+				<text>▼ left / inline-start side</text>
+			</g>
+			<g transform="translate(310, 75) rotate(90)">
+				<text>right / inline-end side ▼</text>
+			</g>
+			<g transform="translate(150, -10)">
+				<text>top / block-start side ▼</text>
+			</g>
+			<g transform="translate(150, 170)">
+				<text>bottom / block-end side ▲</text>
+			</g>
+		</g>
+		<g class="size">
+			<g transform="translate(150, -45)">
+				<path d="M -150 18 v -10 h 300 v 10" stroke="currentcolor" stroke-width="3" fill="transparent" />
+				<text>width / inline-size</text>
+			</g>
+			<g transform="translate(350, 0)">
+				<path d="M -18 0 h 10 v 150 h -10" stroke="currentcolor" stroke-width="3" fill="transparent" />
+				<g transform="rotate(90)">
+					<text x="75">height / block-size</text>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/css-sizing-3/images/sizing-ttb-rl.svg b/css-sizing-3/images/sizing-ttb-rl.svg
@@ -0,0 +1,77 @@
+<svg xmlns='http://www.w3.org/2000/svg' width="460" height="280">
+	<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: hsl(120, 80%, 30%); }
+		.direction { color: hsl(240, 80%, 50%); }
+		.side      { color: hsl(  0, 80%, 40%); }
+	</style>
+	<defs>
+		<linearGradient id="direction-hg" x1="0" x2="100%" y1="0" y2="0">
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="0" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".1" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".25" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".75" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".9" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="1" />
+		</linearGradient>
+		<linearGradient id="direction-vg" x1="0" x2="0" y1="0" y2="100%">
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="0" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".2" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".35" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".8" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".9" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="1" />
+		</linearGradient>
+	</defs>
+	<rect fill="white" x="0" y="0" width="100%" height="100%" />
+	<g transform="translate(60,80)">
+		<rect stroke="black" stroke-width="7" fill="#f3f3f3" width="300" height="150" />
+		<g class="direction">
+			<g>
+				<path d="M 40 25 h 235 m 1 1" stroke="url(#direction-hg)" stroke-width="3" />
+				<path d='M 40 25 v -5 l -10 5 l 10 5 v -5' fill="currentcolor" />
+				<text x="150" y="30">block direction</text>
+			</g>
+			<g transform="translate(255, 75)">
+				<path d="M 0 -60 v 110 m 1 1" stroke="url(#direction-vg)" stroke-width="3" />
+				<path d='M 0 50 h -5 l 5 10 l 5 -10 h -5' fill="currentcolor" />
+				<text>inline</text>
+				<text y="20">direction</text>
+			</g>
+		</g>
+		<g style="color: black; font-style: italic;" transform="translate(15, 115)" class="text-start">
+			<text>vertical</text>
+			<text y="20">writing mode</text>
+		</g>
+		<g class="side" style="font-size: 14px">
+			<g transform="translate(-10, 75) rotate(-90)">
+				<text>▼ left / block-end side</text>
+			</g>
+			<g transform="translate(310, 75) rotate(90)">
+				<text>right / block-start side ▼</text>
+			</g>
+			<g transform="translate(150, -10)">
+				<text>top / inline-start side ▼</text>
+			</g>
+			<g transform="translate(150, 170)">
+				<text>bottom / inline-end side ▲</text>
+			</g>
+		</g>
+		<g class="size">
+			<g transform="translate(150, -45)">
+				<path d="M -150 18 v -10 h 300 v 10" stroke="currentcolor" stroke-width="3" fill="transparent" />
+				<text>width / block-size</text>
+			</g>
+			<g transform="translate(350, 0)">
+				<path d="M -18 0 h 10 v 150 h -10" stroke="currentcolor" stroke-width="3" fill="transparent" />
+				<g transform="rotate(90)">
+					<text x="75">height / inline-size</text>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/css-writing-modes-3/Overview.bs b/css-writing-modes-3/Overview.bs
@@ -1577,39 +1577,11 @@ Flow-relative Directions</h3>
 
   <div class="example">
     <p>An English (LTR-TB) block:</p>
-    <pre class="ascii-art">
-                  &lt;---- width / inline-size ---&gt;
-
-                             top side/
-                          block-start side
-                  +------------------------------+                  A
-      left side/  |   ---inline direction --->   |  right side/     |
-inline-start side |  |                           |  inline-end side |
-                  |  | block      * horizontal * |                height/
-                  |  | direction  *writing mode* |              block-size
-                  |  V                           |                  |
-                  +------------------------------+                  V
-                             bottom side/
-                            block-end side
-    </pre>
+    <img src="diagrams/sizing-ltr-tb.svg">
   </div>
   <div class="example">
     <p>A vertical Japanese block (TTB-RL):</p>
-    <pre class="ascii-art">
-                  &lt;---- width / block-size ---&gt;
-
-                             top side/
-                         inline-start side
-                  +------------------------------+                  A
-      left side/  |    &lt;---block direction---    |  right side/     |
-  block-end side  |                           |  | block-start side |
-                  |  *  vertical  *     inline|  |                height/
-                  |  *writing mode*  direction|  |              inline-size
-                  |                           V  |                  |
-                  +------------------------------+                  V
-                            bottom side/
-                           inline-end side
-    </pre>
+    <img src="diagrams/sizing-ttb-rl.svg">
   </div>
 
 <h3 id="line-directions">
diff --git a/css-writing-modes-3/diagrams/sizing-ltr-tb.svg b/css-writing-modes-3/diagrams/sizing-ltr-tb.svg
@@ -0,0 +1,77 @@
+<svg xmlns='http://www.w3.org/2000/svg' width="460" height="280">
+	<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: hsl(120, 80%, 30%); }
+		.direction { color: hsl(240, 80%, 50%); }
+		.side      { color: hsl(  0, 80%, 40%); }
+	</style>
+	<defs>
+		<linearGradient id="direction-hg" x1="0" x2="100%" y1="0" y2="0">
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="0" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".1" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".25" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".75" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".9" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="1" />
+		</linearGradient>
+		<linearGradient id="direction-vg" x1="0" x2="0" y1="0" y2="100%">
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="0" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".2" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".35" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".8" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".9" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="1" />
+		</linearGradient>
+	</defs>
+	<rect fill="white" x="0" y="0" width="100%" height="100%" />
+	<g transform="translate(60,80)">
+		<rect stroke="black" stroke-width="7" fill="#f3f3f3" width="300" height="150" />
+		<g class="direction">
+			<g>
+				<path d="M 30 25 h 235 m 1 1" stroke="url(#direction-hg)" stroke-width="3" />
+				<path d='M 265 25 v -5 l 10 5 l -10 5 v -5' fill="currentcolor" />
+				<text x="150" y="30">inline direction</text>
+			</g>
+			<g transform="translate(45, 75)">
+				<path d="M 0 -60 v 110 m 1 1" stroke="url(#direction-vg)" stroke-width="3" />
+				<path d='M 0 50 h -5 l 5 10 l 5 -10 h -5' fill="currentcolor" />
+				<text>block</text>
+				<text y="20">direction</text>
+			</g>
+		</g>
+		<g style="color: black; font-style: italic;" transform="translate(285, 115)" class="text-end">
+			<text>horizontal</text>
+			<text y="20">writing mode</text>
+		</g>
+		<g class="side" style="font-size: 14px">
+			<g transform="translate(-10, 75) rotate(-90)">
+				<text>▼ left / inline-start side</text>
+			</g>
+			<g transform="translate(310, 75) rotate(90)">
+				<text>right / inline-end side ▼</text>
+			</g>
+			<g transform="translate(150, -10)">
+				<text>top / block-start side ▼</text>
+			</g>
+			<g transform="translate(150, 170)">
+				<text>bottom / block-end side ▲</text>
+			</g>
+		</g>
+		<g class="size">
+			<g transform="translate(150, -45)">
+				<path d="M -150 18 v -10 h 300 v 10" stroke="currentcolor" stroke-width="3" fill="transparent" />
+				<text>width / inline-size</text>
+			</g>
+			<g transform="translate(350, 0)">
+				<path d="M -18 0 h 10 v 150 h -10" stroke="currentcolor" stroke-width="3" fill="transparent" />
+				<g transform="rotate(90)">
+					<text x="75">height / block-size</text>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/css-writing-modes-3/diagrams/sizing-ttb-rl.svg b/css-writing-modes-3/diagrams/sizing-ttb-rl.svg
@@ -0,0 +1,77 @@
+<svg xmlns='http://www.w3.org/2000/svg' width="460" height="280">
+	<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: hsl(120, 80%, 30%); }
+		.direction { color: hsl(240, 80%, 50%); }
+		.side      { color: hsl(  0, 80%, 40%); }
+	</style>
+	<defs>
+		<linearGradient id="direction-hg" x1="0" x2="100%" y1="0" y2="0">
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="0" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".1" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".25" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".75" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".9" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="1" />
+		</linearGradient>
+		<linearGradient id="direction-vg" x1="0" x2="0" y1="0" y2="100%">
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="0" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".2" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".35" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity=".2" offset=".8" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset=".9" />
+			<stop stop-color="hsl(240,80%,50%)" stop-opacity="1" offset="1" />
+		</linearGradient>
+	</defs>
+	<rect fill="white" x="0" y="0" width="100%" height="100%"/>
+	<g transform="translate(60,80)">
+		<rect stroke="black" stroke-width="7" fill="#f3f3f3" width="300" height="150" />
+		<g class="direction">
+			<g>
+				<path d="M 40 25 h 235 m 1 1" stroke="url(#direction-hg)" stroke-width="3" />
+				<path d='M 40 25 v -5 l -10 5 l 10 5 v -5' fill="currentcolor" />
+				<text x="150" y="30">block direction</text>
+			</g>
+			<g transform="translate(255, 75)">
+				<path d="M 0 -60 v 110 m 1 1" stroke="url(#direction-vg)" stroke-width="3" />
+				<path d='M 0 50 h -5 l 5 10 l 5 -10 h -5' fill="currentcolor" />
+				<text>inline</text>
+				<text y="20">direction</text>
+			</g>
+		</g>
+		<g style="color: black; font-style: italic;" transform="translate(15, 115)" class="text-start">
+			<text>vertical</text>
+			<text y="20">writing mode</text>
+		</g>
+		<g class="side" style="font-size: 14px">
+			<g transform="translate(-10, 75) rotate(-90)">
+				<text>▼ left / block-end side</text>
+			</g>
+			<g transform="translate(310, 75) rotate(90)">
+				<text>right / block-start side ▼</text>
+			</g>
+			<g transform="translate(150, -10)">
+				<text>top / inline-start side ▼</text>
+			</g>
+			<g transform="translate(150, 170)">
+				<text>bottom / inline-end side ▲</text>
+			</g>
+		</g>
+		<g class="size">
+			<g transform="translate(150, -45)">
+				<path d="M -150 18 v -10 h 300 v 10" stroke="currentcolor" stroke-width="3" fill="transparent" />
+				<text>width / block-size</text>
+			</g>
+			<g transform="translate(350, 0)">
+				<path d="M -18 0 h 10 v 150 h -10" stroke="currentcolor" stroke-width="3" fill="transparent" />
+				<g transform="rotate(90)">
+					<text x="75">height / inline-size</text>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/css-writing-modes-4/Overview.bs b/css-writing-modes-4/Overview.bs
@@ -1652,39 +1652,11 @@ Flow-relative Directions</h3>
 
   <div class="example">
     <p>An English (LTR-TB) block:</p>
-    <pre class="ascii-art">
-                  &lt;---- width / inline-size ---&gt;
-
-                             top side/
-                          block-start side
-                  +------------------------------+                  A
-      left side/  |   ---inline direction --->   |  right side/     |
-inline-start side |  |                           |  inline-end side |
-                  |  | block      * horizontal * |                height/
-                  |  | direction  *writing mode* |              block-size
-                  |  V                           |                  |
-                  +------------------------------+                  V
-                             bottom side/
-                            block-end side
-    </pre>
+    <img src="diagrams/sizing-ltr-tb.svg">
   </div>
   <div class="example">
     <p>A vertical Japanese block (TTB-RL):</p>
-    <pre class="ascii-art">
-                  &lt;---- width / block-size ---&gt;
-
-                             top side/
-                         inline-start side
-                  +------------------------------+                  A
-      left side/  |    &lt;---block direction---    |  right side/     |
-  block-end side  |                           |  | block-start side |
-                  |  *  vertical  *     inline|  |                height/
-                  |  *writing mode*  direction|  |              inline-size
-                  |                           V  |                  |
-                  +------------------------------+                  V
-                            bottom side/
-                           inline-end side
-    </pre>
+    <img src="diagrams/sizing-ttb-rl.svg">
   </div>
 
 <h3 id="line-directions">
diff --git a/css-writing-modes-4/diagrams/sizing-ltr-tb.svg b/css-writing-modes-4/diagrams/sizing-ltr-tb.svg
diff --git a/css-writing-modes-4/diagrams/sizing-ttb-rl.svg b/css-writing-modes-4/diagrams/sizing-ttb-rl.svg
