[css-sizing][css-writing-modes] Add language labels to diagrams.

tabatkins · tabatkins · commit 953ee7f9b031 · 2018-06-13T15:10:56.000-07:00
diff --git a/css-sizing-3/images/sizing-ltr-tb.svg b/css-sizing-3/images/sizing-ltr-tb.svg
@@ -47,6 +47,9 @@
 			<text>horizontal</text>
 			<text y="20">writing mode</text>
 		</g>
+		<g transform="translate(170, 85)">
+			<text style="font-size: 40px; font-weight: bold; color: #ccc;">English</text>
+		</g>
 		<g class="side" style="font-size: 14px">
 			<g transform="translate(-10, 75) rotate(-90)">
 				<text>▼ left / inline-start side</text>
diff --git a/css-sizing-3/images/sizing-ttb-rl.svg b/css-sizing-3/images/sizing-ttb-rl.svg
@@ -47,6 +47,9 @@
 			<text>vertical</text>
 			<text y="20">writing mode</text>
 		</g>
+		<g transform="translate(180, 85)">
+			<text style="writing-mode: ttb-rl; writing-mode: vertical-rl; font-size: 40px; font-weight: bold; color: #ccc;">中文</text>
+		</g>
 		<g class="side" style="font-size: 14px">
 			<g transform="translate(-10, 75) rotate(-90)">
 				<text>▼ left / block-end side</text>
diff --git a/css-writing-modes-3/diagrams/sizing-ltr-tb.svg b/css-writing-modes-3/diagrams/sizing-ltr-tb.svg
@@ -27,7 +27,7 @@
 			<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%" />
+	<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">
@@ -47,6 +47,9 @@
 			<text>horizontal</text>
 			<text y="20">writing mode</text>
 		</g>
+		<g transform="translate(170, 85)">
+			<text style="font-size: 40px; font-weight: bold; color: #ccc;">English</text>
+		</g>
 		<g class="side" style="font-size: 14px">
 			<g transform="translate(-10, 75) rotate(-90)">
 				<text>▼ left / inline-start side</text>
diff --git a/css-writing-modes-3/diagrams/sizing-ttb-rl.svg b/css-writing-modes-3/diagrams/sizing-ttb-rl.svg
@@ -27,7 +27,7 @@
 			<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%"/>
+	<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">
@@ -47,6 +47,9 @@
 			<text>vertical</text>
 			<text y="20">writing mode</text>
 		</g>
+		<g transform="translate(180, 85)">
+			<text style="writing-mode: ttb-rl; writing-mode: vertical-rl; font-size: 40px; font-weight: bold; color: #ccc;">中文</text>
+		</g>
 		<g class="side" style="font-size: 14px">
 			<g transform="translate(-10, 75) rotate(-90)">
 				<text>▼ left / block-end side</text>
diff --git a/css-writing-modes-4/diagrams/sizing-ltr-tb.svg b/css-writing-modes-4/diagrams/sizing-ltr-tb.svg
@@ -27,7 +27,7 @@
 			<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%" />
+	<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">
@@ -47,6 +47,9 @@
 			<text>horizontal</text>
 			<text y="20">writing mode</text>
 		</g>
+		<g transform="translate(170, 85)">
+			<text style="font-size: 40px; font-weight: bold; color: #ccc;">English</text>
+		</g>
 		<g class="side" style="font-size: 14px">
 			<g transform="translate(-10, 75) rotate(-90)">
 				<text>▼ left / inline-start side</text>
diff --git a/css-writing-modes-4/diagrams/sizing-ttb-rl.svg b/css-writing-modes-4/diagrams/sizing-ttb-rl.svg
@@ -47,6 +47,9 @@
 			<text>vertical</text>
 			<text y="20">writing mode</text>
 		</g>
+		<g transform="translate(180, 85)">
+			<text style="writing-mode: ttb-rl; writing-mode: vertical-rl; font-size: 40px; font-weight: bold; color: #ccc;">中文</text>
+		</g>
 		<g class="side" style="font-size: 14px">
 			<g transform="translate(-10, 75) rotate(-90)">
 				<text>▼ left / block-end side</text>
