Move SS samples to table

README.md

@@ -47,11 +47,126 @@ Afrikaans, Aghem, Akan, Albanian, Asturian, Asu, Azerbaijani, Bafia, Bambara, Ba
 
 <!-- END Section-Language-List -->
 
-### Stylistic Sets and Character Variants
+### Stylistic Sets
 
-Iosevka supports accessing all letter variants using OpenType features, including `ss##` for applying a stylistic set, or `cv##` to cherry-pick variants.
+Iosevka contains various stylistic sets to change the shape of certain characters. Enabling corresponded OpenType feature to enable.
 
-![Style Sets](images/stylesets.png)
+<!-- BEGIN Section-OT-Stylistic-Sets -->
+<!-- THIS SECTION IS AUTOMATICALLY GENERATED. DO NOT EDIT. -->
+
+<table>
+<tr>
+<td><code>ss01</code></td>
+<td>Andale Mono Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss01-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss02</code></td>
+<td>Anonymous Pro Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss02-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss03</code></td>
+<td>Consolas Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss03-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss04</code></td>
+<td>Menlo Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss04-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss05</code></td>
+<td>Fira Mono Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss05-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss06</code></td>
+<td>Liberation Mono Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss06-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss07</code></td>
+<td>Monaco Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss07-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss08</code></td>
+<td>Pragmata Pro Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss08-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss09</code></td>
+<td>Source Code Pro Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss09-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss10</code></td>
+<td>Envy Code R Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss10-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss11</code></td>
+<td>X Window Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss11-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss12</code></td>
+<td>Ubuntu Mono Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss12-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss13</code></td>
+<td>Lucida Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss13-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss14</code></td>
+<td>JetBrains Mono Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss14-1.png"/></td>
+</tr>
+<tr>
+<td><code>ss20</code></td>
+<td>Curly Style</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/stylistic-set-ss20-1.png"/></td>
+</tr>
+</table>
+
+<!-- END Section-OT-Stylistic-Sets -->
+
+### Character Variants
+
+Alongside stylistic sets, Iosevka can also be configured to cherry-pick variants for each character using OpenType. The variants are shown below. To enable, assign the feature tag to the variant index. For example, setting `cv11` to `2` will enable single-storey `a`.
 
 ![Character Variants](images/charvars.png)
 

snapshot-src/get-snap.js

@@ -1,3 +1,5 @@
+"use strict";
+
 const { app, BrowserWindow } = require("electron");
 let argDir = process.argv[2];
 let fs = require("fs");

snapshot-src/index.js

@@ -1,5 +1,7 @@
 /* eslint-env node, browser */
 
+"use strict";
+
 const windowWidth = window.innerWidth;
 const windowHeight = window.innerHeight;
 const dpi = window.devicePixelRatio;
@@ -20,8 +22,34 @@ ipc.on("complete", function () {
 });
 
 const captureCallbacks = {
-	"amend-ligset-sampler-contents": cbAmendLigsetSamplerContents
+	cbAmendLigsetSamplerContents,
+	cbAmendStylisticSetContents
 };
+
+const ssString = "@real fox.quick(h){ *is_brown && it_jumps_over(dogs.lazy) } 0123456789 ABCKRWXYZ";
+function cbAmendStylisticSetContents(element, p) {
+	element.innerHTML = "";
+	const cfg = [
+		["upright", "hotCharSetUpright"],
+		["italic", "hotCharSetItalic"]
+	];
+	for (const [cls, kHC] of cfg) {
+		const line = document.createElement("div");
+		line.className = cls;
+		element.appendChild(line);
+		const sHC = new Set(p[kHC]);
+		for (const lch of ssString) {
+			if (sHC.has(lch)) {
+				const b = document.createElement("b");
+				b.appendChild(document.createTextNode(lch));
+				line.appendChild(b);
+			} else {
+				line.append(document.createTextNode(lch));
+			}
+		}
+	}
+}
+
 function cbAmendLigsetSamplerContents(element, p) {
 	element.innerHTML = "";
 	if (p.tag === "calt") element.style.fontFeatureSettings = `'${p.tag}' ${p.rank}`;
@@ -90,12 +118,10 @@ function captureElement(options, callback) {
 window.onload = function () {
 	const snapshotTasks = [
 		{ el: "#languages", name: "languages" },
-		{ el: "#stylesets", name: "stylesets" },
 		{ el: "#charvars", name: "charvars" },
 		{ el: "#matrix", name: "matrix" },
 		{ el: "#previews", name: "preview-all" },
 		{ el: "#weights", name: "weights" },
-		// { el: "#ligations", name: "ligations", doubleTrim: "white" },
 		...packagingTasks
 	];
 	let current = 0;