Add automated snapshot HTML generator

2020-02-16 06:35:14 -08:00 · 2020-02-16 06:35:14 -08:00 · 34307b6e85
commit 34307b6e85
parent fe58849ffb
33 changed files with 2225 additions and 1644 deletions
--- a/README.md
+++ b/README.md
@ -205,8 +205,8 @@ The current available styles for `design`/`upright`/`italic`/`oblique` options a
    * `v-t-standard` : Standard `t` shape (default).
    * `v-t-cross` : Futura-like `t` shape.
  * Styles for letter `Q`:
-    * `v-q-taily` : `Q` with a curly tail (default).
-    * `v-q-straight` : `Q` with a straight tail in the old versions.
+    * `v-capital-q-taily` : `Q` with a curly tail (default).
+    * `v-capital-q-straight` : `Q` with a straight tail in the old versions.
  * Styles for letter `y`:
    * `v-y-straight`: More-straight letter `y`.
    * `v-y-curly`: More curly letter `y`, like Iosevka 2.x.
@ -273,7 +273,7 @@ The current available styles for `design`/`upright`/`italic`/`oblique` options a
  * Styles for letter `R`:
    * `v-capital-r-straight`: Standard, straight `R` (default).
    * `v-capital-r-curly`: Slightly curly `R`, like Iosevka 2.x.
-  * Styles for letter `Y`, `У`:
+  * Styles for letter `Y`:
    * `v-capital-y-straight`: Standard, straight `Y` (default).
    * `v-capital-y-curly`: Slightly curly `Y`, like Iosevka 2.x. 
  * Styles for letter `A`, `Λ`, `Δ`:
--- a/gen/build-glyphs.ptl
+++ b/gen/build-glyphs.ptl
@ -125,28 +125,13 @@ define [buildGlyphs para recursive recursiveCodes] : begin
 	# Basic knots
 	define spirofns : spirokit.SetupBuilders : object globalTransform CONTRAST STROKE Glyph para SUPERNESS

-	sketch # .null
-		set-width 0
-		set currentGlyph.cmpPriority (9998)
-		save '.null'
-
-	sketch # nonmarkingreturn
-		set-width WIDTH
-		set currentGlyph.cmpPriority (-1)
-		save 'nonmarkingreturn' 0x000D
-
-	sketch # space
-		local df : DivFrame para.diversityF
-		set-width df.width
-		include df.markSet.e
-		save 'space' ' '
-
 	# IDKY, but wrapping "metrics" prevents Node.js on Arch modifying it.
-	define $Capture$ : object [metrics : Object.create metrics] $NamedParameterPair$ $donothing$ para recursive recursiveCodes variantSelector glyphs glyphList unicodeGlyphs create-glyph $save$ save-glyph spirofns MarkSet MARK BASE AS_BASE ALSO_METRICS pickHash dependencyProfile getDependencyProfile buildGlyphs newtemp tagged includeGlyphPart compsiteMarkSet DivFrame fontMetrics
+	define $$Capture$$ : object [metrics : Object.create metrics] $NamedParameterPair$ $donothing$ para recursive recursiveCodes variantSelector glyphs glyphList unicodeGlyphs create-glyph $save$ save-glyph spirofns MarkSet MARK BASE AS_BASE ALSO_METRICS pickHash dependencyProfile getDependencyProfile buildGlyphs newtemp tagged includeGlyphPart compsiteMarkSet DivFrame fontMetrics

 	### HERE WE GO
 	run-glyph-module '../glyphs/common-shapes.js'
-	run-glyph-module '../glyphs/Overmarks.js'
+	run-glyph-module '../glyphs/space.js'
+	run-glyph-module '../glyphs/overmarks.js'

 	# Unified letters
 	run-glyph-module '../glyphs/letters-unified-basic.js'
--- a/glyphs/letters-unified-basic.ptl
+++ b/glyphs/letters-unified-basic.ptl
@ -1305,7 +1305,7 @@ glyph-block LetterUnified-Basic : begin
 	### y
 	do "y and related ============================================================================"
 		define [GenSmallYShape straightBar] : begin
-			local useCurlyBottom : para.isItalic || SLAB || straightBar
+			local useCurlyBottom : SLAB || straightBar
 			local px1 0.84
 			local py1 : linreg 18 0.8 126 0.76 STROKE
 			local px2 0.95
--- a/glyphs/space.ptl
+++ b/glyphs/space.ptl
@ -0,0 +1,22 @@
+$$include '../meta/macros.ptl'
+
+import [mix linreg clamp fallback] from '../support/utils'
+
+glyph-module
+
+glyph-block Symbol-Mosaic-NotDef : begin
+	sketch # .null
+		set-width 0
+		set currentGlyph.cmpPriority (9998)
+		save '.null'
+
+	sketch # nonmarkingreturn
+		set-width WIDTH
+		set currentGlyph.cmpPriority (-1)
+		save 'nonmarkingreturn' 0x000D
+
+	sketch # space
+		local df : DivFrame para.diversityF
+		set-width df.width
+		include df.markSet.e
+		save 'space' ' '
--- a/images/charvars.png
+++ b/images/charvars.png
--- a/images/download-options.png
+++ b/images/download-options.png
--- a/images/family.png
+++ b/images/family.png
--- a/images/languages.png
+++ b/images/languages.png
--- a/images/ligations.png
+++ b/images/ligations.png
--- a/images/matrix.png
+++ b/images/matrix.png
--- a/images/preview-all.png
+++ b/images/preview-all.png
--- a/images/stylesets.png
+++ b/images/stylesets.png
--- a/images/variants.png
+++ b/images/variants.png
--- a/images/weights.png
+++ b/images/weights.png
--- a/meta/macros.ptl
+++ b/meta/macros.ptl
@ -113,7 +113,7 @@ define-macro sketch : syntax-rules
 			begin @::[steps.map formOf]
 			set $Capture$.dependencyProfile.(currentGlyph.name) : $Capture$.getDependencyProfile currentGlyph
 			return currentGlyph
-		]].call [$Capture$.create-glyph @tcn $donothing$]]
+		]].call [create-glyph @tcn $donothing$]]

 define-macro branch : syntax-rules
 	`[branch @::steps] : begin
@ -129,13 +129,13 @@ define-macro branch : syntax-rules
 			begin @::[steps.map formOf]
 			set $Capture$.dependencyProfile.(currentGlyph.name) : $Capture$.getDependencyProfile currentGlyph
 			return currentGlyph
-		]].call [$Capture$.create-glyph @tcn [lambda : begin [this.include currentGlyph true] [set this.advanceWidth currentGlyph.advanceWidth]]]]
+		]].call [create-glyph @tcn [lambda : begin [this.include currentGlyph true] [set this.advanceWidth currentGlyph.advanceWidth]]]]

 define-macro save : syntax-rules
 	`[save @::args] : dirty `[$save$.call currentGlyph @::args]

 define-macro run-glyph-module : syntax-rules
-	`[run-glyph-module @path] : dirty `[[import @path].apply.call $Capture$]
+	`[run-glyph-module @path] : dirty `[[import @path].apply.call $$Capture$$]

 define-macro glyph-block-import : syntax-rules
 	`[glyph-block-import @_blockName] : begin
@ -210,7 +210,7 @@ define-macro glyph-block : syntax-rules
 			([typeof form] === "string") : set variableSet.(form) true

 		traceBody body
-		traceBody `[$save$ $NamedParameterPair$ $donothing$]
+		traceBody `[$save$ $NamedParameterPair$ $donothing$ create-glyph]

 		set externEnv.$glyphBlockVariableUsage$ variableSet

--- a/package.json
+++ b/package.json
@ -31,6 +31,8 @@
 		"patrisika-scopes": "^0.11.1",
 		"eslint": "^5.2.0",
 		"stylus": "^0.54.5",
-		"semver": "^7.1.1"
+		"semver": "^7.1.1",
+		"ejs": "^3.0.1",
+		"fs-extra": "^8.1.0"
 	}
 }
--- a/snapshot/get-snap.js
+++ b/snapshot/get-snap.js
@ -1,12 +1,12 @@
 const { app, BrowserWindow } = require("electron");
-var argv = require("yargs").argv;
-var fs = require("fs");
-var cp = require("child_process");
+let argv = require("yargs").argv;
+let fs = require("fs");
+let cp = require("child_process");

-var mainWindow = null;
-var allWindowClosed = false;
-var pendingTasks = 0;
-var zoom = 2;
+let mainWindow = null;
+let allWindowClosed = false;
+let pendingTasks = 0;
+let zoom = 2;

 function checkQuit() {
 	if (allWindowClosed && pendingTasks == 0) app.quit();
@ -18,7 +18,7 @@ app.on("window-all-closed", function() {
 });

 function combineImages(images, outfile, width, height, doubleTrim) {
-	var command =
+	let command =
 		"magick " +
 		images.join(" ") +
 		" -append -crop " +
@ -39,11 +39,11 @@ function combineImages(images, outfile, width, height, doubleTrim) {
 	});
 }

-var ipc = require("electron").ipcMain;
+let ipc = require("electron").ipcMain;
 function GOTO(phase) {
 	currentPhase = phase;
 }
-var phases = {
+const phases = {
 	prepare: function(event, arg) {
 		console.log(arg);
 		GOTO(phases["receive-rect"]);
@ -52,17 +52,17 @@ var phases = {
 		pendingTasks += 1;
 		console.log("Received rect.");
 		rect = JSON.parse(JSON.stringify(rect));
-		var file = argv.dir + "/" + rect.name + ".png";
-		var j = 0;
-		var totalFiles = Math.ceil(rect.height / rect.windowHeight);
-		var pendingFiles = totalFiles;
+		let file = argv.dir + "/" + rect.name + ".png";
+		let j = 0;
+		let totalFiles = Math.ceil(rect.height / rect.windowHeight);
+		let pendingFiles = totalFiles;
 		step();

 		function doneFileWrite() {
 			pendingFiles -= 1;
 			if (pendingFiles <= 0) {
-				var images = [];
-				for (var k = 0; k < j; k++) {
+				let images = [];
+				for (let k = 0; k < j; k++) {
 					images.push(argv.dir + "/" + rect.name + "." + k + ".png");
 				}
 				combineImages(
@ -96,7 +96,7 @@ var phases = {
 		}
 	}
 };
-var currentPhase = phases["prepare"];
+let currentPhase = phases["prepare"];
 ipc.on("snapshot", function() {
 	currentPhase.apply(this, arguments);
 });
--- a/snapshot/index.html
+++ b/snapshot/index.html
--- a/snapshot/index.js
+++ b/snapshot/index.js
@ -43,19 +43,10 @@ function captureElement(options, callback) {

 window.onload = function() {
 	var snapshotTasks = [
-		{
-			el: document.querySelector("#downloadoptions"),
-			name: "download-options",
-			doubleTrim: "white"
-		},
 		{
 			el: document.querySelector("#languages"),
 			name: "languages"
 		},
-		{
-			el: document.querySelector("#variants"),
-			name: "variants"
-		},
 		{
 			el: document.querySelector("#stylesets"),
 			name: "stylesets"
@ -68,10 +59,6 @@ window.onload = function() {
 			el: document.querySelector("#matrix"),
 			name: "matrix"
 		},
-		{
-			el: document.querySelector("#family"),
-			name: "family"
-		},
 		{
 			el: document.querySelector("#previews"),
 			name: "preview-all"
--- a/snapshot/index.styl
+++ b/snapshot/index.styl
@ -1,28 +1,28 @@
@import url('iosevka/webfont.css');
@import url('iosevka-slab/webfont.css');

-.thin
+.thin, .wght-100
 	font-weight: 100;

-.extralight
+.extralight, .wght-200
 	font-weight: 200;

-.light
+.light, .wght-300
 	font-weight: 300;

-.medium
+.medium, .wght-500
 	font-weight: 500;

-.semibold
+.semibold, .wght-600
 	font-weight: 600;

-.bold
+.bold, .wght-700
 	font-weight: 700;

-.extrabold
+.extrabold, .wght-800
 	font-weight: 800;

-.heavy
+.heavy, .wght-900
 	font-weight: 900;

 .italic
@ -143,7 +143,7 @@ section#matrix > div > row > span
 	padding: 0 0.5em;

 section.opentype
-	width: 36em;
+	width: 30em;
 	padding: 0 8em;

 	> h2
@ -165,18 +165,66 @@ section.opentype
 			margin: 0 1em;
 			vertical-align: 0.3em;

-	> ol
+	> ol.narrow
+		width: 32em;
+		list-style: none;
+		margin: 0 -1em;
+		padding: 0;
+		display: flex;
+		justify-content: left;
+		flex-wrap: wrap;
+		overflow: hidden;
+
+		> li
+			flex: none;
+			border-left: 1px solid #ddd;
+			margin-left: -1px;
+			margin-bottom: 0.5em;
+
+		ol.group
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			display: flex;
+
+		ol.group > li
+			margin: 0 0.5em;
+			padding: 0;
+			border: none;
+			width: 3em;
+			flex: none;
+			display: flex;
+			justify-content: center;
+			position: relative;
+
+			> .tag
+				font-size: 0.75em;
+				display: block;
+				position: absolute;
+				width: auto;
+				left: 50%;
+				top: 0;
+				margin-left: calc(-1em);
+
+			> .sample
+				display: inline-block;
+				font-size: 1.5em;
+				margin-top: 0.5em;
+				width: 1em;
+				text-align: center;
+
+	> ol.wide
 		list-style: none;
 		margin: 0;
 		padding: 0;
 		font-size: 1em;
-		width: 36em;
+		width: 30em;

 		> li
 			margin: 0;
 			padding: 0;
 			position: relative;
-			height: 4.5em;
+			height: 7em;
 			border-top: 1px solid #eee;
 			margin-top: 0.4em;
 			padding-top: 0.4em;
@ -214,128 +262,10 @@ section.opentype
 				&.italic
 					margin-top: 0.25em;

-		&.narrow
-			display: flex;
-			justify-content: center;
-			flex-wrap: wrap;
-			width: 35em;
-			margin-left: ((35.5em - 35em) / 2);
-
-			> li
-				margin: 0 0.5em 0.5em;
-				border: none;
-				width: 4em;
-				flex: none;
-				display: flex;
-				justify-content: center;
-
-				> .tag
-					width: auto;
-					left: 50%;
-					margin-left: calc(-1.2em - 1px);
-
-				> .sample
-					display: inline-block;
-					font-size: 2em;
-					margin-top: 0.9em;
-					width: 1em;
-					text-align: center;
-
 		b
 			font-weight: normal;
 			color: #c33500;

-#family
-	background: white;
-	font-size: 0.9em;
-
-	.group
-		display: flex;
-
-	.group a
-		display: block;
-		padding: 0.5rem;
-		flex: 1;
-		text-shadow: none;
-		color: black;
-		text-decoration: none;
-
-		&.italic, &.oblique
-			flex: 1.3;
-
-		&.slab
-			flex: 1.2;
-
-		&.slab.italic, &.slab.oblique
-			flex: 1.7;
-
-#downloadoptions
-	display: flex;
-	justify-content: center;
-
-	> div
-		flex: none;
-		width: 12em;
-		border: 3px solid #ddd;
-		border-radius: 1em;
-		margin: 0.5em;
-
-		> h3
-			margin: 0;
-			padding: 1rem 0 1rem 0;
-			text-align: center;
-			font-weight: bold;
-			font-size: 1em;
-
-		> ul
-			display: flex;
-			list-style: none;
-			margin: 0;
-			padding: 0;
-			justify-content: center;
-
-			> li
-				margin: 0;
-				padding: 0;
-				height: 3.5em;
-				position: relative;
-				padding: 0 0.5em 1em;
-
-				> div
-					font-size: 0.8em;
-					height: 2em;
-					width: 2em;
-					line-height: 2em;
-					text-align: center;
-					padding: 0.5em;
-					border: 1px solid #ddd;
-					border-radius: 0.5em;
-
-				> h4
-					position: absolute;
-					left: 0;
-					right: 0;
-					bottom: 1.25em;
-					margin: 0;
-					font-size: 0.6em;
-					text-align: center;
-					font-weight: normal;
-
-	.missing
-		color: rgba(0, 0, 0, 0.25);
-
-	span
-		outline: 1px solid rgba(0, 0, 0, 0.2);
-
-	.fwm
-		padding-left: 0.25em;
-		padding-right: 0.25em;
-		margin-right: 0.25em;
-		margin-left: -0.125em;
-
-	.fwl
-		padding-right: 0.5em;
-
 #ligations > table
 	border-spacing: 0;
 	border-top: 2px solid black;
--- a/utility/generate-snapshot-page/index.js
+++ b/utility/generate-snapshot-page/index.js
@ -0,0 +1,24 @@
+const ejs = require("ejs");
+const fs = require("fs-extra");
+const path = require("path");
+const parseVariantsData = require("./parse-variants-data");
+const getLigationData = require("./ligation-data");
+
+main().catch(e => {
+	console.error(e);
+	process.exit(1);
+});
+
+/////////////////////////////////////////////////////////////////////////////////////////////////////
+
+async function main() {
+	const variantsData = await parseVariantsData();
+	const weightGrades = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+	const templatePath = path.join(__dirname, "templates/index.ejs");
+	const html = await ejs.renderFile(templatePath, {
+		...variantsData,
+		ligation: getLigationData(),
+		weights: weightGrades
+	});
+	await fs.writeFile(path.join(__dirname, "../../snapshot/index.html"), html);
+}
--- a/utility/generate-snapshot-page/ligation-data.js
+++ b/utility/generate-snapshot-page/ligation-data.js
@ -0,0 +1,116 @@
+function TAG(ltag) {
+	return function(s) {
+		return { ltag: ltag, s: s };
+	};
+}
+const arw2 = TAG("arrow2");
+const logc = TAG("logic");
+const calt = TAG("calt");
+const brst = TAG("brst");
+const dopr = TAG("dotoper");
+
+const ligationSamples = [
+	[
+		arw2("-<<"),
+		arw2("-<"),
+		arw2("-<-"),
+		calt("<--"),
+		calt("<---"),
+		arw2("<<-"),
+		calt("<-"),
+		calt("->"),
+		arw2("->>"),
+		calt("-->"),
+		calt("--->"),
+		arw2("->-"),
+		arw2(">-"),
+		arw2(">>-"),
+		calt("<->"),
+		calt("<-->"),
+		calt("<--->"),
+		calt("<---->"),
+		calt("<!--")
+	],
+	[
+		arw2("=<<"),
+		arw2("=<"),
+		arw2("=<="),
+		calt("<=="),
+		calt("<==="),
+		arw2("<<="),
+		calt("<="),
+		calt("=>"),
+		arw2("=>>"),
+		calt("==>"),
+		calt("===>"),
+		arw2("=>="),
+		calt(">="),
+		arw2(">>="),
+		calt("<=>"),
+		calt("<==>"),
+		calt("<===>"),
+		calt("<====>"),
+		calt("<!---")
+	],
+	[
+		calt("<----------------"),
+		calt("---------------->"),
+		calt("<===============>"),
+		calt("a:b"),
+		calt("a::b"),
+		calt("a:::b"),
+		logc("a\\/b"),
+		logc("a/\\b")
+	],
+	[
+		calt(":="),
+		calt(":-"),
+		calt(":+"),
+		calt("<*"),
+		calt("<*>"),
+		calt("*>"),
+		calt("<|"),
+		calt("<|>"),
+		calt("|>"),
+		dopr("<."),
+		dopr("<.>"),
+		dopr(".>"),
+		calt("+:"),
+		calt("-:"),
+		calt("=:"),
+		calt("<******>"),
+		brst("(* comm *)"),
+		calt("=="),
+		calt("!="),
+		calt("==="),
+		calt("!==")
+	]
+];
+const ligationSets = [
+	{ tag: "calt", switch: "off", desc: "Ligation Off", group: [] },
+	{ tag: "calt", desc: "Default setting in text editors", group: ["calt"] },
+	{ tag: "XJS0", tagName: "XJS0, XPHP", desc: "JavaScript, PHP", group: ["calt", "eeeq"] },
+	{
+		tag: "XFST",
+		tagName: "XML0, XFS0, XFST",
+		desc: "ML, OCaml, F#, F*",
+		group: ["calt", "brst", "logic", "ml"]
+	},
+	{ tag: "SWFT", tagName: "SWFT, XPTL", desc: "Swift, PatEL", group: ["arrow2"] },
+	{
+		tag: "XHS0",
+		tagName: "XHS0, XIDR, XELM, PURS",
+		desc: "Haskell, Idris, Elm, PureScript",
+		group: ["calt", "arrow2", "dotoper", "logic"]
+	},
+	{
+		tag: "XV00",
+		tagName: "XV00",
+		desc: "Coq",
+		group: ["calt", "arrow2", "dotoper", "logic", "brst"]
+	}
+];
+
+module.exports = function getLigationData() {
+	return { samples: ligationSamples, sets: ligationSets };
+};
--- a/utility/generate-snapshot-page/parse-variants-data.js
+++ b/utility/generate-snapshot-page/parse-variants-data.js
@ -0,0 +1,82 @@
+const fs = require("fs-extra");
+const path = require("path");
+const toml = require("toml");
+
+module.exports = async function() {
+	const variantsToml = await fs.readFile(path.join(__dirname, "../../variants.toml"), "utf8");
+	const variants = toml.parse(variantsToml);
+
+	const cvData = getCvData(variants);
+	const ssData = getSsData(variants, cvData);
+
+	return { cvData, ssData };
+};
+
+function getCvData(variants) {
+	const samplerGroups = new Map();
+	for (const selector in variants.simple) {
+		let config = variants.simple[selector];
+		if (!config.sampler) continue;
+		config = { selector, ...config };
+		let gr = samplerGroups.get(config.sampler);
+		if (!gr) {
+			gr = { configs: [] };
+			samplerGroups.set(config.sampler, gr);
+		}
+		gr.configs.push(config);
+	}
+
+	for (const [sampler, gr] of samplerGroups) {
+		gr.ligatureSampler = / /.test(sampler);
+		gr.descSampleText = gr.ligatureSampler ? sampler.split(" ") : [...sampler];
+		gr.configs.sort((a, b) => (a.tag < b.tag ? -1 : a.tag > b.tag ? 1 : 0));
+		gr.rank = rankOf(gr.descSampleText[0][0]);
+	}
+	return [...samplerGroups.values()].sort((a, b) => b.rank - a.rank);
+}
+
+function rankOf(initialChar) {
+	if ("A" <= initialChar && initialChar <= "Z") return 3;
+	if (("a" <= initialChar && initialChar <= "z") || initialChar === "ß") return 2;
+	if ("0" <= initialChar && initialChar <= "9") return 1;
+	return 0;
+}
+
+function getSsData(variants, cvData) {
+	const body =
+		`@real fox.quick(h){ *is_brown && it_jumps_over(dogs.lazy) }\n` +
+		`ABCDEFG HIJKLMN OPQRST UVWXYZ 0123456789`;
+
+	const result = [{ tag: "off", description: "Default", bodyUpright: body, bodyItalic: body }];
+	for (const tag in variants.composite) {
+		if (!/^ss\d\d$/.test(tag)) continue;
+		const composition = variants.composite[tag];
+		const uprightCfg = new Set([...(composition.design || []), ...(composition.upright || [])]);
+		const italicCfg = new Set([...(composition.design || []), ...(composition.italic || [])]);
+		const hotCharSetUpright = new Set();
+		const hotCharSetItalic = new Set();
+		for (const gr of cvData) {
+			if (gr.ligatureSampler) continue;
+			for (const config of gr.configs) {
+				if (uprightCfg.has(config.selector))
+					for (const ch of gr.descSampleText) hotCharSetUpright.add(ch);
+				if (italicCfg.has(config.selector))
+					for (const ch of gr.descSampleText) hotCharSetItalic.add(ch);
+			}
+		}
+		result.push({
+			tag,
+			description: composition.description,
+			bodyUpright: buildSsHtml(body, hotCharSetUpright),
+			bodyItalic: buildSsHtml(body, hotCharSetItalic)
+		});
+	}
+	return result;
+}
+
+function buildSsHtml(body, hc) {
+	return [...body]
+		.map(ch => (hc.has(ch) ? `<b>${ch}</b>` : ch))
+		.join("")
+		.replace(/\n/g, "<br/>");
+}
--- a/utility/generate-snapshot-page/templates/index.ejs
+++ b/utility/generate-snapshot-page/templates/index.ejs
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="index.css"></link>
+</head>
+<body>
+<h1>This page is used for taking snapshots of Iosevka only.</h1>
+
+<%- include('./partial/previews.ejs'); -%>
+<%- include('./partial/languages.ejs'); -%>
+<%- include('./partial/weights.ejs'); -%>
+<%- include('./partial/cv-sample.ejs'); -%>
+<%- include('./partial/ss-sample.ejs'); -%>
+<%- include('./partial/ligation.ejs'); -%>
+<%- include('./partial/matrix.ejs'); -%>
+
+<script src="index.js"></script>
+</body>
--- a/utility/generate-snapshot-page/templates/partial/cv-sample.ejs
+++ b/utility/generate-snapshot-page/templates/partial/cv-sample.ejs
@ -0,0 +1,26 @@
+<section id="charvars" class="opentype char-vars">
+	<div class="hr">Character Variants</div>
+	<ol class="narrow">
+		<%_ for(const group of cvData) { _%>
+			<li><ol class="group">
+			<%_ for(const config of group.configs) { _%>
+				<li>
+					<span class="tag"><%= config.tag || config.tagItalic %></span>
+					<%_ if(group.ligatureSampler) { _%>
+						<%_ for(const text of group.descSampleText) { _%>
+							<span class="sample" style="font-feature-settings:'<%= config.tag %>'"><%= text %></span>
+						<%_ } _%>
+					<%_ } else { _%>
+						<%_ if(config.tag) { _%>
+							<span class="sample" style="font-feature-settings:'<%= config.tag %>'"><%= group.descSampleText[0] %></span>
+							<span class="sample italic" style="font-feature-settings:'<%= config.tag %>'"><%= group.descSampleText[0] %></span>
+						<%_ } else if(config.tagItalic) { _%>
+							<span class="sample italic" style="font-feature-settings:'<%= config.tagItalic %>'"><%= group.descSampleText[0] %></span>
+						<%_ } _%>
+					<%_ } _%>
+				</li>
+			<%_ } _%>
+			</ol></li>
+		<%_ } _%>
+	</ol>
+</section>
--- a/utility/generate-snapshot-page/templates/partial/languages.ejs
+++ b/utility/generate-snapshot-page/templates/partial/languages.ejs
@ -0,0 +1,29 @@
+<section id="languages">
+	<section class="preview color-dark" style="font-feature-settings:'locl'"><pre><code class="javascript hljs"><span class=keyword>const</span> languages <span class="operator">=</span> [
+	{lang: <span class=string>'English'</span>,       sample: <span class=string>'Shaw, those twelve beige hooks are joined if I patch a young, gooey mouth.'</span>},
+	{lang: <span class=string>'IPA'</span>,           sample: <span class=string>'[ɢʷɯʔ.nas.doːŋ.kʰlja] [ŋan.ȵʑi̯wo.ɕi̯uĕn.ɣwa]'</span>},
+	{lang: <span class=string>'Bulgarian'</span>,     sample: <span class=string lang=bg>'Я, пазачът Вальо уж бди, а скришом хапва кюфтенца зад щайгите.'</span>},
+	{lang: <span class=string>'Czech'</span>,         sample: <span class=string>'Nechť již hříšné saxofony ďáblů rozezvučí síň úděsnými tóny waltzu, tanga a quickstepu.'</span>},
+	{lang: <span class=string>'Finnish'</span>,       sample: <span class=string>'Charles Darwin jammaili Åken hevixylofonilla Qatarin yöpub Zeligissä.'</span>},
+	{lang: <span class=string>'French'</span>,        sample: <span class=string>'Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwi.'</span>},
+	{lang: <span class=string>'German'</span>,        sample: <span class=string>'Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.'</span>},
+	{lang: <span class=string>'Greek'</span>,         sample: <span class=string>'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός.'</span>},
+	{lang: <span class=string>'Ancient Greek'</span>, sample: <span class=string>'Ἄδμηθ’, ὁρᾷς γὰρ τἀμὰ πράγμαθ’ ὡς ἔχει, λέξαι θέλω σοι πρὶν θανεῖν ἃ βούλομαι. '</span>},
+	{lang: <span class=string>'Hungarian'</span>,     sample: <span class=string>'Jó foxim és don Quijote húszwattos lámpánál ülve egy pár bűvös cipőt készít.'</span>},
+	{lang: <span class=string>'Icelandic'</span>,     sample: <span class=string>'Kæmi ný öxi hér, ykist þjófum nú bæði víl og ádrepa.'</span>},
+	{lang: <span class=string>'Irish'</span>,         sample: <span class=string>'Ċuaiġ bé ṁórṡáċ le dlúṫspád fíorḟinn trí hata mo ḋea-ṗorcáin ḃig.'</span>},
+	{lang: <span class=string>'Latvian'</span>,       sample: <span class=string>'Muļķa hipiji mēģina brīvi nogaršot celofāna žņaudzējčūsku.'</span>},
+	{lang: <span class=string>'Lithuanian'</span>,    sample: <span class=string>'Įlinkdama fechtuotojo špaga sublykčiojusi pragręžė apvalų arbūzą.'</span>},
+	{lang: <span class=string>'Macedonian'</span>,    sample: <span class=string lang=mk>'Ѕидарски пејзаж: шугав билмез со чудење џвака ќофте и кељ на туѓ цех.'</span>},
+	{lang: <span class=string>'Norwegian'</span>,     sample: <span class=string>'Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz'</span>},
+	{lang: <span class=string>'Polish'</span>,        sample: <span class=string>'Pchnąć w tę łódź jeża lub ośm skrzyń fig.'</span>},
+	{lang: <span class=string>'Portuguese'</span>,    sample: <span class=string>'Luís argüia à Júlia que «brações, fé, chá, óxido, pôr, zângão» eram palavras do português.'</span>},
+	{lang: <span class=string>'Romanian'</span>,      sample: <span class=string>'Înjurând pițigăiat, zoofobul comandă vexat whisky și tequila.'</span>},
+	{lang: <span class=string>'Russian'</span>,       sample: <span class=string>'Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.'</span>},
+	{lang: <span class=string>'Serbian'</span>,       sample: <span class=string lang=sr>'Ајшо, лепото и чежњо, за љубав срца мога дођи у Хаџиће на кафу.'</span>},
+	{lang: <span class=string>'Spanish'</span>,       sample: <span class=string>'Benjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú.'</span>},
+	{lang: <span class=string>'Turkish'</span>,       sample: <span class=string>'Pijamalı hasta yağız şoföre çabucak güvendi.'</span>},
+	{lang: <span class=string>'Ukrainian'</span>,     sample: <span class=string>'Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів!'</span>}
+]
+</code></pre></section>
+</section>
--- a/utility/generate-snapshot-page/templates/partial/ligation.ejs
+++ b/utility/generate-snapshot-page/templates/partial/ligation.ejs
@ -0,0 +1,27 @@
+<section id="ligations">
+	<table>
+		<thead><tr class="first"><th>Feature Tag</th><th>Description</th></tr></thead>
+		<tbody>
+			<%_ for(const group of ligation.sets) { _%>
+			<%_     const tagSet = new Set(group.group); _%>
+			<%_     const featureSettings = `style="font-feature-settings:'${group.tag}' ${group.switch||'on'}"` _%>
+				<tr class="note">
+					<td><%= group.tagName || group.tag %><%= group.switch ? ' ' + group.switch : ''%></td>
+					<td><%= group.desc %></td>
+				</tr>
+				<tr>
+					<td colspan="2" <%- featureSettings -%>>
+						<%_ for(const line of ligation.samples) { _%>
+						<pre><%_ for(let i =  0; i < line.length; i++) { _%>
+							<%_     const item = line[i]; _%>
+							<%_     if(i > 0) { _%><%= " " %><%_ } _%>
+							<%_     if (tagSet.has(item.ltag)) { _%><em><%= item.s %></em><%_ _%>
+							<%_     } else { _%><s><%= item.s %></s><%_ } _%>
+							<%_ } _%></pre>
+						<%_ } _%>
+					</td>
+				</tr>
+			<%_ } _%>
+		</tbody>
+	</table>
+</section>
--- a/utility/generate-snapshot-page/templates/partial/matrix.ejs
+++ b/utility/generate-snapshot-page/templates/partial/matrix.ejs
@ -0,0 +1,13 @@
+<section id="matrix">
+	<%_ for(const cl of ["sans", "slab"]) { _%>
+	<div class="<%= cl %>">
+		<%_ for(const sl of ["upright", "italic", "oblique"]) { _%>
+			<row class="<%= sl %>">
+				<%_ for(const weight of weights) { _%>
+					<%_ _%><span class="wght-<%= weight %>">Mag</span><%_ _%>
+				<%_ } _%>
+			</row>
+		<%_ } _%>
+	</div>
+	<%_ } _%>
+</section>
--- a/utility/generate-snapshot-page/templates/partial/previews.ejs
+++ b/utility/generate-snapshot-page/templates/partial/previews.ejs
@ -0,0 +1,22 @@
+<section id="previews">
+<section class="preview color-dark"><pre><code class="cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka"</span>, DARK) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
+	<span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(&lt;#part&gt;<span class="built_in">\\d</span><span class="operator">+</span>)(&lt;#capture&gt;(&lt;section&gt;(&lt;&amp;part&gt;)))((&lt;&amp;capture&gt;)<span class="built_in">.</span>)<span class="operator">{3}</span>(&lt;&amp;capture&gt;)"</span>;
+	<span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
+	ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()&lt;&gt;$*-+=/#_%^@\&amp;|~?'"`!,.;:</span>
+}</code></pre></section>
+<section class="preview color-light"><pre><code class="cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka"</span>, LIGHT) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
+	<span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(&lt;#part&gt;<span class="built_in">\\d</span><span class="operator">+</span>)(&lt;#capture&gt;(&lt;section&gt;(&lt;&amp;part&gt;)))((&lt;&amp;capture&gt;)<span class="built_in">.</span>)<span class="operator">{3}</span>(&lt;&amp;capture&gt;)"</span>;
+	<span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
+	ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()&lt;&gt;$*-+=/#_%^@\&amp;|~?'"`!,.;:</span>
+}</code></pre></section>
+<section class="preview color-dark slab"><pre><code class="slab cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka Slab"</span>, DARK) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
+	<span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(&lt;#part&gt;<span class="built_in">\\d</span><span class="operator">+</span>)(&lt;#capture&gt;(&lt;section&gt;(&lt;&amp;part&gt;)))((&lt;&amp;capture&gt;)<span class="built_in">.</span>)<span class="operator">{3}</span>(&lt;&amp;capture&gt;)"</span>;
+	<span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
+	ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()&lt;&gt;$*-+=/#_%^@\&amp;|~?'"`!,.;:</span>
+}</code></pre></section>
+<section class="preview color-light slab"><pre><code class="slab cpp hljs"><span class="keyword">SAMPLE_CODE</span>(TestMyTypefaceCodeSnippet, <span class="string">"Iosevka Slab"</span>, LIGHT) { <span class="comment">// The quick brown fox jumps over the lazy dog.</span>
+	<span class="keyword">const</span> <span class="built_in">wchar_t</span>* code <span class="operator">=</span> L<span class="string">"(&lt;#part&gt;<span class="built_in">\\d</span><span class="operator">+</span>)(&lt;#capture&gt;(&lt;section&gt;(&lt;&amp;part&gt;)))((&lt;&amp;capture&gt;)<span class="built_in">.</span>)<span class="operator">{3}</span>(&lt;&amp;capture&gt;)"</span>;
+	<span class="built_in">RegexNode</span> node <span class="operator">=</span> (rCapture(L<span class="string">"section"</span>, r_d().Some()) <span class="operator">+</span> rC(L<span class="string">'.'</span>)).Loop(<span class="number">3</span>, <span class="number">3</span>) <span class="operator">+</span> rCapture(L<span class="string">"section"</span>, r_d().Some());
+	ThePatternsMustBeSame(code, node); <span class="comment">// Clarity : [i l I 1] [0 O 8] 1234567890. {}[]()&lt;&gt;$*-+=/#_%^@\&amp;|~?'"`!,.;:</span>
+}</code></pre></section>
+</section>
--- a/utility/generate-snapshot-page/templates/partial/ss-sample.ejs
+++ b/utility/generate-snapshot-page/templates/partial/ss-sample.ejs
@ -0,0 +1,12 @@
+<section id="stylesets" class="opentype">
+	<div class="hr">Stylistic Sets</div>
+	<ol class="wide">
+		<%_ for(const gr of ssData) { _%>
+			<li>
+				<span class="tag"><%= gr.tag %></span><span class="description"><%= gr.description %></span>
+				<span class="sample" style="font-feature-settings:'<%= gr.tag %>'"><%- gr.bodyUpright -%></span>
+				<span class="sample italic" style="font-feature-settings:'<%= gr.tag %>'"><%- gr.bodyItalic -%></span>
+			</li>
+		<%_ } _%>
+	</ol>
+</section>
--- a/utility/generate-snapshot-page/templates/partial/weights.ejs
+++ b/utility/generate-snapshot-page/templates/partial/weights.ejs
@ -0,0 +1,5 @@
+<section id="weights"><section class="preview color-light" style="background:white;font-size:2em"><pre style="margin:0.25rem 0">
+<%_ for(const weight of weights) { _%>
+<span class="wght-<%= weight %>"><span class="built_in">float</span> Fox.quick(h){ is_brown <span class="operator">&&</span> it_jumps_over(dogs.lazy); }</span>
+<%_ } _%>
+</pre></section></section>
--- a/variants.toml
+++ b/variants.toml
@ -1,386 +1,561 @@
 # Variants
-[simple.v-l-hooky]
-l = 'hooky'
-tag = 'cv09'
-
-[simple.v-i-hooky]
-dotlessi = 'hooky'
-tag = 'cv05'
-
-[simple.v-l-zshaped]
-l = 'zshaped'
-tag = 'cv10'
-
-[simple.v-i-zshaped]
-dotlessi = 'zshaped'
-tag = 'cv06'
-
-[simple.v-l-serifed]
-l = 'serifed'
-tag = 'cv07'
-
-[simple.v-i-serifed]
-dotlessi = 'serifed'
-tag = 'cv03'
-
-[simple.v-l-italic]
-l = 'italic'
-tag = 'cv08'
-
-[simple.v-i-italic]
-dotlessi = 'italic'
-tag = 'cv04'
-
-[simple.v-l-tailed]
-l = 'tailed'
-tag = 'cv27'
-
-[simple.v-l-hookybottom]
-l = 'hookybottom'
-tag = 'cv28'
-
-[simple.v-a-singlestorey]
-a = 'singlestorey'
-tag = 'cv02'
-
-[simple.v-a-doublestorey]
-a = 'doublestorey'
-tag = 'cv01'
-
-[simple.v-g-singlestorey]
-g = 'singlestorey'
-tag = 'cv12'
-
-[simple.v-g-doublestorey]
-g = 'doublestorey'
-tag = 'cv11'
-
-[simple.v-g-opendoublestorey]
-g = 'opendoublestorey'
-tag = 'cv24'
-
-[simple.v-zero-slashed]
-zero = 'slashed'
-tag = 'cv13'
-
-[simple.v-zero-dotted]
-zero = 'dotted'
-tag = 'cv14'
-
-[simple.v-zero-unslashed]
-zero = 'unslashed'
-tag = 'cv15'
-
-[simple.v-tilde-high]
-asciitilde = 'high'
-tag = 'cv16'
-
-[simple.v-tilde-low]
-asciitilde = 'low'
-tag = 'cv17'
-
-[simple.v-asterisk-high]
-asterisk = 'high'
-tag = 'cv18'
-
-[simple.v-asterisk-low]
-asterisk = 'low'
-tag = 'cv19'
-
-[simple.v-underscore-high]
-underscore = 'high'
-tag = 'cv20'
-
-[simple.v-underscore-low]
-underscore = 'low'
-tag = 'cv21'
-
-[simple.v-paragraph-high]
-paragraph = 'high'
-revertParagraph = 'high'
-tag = 'cv22'
-
-[simple.v-paragraph-low]
-paragraph = 'low'
-revertParagraph = 'low'
-tag = 'cv23'
-
-[simple.v-m-normal]
-m = 'normal'
-tag = 'cv25'
-
-[simple.v-m-shortleg]
-m = 'shortleg'
-tag = 'cv26'
-
-[simple.v-caret-high]
-asciicaret = 'high'
-tag = 'cv29'
-
-[simple.v-caret-low]
-asciicaret = 'low'
-tag = 'cv30'
-
-[simple.v-at-threefold]
-at = 'threefold'
-tag = 'cv31'
-
-[simple.v-at-fourfold]
-at = 'fourfold'
-tag = 'cv32'
-
-[simple.v-at-short]
-at = 'short'
-tag = 'cv33'
-
-[simple.v-eszet-traditional]
-eszet = 'traditional'
-tag = 'cv34'
-
-[simple.v-eszet-sulzbacher]
-eszet = 'sulzbacher'
-tag = 'cv35'
-
-[simple.v-brace-straight]
-braceLeft = 'straight'
-braceRight = 'straight'
-tag = 'cv36'
-
-[simple.v-brace-curly]
-braceLeft = 'curly'
-braceRight = 'curly'
-tag = 'cv37'
-
-[simple.v-dollar-open]
-dollar = 'open'
-tag = 'cv38'
-
-[simple.v-dollar-through]
-dollar = 'through'
-tag = 'cv39'
-
-[simple.v-t-standard]
-t = 'standard'
-tag = 'cv40'
-
-[simple.v-t-cross]
-t = 'cross'
-tag = 'cv41'
-
-[simple.v-q-taily]
-Q = 'taily'
-tag = 'cv42'
-
-[simple.v-q-straight]
-Q = 'straight'
-tag = 'cv43'
-
-[simple.v-numbersign-upright]
-numbersign = 'upright'
-tag = 'cv44'
-
-[simple.v-numbersign-slanted]
-numbersign = 'slanted'
-tag = 'cv45'
-
-[simple.v-three-flattop]
-three = 'flattop'
-tag = 'cv46'
-
-[simple.v-three-twoarcs]
-three = 'twoarcs'
-tag = 'cv47'
-
-[simple.v-y-straight]
-y = "straight"
-yhooktop = "straight"
-tag = "cv48"
-
-[simple.v-y-cursive]
-y = "cursive"
-yhooktop = "straight"
-tag = "cv49"
-
-[simple.v-one-nobase]
-one = "nobase"
-tag = "cv50"
-
-[simple.v-one-base]
-one = "base"
-tag = "cv51"
-
-[simple.v-f-straight]
-f = "straight"
-tag = "cv52"
-
-[simple.v-f-tailed]
-f = "tailed"
-tag = "cv53"
-
-[simple.v-dollar-opencap]
-dollar = "opencap"
-tag = "cv54"
-
-[simple.v-dollar-throughcap]
-dollar = "throughcap"
-tag = "cv55"
-
-[simple.v-i-line]
-dotlessi = "line"
-tag = "cv56"
-
-[simple.v-j-line]
-dotlessj = "line"
-tag = "cv57"
-
-[simple.v-j-serifed]
-dotlessj = "serifed"
-tag = "cv58"
-
-[simple.v-l-line]
-l = "line"
-tag = "cv59"
-
-[simple.v-asterisk-hexhigh]
-asterisk = "hexhigh"
-tag = "cv60"
-
-[simple.v-asterisk-hexlow]
-asterisk = "hexlow"
-tag = "cv61"
-
-[simple.v-percent-dots]
-percent = "dots"
-permille = "dots"
-basepoint = "dots"
-tag = "cv62"
-
-[simple.v-percent-rings]
-percent = "rings"
-permille = "rings"
-basepoint = "rings"
-tag = "cv63"
-
-[simple.v-seven-noserif]
-tag = "cv64"
-seven = "noserif"
-
-[simple.v-seven-serifed]
-tag = "cv65"
-seven = "serifed"
-
-[simple.v-lig-ltgteq-flat]
-tag = "cv66"
-"eq.at-lteq.lig2" = "flat"
-"eq.at-gteq.lig2" = "flat"
-
-[simple.v-lig-ltgteq-slanted]
-tag = "cv67"
-"eq.at-lteq.lig2" = "slanted"
-"eq.at-gteq.lig2" = "slanted"
-
-[simple.v-k-straight]
-tag = "cv68"
-k = 'straight'
-K = 'straight'
-
-[simple.v-k-curly]
-tag = "cv69"
-k = 'curly'
-K = 'curly'
-
-[simple.v-k-cursive]
-tagItalic = "cv70"
-k = 'cursive'
-K = 'straight'
-
-[simple.v-v-straight]
-tag = "cv71"
-v = "straight"
-V = "straight"
-
-[simple.v-v-curly]
-tag = "cv72"
-v = "curly"
-V = "curly"

 [simple.v-turn-v-straight]
 tag = "cv73"
+sampler = 'AΛΔ'
+description = 'Standard, straight `A`, `Λ`, `Δ`'
 A = "straight"
 Lambda = "straight"
 Delta = "straight"

 [simple.v-turn-v-curly]
 tag = "cv74"
+sampler = 'AΛΔ'
+description = 'Slightly curly `A`, `Λ`, `Δ`, like Iosevka 2.x'
 A = "curly"
 Lambda = "curly"
 Delta = "curly"

+[simple.v-capital-q-taily]
+tag = 'cv42'
+sampler = 'Q'
+description = '`Q` with a curly tail'
+Q = 'taily'
+
+[simple.v-capital-q-straight]
+tag = 'cv43'
+sampler = 'Q'
+description = '`Q` with a straight tail like in the old versions'
+Q = 'straight'
+
+[simple.v-capital-y-straight]
+tag = "cv80"
+sampler = 'Y'
+description = 'Standard, straight `Y`'
+Y = "straight"
+
+[simple.v-capital-y-curly]
+tag = "cv81"
+sampler = 'Y'
+description = 'Slightly curly `Y`, like Iosevka 2.x'
+Y = "curly"
+
+[simple.v-capital-r-straight]
+tag = "cv82"
+sampler = 'R'
+description = 'Standard, straight-leg `R`'
+R = "straight"
+
+[simple.v-capital-r-curly]
+tag = "cv83"
+sampler = 'R'
+description = ' Slightly curly-legged `R`, like Iosevka 2.x'
+R = "curly"
+
+[simple.v-a-singlestorey]
+tag = 'cv02'
+sampler = 'a'
+description = 'Single-storey `a`'
+a = 'singlestorey'
+
+[simple.v-a-doublestorey]
+tag = 'cv01'
+sampler = 'a'
+description = 'Double-storey `a`'
+a = 'doublestorey'
+
+[simple.v-f-straight]
+tag = "cv52"
+sampler = 'f'
+description = '`f` without bottom hook'
+f = "straight"
+
+[simple.v-f-tailed]
+tag = "cv53"
+sampler = 'f'
+description = '`f` with a leftward bottom hook'
+f = "tailed"
+
+[simple.v-f-serifed]
+tag = "cv84"
+sampler = 'f'
+description = '`f` with bottom serif'
+f = "serifed"
+
+[simple.v-g-singlestorey]
+tag = 'cv12'
+sampler = 'g'
+description = 'Single-storey `g`'
+g = 'singlestorey'
+
+[simple.v-g-doublestorey]
+tag = 'cv11'
+sampler = 'g'
+description = 'Double-storey `g`'
+g = 'doublestorey'
+
+[simple.v-g-opendoublestorey]
+tag = 'cv24'
+sampler = 'g'
+description = 'Open Double-storey `g`, like Trebuchet MS or Fira Code'
+g = 'opendoublestorey'
+
+[simple.v-i-serifed]
+tag = 'cv03'
+sampler = 'i'
+description = 'Serifed `i`'
+dotlessi = 'serifed'
+
+[simple.v-i-italic]
+tag = 'cv04'
+sampler = 'i'
+description = 'Italic `i`'
+dotlessi = 'italic'
+
+[simple.v-i-hooky]
+tag = 'cv05'
+sampler = 'i'
+description = 'Hooky `i`'
+dotlessi = 'hooky'
+
+[simple.v-i-line]
+tag = "cv56"
+sampler = 'i'
+description = '`i` like a straight line'
+dotlessi = "line"
+
+[simple.v-i-zshaped]
+tag = 'cv06'
+sampler = 'i'
+description = 'Z-shaped `i`'
+dotlessi = 'zshaped'
+
+[simple.v-i-tailed]
+tag = "cv88"
+sampler = 'i'
+description = "Tailed `i`"
+dotlessi = 'tailed'
+
+[simple.v-j-line]
+tag = "cv57"
+sampler = 'j'
+description = '`j` like a straight line'
+dotlessj = "line"
+
+[simple.v-j-serifed]
+tag = "cv58"
+sampler = 'j'
+description = '`j` with top serif'
+dotlessj = "serifed"
+
+[simple.v-l-hooky]
+tag = 'cv09'
+sampler = 'l'
+description = 'Hooky `l`'
+l = 'hooky'
+
+[simple.v-l-zshaped]
+tag = 'cv10'
+sampler = 'l'
+description = 'Z-shaped `i`'
+l = 'zshaped'
+
+[simple.v-l-serifed]
+tag = 'cv07'
+sampler = 'l'
+description = 'Serifed `l`'
+l = 'serifed'
+
+[simple.v-l-italic]
+tag = 'cv08'
+sampler = 'l'
+description = 'Italic, cursive `l`'
+l = 'italic'
+
+[simple.v-l-line]
+tag = "cv59"
+sampler = 'l'
+description = '`l` like a straight line'
+l = "line"
+
+[simple.v-l-tailed]
+tag = 'cv27'
+sampler = 'l'
+description = '`l` with a curved tail'
+l = 'tailed'
+
+[simple.v-l-hookybottom]
+tag = 'cv28'
+sampler = 'l'
+description = '`l` with a straight tail'
+l = 'hookybottom'
+
+[simple.v-k-straight]
+tag = "cv68"
+sampler = 'kK'
+description = '`k` with standard shape'
+k = 'straight'
+K = 'straight'
+
+[simple.v-k-curly]
+tag = "cv69"
+sampler = 'kK'
+description = 'Slightly curly `k`, like Iosevka 2.x'
+k = 'curly'
+K = 'curly'
+
+[simple.v-k-cursive]
+tagItalic = "cv70"
+sampler = 'kK'
+description = '`k` with a cursive loop'
+k = 'cursive'
+K = 'straight'
+
+[simple.v-m-normal]
+tag = 'cv25'
+sampler = 'm'
+description = '`m` with normal middle leg, touching the baseline'
+m = 'normal'
+
+[simple.v-m-shortleg]
+tag = 'cv26'
+sampler = 'm'
+description = '`m` with shorter middle leg, like Ubuntu Mono'
+m = 'shortleg'
+
+[simple.v-r-straight]
+tag = "cv85"
+sampler = 'r'
+description = 'Straight, serif-less `r`'
+r = "straight"
+
+[simple.v-r-serifed]
+tag = "cv86"
+sampler = 'r'
+description = '`r` with serif at both top and bottom'
+r = "serifed"
+
+[simple.v-r-top-serifed]
+tag = "cv87"
+sampler = 'r'
+description = '`r` with serifs at top-left only'
+r = "top-serifed"
+
+[simple.v-t-standard]
+tag = 'cv40'
+sampler = 't'
+description = 'Standard `t` shape'
+t = 'standard'
+
+[simple.v-t-cross]
+tag = 'cv41'
+sampler = 't'
+description = 'Futura-like `t` shape'
+t = 'cross'
+
+[simple.v-v-straight]
+tag = "cv71"
+sampler = 'v'
+description = 'Standard, straight `V` and `v`'
+v = "straight"
+V = "straight"
+
+[simple.v-v-curly]
+tag = "cv72"
+sampler = 'v'
+description = ' Slightly curly `V` and `v`, like Iosevka 2.x'
+v = "curly"
+V = "curly"
+
 [simple.v-w-straight]
 tag = "cv75"
+sampler = 'wW'
+description = 'Standard, straight `W` and `w`'
 W = "straight"
 w = "straight"

 [simple.v-w-curly]
 tag = "cv76"
+sampler = 'wW'
+description = 'Slightly curly `W` and `w`, like Iosevka 2.x'
 W = "curly"
 w = "curly"

 [simple.v-x-straight]
 tag = "cv77"
+sampler = 'xX'
+description = 'Standard, straight `X` and `x`'
 X = "straight"
 x = "straight"

 [simple.v-x-curly]
 tag = "cv78"
+sampler = 'xX'
+description = 'Slightly curly `X` and `x`, like Iosevka 2.x'
 X = "curly"
 x = "curly"

+[simple.v-y-straight]
+tag = "cv48"
+sampler = 'y'
+description = 'More-straight letter `y`'
+y = "straight"
+yhooktop = "straight"
+
 [simple.v-y-curly]
 tag = "cv79"
+sampler = 'y'
+description = 'More curly letter `y`, like Iosevka 2.x'
 y = "curly"
 yhooktop = "curly"

-[simple.v-capital-y-straight]
-tag = "cv80"
-Y = "straight"
+[simple.v-y-cursive]
+tag = "cv49"
+sampler = 'y'
+description = 'Cursive-like `y`'
+y = "cursive"
+yhooktop = "straight"

-[simple.v-capital-y-curly]
-tag = "cv81"
-Y = "curly"
+[simple.v-eszet-traditional]
+tag = 'cv34'
+sampler = 'ß'
+description = 'Traditional, Fraktur-like Eszet'
+eszet = 'traditional'

-[simple.v-capital-r-straight]
-tag = "cv82"
-R = "straight"
+[simple.v-eszet-sulzbacher]
+tag = 'cv35'
+sampler = 'ß'
+description = 'A more modern, beta-like Eszet'
+eszet = 'sulzbacher'

-[simple.v-capital-r-curly]
-tag = "cv83"
-R = "curly"
+[simple.v-zero-slashed]
+tag = 'cv13'
+sampler = '0'
+description = 'Slashed Zero `0`'
+zero = 'slashed'

-[simple.v-f-serifed]
-tag = "cv84"
-f = "serifed"
+[simple.v-zero-dotted]
+tag = 'cv14'
+sampler = '0'
+description = 'Dotted Zero `0`'
+zero = 'dotted'

-[simple.v-r-straight]
-tag = "cv85"
-r = "straight"
+[simple.v-zero-unslashed]
+tag = 'cv15'
+sampler = '0'
+description = 'O-like `0`'
+zero = 'unslashed'

-[simple.v-r-serifed]
-tag = "cv86"
-r = "serifed"
+[simple.v-one-nobase]
+tag = "cv50"
+sampler = '1'
+description = '`1` with bottom serif'
+one = "nobase"

-[simple.v-r-top-serifed]
-tag = "cv87"
-r = "top-serifed"
+[simple.v-one-base]
+tag = "cv51"
+sampler = '1'
+description = '`1` without bottom serif'
+one = "base"
+
+[simple.v-three-flattop]
+tag = 'cv46'
+sampler = '3'
+description = 'Flat top `3` (Like Museo Sans / Montserrat)'
+three = 'flattop'
+
+[simple.v-three-twoarcs]
+tag = 'cv47'
+sampler = '3'
+description = 'Arched top `3`'
+three = 'twoarcs'
+
+[simple.v-seven-noserif]
+tag = "cv64"
+sampler = '7'
+description = '`7` without serif'
+seven = "noserif"
+
+[simple.v-seven-serifed]
+tag = "cv65"
+sampler = '7'
+description = '`7` with initial serif'
+seven = "serifed"
+
+[simple.v-tilde-high]
+tag = 'cv16'
+sampler = '~'
+description = 'Higher tilde `~`'
+asciitilde = 'high'
+
+[simple.v-tilde-low]
+tag = 'cv17'
+sampler = '~'
+description = 'Lower tilde `~`'
+asciitilde = 'low'
+
+[simple.v-asterisk-high]
+tag = 'cv18'
+sampler = '*'
+description = 'Higher five-pointed asterisk `*`'
+asterisk = 'high'
+
+[simple.v-asterisk-low]
+tag = 'cv19'
+sampler = '*'
+description = 'Lower five-pointed asterisk `*`'
+asterisk = 'low'
+
+[simple.v-asterisk-hexhigh]
+tag = "cv60"
+sampler = "*"
+description = 'Higher six-pointed asterisk `*`'
+asterisk = "hexhigh"
+
+[simple.v-asterisk-hexlow]
+tag = "cv61"
+sampler = "*"
+description = 'Lower six-pointed asterisk `*`'
+asterisk = "hexlow"
+
+[simple.v-underscore-high]
+tag = 'cv20'
+sampler = '_'
+description = 'Higher underscore `_`, at baseline'
+underscore = 'high'
+
+[simple.v-underscore-low]
+tag = 'cv21'
+sampler = '_'
+description = 'Lower underscore `_`, below baseline'
+underscore = 'low'
+
+[simple.v-paragraph-high]
+tag = 'cv22'
+sampler = '¶'
+description = 'Higher paragraph symbol `¶`'
+paragraph = 'high'
+revertParagraph = 'high'
+
+[simple.v-paragraph-low]
+tag = 'cv23'
+sampler = '¶'
+description = 'Lower paragraph symbol `¶`'
+paragraph = 'low'
+revertParagraph = 'low'
+
+[simple.v-caret-high]
+tag = 'cv29'
+sampler = '^'
+description = 'Higher circumflex `^`'
+asciicaret = 'high'
+
+[simple.v-caret-low]
+tag = 'cv30'
+sampler = '^'
+description = 'Lower circumflex `^`'
+asciicaret = 'low'
+
+[simple.v-at-threefold]
+tag = 'cv31'
+sampler = '@'
+description = 'The long, three-fold At symbol (`@`)'
+at = 'threefold'
+
+[simple.v-at-fourfold]
+tag = 'cv32'
+sampler = '@'
+description = 'The traditional, four-fold At symbol (`@`)'
+at = 'fourfold'
+
+[simple.v-at-short]
+tag = 'cv33'
+sampler = '@'
+description = 'The shorter, Fira-like At symbol (`@`)'
+at = 'short'
+
+[simple.v-brace-straight]
+tag = 'cv36'
+sampler = '{ }'
+description = 'More straight braces'
+braceLeft = 'straight'
+braceRight = 'straight'
+
+[simple.v-brace-curly]
+tag = 'cv37'
+sampler = '{ }'
+description = 'More curly braces'
+braceLeft = 'curly'
+braceRight = 'curly'
+
+[simple.v-dollar-open]
+tag = 'cv38'
+sampler = '$'
+description = 'Dollar symbol with open contour'
+dollar = 'open'
+
+[simple.v-dollar-through]
+tag = 'cv39'
+sampler = '$'
+description = 'Dollar symbol with strike-through vertical bar'
+dollar = 'through'
+
+[simple.v-dollar-opencap]
+tag = "cv54"
+sampler = '$'
+description = 'Dollar symbol with open contour, not exceeding baseline and ascender'
+dollar = "opencap"
+
+[simple.v-dollar-throughcap]
+tag = "cv55"
+sampler = '$'
+description = 'Dollar symbol with strike-through vertical bar, not exceeding baseline and ascender'
+dollar = "throughcap"
+
+[simple.v-numbersign-upright]
+tag = 'cv44'
+sampler = '#'
+description = 'Number sign with vertical bars'
+numbersign = 'upright'
+
+[simple.v-numbersign-slanted]
+tag = 'cv45'
+sampler = '#'
+description = 'Number sign with slanted bars'
+numbersign = 'slanted'
+
+[simple.v-percent-dots]
+tag = "cv62"
+sampler = '%'
+description = 'Percent `%`, Per-mille `‰` and basis point `‱` using rectangular dots'
+percent = "dots"
+permille = "dots"
+basepoint = "dots"
+
+[simple.v-percent-rings]
+tag = "cv63"
+sampler = '%'
+description = 'Percent `%`, Per-mille `‰` and basis point `‱` using rings'
+percent = "rings"
+permille = "rings"
+basepoint = "rings"
+
+[simple.v-lig-ltgteq-flat]
+tag = "cv66"
+sampler = '<= >='
+description = 'The lower bar of `<=` and `>=` ligation is flat'
+"eq.at-lteq.lig2" = "flat"
+"eq.at-gteq.lig2" = "flat"
+
+[simple.v-lig-ltgteq-slanted]
+tag = "cv67"
+sampler = '<= >='
+description = 'The lower bar of `<=` and `>=` ligation is slanted'
+"eq.at-lteq.lig2" = "slanted"
+"eq.at-gteq.lig2" = "slanted"

 ########## "Untagged" variants, used for Aile, etc.

-[simple.v-i-tailed]
-dotlessi = 'tailed'
-
-[simple.v-j-straight]
-dotlessj = "straight"
-
 [simple.v-capital-i-straight]
 I = "line" # set on purpose to use II diversity

@ -412,7 +587,7 @@ r = "narrow"
 design = [
 	'v-m-normal',
 	'v-t-standard',
-	'v-q-taily',
+	'v-capital-q-taily',
 	'v-zero-slashed',
 	'v-tilde-low',
 	'v-asterisk-high',
@ -466,66 +641,66 @@ upright = ['v-f-serifed', 'v-r-serifed']
 italic =  ['v-f-tailed', 'v-r-top-serifed']

 # Composite character options, overrides default settings above.
-# Andale Mono Style
 [composite.ss01]
+description = "Andale Mono Style"
 design = ['v-i-hooky', 'v-a-doublestorey', 'v-g-doublestorey', 'v-l-zshaped', 'v-at-fourfold', 'v-zero-dotted', 'v-g-doublestorey', 'v-brace-straight', 'v-underscore-low', 'v-numbersign-slanted', 'v-asterisk-hexhigh']

-# Anonymous Pro Style
 [composite.ss02]
+description = "Anonymous Pro Style"
 design = ['v-at-fourfold', 'v-a-doublestorey', 'v-brace-straight', 'v-l-serifed', 'v-i-serifed', 'v-asterisk-hexlow']

-# Consolas Style
 [composite.ss03]
+description = 'Consolas Style'
 design = ['v-at-fourfold', 'v-underscore-low', 'v-brace-straight', 'v-numbersign-slanted', 'v-asterisk-hexhigh']
 upright = ['v-g-doublestorey']
 italic = ['v-g-singlestorey']

-# Menlo Style
 [composite.ss04]
+description = 'Menlo Style'
 design = ['v-at-threefold', 'v-a-doublestorey', 'v-underscore-low', 'v-i-serifed', 'v-l-italic', 'v-brace-straight', 'v-numbersign-slanted', 'v-asterisk-hexlow']

-# Fira Mono Style
 [composite.ss05]
+description = 'Fira Mono Style'
 design = ['v-at-short', 'v-underscore-low', 'v-a-doublestorey', 'v-i-serifed', 'v-g-opendoublestorey', 'v-l-italic', 'v-numbersign-slanted', 'v-zero-dotted',]

-# Liberation Mono Style
 [composite.ss06]
+description = 'Liberation Mono Style'
 design = ['v-at-fourfold', 'v-a-doublestorey', 'v-i-serifed', 'v-l-serifed', 'v-brace-straight', 'v-zero-dotted', 'v-numbersign-slanted']

-# Monaco Style
 [composite.ss07]
+description = 'Monaco Style'
 design = ['v-at-fourfold', 'v-a-singlestorey', 'v-i-zshaped', 'v-l-zshaped', 'v-brace-straight', 'v-numbersign-slanted', 'v-asterisk-hexhigh']

-# Pragmata Pro Style
 [composite.ss08]
+description = 'Pragmata Pro Style'
 design = ['v-at-threefold', 'v-a-doublestorey', 'v-l-serifed', 'v-i-serifed', 'v-asterisk-low', 'v-zero-dotted', 'v-brace-straight', 'v-dollar-open', 'v-underscore-low', 'v-numbersign-slanted', 'v-percent-dots', 'v-v-curly', 'v-turn-v-curly', 'v-w-curly', 'v-x-curly', 'v-capital-y-curly', 'v-capital-r-curly']
 upright = ['v-k-curly', 'v-y-curly', 'v-g-doublestorey']
 italic  = ['v-k-curly', 'v-y-curly', 'v-g-singlestorey']

-# Source Code Pro Style
 [composite.ss09]
+description = 'Source Code Pro Style'
 design = ['v-at-threefold', 'v-l-italic', 'v-asterisk-low', 'v-zero-dotted', 'v-dollar-open', 'v-numbersign-slanted']
 upright = ['v-i-hooky', 'v-g-doublestorey']
 italic = ['v-g-singlestorey']

-# Envy Code R Style
 [composite.ss10]
+description = 'Envy Code R Style'
 design = ['v-at-threefold', 'v-a-doublestorey', 'v-underscore-low', 'v-i-hooky', 'v-l-hooky', 'v-asterisk-low']

-# X Window Style
 [composite.ss11]
+description = 'X Window Style'
 design = ['v-zero-unslashed', 'v-tilde-high', 'v-brace-straight', 'v-dollar-through', 'v-three-flattop', 'v-at-threefold']

-# Ubuntu Mono Style
 [composite.ss12]
+description = 'Ubuntu Mono Style'
 design = ['v-at-threefold', 'v-a-doublestorey', 'v-f-straight', 'v-underscore-low', 'v-i-italic', 'v-l-italic', 'v-m-shortleg', 'v-y-straight', 'v-brace-straight', 'v-zero-dotted', 'v-one-base-serif', 'v-numbersign-slanted']

-# Lucida Style
 [composite.ss13]
+description = 'Lucida Style'
 design = ['v-i-hooky', 'v-l-hooky', 'v-zero-dotted', 'v-underscore-low', 'v-caret-low', 'v-numbersign-slanted', 'v-one-base']

-# Curly-bar
 [composite.ss20]
+description = 'Curly Style'
 design = ['v-v-curly', 'v-turn-v-curly', 'v-w-curly', 'v-x-curly', 'v-capital-y-curly', 'v-capital-r-curly']
 upright = ['v-k-curly', 'v-y-curly']
-italic  = ['v-k-curly', 'v-y-curly']
+italic  = ['v-k-cursive', 'v-y-cursive']
--- a/verdafile.js
+++ b/verdafile.js
@ -534,17 +534,23 @@ const SampleImagesPre = task(`sample-images:pre`, async target => {
 	const [sans, slab] = await target.need(
 		GroupContents`iosevka`,
 		GroupContents`iosevka-slab`,
+		SnapShotCSS,
+		SnapShotHtml,
 		de`images`
 	);
 	await cp(`${DIST}/${sans}`, `snapshot/${sans}`);
 	await cp(`${DIST}/${slab}`, `snapshot/${slab}`);
 });
+const SnapShotHtml = file(`snapshot/index.html`, async target => {
+	await target.need(sfu`variants.toml`, UtilScripts);
+	await run(`node`, `utility/generate-snapshot-page/index.js`);
+});
 const SnapShotCSS = file(`snapshot/index.css`, async target => {
-	await target.need(fu`snapshot/index.styl`);
+	await target.need(sfu`snapshot/index.styl`);
 	await run(`npm`, `run`, `stylus`, `snapshot/index.styl`, `-c`);
 });
 const TakeSampleImages = task(`sample-images:take`, async target => {
-	await target.need(SampleImagesPre, SnapShotCSS);
+	await target.need(SampleImagesPre);
 	await cd(`snapshot`).run("npx", "electron", "get-snap.js", ["--dir", "../images"]);
 });
 const ScreenShot = file.glob(`images/*.png`, async (target, { full }) => {
@ -556,14 +562,11 @@ const SampleImages = task(`sample-images`, async target => {
 	await target.need(TakeSampleImages);
 	await target.need(
 		ScreenShot`images/charvars.png`,
-		ScreenShot`images/download-options.png`,
-		ScreenShot`images/family.png`,
 		ScreenShot`images/languages.png`,
 		ScreenShot`images/ligations.png`,
 		ScreenShot`images/matrix.png`,
 		ScreenShot`images/preview-all.png`,
 		ScreenShot`images/stylesets.png`,
-		ScreenShot`images/variants.png`,
 		ScreenShot`images/weights.png`
 	);
 });
@ -599,7 +602,7 @@ const ChangeFileList = oracle.make(
 	target => FileList({ under: "changes", pattern: "*.md" })(target)
 );
 const ReleaseNotes = task(`release:release-note`, async target => {
-	const [version] = await target.need(Version);
+	const [version] = await target.need(Version, UtilScriptFiles);
 	const [changeFiles] = await target.need(ChangeFileList());
 	await target.need(changeFiles.map(fu));
 	await run("node", "utility/generate-release-note", version);
@ -626,6 +629,14 @@ const ScriptsUnder = oracle.make(
 	(ext, dir) => `${ext}-scripts-under::${dir}`,
 	(target, ext, dir) => FileList({ under: dir, pattern: `**/*.${ext}` })(target)
 );
+const UtilScriptFiles = computed("util-script-files", async target => {
+	const [js, ejs, md] = await target.need(
+		ScriptsUnder("js", "utility"),
+		ScriptsUnder("ejs", "utility"),
+		ScriptsUnder("md", "utility")
+	);
+	return [...js, ...ejs, ...md];
+});
 const ScriptFiles = computed.group("script-files", async (target, ext) => {
 	const [gen, meta, glyphs, support] = await target.need(
 		ScriptsUnder(ext, `gen`),
@ -660,3 +671,7 @@ const Scripts = task("scripts", async target => {
 	const [js] = await target.need(ScriptFiles("js"));
 	await target.need(js.map(ScriptJS));
 });
+const UtilScripts = task("util-scripts", async target => {
+	const [files] = await target.need(UtilScriptFiles);
+	await target.need(files.map(f => fu`${f}`));
+});