Add automated snapshot HTML generator

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-capital-q-taily` : `Q` with a curly tail (default).
-    * `v-q-straight` : `Q` with a straight tail in the old versions.
+    * `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`, `Λ`, `Δ`:

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'

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

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' ' '

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
 

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"
 	}
 }

snapshot/get-snap.js

@@ -1,122 +1,122 @@
-const { app, BrowserWindow } = require("electron");
+const { app, BrowserWindow } = require("electron");
-var argv = require("yargs").argv;
+let argv = require("yargs").argv;
-var fs = require("fs");
+let fs = require("fs");
-var cp = require("child_process");
+let cp = require("child_process");
-
+
-var mainWindow = null;
+let mainWindow = null;
-var allWindowClosed = false;
+let allWindowClosed = false;
-var pendingTasks = 0;
+let pendingTasks = 0;
-var zoom = 2;
+let zoom = 2;
-
+
-function checkQuit() {
+function checkQuit() {
-	if (allWindowClosed && pendingTasks == 0) app.quit();
+	if (allWindowClosed && pendingTasks == 0) app.quit();
-}
+}
-
+
-app.on("window-all-closed", function() {
+app.on("window-all-closed", function() {
-	allWindowClosed = true;
+	allWindowClosed = true;
-	checkQuit();
+	checkQuit();
-});
+});
-
+
-function combineImages(images, outfile, width, height, doubleTrim) {
+function combineImages(images, outfile, width, height, doubleTrim) {
-	var command =
+	let command =
-		"magick " +
+		"magick " +
-		images.join(" ") +
+		images.join(" ") +
-		" -append -crop " +
+		" -append -crop " +
-		width +
+		width +
-		"x" +
+		"x" +
-		height +
+		height +
-		"+0+0 +repage -bordercolor #008000 -fuzz 5% -trim  " +
+		"+0+0 +repage -bordercolor #008000 -fuzz 5% -trim  " +
-		(doubleTrim ? "-bordercolor " + doubleTrim + " -trim " : "") +
+		(doubleTrim ? "-bordercolor " + doubleTrim + " -trim " : "") +
-		outfile;
+		outfile;
-	console.log(command);
+	console.log(command);
-	cp.exec(command, function(err, stdout, stderr) {
+	cp.exec(command, function(err, stdout, stderr) {
-		if (err) console.log(err);
+		if (err) console.log(err);
-		images.forEach(function(file) {
+		images.forEach(function(file) {
-			fs.unlinkSync(file);
+			fs.unlinkSync(file);
-		});
+		});
-		pendingTasks -= 1;
+		pendingTasks -= 1;
-		checkQuit();
+		checkQuit();
-	});
+	});
-}
+}
-
+
-var ipc = require("electron").ipcMain;
+let ipc = require("electron").ipcMain;
-function GOTO(phase) {
+function GOTO(phase) {
-	currentPhase = phase;
+	currentPhase = phase;
-}
+}
-var phases = {
+const phases = {
-	prepare: function(event, arg) {
+	prepare: function(event, arg) {
-		console.log(arg);
+		console.log(arg);
-		GOTO(phases["receive-rect"]);
+		GOTO(phases["receive-rect"]);
-	},
+	},
-	"receive-rect": function(event, rect) {
+	"receive-rect": function(event, rect) {
-		pendingTasks += 1;
+		pendingTasks += 1;
-		console.log("Received rect.");
+		console.log("Received rect.");
-		rect = JSON.parse(JSON.stringify(rect));
+		rect = JSON.parse(JSON.stringify(rect));
-		var file = argv.dir + "/" + rect.name + ".png";
+		let file = argv.dir + "/" + rect.name + ".png";
-		var j = 0;
+		let j = 0;
-		var totalFiles = Math.ceil(rect.height / rect.windowHeight);
+		let totalFiles = Math.ceil(rect.height / rect.windowHeight);
-		var pendingFiles = totalFiles;
+		let pendingFiles = totalFiles;
-		step();
+		step();
-
+
-		function doneFileWrite() {
+		function doneFileWrite() {
-			pendingFiles -= 1;
+			pendingFiles -= 1;
-			if (pendingFiles <= 0) {
+			if (pendingFiles <= 0) {
-				var images = [];
+				let images = [];
-				for (var k = 0; k < j; k++) {
+				for (let k = 0; k < j; k++) {
-					images.push(argv.dir + "/" + rect.name + "." + k + ".png");
+					images.push(argv.dir + "/" + rect.name + "." + k + ".png");
-				}
+				}
-				combineImages(
+				combineImages(
-					images,
+					images,
-					file,
+					file,
-					rect.windowWidth * rect.dpi,
+					rect.windowWidth * rect.dpi,
-					rect.height * rect.dpi,
+					rect.height * rect.dpi,
-					rect.doubleTrim
+					rect.doubleTrim
-				);
+				);
-			}
+			}
-		}
+		}
-		function step() {
+		function step() {
-			event.sender.send("scroll", rect.y + j * rect.windowHeight);
+			event.sender.send("scroll", rect.y + j * rect.windowHeight);
-			GOTO(function(event) {
+			GOTO(function(event) {
-				mainWindow.capturePage().then(function(image) {
+				mainWindow.capturePage().then(function(image) {
-					fs.writeFile(
+					fs.writeFile(
-						argv.dir + "/" + rect.name + "." + j + ".png",
+						argv.dir + "/" + rect.name + "." + j + ".png",
-						image.toPNG(),
+						image.toPNG(),
-						doneFileWrite
+						doneFileWrite
-					);
+					);
-					j += 1;
+					j += 1;
-					if (j >= totalFiles) {
+					if (j >= totalFiles) {
-						// Move to next image
+						// Move to next image
-						event.sender.send("complete", file);
+						event.sender.send("complete", file);
-						GOTO(phases["receive-rect"]);
+						GOTO(phases["receive-rect"]);
-					} else {
+					} else {
-						step();
+						step();
-					}
+					}
-				});
+				});
-			});
+			});
-		}
+		}
-	}
+	}
-};
+};
-var currentPhase = phases["prepare"];
+let currentPhase = phases["prepare"];
-ipc.on("snapshot", function() {
+ipc.on("snapshot", function() {
-	currentPhase.apply(this, arguments);
+	currentPhase.apply(this, arguments);
-});
+});
-ipc.on("log", function(event, arg) {
+ipc.on("log", function(event, arg) {
-	console.log(arg);
+	console.log(arg);
-});
+});
-
+
-app.on("ready", function() {
+app.on("ready", function() {
-	mainWindow = new BrowserWindow({
+	mainWindow = new BrowserWindow({
-		width: 64 * 16 * zoom,
+		width: 64 * 16 * zoom,
-		height: 1024 * zoom,
+		height: 1024 * zoom,
-		//x: 5000, y: 5000,
+		//x: 5000, y: 5000,
-		webPreferences: {
+		webPreferences: {
-			zoomFactor: zoom,
+			zoomFactor: zoom,
-			nodeIntegration: true
+			nodeIntegration: true
-		},
+		},
-		show: false
+		show: false
-	});
+	});
-	mainWindow.showInactive();
+	mainWindow.showInactive();
-	mainWindow.loadURL("file://" + __dirname + "/index.html");
+	mainWindow.loadURL("file://" + __dirname + "/index.html");
-	mainWindow.blurWebView();
+	mainWindow.blurWebView();
-	//mainWindow.hide();
+	//mainWindow.hide();
-});
+});

snapshot/index.js

@@ -1,104 +1,91 @@
-console.log("I AN IN ELECTRON");
+console.log("I AN IN ELECTRON");
-var windowWidth = window.innerWidth;
+var windowWidth = window.innerWidth;
-var windowHeight = window.innerHeight;
+var windowHeight = window.innerHeight;
-var dpi = window.devicePixelRatio;
+var dpi = window.devicePixelRatio;
-var ipc = require("electron").ipcRenderer;
+var ipc = require("electron").ipcRenderer;
-
+
-var onScroll = function() {};
+var onScroll = function() {};
-ipc.on("scroll", function() {
+ipc.on("scroll", function() {
-	onScroll.apply(this, arguments);
+	onScroll.apply(this, arguments);
-	setTimeout(function() {
+	setTimeout(function() {
-		ipc.send("snapshot", "scroll-done");
+		ipc.send("snapshot", "scroll-done");
-	}, 500);
+	}, 500);
-});
+});
-var onComplete = function() {};
+var onComplete = function() {};
-ipc.on("complete", function() {
+ipc.on("complete", function() {
-	onComplete.apply(this, arguments);
+	onComplete.apply(this, arguments);
-});
+});
-
+
-function captureElement(options, callback) {
+function captureElement(options, callback) {
-	window.scroll(0, 0);
+	window.scroll(0, 0);
-	setTimeout(function() {
+	setTimeout(function() {
-		var rect = options.el.getBoundingClientRect();
+		var rect = options.el.getBoundingClientRect();
-		onScroll = function(event, arg) {
+		onScroll = function(event, arg) {
-			window.scrollTo(0, arg);
+			window.scrollTo(0, arg);
-		};
+		};
-		onComplete = function() {
+		onComplete = function() {
-			if (callback) callback();
+			if (callback) callback();
-			onComplete = function() {};
+			onComplete = function() {};
-		};
+		};
-		ipc.send("snapshot", {
+		ipc.send("snapshot", {
-			name: options.name,
+			name: options.name,
-			windowWidth: windowWidth,
+			windowWidth: windowWidth,
-			windowHeight: windowHeight,
+			windowHeight: windowHeight,
-			doubleTrim: options.doubleTrim,
+			doubleTrim: options.doubleTrim,
-			dpi: dpi,
+			dpi: dpi,
-			x: rect.left | 0,
+			x: rect.left | 0,
-			y: rect.top | 0,
+			y: rect.top | 0,
-			width: rect.width | 0,
+			width: rect.width | 0,
-			height: rect.height | 0
+			height: rect.height | 0
-		});
+		});
-	}, 10);
+	}, 10);
-}
+}
-
+
-window.onload = function() {
+window.onload = function() {
-	var snapshotTasks = [
+	var snapshotTasks = [
-		{
+		{
-			el: document.querySelector("#downloadoptions"),
+			el: document.querySelector("#languages"),
-			name: "download-options",
+			name: "languages"
-			doubleTrim: "white"
+		},
-		},
+		{
-		{
+			el: document.querySelector("#stylesets"),
-			el: document.querySelector("#languages"),
+			name: "stylesets"
-			name: "languages"
+		},
-		},
+		{
-		{
+			el: document.querySelector("#charvars"),
-			el: document.querySelector("#variants"),
+			name: "charvars"
-			name: "variants"
+		},
-		},
+		{
-		{
+			el: document.querySelector("#matrix"),
-			el: document.querySelector("#stylesets"),
+			name: "matrix"
-			name: "stylesets"
+		},
-		},
+		{
-		{
+			el: document.querySelector("#previews"),
-			el: document.querySelector("#charvars"),
+			name: "preview-all"
-			name: "charvars"
+		},
-		},
+		{
-		{
+			el: document.querySelector("#weights"),
-			el: document.querySelector("#matrix"),
+			name: "weights"
-			name: "matrix"
+		},
-		},
+		{
-		{
+			el: document.querySelector("#ligations"),
-			el: document.querySelector("#family"),
+			name: "ligations",
-			name: "family"
+			doubleTrim: "white"
-		},
+		}
-		{
+	];
-			el: document.querySelector("#previews"),
+	var current = 0;
-			name: "preview-all"
+	var step = function() {
-		},
+		var doit = function() {
-		{
+			captureElement(snapshotTasks[current], function() {
-			el: document.querySelector("#weights"),
+				current += 1;
-			name: "weights"
+				if (current >= snapshotTasks.length) window.close();
-		},
+				else setTimeout(step, 100);
-		{
+			});
-			el: document.querySelector("#ligations"),
+		};
-			name: "ligations",
+		if (snapshotTasks[current].prepare) snapshotTasks[current].prepare(doit);
-			doubleTrim: "white"
+		else setTimeout(doit, 100);
-		}
+	};
-	];
+	ipc.send("snapshot", "i am ready");
-	var current = 0;
+	console.log("I AM READY");
-	var step = function() {
+	setTimeout(step, 2000);
-		var doit = function() {
+};
-			captureElement(snapshotTasks[current], function() {
-				current += 1;
-				if (current >= snapshotTasks.length) window.close();
-				else setTimeout(step, 100);
-			});
-		};
-		if (snapshotTasks[current].prepare) snapshotTasks[current].prepare(doit);
-		else setTimeout(doit, 100);
-	};
-	ipc.send("snapshot", "i am ready");
-	console.log("I AM READY");
-	setTimeout(step, 2000);
-};

snapshot/index.styl

@@ -1,374 +1,304 @@
-@import url('iosevka/webfont.css');
+@import url('iosevka/webfont.css');
-@import url('iosevka-slab/webfont.css');
+@import url('iosevka-slab/webfont.css');
-
+
-.thin
+.thin, .wght-100
-	font-weight: 100;
+	font-weight: 100;
-
+
-.extralight
+.extralight, .wght-200
-	font-weight: 200;
+	font-weight: 200;
-
+
-.light
+.light, .wght-300
-	font-weight: 300;
+	font-weight: 300;
-
+
-.medium
+.medium, .wght-500
-	font-weight: 500;
+	font-weight: 500;
-
+
-.semibold
+.semibold, .wght-600
-	font-weight: 600;
+	font-weight: 600;
-
+
-.bold
+.bold, .wght-700
-	font-weight: 700;
+	font-weight: 700;
-
+
-.extrabold
+.extrabold, .wght-800
-	font-weight: 800;
+	font-weight: 800;
-
+
-.heavy
+.heavy, .wght-900
-	font-weight: 900;
+	font-weight: 900;
-
+
-.italic
+.italic
-	font-style: italic;
+	font-style: italic;
-
+
-.slab
+.slab
-	font-family: 'Iosevka Slab Web', monospace;
+	font-family: 'Iosevka Slab Web', monospace;
-
+
-	&.oblique
+	&.oblique
-		font-family: 'Iosevka Slab Web Oblique', monospace;
+		font-family: 'Iosevka Slab Web Oblique', monospace;
-
+
-.oblique
+.oblique
-	font-family: 'Iosevka Web Oblique', monospace;
+	font-family: 'Iosevka Web Oblique', monospace;
-
+
-html, body
+html, body
-	margin: 0;
+	margin: 0;
-	padding: 0;
+	padding: 0;
-
+
-body
+body
-	font-family: 'Iosevka Web';
+	font-family: 'Iosevka Web';
-	background: #008000;
+	background: #008000;
-	padding-bottom: 60em;
+	padding-bottom: 60em;
-	font-size: 15px;
+	font-size: 15px;
-
+
-pre, code
+pre, code
-	font-family: 'Iosevka Web';
+	font-family: 'Iosevka Web';
-
+
-::-webkit-scrollbar
+::-webkit-scrollbar
-	display: none;
+	display: none;
-
+
-body > section
+body > section
-	margin: 3em auto;
+	margin: 3em auto;
-	width: 900px;
+	width: 900px;
-	background: white;
+	background: white;
-
+
-/* hljs */
+/* hljs */
-section.preview
+section.preview
-	text-align: center;
+	text-align: center;
-	font-size: 80%;
+	font-size: 80%;
-
+
-section.preview pre
+section.preview pre
-	display: inline-block;
+	display: inline-block;
-	text-align: left;
+	text-align: left;
-	margin: 1.2rem 0;
+	margin: 1.2rem 0;
-	line-height: 1.5;
+	line-height: 1.5;
-
+
-section.color-light
+section.color-light
-	background-color: hsl(39, 6%, 95%);
+	background-color: hsl(39, 6%, 95%);
-	color: #333;
+	color: #333;
-
+
-.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title
+.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title
-	color: #446fbd;
+	color: #446fbd;
-
+
-.color-light .comment
+.color-light .comment
-	color: hsl(0, 0%, 62%);
+	color: hsl(0, 0%, 62%);
-
+
-.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in
+.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in
-	color: #8757ad;
+	color: #8757ad;
-
+
-.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value
+.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value
-	color: #e88501;
+	color: #e88501;
-
+
-.color-light .number, .color-light .xml .attribute
+.color-light .number, .color-light .xml .attribute
-	color: #6d8600;
+	color: #6d8600;
-
+
-.color-light .operator
+.color-light .operator
-	color: #c33500;
+	color: #c33500;
-
+
-section.color-dark
+section.color-dark
-	background-color: hsl(39, 6%, 12%);
+	background-color: hsl(39, 6%, 12%);
-	color: #cfcfcf;
+	color: #cfcfcf;
-
+
-.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title
+.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title
-	color: #6c9ef8;
+	color: #6c9ef8;
-
+
-.color-dark .comment
+.color-dark .comment
-	color: #767676;
+	color: #767676;
-
+
-.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in
+.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in
-	color: #b77fdb;
+	color: #b77fdb;
-
+
-.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value
+.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value
-	color: #D89333;
+	color: #D89333;
-
+
-.color-dark .number, .color-dark .xml .attribute
+.color-dark .number, .color-dark .xml .attribute
-	color: #85a300;
+	color: #85a300;
-
+
-.color-dark .operator
+.color-dark .operator
-	color: #c34564;
+	color: #c34564;
-
+
-section#matrix
+section#matrix
-	height: 480px;
+	height: 480px;
-	position: relative;
+	position: relative;
-
+
-	> div
+	> div
-		position: absolute;
+		position: absolute;
-		font-size: 90px;
+		font-size: 90px;
-		left: 50%;
+		left: 50%;
-		margin-left: -4.75em;
+		margin-left: -4.75em;
-		top: 50%;
+		top: 50%;
-		margin-top: -1.95em;
+		margin-top: -1.95em;
-
+
-		> row
+		> row
-			display: block;
+			display: block;
-			text-align: center;
+			text-align: center;
-			line-height: 0.8em;
+			line-height: 0.8em;
-
+
-			> span
+			> span
-				font-size: 0.4em;
+				font-size: 0.4em;
-				padding: 0 0.5em;
+				padding: 0 0.5em;
-
+
-		&.slab
+		&.slab
-			margin-left: -4.25em;
+			margin-left: -4.25em;
-			margin-top: -1.44em;
+			margin-top: -1.44em;
-
+
-section#matrix > div > row > span
+section#matrix > div > row > span
-	font-size: 0.4em;
+	font-size: 0.4em;
-	padding: 0 0.5em;
+	padding: 0 0.5em;
-
+
-section.opentype
+section.opentype
-	width: 36em;
+	width: 30em;
-	padding: 0 8em;
+	padding: 0 8em;
-
+
-	> h2
+	> h2
-		display: none;
+		display: none;
-
+
-	> div.hr
+	> div.hr
-		font-size: 80%;
+		font-size: 80%;
-		text-transform: uppercase;
+		text-transform: uppercase;
-		letter-spacing: 0.2em;
+		letter-spacing: 0.2em;
-		margin: 3rem auto;
+		margin: 3rem auto;
-		text-align: center;
+		text-align: center;
-		display: block;
+		display: block;
-
+
-		&:before, &:after
+		&:before, &:after
-			content: '';
+			content: '';
-			display: inline-block;
+			display: inline-block;
-			border-bottom: 1px solid #ddd;
+			border-bottom: 1px solid #ddd;
-			width: 4em;
+			width: 4em;
-			margin: 0 1em;
+			margin: 0 1em;
-			vertical-align: 0.3em;
+			vertical-align: 0.3em;
-
+
-	> ol
+	> ol.narrow
-		list-style: none;
+		width: 32em;
-		margin: 0;
+		list-style: none;
-		padding: 0;
+		margin: 0 -1em;
-		font-size: 1em;
+		padding: 0;
-		width: 36em;
+		display: flex;
-
+		justify-content: left;
-		> li
+		flex-wrap: wrap;
-			margin: 0;
+		overflow: hidden;
-			padding: 0;
+
-			position: relative;
+		> li
-			height: 4.5em;
+			flex: none;
-			border-top: 1px solid #eee;
+			border-left: 1px solid #ddd;
-			margin-top: 0.4em;
+			margin-left: -1px;
-			padding-top: 0.4em;
+			margin-bottom: 0.5em;
-
+
-			&:first-child
+		ol.group
-				border-top: none;
+			list-style: none;
-				margin-top: 0;
+			margin: 0;
-
+			padding: 0;
-			> .tag
+			display: flex;
-				display: block;
+
-				position: absolute;
+		ol.group > li
-				top: calc(0.8em - 0.2em - 1px);
+			margin: 0 0.5em;
-				left: 0;
+			padding: 0;
-				font-size: 0.8em;
+			border: none;
-				width: 2em;
+			width: 3em;
-				border: 1px solid rgba(0, 0, 0, 0.25);
+			flex: none;
-				padding: 0.2em;
+			display: flex;
-				padding-bottom: 0.1em;
+			justify-content: center;
-				text-align: center;
+			position: relative;
-				border-radius: 0.2em;
+
-
+			> .tag
-			> .description
+				font-size: 0.75em;
-				display: block;
+				display: block;
-				position: absolute;
+				position: absolute;
-				top: 0.8em;
+				width: auto;
-				right: 0;
+				left: 50%;
-				font-style: italic;
+				top: 0;
-				font-size: 0.8em;
+				margin-left: calc(-1em);
-				color: rgba(0, 0, 0, 0.5);
+
-
+			> .sample
-			> .sample
+				display: inline-block;
-				display: block;
+				font-size: 1.5em;
-				margin-top: 1.6em;
+				margin-top: 0.5em;
-
+				width: 1em;
-				&.italic
+				text-align: center;
-					margin-top: 0.25em;
+
-
+	> ol.wide
-		&.narrow
+		list-style: none;
-			display: flex;
+		margin: 0;
-			justify-content: center;
+		padding: 0;
-			flex-wrap: wrap;
+		font-size: 1em;
-			width: 35em;
+		width: 30em;
-			margin-left: ((35.5em - 35em) / 2);
+
-
+		> li
-			> li
+			margin: 0;
-				margin: 0 0.5em 0.5em;
+			padding: 0;
-				border: none;
+			position: relative;
-				width: 4em;
+			height: 7em;
-				flex: none;
+			border-top: 1px solid #eee;
-				display: flex;
+			margin-top: 0.4em;
-				justify-content: center;
+			padding-top: 0.4em;
-
+
-				> .tag
+			&:first-child
-					width: auto;
+				border-top: none;
-					left: 50%;
+				margin-top: 0;
-					margin-left: calc(-1.2em - 1px);
+
-
+			> .tag
-				> .sample
+				display: block;
-					display: inline-block;
+				position: absolute;
-					font-size: 2em;
+				top: calc(0.8em - 0.2em - 1px);
-					margin-top: 0.9em;
+				left: 0;
-					width: 1em;
+				font-size: 0.8em;
-					text-align: center;
+				width: 2em;
-
+				border: 1px solid rgba(0, 0, 0, 0.25);
-		b
+				padding: 0.2em;
-			font-weight: normal;
+				padding-bottom: 0.1em;
-			color: #c33500;
+				text-align: center;
-
+				border-radius: 0.2em;
-#family
+
-	background: white;
+			> .description
-	font-size: 0.9em;
+				display: block;
-
+				position: absolute;
-	.group
+				top: 0.8em;
-		display: flex;
+				right: 0;
-
+				font-style: italic;
-	.group a
+				font-size: 0.8em;
-		display: block;
+				color: rgba(0, 0, 0, 0.5);
-		padding: 0.5rem;
+
-		flex: 1;
+			> .sample
-		text-shadow: none;
+				display: block;
-		color: black;
+				margin-top: 1.6em;
-		text-decoration: none;
+
-
+				&.italic
-		&.italic, &.oblique
+					margin-top: 0.25em;
-			flex: 1.3;
+
-
+		b
-		&.slab
+			font-weight: normal;
-			flex: 1.2;
+			color: #c33500;
-
+
-		&.slab.italic, &.slab.oblique
+#ligations > table
-			flex: 1.7;
+	border-spacing: 0;
-
+	border-top: 2px solid black;
-#downloadoptions
+	border-bottom: 2px solid black;
-	display: flex;
+	margin: 1em auto;
-	justify-content: center;
+
-
+	th
-	> div
+		white-space: nowrap;
-		flex: none;
+
-		width: 12em;
+	pre
-		border: 3px solid #ddd;
+		margin: 0;
-		border-radius: 1em;
+
-		margin: 0.5em;
+	th, td
-
+		padding: 0.4em 1em;
-		> h3
+		text-align: left;
-			margin: 0;
+
-			padding: 1rem 0 1rem 0;
+	tr.note
-			text-align: center;
+		td
-			font-weight: bold;
+			border-top: 1px solid black;
-			font-size: 1em;
+
-
+		font-style: italic;
-		> ul
+		color: #c33500;
-			display: flex;
+
-			list-style: none;
+	em, e
-			margin: 0;
+		font-style: normal;
-			padding: 0;
+		color: #444;
-			justify-content: center;
+
-
+	e
-			> li
+		font-feature-settings: 'cv19' on;
-				margin: 0;
+
-				padding: 0;
+	s, .nolig
-				height: 3.5em;
+		text-decoration: none;
-				position: relative;
+		opacity: 0.25;
-				padding: 0 0.5em 1em;
+
-
+	.nolig
-				> 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;
-	border-bottom: 2px solid black;
-	margin: 1em auto;
-
-	th
-		white-space: nowrap;
-
-	pre
-		margin: 0;
-
-	th, td
-		padding: 0.4em 1em;
-		text-align: left;
-
-	tr.note
-		td
-			border-top: 1px solid black;
-
-		font-style: italic;
-		color: #c33500;
-
-	em, e
-		font-style: normal;
-		color: #444;
-
-	e
-		font-feature-settings: 'cv19' on;
-
-	s, .nolig
-		text-decoration: none;
-		opacity: 0.25;
-
-	.nolig
 		font-feature-settings: 'calt' 0;

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);
+}

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 };
+};

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/>");
+}

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>

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>

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̯uĕ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>

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>

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>

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>

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>

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>

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]
+[simple.v-y-cursive]
-tag = "cv80"
+tag = "cv49"
-Y = "straight"
+sampler = 'y'
+description = 'Cursive-like `y`'
+y = "cursive"
+yhooktop = "straight"
 
-[simple.v-capital-y-curly]
+[simple.v-eszet-traditional]
-tag = "cv81"
+tag = 'cv34'
-Y = "curly"
+sampler = 'ß'
+description = 'Traditional, Fraktur-like Eszet'
+eszet = 'traditional'
 
-[simple.v-capital-r-straight]
+[simple.v-eszet-sulzbacher]
-tag = "cv82"
+tag = 'cv35'
-R = "straight"
+sampler = 'ß'
+description = 'A more modern, beta-like Eszet'
+eszet = 'sulzbacher'
 
-[simple.v-capital-r-curly]
+[simple.v-zero-slashed]
-tag = "cv83"
+tag = 'cv13'
-R = "curly"
+sampler = '0'
+description = 'Slashed Zero `0`'
+zero = 'slashed'
 
-[simple.v-f-serifed]
+[simple.v-zero-dotted]
-tag = "cv84"
+tag = 'cv14'
-f = "serifed"
+sampler = '0'
+description = 'Dotted Zero `0`'
+zero = 'dotted'
 
-[simple.v-r-straight]
+[simple.v-zero-unslashed]
-tag = "cv85"
+tag = 'cv15'
-r = "straight"
+sampler = '0'
+description = 'O-like `0`'
+zero = 'unslashed'
 
-[simple.v-r-serifed]
+[simple.v-one-nobase]
-tag = "cv86"
+tag = "cv50"
-r = "serifed"
+sampler = '1'
+description = '`1` with bottom serif'
+one = "nobase"
 
-[simple.v-r-top-serifed]
+[simple.v-one-base]
-tag = "cv87"
+tag = "cv51"
-r = "top-serifed"
+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']

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}`));
+});