xP: produce a custom font for IRC formatting

Given that the generated file needs a manual adjustment,
its small size, and the dependencies involved,
it will be checked in to the repository.

4 files changed, 101 insertions, 3 deletions

diff --git a/xP/Makefile b/xP/Makefile
index eb0c8f5..34de55a 100644
--- a/xP/Makefile
+++ b/xP/Makefile
@@ -2,7 +2,7 @@
 .SUFFIXES:
 
 outputs = xP proto.go public/proto.js public/mithril.js
-all: $(outputs)
+all: $(outputs) public/ircfmt.woff2
 
 xP: xP.go proto.go
 	go build -o $@
@@ -10,6 +10,8 @@ proto.go: ../xC-gen-proto.awk ../xC-gen-proto-go.awk ../xC-proto
 	awk -f ../xC-gen-proto.awk -f ../xC-gen-proto-go.awk ../xC-proto > $@
 public/proto.js: ../xC-gen-proto.awk ../xC-gen-proto-js.awk ../xC-proto
 	awk -f ../xC-gen-proto.awk -f ../xC-gen-proto-js.awk ../xC-proto > $@
+public/ircfmt.woff2: gen-ircfmt.awk
+	awk -v Output=$@ -f gen-ircfmt.awk
 public/mithril.js:
 	curl -Lo $@ https://unpkg.com/mithril/mithril.js
 clean:
diff --git a/xP/gen-ircfmt.awk b/xP/gen-ircfmt.awk
new file mode 100644
index 0000000..cc9a5a0
--- /dev/null
+++ b/xP/gen-ircfmt.awk
@@ -0,0 +1,89 @@
+# gen-ircfmt.awk: generate a supplementary font for IRC formatting characters
+#
+# Copyright (c) 2022, Přemysl Eric Janouch <p@janouch.name>
+# SPDX-License-Identifier: 0BSD
+#
+# Usage: awk -v Output=static/ircfmt.woff2 -f gen-ircfmt.awk
+# Clean up SVG byproducts yourself.
+
+BEGIN {
+	if (!Output) {
+		print "Error: you must specify the output filename"
+		exit 1
+	}
+}
+
+function glyph(name, code, path,    filename, actions, cmd) {
+	filename = Output "." name ".svg"
+
+	# Inkscape still does a terrible job at the stroke-to-path conversion.
+	actions = \
+		"select-by-id:group;" \
+		"selection-ungroup;" \
+		"select-clear;" \
+		"select-by-id:path;" \
+		"object-stroke-to-path;" \
+		"select-by-id:clip;" \
+		"path-intersection;" \
+		"select-all;" \
+		"path-combine;" \
+		"export-overwrite;" \
+		"export-filename:" filename ";" \
+		"export-do"
+
+	# These dimensions fit FontForge defaults, and happen to work well.
+	cmd = "inkscape --pipe --actions='" actions "'"
+	print "<?xml version='1.0' encoding='UTF-8' standalone='no'?>\n" \
+		"<svg version='1.1' xmlns='http://www.w3.org/2000/svg'\n" \
+		" width='1000' height='1000' viewBox='0 0 1000 1000'>\n" \
+		"  <rect x='0' y='0' width='1000' height='1000' />\n" \
+		"  <g id='group' transform='translate(200 200) scale(60, 60)'>\n" \
+		"    <rect id='clip' x='0' y='0' width='10' height='10' />\n" \
+		"    <path id='path' stroke-width='2' fill='none' stroke='#fff'\n" \
+		"     d='" path "' />\n" \
+		"  </g>\n" \
+		"</svg>\n" | cmd
+	close(cmd)
+
+	print "Select(0u" code ")\n" \
+		"Import('" filename "')" | FontForge
+}
+
+BEGIN {
+	FontForge = "fontforge -lang=ff -"
+	print "New()" | FontForge
+
+	# Designed a 10x10 raster, going for maximum simplicity.
+	glyph("B", "02", "m 6,5 c 0,0 2,0 2,2 0,2 -2,2 -2,2 h -3 v -8 h 2.5 c 0,0 2,0 2,2 0,2 -2,2 -2,2 h -2 Z")
+	glyph("C", "03", "m 7.6,7 A 3,4 0 0 1 4.25,8.875 3,4 0 0 1 2,5 3,4 0 0 1 4.25,1.125 3,4 0 0 1 7.6,3")
+	glyph("I", "1D", "m 3,9 h 4 m 0,-8 h -4 m 2,-1 v 10")
+	glyph("M", "11", "m 2,10 v -10 l 3,6 3,-6 v 10")
+	glyph("O", "0F", "m 1,9 l 8,-8 M 2,5 a 3,3 0 1 0 6,0 3,3 0 1 0 -6,0 z")
+	#glyph("R", "0F", "m 3,10 v -9 h 2 c 0,0 2.5,0 2.5,2.5 0,2.5 -2.5,2.5 -2.5,2.5 h -2 2.5 l 2.5,4.5")
+	glyph("S", "1E", "m 7.5,3 c 0,-1 -1,-2 -2.5,-2 -1.5,0 -2.5,1 -2.5,2 0,3 5,1 5,4 0,1 -1,2 -2.5,2 -1.5,0 -2.5,-1 -2.5,-2")
+	glyph("U", "1F", "m 2.5,0 v 6.5 c 0,1.5 1,2.5 2.5,2.5 1.5,0 2.5,-1 2.5,-2.5 v -6.5")
+	glyph("V", "16", "m 2,-1 3,11 3,-11")
+
+	# In practice, your typical browser font will overshoot its em box,
+	# so to make the display more cohesive, we need to do the same.
+	# Sadly, sf->use_typo_metrics can't be unset from FontForge script--
+	# this is necessary to prevent the caret from jumping upon the first
+	# inserted non-formatting character in xP's textarea.
+	# https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
+	print "SelectAll()\n" \
+		"Scale(115, 115, 0, 0)\n" \
+		"SetOS2Value('WinAscentIsOffset', 1)\n" \
+		"SetOS2Value('WinDescentIsOffset', 1)\n" \
+		"SetOS2Value('HHeadAscentIsOffset', 1)\n" \
+		"SetOS2Value('HHeadDescentIsOffset', 1)\n" \
+		"CorrectDirection()\n" \
+		"AutoWidth(100)\n" \
+		"AutoHint()\n" \
+		"AddExtrema()\n" \
+		"RoundToInt()\n" \
+		"SetFontNames('IRCFormatting-Regular'," \
+		" 'IRC Formatting', 'IRC Formatting Regular', 'Regular'," \
+		" 'Copyright (c) 2022, Premysl Eric Janouch')\n" \
+		"Generate('" Output "')\n" | FontForge
+	close(FontForge)
+}
diff --git a/xP/public/ircfmt.woff2 b/xP/public/ircfmt.woff2
new file mode 100644
index 0000000..d4262bc
--- /dev/null
+++ b/xP/public/ircfmt.woff2
diff --git a/xP/public/xP.css b/xP/public/xP.css
index 87cfec2..1f4dae8 100644
--- a/xP/public/xP.css
+++ b/xP/public/xP.css
@@ -1,7 +1,14 @@
+@font-face {
+	src: url('ircfmt.woff2') format('woff2');
+	font-family: 'IRC Formatting';
+	font-weight: normal;
+	font-style: normal;
+}
 body {
 	margin: 0;
 	padding: 0;
-	font-family: sans-serif;
+	/* Firefox only renders C0 within the textarea, why? */
+	font-family: 'IRC Formatting', sans-serif;
 	font-size: clamp(0.5rem, 2vw, 1rem);
 }
 .xP {
@@ -133,7 +140,7 @@ button:hover:active {
 	font-family: monospace;
 	overflow-y: auto;
 }
-.log, .content {
+.log, .content, .completions {
 	/* Note: https://bugs.chromium.org/p/chromium/issues/detail?id=1261435 */
 	white-space: break-spaces;
 	overflow-wrap: break-word;