X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/480c2b91c1be148eb3f8cc801a40a394dcdec907..03abf85a7ec9775993766a3fd10cd2876aef0b42:/writing-latn.inc.pl

diff --git a/writing-latn.inc.pl b/writing-latn.inc.pl
index ec1b5a0..c411b1a 100644
--- a/writing-latn.inc.pl
+++ b/writing-latn.inc.pl
@@ -1,15 +1,54 @@
 use 5.014;
 use utf8;
+use warnings;
 use List::Util qw( pairs pairmap sum );
 
-my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
+my %C = (
+	red    => '#EC1C24',
+	blue   => '#3953A3',
+	yellow => '#F9EC31',
+	black  => '#231F20',
+);
 my $U = 0;  # optional unicode alternatives
 
+my @wrapstyle = (
+	'td { white-space: normal; word-spacing: 10em }', # force line break between words
+	'.sample { word-spacing: 0 }',
+	'.sample span { margin-right: 1ex; white-space: nowrap; display: inline-block }', # larger space between letters
+);
+my $spacestyle = '.sample span { margin-right: 0.5ex }';  # separate multiple letters
+my @tapstyle = (
+	@wrapstyle,
+	'{ line-height: 1ex }',
+	'td:not(.sample) { vertical-align: top }',
+	'.sample { font-size: 80% }',
+);
+
+my @hueorder = (
+	2,11,20,19,18,21,24,15,6,7,8,5,13, # red .. magenta, grey
+	1,10,9,12,3,4,0, 14,23,22,25,16,17,26, # dark, light hues
+);
+
+# Order to put similar sounds close to each other:
+#	  ┌ R Y G C B M X
+#	 ┌┼──────────────
+#	 W│ o e y h s f -
+#	  │muaixqgkdtbp l
+#	 K│ w n j c z v r
+
+my @hueletters = ((26) x 27);
+@hueletters[map { ord($_) - ord('a') } qw(
+	u a i x q g k d t b p m l   w n j c z v r   o e y h s f
+)] = @hueorder;
+
 sub disptap {
 	my $code = shift;
-	$code =~ m/\A(-?)(\d)(\d)/ or return $code;
-	return $1 . chr(0x1F031 + ($2 * 7) + $3) if $U;  # offset from domino tile horizontal-00-00
-	return $1 . join(' ', '·' x $2, '·' x $3);
+	my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
+	if ($U) {
+		# unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
+		return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
+	}
+	return $prefix . join(' ', map { '·' x $_ } @dots);
 }
 
 sub dispbar {
@@ -34,397 +73,571 @@ sub dispbar {
 	);
 }
 
-(
-'Uppercase' => [qw{ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z }],
-'Lowercase' => [qw{ a b c d e f g h i j k l m n o p q r s t u v w x y z }],
-'Sütterlin' => [qw{ a b c d e f g h i j k l m n o p q r ſ s t u v w x y z }],
-'Old Roman Cursive' => [
-	map { m/^(-?)(\w.*)/ ? $1.'<svg width="20" height="20" viewBox="0 0 12 20"><path d="'.$2.'"/></svg>' : $_ }
-	"m2,4 c1,2 8,9 8,9 M2,15 6,9",
-	"m2,4 c0,0 3,-2 4,1 1,2 0,9 3,9 1,-0 2,-1 2,-1 m-6,-2 c-5,4 -0,6 1,3",
-	"m4,7 4,-2 m-4,4 c0,0 -2,7 3,6",
-	"m3,2 c0,0 7,10 7,12 m-2,-4 c-5,2 -4,9 1,3",
-	"m3,10 4,0 m2,-7 c0,0 -7,1 -5,16",
-	"m4,11 5,-2 m-3,-4 7,-4 M0,18 c0,0 4,3 5,-3 2,-6 2,-10 2,-10",
-	"m3,6 7,-2 m-7,4 c-2,5 4,9 6,6 l1,3",
-	"m7,9 4,-0 m-8,0 c4,0 6,-1 5,6 M1,3 c2,-0 2,12 2,12",
-	'>', # i = j
-	"m6,8 -0,7",
-	"-m9,5 -5,4 4,4 m-4,-10 -1,13",
-	"m3,2 c0,0 -1,9 1,10 5,2 6,2 6,2",
-	"m0,16 3,-10 4,6 2,-5 5,4",
-	"m2,16 1,-9 5,8 2,-9",
-	"m5,8 c-2,0 -2,6 1,5 4,-2 1,-5 1,-5",
-	"m5,8 c0,0 -1,8 2,6 m-3,-7 5,3",
-	"m3,6 9,12 m-9,-11 c-4,1 -3,4 -3,4 0,0 2,2 6,-1",
-	"m0,6 c3,-1 3,-1 6,0 2,1 3,3 6,1 m-7,-1 -2,11",
-	"m13,3 c0,0 -5,2 -8,4 -2,3 -1,5 -2,9 -1,1 -4,2 -4,2",
-	"m2,7 8,0 m-4,1 c0,0 -1,8 3,5",
-	'>', # u = v
-	"m2,5 c0,0 3,5 6,3 3,-2 2,-3 2,-3",
-	'-',
-	"m3,19 c-1,-6 6,-17 6,-17 M1,8 c0,0 10,1 10,1",
-	"-m0,7 c2,-3 5,-2 5,1 l0,11 c0,0 -0,-4 -0,-10 -0,-4 4,-4 6,-3",
-	"-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
-],
-'Sutton <abbr title="American Sign Lanugage">ASL</abbr>' => [
-	# American manual alphabet in Sutton (U+1D800+) notation
-	map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
-	8F7a9c    847a9c    86Da9c    801a9c    84Aa9c
-	8CEa9c    8F0       815aa2    892a9c    892a9c9A2aac
-	840a9c    8DCa9c    88Da9c
-	819a9c    876a9c    840a9caA1 8F0a9caA1 81Aa9c
-	903a9c    8FBa9c    815a9c    80Ea9c    887a9c
-	806a9c    89Aa9c    800a9c945aaa
-	0         965aa6
-}],
-'Unistrokes' => [
-	map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
-	map {
-		sprintf('<circle cx="%s" cy="%s" r="1"/>', m/\AM(\d+),(\d+)(.?)/) . # start point
-		(!!$3 && qq(<path d="$_"/>))
-	}
-	'M3,8 V0',
-	'M0,0 6,4 0,8',
-	'M6,0 0,4 6,8',
-	'M6,0 0,4 6,8',
-	'M6,4 H0',
-	'M6,0 0,0 0,8',
-	'M0,8 6,8 6,0',
-	'M0,0 6,0 6,8',
-	'M3,0 V8',
-	'M6,0 6,8 0,8',
-	'M0,8 6,0',
-	'M0,0 0,8 6,8',
-	'M6,8 3,0 0,8',
-	'M0,8 3,0 6,8',
-	'M6,0 Q0,6 3,8 6,6 0,0',
-	'M0,0 Q4,8 6,4 4,0 0,8',
-	'M6,0 Q2,8 0,4 2,0 6,8',
-	'M0,0 6,8',
-	'M6,0 0,0 6,8 0,8',
-	'M0,4 H6',
-	'M6,0 3,8 0,0',
-	'M0,0 3,8 6,0',
-	'M0,0 0,8 6,0 6,8',
-	'M0,0 Q6,6 3,8 0,6 6,0',
-	'M6,0 0,8',
-	'M0,0 6,0 0,8 6,8',
-	'M3,4',
-],
-# 'Palm Graffiti' => [
-'<abbr title="International Telegraph Alphabet">ITA</abbr>2' => [
-	map { tr/01/○●/r =~ s/..\K/ /r } qw(
-	11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
-	00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
-	00100
-)],
-'Braille' => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
-'5-point Tactile' => [
-	map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
-	map {
-		join '', map { sprintf '<circle cx="%d" cy="%d" r="4"/>',
-			!$_ ?  9 : $_ & 1 ? 4 : 14,
-			!$_ ? 12 : $_ < 3 ? 4 : 20,
-		} split //
-	}
-	qw{
-		4 234 012 14 0 014 023 12
-		02 024 0134 23 013 03 01 123
-		0124 13 04 1 34 0123 134 0234
-		034 124
-	}
-],
-'Morse' => [map {tr/.-/‧‑/r} qw{
-	.- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
-	-. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
-}],
-'Tap code' => [map { disptap($_) } qw{
-	11 12 13 14 15 21 22 23  > 24 25 31 32
-	33 34 35 41 42 43 44 45 51 52 53 54 55
-}],
-'Short Tap' => [map { disptap($_) } qw{
-	11 12 13 14 21 22 23 20 > 31 -13 32 33
-	30 41 42 -13 43 40 10 51 52 53 50 -31 -40
-}],
-'Cards' => [(
-	map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) }  # spades, hearts
-	1 .. 11, 13, 14  # A 2-10 J Q K
-), '', chr(0x1F0CF), chr(0x1F0DF) ],
-'Maritime flags' => [
-	# International Code of Signals, SVG fills
-	map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
-	split /\n\n/, qq{
-		<path fill="$C{blue}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
-		<path fill="white" d="M0,0 h15 v30 h-15"/>
-
-		<path fill="$C{red}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
-
-		<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
-		<path fill="white" d="M0,6  h30 v18 h-30" />
-		<path fill="$C{red}" d="M0,12 h30 v6  h-30" />
-
-		<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{blue}" d="M0,6 h30 v18 h-30"/>
-
-		<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{blue}" d="M0,0 h30 v15 h-30"/>
-
-		<path fill="white" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{red}" d="M15,0 l15,15 -15,15 -15,-15"/>
-
-		<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{yellow}" d="M 0,0 h5 v30 h-5"/>
-		<path fill="$C{yellow}" d="M10,0 h5 v30 h-5"/>
-		<path fill="$C{yellow}" d="M20,0 h5 v30 h-5"/>
-
-		<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
-		<path fill="white" d="M0,0 h15 v30 h-15"/>
-
-		<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
-		<circle fill="$C{black}" r="7.5" cx="15" cy="15"/>
-
-		<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
-		<path fill="white" d="M0,10 h30 v10 h-30"/>
-
-		<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{yellow}" d="M0,0 h15 v30 h-15"/>
-
-		<path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
-
-		<path fill="white" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
-
-		<path fill="white" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{blue}" d="
-			M0,0     h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
-			m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
-			m7.5,-30 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
-			m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
-		"/>
-
-		<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{red}" d="M0,0 h30 v30"/>
-
-		<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
-		<path fill="white" d="M10,10 h10 v10 h-10"/>
-
-		<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
-
-		<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{yellow}" d="M12.5,0 v30 h5 v-30"/>
-		<path fill="$C{yellow}" d="M0,12.5 h30 v5 h-30"/>
-
-		<path fill="white" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{blue}" d="M10,10 h10 v10 h-10"/>
-
-		<path fill="white" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{red}" d="M0,0 h10 v30 h-10"/>
-		<path fill="$C{blue}" d="M20,0 h10 v30 h-10"/>
-
-		<path fill="white" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
-
-		<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
-		<path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
-
-		<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
-		<path fill="white" d="M5,5 h20 v20 h-20"/>
-		<path fill="$C{red}" d="M10,10 h10 v10 h-10"/>
-
-		<path fill="white" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{blue}" d="M12.5,0 v30 h5 v-30"/>
-		<path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>
-
-		<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6 M24,0h6l-30,30v-6
-			M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
-
-		<path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
-		<path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
-		<path fill="$C{yellow}" d="M0,0  h31 l-15,15"/>
-		<path fill="$C{red}" d="M0,30 h31 l-15,-15"/>
-
-
+sub disphues {
+	my ($index, $hues, $opaque) = @_;
+	$index >= 0 or $index = 26;
+	my @lum = ($index % 3, $index / 3 % 3, $index / 9);  # hue opacities (0..2)x3
+	my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
+		('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
+	return sprintf(
+		'<svg width="16" height="16" viewBox="0 0 12 12">%s</svg>',
+		join '', map {
+			my $colf = $lumf[ $lum[$_] ];
+			!$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
+				5 + $_, $_ == 1 ? 7 : 5, 5, sprintf($colf, $hues->[$_])
+			);
+		} 0 .. 2
+	);
+}
 
-		<path fill="$C{blue}" d="M0,5 30,15 0,25"/>
-		<path fill="$C{yellow}" d="M0,9 20,15 0,21"/>
+(
+uppercase => {
+	list => [qw{ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z }],
+},
+lowercase => {
+	list => [qw{ a b c d e f g h i j k l m n o p q r s t u v w x y z }],
+},
+suetterlin => {
+	title => 'Sütterlin',
+	style => [
+		'@font-face {
+			font-family: Suetterlin; /* R. G. Arens */
+			src: url("/suetterlin.ttf");
+		}',
+		'td { font-family: Suetterlin }',
+	],
+	list => [qw{ a b c d e f g h i j k l m n o p q r ſ s t u v w x y z }],
+},
+roman => {
+	title => 'Old Roman Cursive',
+	style => [
+		'svg path { stroke-linecap: round; stroke-linejoin: round }',
+		'.sample span { margin-right: -10px }',
+	],
+	list => [
+		map {
+			!m/^(-?)(\w.+)/ ? $_ :
+			$1.'<svg width="20" height="20" viewBox="0 0 12 20"><path d="'.$2.'"/></svg>'
+		}
+		"m2,4 c1,2 8,9 8,9 M2,15 6,9",
+		"m2,4 c0,0 3,-2 4,1 1,2 0,9 3,9 1,-0 2,-1 2,-1 m-6,-2 c-5,4 -0,6 1,3",
+		"m4,7 4,-2 m-4,4 c0,0 -2,7 3,6",
+		"m3,2 c0,0 7,10 7,12 m-2,-4 c-5,2 -4,9 1,3",
+		"m3,10 4,0 m2,-7 c0,0 -7,1 -5,16",
+		"m4,11 5,-2 m-3,-4 7,-4 M0,18 c0,0 4,3 5,-3 2,-6 2,-10 2,-10",
+		"m3,6 7,-2 m-7,4 c-2,5 4,9 6,6 l1,3",
+		"m7,9 4,-0 m-8,0 c4,0 6,-1 5,6 M1,3 c2,-0 2,12 2,12",
+		'>', # i = j
+		"m6,8 -0,7",
+		"-m9,5 -5,4 4,4 m-4,-10 -1,13",
+		"m3,2 c0,0 -1,9 1,10 5,2 6,2 6,2",
+		"m0,16 3,-10 4,6 2,-5 5,4",
+		"m2,16 1,-9 5,8 2,-9",
+		"m5,8 c-2,0 -2,6 1,5 4,-2 1,-5 1,-5",
+		"m5,8 c0,0 -1,8 2,6 m-3,-7 5,3",
+		"m3,6 9,12 m-9,-11 c-4,1 -3,4 -3,4 0,0 2,2 6,-1",
+		"m0,6 c3,-1 3,-1 6,0 2,1 3,3 6,1 m-7,-1 -2,11",
+		"m13,3 c0,0 -5,2 -8,4 -2,3 -1,5 -2,9 -1,1 -4,2 -4,2",
+		"m2,7 8,0 m-4,1 c0,0 -1,8 3,5",
+		'>', # u = v
+		"m2,5 c0,0 3,5 6,3 3,-2 2,-3 2,-3",
+		'-',
+		"m3,19 c-1,-6 6,-17 6,-17 M1,8 c0,0 10,1 10,1",
+		"-m0,7 c2,-3 5,-2 5,1 l0,11 c0,0 -0,-4 -0,-10 -0,-4 4,-4 6,-3",
+		"-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
+	],
+},
+sutton => {
+	title => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
+	style => $spacestyle,
+	list => [
+		# American manual alphabet in Sutton (U+1D800+) notation
+		map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
+		8F7a9c    847a9c    86Da9c    801a9c    84Aa9c
+		8CEa9c    8F0       815aa2    892a9c    892a9c9A2aac
+		840a9c    8DCa9c    88Da9c
+		819a9c    876a9c    840a9caA1 8F0a9caA1 81Aa9c
+		903a9c    8FBa9c    815a9c    80Ea9c    887a9c
+		806a9c    89Aa9c    800a9c945aaa
+		0         965aa6
+	}],
+},
+unistrokes => {
+	title => 'Unistrokes',
+	url   => 'https://www.google.com/patents/US5596656', # by Xerox
+	style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+	list => [
+		map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
+		map {
+			sprintf('<circle cx="%s" cy="%s" r="1"/>', m/\AM(\d+),(\d+)(.?)/) . # start point
+			(!!$3 && qq(<path d="$_"/>))
+		}
+		'M3,8 V0',
+		'M0,0 6,4 0,8',
+		'M6,0 0,4 6,8',
+		'M6,0 0,4 6,8',
+		'M6,4 H0',
+		'M6,0 0,0 0,8',
+		'M0,8 6,8 6,0',
+		'M0,0 6,0 6,8',
+		'M3,0 V8',
+		'M6,0 6,8 0,8',
+		'M0,8 6,0',
+		'M0,0 0,8 6,8',
+		'M6,8 3,0 0,8',
+		'M0,8 3,0 6,8',
+		'M6,0 Q0,6 3,8 6,6 0,0',
+		'M0,0 Q4,8 6,4 4,0 0,8',
+		'M6,0 Q2,8 0,4 2,0 6,8',
+		'M0,0 6,8',
+		'M6,0 0,0 6,8 0,8',
+		'M0,4 H6',
+		'M6,0 3,8 0,0',
+		'M0,0 3,8 6,0',
+		'M0,0 0,8 6,0 6,8',
+		'M0,0 Q6,6 3,8 0,6 6,0',
+		'M6,0 0,8',
+		'M0,0 6,0 0,8 6,8',
+		'M3,4',
+	],
+},
+edgewrite => {
+	title => 'EdgeWrite',
+	url   => 'http://depts.washington.edu/ewrite/', # patented US7729542
+	style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+	list => [
+		map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
+		map {
+			my @route = split //;
+			my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } @route; # x,y,
+			sprintf('<circle cx="%s" cy="%s" r="1"/>', @coords[0, 1]) . # start point
+			sprintf('<path d="M%s"/>', join ' ', map {
+				my $pos = join(',', @coords[$_*2, $_*2 + 1]);
+				$_ > 1 && $route[$_] == $route[$_ - 2] ? 'Q4,4 '.$pos.'L' : # curve back
+				$pos
+			} 0 .. $#route)
+		}
+		# corners (0..3) clockwise from top-left in order
+		qw(
+			213 0232 1023 1323 103 102 10132 0213 02 132 02123 023 20313 2031
+			10231 0102 10131 201 1032 013 0231 021 02131 0312 0313 0123  01
+		)
+	],
+},
+#graffiti => {
+#	title => 'Palm Graffiti',
+#},
+ita2 => {
+	title => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
+	style => [@wrapstyle, 'td { font-size: 50% }'],
+	list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
+		11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
+		00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
+		00100
+	)],
+},
+braille => {
+	list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
+},
+tactile => {
+	title => '5-point Tactile',
+	list => [
+		map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
+		map {
+			join '', map { sprintf '<circle cx="%d" cy="%d" r="4"/>',
+				!$_ ?  9 : $_ & 1 ? 4 : 14,
+				!$_ ? 12 : $_ < 3 ? 4 : 20,
+			} split //
+		}
+		qw{
+			4 234 012 14 0 014 023 12
+			02 024 0134 23 013 03 01 123
+			0124 13 04 1 34 0123 134 0234
+			034 124
+		}
+	],
+},
+morse => {
+	style => $spacestyle,
+	list => [map {tr/.-/‧‑/r} qw{
+		.- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
+		-. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
+	}],
+},
+tap => {
+	title => 'Tap code',
+	style => \@tapstyle,
+	list => [map { disptap($_) } qw{
+		11 12 13 14 15 21 22 23  > 24 25 31 32
+		33 34 35 41 42 43 44 45 51 52 53 54 55
+	}],
+},
+shorttap => {
+	title => 'Short Tap',
+	style => \@tapstyle,
+	list => [map { disptap($_) } qw{
+		11 12 13 14 21 22 23 20 > 31 -13 32 33
+		30 41 42 -13 43 40 10 51 52 53 50 -31 -40
+	}],
+},
+cards => {
+	style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
+	list => [(
+		map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) }  # spades, hearts
+		1 .. 11, 13, 14  # A 2-10 J Q K
+	), '', chr(0x1F0CF), chr(0x1F0DF) ],
+},
+maritime => {
+	title => 'Maritime flags',
+	style => $spacestyle,
+	list => [
+		# International Code of Signals, SVG fills
+		map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
+		split /\n\n/, qq{
+			<path fill="$C{blue}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
+			<path fill="white" d="M0,0 h15 v30 h-15"/>
+
+			<path fill="$C{red}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
+
+			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+			<path fill="white" d="M0,6  h30 v18 h-30" />
+			<path fill="$C{red}" d="M0,12 h30 v6  h-30" />
+
+			<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{blue}" d="M0,6 h30 v18 h-30"/>
+
+			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{blue}" d="M0,0 h30 v15 h-30"/>
+
+			<path fill="white" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{red}" d="M15,0 l15,15 -15,15 -15,-15"/>
+
+			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{yellow}" d="M 0,0 h5 v30 h-5"/>
+			<path fill="$C{yellow}" d="M10,0 h5 v30 h-5"/>
+			<path fill="$C{yellow}" d="M20,0 h5 v30 h-5"/>
+
+			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+			<path fill="white" d="M0,0 h15 v30 h-15"/>
+
+			<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
+			<circle fill="$C{black}" r="7.5" cx="15" cy="15"/>
+
+			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+			<path fill="white" d="M0,10 h30 v10 h-30"/>
+
+			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{yellow}" d="M0,0 h15 v30 h-15"/>
+
+			<path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
+
+			<path fill="white" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
+
+			<path fill="white" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{blue}" d="
+				M0,0     h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
+				m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
+				m7.5,-30 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
+				m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
+			"/>
+
+			<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{red}" d="M0,0 h30 v30"/>
+
+			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+			<path fill="white" d="M10,10 h10 v10 h-10"/>
+
+			<path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
+
+			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{yellow}" d="M12.5,0 v30 h5 v-30"/>
+			<path fill="$C{yellow}" d="M0,12.5 h30 v5 h-30"/>
+
+			<path fill="white" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{blue}" d="M10,10 h10 v10 h-10"/>
+
+			<path fill="white" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{red}" d="M0,0 h10 v30 h-10"/>
+			<path fill="$C{blue}" d="M20,0 h10 v30 h-10"/>
+
+			<path fill="white" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
+
+			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+			<path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
+
+			<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
+			<path fill="white" d="M5,5 h20 v20 h-20"/>
+			<path fill="$C{red}" d="M10,10 h10 v10 h-10"/>
+
+			<path fill="white" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{blue}" d="M12.5,0 v30 h5 v-30"/>
+			<path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>
+
+			<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6 M24,0h6l-30,30v-6
+				M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
+
+			<path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
+			<path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
+			<path fill="$C{yellow}" d="M0,0  h31 l-15,15"/>
+			<path fill="$C{red}" d="M0,30 h31 l-15,-15"/>
+
+
+
+			<path fill="$C{blue}" d="M0,5 30,15 0,25"/>
+			<path fill="$C{yellow}" d="M0,9 20,15 0,21"/>
 
-		<path fill="$C{blue}" d="M0,5 30,15 0,25"/>
-		<path fill="white" d="M15,10 30,15 15,20"/>
-	},
-],
-'Flag semaphore' => [
-	map {
-		local $_ = $_;
-		s/[1-4]\K(?=[4-9])/ /; # prevent unwanted vertical crossing
-		tr/1-9/↙←↖↑↗→↘↓/;
-		s{(\S)(?=.)}{<span style="position:absolute">$1</span>};
-		$_
-	}
-	qw(
-		1 2 3 4 5  6 7 21 31 46  14 51 16 17 23
-		24 25 26 27 34  35 47 56 57 36  67
-	)
-],
-'Chappe semaphore' => [
-	map {
-		my ($r, $pr, $pl) = split //, $_;
-		/^\D$/ ? $_ : sprintf(
+			<path fill="$C{blue}" d="M0,5 30,15 0,25"/>
+			<path fill="white" d="M15,10 30,15 15,20"/>
+		},
+	],
+},
+flag => {
+	title => 'Flag semaphore',
+	list => [
+		map {
+			local $_ = $_;
+			s/[1-4]\K(?=[4-9])/ /; # prevent unwanted vertical crossing
+			tr/1-9/↙←↖↑↗→↘↓/;
+			s{(\S)(?=.)}{<span style="position:absolute">$1</span>};
+			$_
+		}
+		qw(
+			1 2 3 4 5  6 7 21 31 46  14 51 16 17 23
+			24 25 26 27 34  35 47 56 57 36  67
+		)
+	],
+},
+chappe => {
+	title => 'Chappe semaphore',
+	list => [
+		map {
+			my ($r, $pr, $pl) = split //, $_;
+			/^\D$/ ? $_ : sprintf(
+				join('',
+					'<svg width="16" height="20" viewBox="0 0 10 15">',
+					'<path d="M5,6 v7"/>',
+					'<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
+					'</svg>',
+				),
+				['6', '3v3', '9v-3']->[$pl],
+				[ '',  'v3',  'v-3']->[$pr],
+				$r * 45,
+			);
+		}
+		# 360° rotation (0-7) and position state (0-2) of left and right bars
+		qw(
+		  021 121 221 321 421 521 621 721
+		  > 022 122 222 322 011 111 211 311
+		  001 101 201 301 401 501 601 701 020
+		)
+	],
+},
+prussian => {
+	title => 'Prussian semaphore',
+	list => [
+		map { /^\D+$/ ? $_ : sprintf
 			join('',
-				'<svg width="16" height="20" viewBox="0 0 10 15">',
-				'<path d="M5,6 v7"/>',
-				'<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
+				'<svg width="10" height="20" viewBox="0 0 8 18">',
+				'<path d="M4,1 v18"/>',
+				(map {(
+					qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
+					qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
+				)} 3, 7, 14),
 				'</svg>',
 			),
-			['6', '3v3', '9v-3']->[$pl],
-			[ '',  'v3',  'v-3']->[$pr],
-			$r * 45,
-		);
-	}
-	# 360° rotation (0-7) and position state (0-2) of left and right bars
-	qw(
-	  021 121 221 321 421 521 621 721
-	  > 022 122 222 322 011 111 211 311
-	  001 101 201 301 401 501 601 701 020
-	)
-],
-'Prussian semaphore' => [
-	map { /^\D+$/ ? $_ : sprintf
-		join('',
-			'<svg width="10" height="20" viewBox="0 0 8 18">',
-			'<path d="M4,1 v18"/>',
-			(map {(
-				qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
-				qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
-			)} 3, 7, 14),
-			'</svg>',
+			map { ($_ - 2) * 45 % 360 } split //, $_
+		}
+		# rotation state (0-3) for left and right bar of 3 rows
+		qw(
+			003000 000200 203300 000030 033030 000130 000330 032330 > 031330
+			022020 130120 001320 233010 030210 022310 203001 233001
+			131001 231301 000202 023302 230003 032003 201003 101003
+		)
+	],
+},
+code39 => {
+	title => 'Code 39',
+	list => [map { dispbar($_) } qw(
+		2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
+		1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
+		2121111211 1111211221 2111211211 1121211211 1111112221 2111112211
+		1121112211 1111212211 2211111121 1221111121 2221111111 1211211121
+		2211211111 1221211111            1221112111 0 1211212111
+	)], # ISO/IEC 16388
+},
+code93 => {
+	title => 'Code 93',
+	list => [map { dispbar($_) } qw(
+		211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
+		132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
+		221121 222111 112122 112221 122121 123111        311211 0 111141
+	)],
+},
+code128 => {
+	title => 'Code 128',
+	list => [map { dispbar($_) } qw(
+		111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
+		112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
+		213131 311123 311321 331121 312113 312311        212222 0 211412 23311120
+	)],
+},
+rm4scc => {
+	title => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
+	list => [
+		map {
+			my $len = length $_;
+			!$len ? '' : sprintf(
+				'<svg width="%d" height="20" viewBox="0 0 %d 6">'
+				. '<path d="M1%s"/></svg>',
+				$len * 5, $len * 2,
+				join ' m2',
+				map { sprintf ',%dv%dm0,-%d',
+					($_ & 1 ? 0 : 2),  2 + ($_ & 2) + ($_ & 1) * 2,
+					($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
+				}
+				split //
+			);
+		}
+		qw(
+								2121 2301
+			0132 0312 0330 2112 2130 2310
+			1023 1203 1221 3003 3021 3201
+			1032 1212 1230 3012 3030 3210
+			1122 1302 1320 3102 3120 3300
+			0033
+		), # 0 for space
+		'', 1, 3  # start/end
+	],
+},
+rgbmap => {
+	title => 'RGBmap',
+	style => [
+		'svg { isolation: isolate }',
+		'svg circle { mix-blend-mode: screen }',
+		'.sample { background: black }',
+	],
+	list => [
+		map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
+		@hueorder[23..25,20..22, 12, 6..11,0..5, 16..18, 13..15, 19, 26],
+	],
+},
+cmymap => {
+	title => 'CMYmap',
+	style => [
+		'svg { isolation: isolate }',  # mix on white
+		'svg circle { mix-blend-mode: multiply }',
+		'.sample { background: white }',
+	],
+	list => [
+		map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
+#		@hueorder[13..18, 19, 0..11, 20..25, 12, 26],
+		@hueletters
+	],
+},
+dni => {
+	title => "D'ni",
+	style => [
+		'svg { border: 1px solid currentColor }',
+		'.sample span + span svg { border-left: 0 }',
+	],
+	list => [
+		map {
+			state $v = [
+				'',
+				'M0,4 8,4',
+				'M0,8 Q4,4 8,8',
+				'M0,4 4,8 8,4',
+				'M2,0 2,4 8,4',
+				'M0,0 8,8 M0,8 8,0', # cross
+				'M3.5,4 h1', # dot
+			];
+			state $h = [
+				'',
+				'M4,0 4,8',
+				'M0,0 Q4,4 0,8',
+				'M4,-.5 0,4 4,8.5',
+				'M4,8 4,2 8,2',
+			];
+			sprintf '<svg width="16" height="16" viewBox="0 0 8 8"><path d="%s"/></svg>',
+				$h->[$_ % 5] . $v->[$_ / 5] || $v->[6];
+		} 0 .. 5*5
+	],
+},
+pigpen => {
+	style => [
+		'svg path { stroke-linecap: square }',
+		'.sample svg { margin-right: 0.1em }',
+	],
+	list => [
+		map {
+			qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
+		}
+		map {
+			local $_ = $_;
+			s/^H/mX,0/ or s/^V/m0,X/ or s/^/m0,0/;
+			s/[hv]\K|X/6/g;
+			s/(?:v|,[^0]).*?v\K/-/;
+			s/(?:h|m[^0]).*?h\K/-/;
+			m/h/ or s/v/l3,/g;
+			m/v/ or s/h([^h]*)/l$1,3/g;
+			my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1"/>);
+			qq(<path d="$_"/>$dot)
+		}
+		qw(
+			Hvh  vhv  vh  hvh  vhvh  Hhvh  hv  Vvhv  Hhv
+			Hvh. vhv. vh. hvh. vhvh. Hhvh. hv. Vvhv. Hhv.
+			vv  hh  Hhh  Vvv
+			vv. hh. Hhh. Vvv.
 		),
-		map { ($_ - 2) * 45 % 360 } split //, $_
-	}
-	# rotation state (0-3) for left and right bar of 3 rows
-	qw(
-		003000 000200 203300 000030 033030 000130 000330 032330 > 031330
-		022020 130120 001320 233010 030210 022310 203001 233001
-		131001 231301 000202 023302 230003 032003 201003 101003
-	)
-],
-'Code 39' => [map { dispbar($_) } qw(
-	2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
-	1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
-	2121111211 1111211221 2111211211 1121211211 1111112221 2111112211
-	1121112211 1111212211 2211111121 1221111121 2221111111 1211211121
-	2211211111 1221211111            1221112111 0 1211212111
-)], # ISO/IEC 16388
-'Code 93' => [map { dispbar($_) } qw(
-	211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
-	132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
-	221121 222111 112122 112221 122121 123111        311211 0 111141
-)],
-'Code 128' => [map { dispbar($_) } qw(
-	111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
-	112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
-	213131 311123 311321 331121 312113 312311        212222 0 211412 2331112
-)],
-'<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>' => [
-	map {
-		my $len = length $_;
-		!$len ? '' : sprintf(
-			'<svg width="%d" height="20" viewBox="0 0 %d 6">'
-			. '<path d="M1%s"/></svg>',
-			$len * 5, $len * 2,
-			join ' m2',
-			map { sprintf ',%dv%dm0,-%d',
-				($_ & 1 ? 0 : 2),  2 + ($_ & 2) + ($_ & 1) * 2,
-				($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
-			}
+	],
+},
+nyctographs => {
+	style => [
+		'svg path { stroke-linecap: round; stroke-linejoin: round }',
+		'.sample svg {
+			background: rgba(0,0,0, .1);
+			padding: 0.1em;
+			margin-right: 0.2em;
+		}',
+	],
+	list => [
+		map { s/M[\d,\hM]+(?=[M"])//gr }  # clean up superfluous moves
+		map { sprintf
+			'<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
+			. '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
+			'h.5v.5h-.5v-.5',  # start anchor
+			map { ['M', 'h0M', 'L']->[$_] }
 			split //
-		);
-	}
-	qw(
-		                    2121 2301
-		0132 0312 0330 2112 2130 2310
-		1023 1203 1221 3003 3021 3201
-		1032 1212 1230 3012 3030 3210
-		1122 1302 1320 3102 3120 3300
-		0033
-	), # 0 for space
-	'', 1, 3  # start/end
-],
-"D'ni" => [
-	map {
-		state $window = 'M-.5,-.5H8.5V8.5H-.5Z';
-		state $v = [
-			'',
-			'M0,4 8,4',
-			'M0,8 Q4,4 8,8',
-			'M0,4 4,8 8,4',
-			'M2,0 2,4 8,4',
-			'M0,0 8,8 M0,8 8,0', # cross
-			'M3.5,4 h1', # dot
-		];
-		state $h = [
-			'',
-			'M4,0 4,8',
-			'M0,0 Q4,4 0,8',
-			'M4,-.5 0,4 4,8.5',
-			'M4,8 4,2 8,2',
-		];
-		sprintf '<svg width="16" height="16" viewBox="-.5 -.5 9 9"><path d="%s"/></svg>',
-			$window . ($h->[$_ % 5] . $v->[$_ / 5] || $v->[6]);
-	} 0 .. 5*5
-],
-'Pigpen' => [
-	map {
-		qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
-	}
-	map {
-		local $_ = $_;
-		s/^H/mX,0/ or s/^V/m0,X/ or s/^/m0,0/;
-		s/[hv]\K|X/6/g;
-		s/(?:v|,[^0]).*?v\K/-/;
-		s/(?:h|m[^0]).*?h\K/-/;
-		m/h/ or s/v/l3,/g;
-		m/v/ or s/h([^h]*)/l$1,3/g;
-		my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1"/>);
-		qq(<path d="$_"/>$dot)
-	}
-	qw(
-		Hvh  vhv  vh  hvh  vhvh  Hhvh  hv  Vvhv  Hhv
-		Hvh. vhv. vh. hvh. vhvh. Hhvh. hv. Vvhv. Hhv.
-		vv  hh  Hhh  Vvv
-		vv. hh. Hhh. Vvv.
-	),
-],
-'Nyctographs' => [
-	map { s/M[\d,\hM]+(?=[M"])//gr }  # clean up superfluous moves
-	map { sprintf
-		'<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
-		. '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
-		'h.5v.5h-.5v-.5',  # start anchor
-		map { ['M', 'h0M', 'L']->[$_] }
-		split //
-	}
-	# draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
-	qw(
-		0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
-		0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020 0
-	),
-],
-'Chromacons' => [
-	# Colour Alphabet by Paul Green-Armytage (2010)
-	map {
-		sprintf !$_ ? '<span>%2$s</span>' : '<span style="background:#%s" title="%s">%s</span>',
-			split(/:/), chr(8195);
-	}
-	qw{
-		F0A3FF:Amethyst 0075DC:Blue      993F00:Caramel  4C005C:Damson   191919:Ebony
-		005C31:Forest   2BCE48:Green     FFCC99:Honeydew 808080:Iron     94FFB5:Jade
-		8F7C00:Khaki    9DCC00:Lime      C20088:Mallow
-		003380:Navy     FFA405:Orpiment  FFA8BB:Pink     426600:Quagmire FF0010:Red
-		5EF1F2:Sky      00998F:Turquoise E0FF66:Uranium  740AFF:Violet   990000:Wine
-		FFFF80:Xanthin  FFFF00:Yellow    FF5005:Zinnia   0
-	}
-],
+		}
+		# draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
+		qw(
+			0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
+			0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020 0000
+		),
+	],
+},
+chromacons => {
+#	style => '.sample { word-break: break-all }',
+	list => [
+		# Colour Alphabet by Paul Green-Armytage (2010)
+		map {
+			sprintf('<span%s>%s</span>',
+				!!$_ && sprintf(' style="background:#%s" title="%s"', split /:/),
+				chr(8195) . (!$_ && chr(8203)) # em space (plus zwsp for spaces)
+			);
+		}
+		qw{
+			F0A3FF:Amethyst 0075DC:Blue      993F00:Caramel  4C005C:Damson   191919:Ebony
+			005C31:Forest   2BCE48:Green     FFCC99:Honeydew 808080:Iron     94FFB5:Jade
+			8F7C00:Khaki    9DCC00:Lime      C20088:Mallow
+			003380:Navy     FFA405:Orpiment  FFA8BB:Pink     426600:Quagmire FF0010:Red
+			5EF1F2:Sky      00998F:Turquoise E0FF66:Uranium  740AFF:Violet   990000:Wine
+			FFFF80:Xanthin  FFFF00:Yellow    FF5005:Zinnia   0
+		}
+	],
+},
 );