[css-fonts-4] Font matching algorithm benefits from graphs

litherum · litherum · commit 469519ad4148 · 2017-03-11T08:19:32.000-08:00
#1077
diff --git a/css-fonts-4/weightmatching.svg b/css-fonts-4/weightmatching.svg
@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
+	<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>
+	<g transform="scale(1, -1) translate(75, -250)" stroke="black" font-family="Times">
+		<line x1="0" y1="0" x2="0" y2="200"/>
+		<line x1="0" y1="0" x2="500" y2="0"/>
+		<text transform="scale(1, -1) translate(210, 100)" font-size="24">Weight</text>
+		<text transform="scale(1, -1) rotate(-90) translate(50, -25)" font-size="24">Distance</text>
+		<g transform="translate(50, -50)">
+			<line x1="0" y1="0" x2="0" y2="10"/>
+			<line x1="0" y1="0" x2="50" y2="0"/>
+			<line x1="50" y1="0" x2="50" y2="10"/>
+			<text transform="scale(1, -1) translate(21, 20)" font-size="12">A</text>
+		</g>
+		<g transform="translate(195, -50)">
+			<line x1="0" y1="0" x2="0" y2="10"/>
+			<line x1="0" y1="0" x2="10" y2="0"/>
+			<line x1="10" y1="0" x2="10" y2="10"/>
+			<text transform="scale(1, -1) translate(2, 20)" font-size="12">B</text>
+		</g>
+		<g transform="translate(220, -50)">
+			<line x1="0" y1="0" x2="0" y2="10"/>
+			<line x1="0" y1="0" x2="10" y2="0"/>
+			<line x1="10" y1="0" x2="10" y2="10"/>
+			<text transform="scale(1, -1) translate(1, 20)" font-size="12">C</text>
+		</g>
+		<g transform="translate(245, -50)">
+			<line x1="0" y1="0" x2="0" y2="10"/>
+			<line x1="0" y1="0" x2="10" y2="0"/>
+			<line x1="10" y1="0" x2="10" y2="10"/>
+			<text transform="scale(1, -1) translate(1, 20)" font-size="12">D</text>
+		</g>
+		<g transform="translate(300, -50)">
+			<line x1="0" y1="0" x2="0" y2="10"/>
+			<line x1="0" y1="0" x2="50" y2="0"/>
+			<line x1="50" y1="0" x2="50" y2="10"/>
+			<text transform="scale(1, -1) translate(21, 20)" font-size="12">E</text>
+		</g>
+		<g>
+			<line x1="50" y1="-5" x2="50" y2="5"/>
+			<text transform="scale(1, -1)" x="0" y="18" font-size="12">Min Family Weight</text>
+			<line x1="200" y1="-5" x2="200" y2="5"/>
+			<text transform="scale(1, -1)" x="190" y="18" font-size="12">400</text>
+			<line x1="250" y1="-5" x2="250" y2="5"/>
+			<text transform="scale(1, -1)" x="240" y="18" font-size="12">500</text>
+			<line x1="350" y1="-5" x2="350" y2="5"/>
+			<text transform="scale(1, -1)" x="300" y="18" font-size="12">Max Family Weight</text>
+		</g>
+		<line x1="350" y1="0" x2="350" y2="200" stroke-dasharray="5, 5"/>
+		<line x1="50" y1="0" x2="50" y2="200" stroke-dasharray="5, 5"/>
+		<line x1="250" y1="25" x2="50" y2="125"/>
+		<line x1="250" y1="125" x2="350" y2="175"/>
+		<circle cx="200" cy="25" r="5" fill="black"/>
+		<circle cx="250" cy="0" r="5" fill="black"/>
+		<circle cx="250" cy="25" r="5" fill="white"/>
+		<circle cx="200" cy="50" r="5" fill="white"/>
+		<circle cx="250" cy="125" r="5" fill="white"/>
+	</g>
+</svg>
diff --git a/css-fonts-4/weightmatching2.svg b/css-fonts-4/weightmatching2.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
+	<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>
+	<g transform="scale(1, -1) translate(75, -250)" stroke="black" font-family="Times">
+		<line x1="0" y1="0" x2="0" y2="200"/>
+		<line x1="0" y1="0" x2="500" y2="0"/>
+		<text transform="scale(1, -1) translate(210, 100)" font-size="24">Weight</text>
+		<text transform="scale(1, -1) rotate(-90) translate(50, -25)" font-size="24">Distance</text>
+		<g transform="translate(50, -50)">
+			<line x1="0" y1="0" x2="0" y2="10"/>
+			<line x1="0" y1="0" x2="50" y2="0"/>
+			<line x1="50" y1="0" x2="50" y2="10"/>
+			<text transform="scale(1, -1) translate(21, 20)" font-size="12">A</text>
+		</g>
+		<g transform="translate(125, -50)">
+			<line x1="0" y1="0" x2="0" y2="10"/>
+			<line x1="0" y1="0" x2="50" y2="0"/>
+			<line x1="50" y1="0" x2="50" y2="10"/>
+			<text transform="scale(1, -1) translate(21, 20)" font-size="12">B</text>
+		</g>
+		<g transform="translate(300, -50)">
+			<line x1="0" y1="0" x2="0" y2="10"/>
+			<line x1="0" y1="0" x2="50" y2="0"/>
+			<line x1="50" y1="0" x2="50" y2="10"/>
+			<text transform="scale(1, -1) translate(21, 20)" font-size="12">C</text>
+		</g>
+		<g>
+			<line x1="50" y1="-5" x2="50" y2="5"/>
+			<text transform="scale(1, -1)" x="0" y="18" font-size="12">Min Family Weight</text>
+			<line x1="150" y1="-5" x2="150" y2="5"/>
+			<text transform="scale(1, -1)" x="140" y="18" font-size="12">300</text>
+			<line x1="200" y1="-5" x2="200" y2="5"/>
+			<text transform="scale(1, -1)" x="190" y="18" font-size="12">400</text>
+			<line x1="250" y1="-5" x2="250" y2="5"/>
+			<text transform="scale(1, -1)" x="240" y="18" font-size="12">500</text>
+			<line x1="350" y1="-5" x2="350" y2="5"/>
+			<text transform="scale(1, -1)" x="300" y="18" font-size="12">Max Family Weight</text>
+		</g>
+		<line x1="350" y1="0" x2="350" y2="200" stroke-dasharray="5, 5"/>
+		<line x1="50" y1="0" x2="50" y2="200" stroke-dasharray="5, 5"/>
+		<line x1="150" y1="0" x2="50" y2="50"/>
+		<line x1="150" y1="50" x2="350" y2="150"/>
+		<circle cx="150" cy="50" r="5" fill="white"/>
+	</g>
+</svg>
