Turn ligation list to table in README

README.md

@@ -57,32 +57,87 @@ Iosevka supports accessing all letter variants using OpenType features, includin
 
 Iosevka’s default ligation set is assigned to `calt` feature, though not all of them are enabled by default.
 
+Iosevka supports Language-Specific Ligations, which is the ligation set enabled only under certain languages. These ligation sets are assigned to custom feature tags. To use them, you need to turn **off** `calt` and enable the corresponded feature. The feature list is:
+
 <!-- BEGIN Section-OT-Ligation-Tags -->
 <!-- THIS SECTION IS AUTOMATICALLY GENERATED. DO NOT EDIT. -->
 
-Iosevka supports Language-Specific Ligations, which is the ligation set enabled only under certain languages. These ligation sets are assigned to custom feature tags. To use them, you need to turn **off** `calt` and enable the corresponded feature. The feature list is:
-
-- `dlig`: Discretionary ligatures.
-- `CLIK`: C-Like.
-- `JSPT`: JavaScript.
-- `PHPX`: PHP.
-- `MLXX`: ML.
-- `FSHP`: F#.
-- `FSTA`: F*.
-- `HSKL`: Haskell.
-- `IDRS`: Idris.
-- `ELMX`: Elm.
-- `PURS`: PureScript.
-- `SWFT`: Swift.
-- `COQX`: Coq.
-- `MTLB`: Matlab.
-- `VRLG`: Verilog.
-- `WFLM`: Wolfram Language (Mathematica).
+<table>
+<tr>
+<td><code>dlig</code></td>
+<td>Discretionary ligatures</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-dlig-1.png"/></td>
+</tr>
+<tr>
+<td><code>CLIK</code>; <code>JSPT</code>; <code>PHPX</code></td>
+<td>C-Like, JavaScript, PHP</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-CLIK-1.png"/></td>
+</tr>
+<tr>
+<td><code>MLXX</code>; <code>FSHP</code></td>
+<td>ML, F#</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-MLXX-1.png"/></td>
+</tr>
+<tr>
+<td><code>FSTA</code></td>
+<td>F*</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-FSTA-1.png"/></td>
+</tr>
+<tr>
+<td><code>HSKL</code>; <code>IDRS</code>; <code>ELMX</code>; <code>PURS</code></td>
+<td>Haskell, Idris, Elm, PureScript</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-HSKL-1.png"/></td>
+</tr>
+<tr>
+<td><code>SWFT</code></td>
+<td>Swift</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-SWFT-1.png"/></td>
+</tr>
+<tr>
+<td><code>COQX</code></td>
+<td>Coq</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-COQX-1.png"/></td>
+</tr>
+<tr>
+<td><code>MTLB</code></td>
+<td>Matlab</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-MTLB-1.png"/></td>
+</tr>
+<tr>
+<td><code>VRLG</code></td>
+<td>Verilog</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-VRLG-1.png"/></td>
+</tr>
+<tr>
+<td><code>WFLM</code></td>
+<td>Wolfram Language (Mathematica)</td>
+</tr>
+<tr>
+<td colspan="2"><img src="images/ligset-WFLM-1.png"/></td>
+</tr>
+</table>
 
 <!-- END Section-OT-Ligation-Tags -->
 
-![Ligations Sample](images/ligations.png)
-
+Please note that, due to the complex interactions when forming ligations, cherry-picking ligation groups will require a custom Iosevka build. The instructions could be seen below.
 
 ## Building from Source
 

changes/4.0.0-alpha.1.md

@@ -1,5 +1,6 @@
- * \[**Breaking**\] Change implementation of character variants to `cv##` and alternate substitutions.
+ * \[**Breaking**\] Change implementation of character variants to `cv##` and alternate substitutions (#572).
  * \[**Breaking**\] Change the building configuration format -- now we use dicts instead of “array of styles”.
  * \[**Breaking**\] Cleanup of weight levels and increase contrast under heavier weights.
  * Fix the shape of hook-top V's.
- * Add half-filled stars (`U+2BE8` ... `U+2BEB`, #708).
+ * Add half-filled stars (`U+2BE8` ... `U+2BEB`, #708).
+ * Add ligation set for Verilog (#710).

snapshot-src/index.js

@@ -5,6 +5,7 @@ const windowHeight = window.innerHeight;
 const dpi = window.devicePixelRatio;
 const ipc = require("electron").ipcRenderer;
 const packagingTasks = require("./packaging-tasks.json");
+const auxData = require("./index.data.json");
 
 let onScroll = function () {};
 ipc.on("scroll", function () {
@@ -18,13 +19,52 @@ ipc.on("complete", function () {
 	onComplete.apply(this, arguments);
 });
 
+const captureCallbacks = {
+	"amend-ligset-sampler-contents": cbAmendLigsetSamplerContents
+};
+function cbAmendLigsetSamplerContents(element, p) {
+	element.innerHTML = "";
+	if (p.tag === "calt") element.style.fontFeatureSettings = `'${p.tag}' ${p.rank}`;
+	else element.style.fontFeatureSettings = `'calt' off, '${p.tag}' ${p.rank}`;
+
+	const groupSet = new Set(p.ligSets);
+	for (const row of auxData.ligation.samples) {
+		const line = document.createElement("div");
+		element.appendChild(line);
+		for (let m = 0; m < row.length; m++) {
+			if (m > 0) line.appendChild(document.createTextNode(" "));
+			const item = row[m];
+			let rank = 0;
+			for (let k = item.tags.length; k-- > 0; ) {
+				if (groupSet.has(item.tags[k])) {
+					rank = k + 1;
+					break;
+				}
+			}
+			if (rank) {
+				const run = document.createElement("em");
+				run.appendChild(document.createTextNode(item.s));
+				run.className = `rank-${rank}`;
+				line.appendChild(run);
+			} else {
+				const run = document.createElement("s");
+				run.appendChild(document.createTextNode(item.s));
+				run.className = `rank-${rank}`;
+				line.appendChild(run);
+			}
+		}
+	}
+}
+
 function captureElement(options, callback) {
 	window.scroll(0, 0);
 	setTimeout(function () {
 		const element = document.querySelector(options.el);
 		if (options.applyClass) element.className = options.applyClass;
 		if (options.applyFeature) element.style = "font-feature-settings:" + options.applyFeature;
-
+		if (options.applyCallback) {
+			captureCallbacks[options.applyCallback](element, options.applyCallbackArgs);
+		}
 		const rect = element.getBoundingClientRect();
 		onScroll = function (event, arg) {
 			window.scrollTo(0, arg);
@@ -55,7 +95,7 @@ window.onload = function () {
 		{ el: "#matrix", name: "matrix" },
 		{ el: "#previews", name: "preview-all" },
 		{ el: "#weights", name: "weights" },
-		{ el: "#ligations", name: "ligations", doubleTrim: "white" },
+		// { el: "#ligations", name: "ligations", doubleTrim: "white" },
 		...packagingTasks
 	];
 	let current = 0;

snapshot-src/index.styl

@@ -352,28 +352,10 @@ section.style-sets
 			font-weight: normal;
 			color: #c33500;
 
-#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;
+#ligation-sampler
+	font-size: 12px;
+	width: 42em;
+	padding: 1em;
 
 	em
 		font-style: normal;
@@ -382,13 +364,10 @@ section.style-sets
 		&.rank-2
 			color: #c33500;
 
-	s, .nolig
+	s
 		text-decoration: none;
 		opacity: 0.25;
 
-	.nolig
-		font-feature-settings: 'calt' 0;
-
 #packaging-sampler
 	width: 18rem;
 	padding: 1rem;

snapshot-src/templates/partial/ligation.ejs

@@ -1,28 +1,9 @@
-<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.ligSets); _%>
-			<%_     const featureSettings = group.tag === 'calt' ? `style="font-feature-settings:'${group.tag}' ${group.rank}"` : `style="font-feature-settings: 'calt' off, '${group.tag}' ${group.rank}"` _%>
-				<tr class="note">
-					<td><%= group.tagName || group.tag %><%= group.rank === 1 ? '' : group.rank === 0 ? ' off' : ' ' + rank %></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.tags[1]) || tagSet.has(item.tags[2])) { _%><em class="rank-2"><%= item.s %></em><%_ _%>
-							<%_     } else if (tagSet.has(item.tags[0])) { _%><em class="rank-1"><%= item.s %></em><%_ _%>
-							<%_     } else { _%><s><%= item.s %></s><%_ } _%>
-							<%_ } _%></pre>
-						<%_ } _%>
-					</td>
-				</tr>
-			<%_ } _%>
-		</tbody>
-	</table>
+<section id="ligation-sampler">
+	<%_ for(const line of ligation.samples) { _%>
+	<div className="line"><%_ for(let i =  0; i < line.length; i++) { _%>
+		<%_     const item = line[i]; _%>
+		<%_     if(i > 0) { _%><%= " " %><%_ } _%>
+		<s><%= item.s %></s>
+	<%_     } _%></div>
+	<%_ } _%>
 </section>

utility/amend-readme/fragments/description-ot-ligation-tags.md

@@ -1 +0,0 @@
-Iosevka supports Language-Specific Ligations, which is the ligation set enabled only under certain languages. These ligation sets are assigned to custom feature tags. To use them, you need to turn **off** `calt` and enable the corresponded feature. The feature list is:

utility/amend-readme/index.js

@@ -161,13 +161,18 @@ async function processLigSetPreDef() {
 async function processLigSetOt() {
 	const ligData = await parseLigationData();
 	const md = new MdCol("Section-OT-Ligation-Tags");
-	const headerPath = path.resolve(__dirname, "fragments/description-ot-ligation-tags.md");
-	md.log(await fs.readFile(headerPath, "utf-8"));
-	for (const ls of ligData.nonMergeSets) {
+	md.log(`<table>`);
+	for (const ls of ligData.sets) {
 		if (!ls.rank || ls.tag === "calt") continue;
-		const longDesc = ls.desc;
-		md.log(`- \`${ls.tag}\`: ${longDesc}.`);
+		md.log(`<tr>`);
+		md.log(`<td>${ls.tagName.map(x => `<code>${x}</code>`).join("; ")}</td>`);
+		md.log(`<td>${ls.desc}</td>`);
+		md.log(`</tr>`);
+		md.log(`<tr>`);
+		md.log(`<td colspan="2"><img src="images/ligset-${ls.tag}-${ls.rank}.png"/></td>`);
+		md.log(`</tr>`);
 	}
+	md.log(`</table>`);
 	return md;
 }
 

utility/export-data/ligation-data.js

@@ -261,13 +261,13 @@ function buildLigationSet(ligData, getKey) {
 				tag: comp.tag,
 				rank: 1,
 				ligSets: [...ligSets],
-				tagName: comp.tag,
+				tagName: [comp.tag],
 				desc: comp.desc,
 				brief: comp.brief || comp.desc
 			};
 			ligationSets.set(key, item);
 		} else {
-			item.tagName += ", " + comp.tag;
+			item.tagName = [...item.tagName, comp.tag];
 			item.desc += ", " + comp.desc;
 			item.brief += ", " + comp.brief;
 		}

utility/generate-snapshot-page/index.js

@@ -9,6 +9,7 @@ const execMain = require("../shared/execMain");
 
 const inputPath = process.argv[2];
 const outputPath = process.argv[3];
+const outputDataPath = process.argv[4];
 
 execMain(main);
 
@@ -17,9 +18,11 @@ execMain(main);
 async function main() {
 	const weightGrades = [100, 200, 300, 400, 500, 600, 700, 800, 900];
 	const templatePath = path.join(inputPath, "index.ejs");
+	const variationData = await await parseVariantsData();
+	const ligationData = await getLigationData();
 	const html = await ejs.renderFile(templatePath, {
-		...(await parseVariantsData()),
-		ligation: await getLigationData(),
+		...variationData,
+		ligation: ligationData,
 		weights: weightGrades,
 		buildSsHtml(body, hc) {
 			const hcs = new Set(hc);
@@ -30,4 +33,5 @@ async function main() {
 		}
 	});
 	await fs.writeFile(outputPath, html);
+	await fs.writeJson(outputDataPath, { ligation: ligationData }, { spaces: "  " });
 }

verdafile.js

@@ -736,8 +736,8 @@ const SampleImagesPre = task(`sample-images:pre`, async target => {
 	await cp(`${DIST}/${sparkle}`, `${SNAPSHOT_TMP}/${sparkle}`);
 });
 
-const PackageSnapshotConfig = computed(`package-snapshot-image-config`, async target => {
-	const [plan] = await target.need(BuildPlans);
+const PackageSnapshotConfig = computed(`package-snapshot-config`, async target => {
+	const [plan, sh] = await target.need(BuildPlans, SnapShotHtml);
 	const cfg = [];
 	for (const key in plan.buildPlans) {
 		const p = plan.buildPlans[key];
@@ -749,6 +749,18 @@ const PackageSnapshotConfig = computed(`package-snapshot-image-config`, async ta
 			name: key
 		});
 	}
+
+	const de = JSON.parse(fs.readFileSync(`${sh.dir}/${sh.name}.data.json`));
+	for (const ls of de.ligation.nonMergeSets) {
+		cfg.push({
+			el: "#ligation-sampler",
+			applyClass: "iosevka",
+			applyFeature: `'${ls.tag}' ${ls.rank}`,
+			name: `ligset-${ls.tag}-${ls.rank}`,
+			applyCallback: `amend-ligset-sampler-contents`,
+			applyCallbackArgs: ls
+		});
+	}
 	return cfg;
 });
 const SnapShotJson = file(`${SNAPSHOT_TMP}/packaging-tasks.json`, async (target, out) => {
@@ -764,7 +776,8 @@ const SnapShotHtml = file(`${SNAPSHOT_TMP}/index.html`, async (target, out) => {
 		`node`,
 		`utility/generate-snapshot-page/index.js`,
 		"snapshot-src/templates",
-		out.full
+		out.full,
+		`${out.dir}/${out.name}.data.json`
 	);
 	await run(`node`, `utility/amend-readme/index`, cm.full, cmi.full, cmo.full);
 });
@@ -797,7 +810,6 @@ const SampleImages = task(`sample-images`, async target => {
 	await target.need(
 		ScreenShot("charvars"),
 		ScreenShot("languages"),
-		ScreenShot("ligations"),
 		ScreenShot("matrix"),
 		ScreenShot("preview-all"),
 		ScreenShot("stylesets"),