keys: lower background letters in portrait styling
[sheet.git] / writing-latn.inc.pl
index 2498d2a9844149541787c4164f7b8f18b25a4864..57193c8c8376d96f14be33b60a24b625537d5404 100644 (file)
+use 5.014;
 use utf8;
+use warnings;
+use List::Util qw( pairs pairmap sum );
+
+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 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 {
-       return map {
-               m/\A(-?)(\d)(\d)/;
-               sprintf('<td%s>%s<br>%s',
-                       ' class=ex' x !!$1,
-                       '·' x $2, '·' x $3,
-               );
-       } @_;
+       my $code = shift;
+       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 {
+       my $code = shift or return '';
+
+       return join '', pairmap {
+               ($a =~ tr/123/❘❙❚/r) . ($b =~ tr/321/  /dr)
+       } split //, $code if $U;
+
+       my @cols = split //, $code;  # bar and space widths
+       my $width = sum(@cols);
+       return sprintf(
+               '<svg width="%d" height="%d" viewBox="-.5 0 %d %d"><path d="%s"/></svg>',
+               $width * 2, 14, $width, 7, join(' ',
+                       'M0,0',
+                       map {
+                               join('m1,-7', ('v7') x $_->[0]),  # line per bar width
+                               (map { sprintf 'm%d,-7', $_ + 1 } $_->[1] || ()),  # space forward
+                       }
+                       pairs @cols
+               )
+       );
 }
 
-my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
+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
+       );
+}
 
 (
-'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 { $_ && '<svg width="20" height="20" viewBox="0 0 32.919869 41.237183"><path d="'.$_.'" fill="black"/></svg>' || '' }
-       "m 7.567221,32.597162 c -0.91537,-0.915372 -0.94373,-1.201269 -0.22328,-2.25085 0.30063,-0.43797 0.92254,-1.538811 1.38202,-2.446311 0.45948,-0.9075 1.29351,-2.347878 1.8534,-3.200841 0.55989,-0.85296 1.01798,-1.628898 1.01798,-1.724304 0,-0.09541 0.48662,-0.850812 1.08139,-1.67868 1.42621,-1.985187 1.32166,-2.282739 -2.00891,-5.717373 -3.49072,-3.599778 -4.77248,-5.158692 -4.77248,-5.804421 0,-1.916217 2.34208,-2.567166 3.68339,-1.02375 0.47768,0.549651 1.63308,1.828017 2.56755,2.840811 0.93448,1.012794 2.09056,2.295294 2.56905,2.85 0.4785,0.554706 1.626,1.822449 2.55,2.817204 0.92401,0.994755 2.42251,2.782431 3.33001,3.972615 0.9075,1.190181 1.75125,2.16504 1.875,2.166354 0.12375,0.0012 0.225,0.154773 0.225,0.341025 0,0.186252 0.43875,0.844023 0.975,1.461717 3.1577,3.637278 3.94562,5.363239 2.93799,6.435808 -1.60631,1.709844 -2.34081,1.219857 -6.01299,-4.011259 -1.0725,-1.527804 -2.34024,-3.244113 -2.81719,-3.814023 l -0.86719,-1.036197 -0.68175,0.640461 c -0.83727,0.786576 -4.21889,6.472275 -4.48862,7.546954 -0.49337,1.965753 -2.90161,2.908812 -4.17537,1.63506 z",
-       "m 22.043871,32.468456 c -2.54255,-0.326661 -3.38398,-1.544499 -4.81466,-6.968455 -0.19585,-0.7425 -0.4291,-1.5525 -0.51834,-1.8 -0.0892,-0.2475 -0.14121,-0.550095 -0.11549,-0.672432 0.0257,-0.122337 -0.0956,-1.134837 -0.26949,-2.25 -0.17395,-1.115163 -0.42937,-3.597252 -0.56761,-5.515758 -0.38746,-5.377563 -1.11348,-6.350598 -4.62866,-6.203505 -2.43042,0.101703 -3.63026,-1.325448 -2.45994,-2.925966 0.69601,-0.951849 5.50619,-0.844413 7.50659,0.167661 2.95291,1.493982 3.62774,3.250266 3.80395,9.9 0.0773,2.916384 1.12657,8.719977 1.91982,10.6185 0.56037,1.341147 1.20597,1.683135 2.77907,1.472136 1.42425,-0.191028 2.76476,0.46713 2.76476,1.357431 0,1.439599 -3.18786,3.104599 -5.4,2.820388 z m -13.62503,2.486529 c -2.97619,-1.060458 -3.88952,-5.539702 -1.83614,-9.004984 1.08012,-1.822806 4.12258,-4.95 4.81588,-4.95 0.27649,0 0.8776,-0.221451 1.33579,-0.492111 2.78591,-1.645677 3.56761,1.565355 0.84573,3.474015 -0.70743,0.496068 -1.81078,1.276827 -2.4519,1.73502 -0.64112,0.45819 -1.4144,1.373076 -1.71841,2.033076 -1.61268,3.5011 1.50681,4.343371 4.62589,1.249002 1.94548,-1.930071 3.95985,-0.438954 2.77633,2.055148 -0.59439,1.252578 -3.20543,3.408309 -4.42315,3.651852 -0.47161,0.09432 -0.93014,0.289059 -1.01894,0.432747 -0.23582,0.381564 -1.6035,0.296397 -2.95108,-0.183765 z",
-       "m 11.712671,33.223511 c -1.92841,-1.671219 -2.39779,-3.846478 -2.20952,-10.239667 0.13107,-4.450689 0.32977,-5.283843 1.26014,-5.283843 0.35837,0 0.37675,-0.08827 0.0902,-0.433488 -0.59144,-0.712644 -0.23401,-1.763847 0.82005,-2.41179 0.54107,-0.332598 2.47235,-1.684722 4.29173,-3.004722 5.4854,-3.979758 5.80514,-4.160193 6.55296,-3.697962 1.47821,0.913695 1.19454,2.261727 -0.76224,3.622338 -0.77172,0.536595 -2.99189,2.156874 -4.93374,3.600624 -1.94184,1.44375 -3.70428,2.625 -3.91654,2.625 -0.279,0 -0.29514,0.09078 -0.0583,0.32766 0.22332,0.223323 0.27808,1.893411 0.17196,5.244612 -0.18521,5.849265 0.0548,6.630471 1.94289,6.324075 1.10345,-0.179067 2.47749,-1.220859 2.47749,-1.878426 0,-1.154874 2.27471,-0.548949 2.5893,0.689727 0.83877,3.302512 -5.65055,6.826228 -8.31646,4.515862 z",
-       "m 16.658571,30.301309 c 2.45812,-1.5192 3.27763,-4.60626 1.53221,-5.771715 -2.02848,-1.354443 -6.12731,3.222339 -5.03428,5.621292 0.43469,0.954031 2.08697,1.025002 3.50207,0.150423 z m -5.09788,3.90388 c -4.85043,-2.471766 -2.99482,-10.372069 3.075,-13.091884 0.86625,-0.388155 1.575,-0.757968 1.575,-0.821802 0,-1.184787 -3.1645,-6.88041 -6.42501,-11.564052 -1.6193,-2.326092 -1.88691,-3.62649 -0.9,-4.373274 1.16213,-0.87936 2.4495,-0.266325 3.41499,1.626186 0.32007,0.62739 1.19576,2.037282 1.94598,3.133089 0.75022,1.095807 1.36404,2.114817 1.36404,2.264463 0,0.149649 0.10125,0.317085 0.225,0.372087 0.12375,0.055 0.54056,0.707499 0.92625,1.449999 0.38569,0.7425 1.34558,2.565 2.13308,4.05 4.57305,8.623449 5.71567,10.911063 5.71567,11.443236 0,0.897234 -0.66659,1.622808 -1.58037,1.720233 -0.50617,0.05397 -1.3554,0.631123 -2.22193,1.510063 -2.90194,2.943516 -6.3025,3.782526 -9.2477,2.281656 z",
-       "M 11.416301,40.275002 C 9.371891,38.105546 8.971181,34.926017 9.629871,26.100001 l 0.25747,-3.45 -0.70324,-0.3 c -1.78806,-0.762786 -1.38834,-3.178251 0.62582,-3.781707 1.07336,-0.321585 1.25033,-0.507234 1.51678,-1.591179 1.48219,-6.029682 5.77808,-11.908764 9.96412,-13.636285 3.89121,-1.605846 5.01917,0.987391 1.34196,3.085216 -3.48155,1.986198 -5.50076,4.508421 -7.11566,8.888247 -1.22591,3.324864 -1.23647,3.285708 0.88574,3.285708 3.15834,0 4.21494,0.978411 3.19227,2.956032 l -0.47609,0.920658 -2.62171,0.08666 -2.62172,0.08666 -0.39454,1.95 c -0.22184,1.096467 -0.40015,4.011483 -0.40737,6.65971 l -0.0128,4.709709 0.9351,1.634376 c 1.61727,2.826699 -0.43273,4.949454 -2.57967,2.671206 z",
-       "m 6.315091,37.89482 c -3.25453,-0.735417 -4.91327,-2.831541 -3.42133,-4.323483 l 0.62866,-0.628665 0.79634,0.742008 c 3.39061,3.1593 5.26852,1.724091 6.36528,-4.864729 0.63186,-3.795915 0.64402,-3.72702 -0.6626,-3.752106 -2.47294,-0.04748 -1.77004,-2.279037 1.15506,-3.667092 1.23885,-0.587871 1.09664,-0.156795 1.74701,-5.295531 0.44776,-3.537954 0.46626,-4.321449 0.12631,-5.351484 -0.55636,-1.685805 -0.33748,-1.921302 3.78458,-4.071855 1.96938,-1.027464 3.87289,-2.039964 4.23002,-2.25 C 23.834401,2.802801 29.144791,0 29.461391,0 c 1.48001,0 1.4934,2.378133 0.0177,3.139332 -0.53018,0.273478 -1.90897,1.090522 -3.06397,1.815652 -1.155,0.725127 -3.00851,1.812186 -4.11892,2.415684 -1.11041,0.603495 -2.92794,1.72323 -4.03895,2.488299 l -2.02003,1.391034 -0.34103,2.25 c -0.94911,6.261855 -0.97091,6.182904 1.36893,4.957674 4.03592,-2.113365 4.46845,-2.233428 5.16119,-1.432674 1.44977,1.6758 0.95266,2.350077 -3.26936,4.434513 -4.75084,2.345523 -4.7335,2.31681 -6.06415,10.040488 -0.97554,5.662452 -2.72287,7.311072 -6.77768,6.394818 z",
-       "m 10.663361,33.748892 c -2.36275,-0.644724 -4.20205,-2.35392 -4.9702,-4.618657 -1.28395,-3.785439 1.75907,-16.213602 4.08647,-16.68978 1.52298,-0.311598 6.50995,-2.017083 7.86764,-2.690643 5.32393,-2.641233 7.9363,-3.231699 9.10909,-2.058903 1.31579,1.315791 0.9936,2.003061 -1.25163,2.66982 -0.85713,0.254541 -2.80849,1.054851 -4.33637,1.778472 -1.52788,0.723618 -3.51891,1.593171 -4.42452,1.932339 -0.90561,0.339165 -2.54251,1.092723 -3.63755,1.674567 l -1.99099,1.057902 -0.7477,2.022996 c -2.53109,6.848154 -1.83516,11.172996 1.79788,11.172996 2.46056,0 3.68617,-1.002537 5.77636,-4.725 0.92181,-1.641678 1.38773,-1.605606 3.18171,0.246327 0.81055,0.83673 2.38609,2.42298 3.50121,3.525 2.16047,2.135095 2.40489,2.751826 1.37613,3.472396 -0.81504,0.570879 -2.45937,-0.335556 -5.02714,-2.771218 -0.35913,-0.340656 -0.63573,-0.173865 -1.8004,1.085644 -1.51596,1.639404 -3.17615,2.610234 -4.99003,2.918001 -0.65233,0.110682 -1.38855,0.243492 -1.63605,0.295128 -0.2475,0.05164 -1.09526,-0.08218 -1.88391,-0.297387 z",
-       "M 6.664081,31.425002 C 6.461401,30.976481 6.448501,28.887838 6.625581,25.200001 7.418721,8.685907 7.168671,6.657211 4.515081,8.07736 3.004401,8.885851 2.170911,6.394981 3.597171,5.334301 c 3.91083,-2.908345 7.17561,0.469767 7.17561,7.424691 0,4.169367 -0.003,4.163979 2.02563,3.728934 1.12812,-0.241941 1.96437,-0.215856 3.55005,0.110751 1.52454,0.314004 3.42603,0.387432 7.17432,0.277035 4.73583,-0.139482 5.15124,-0.108459 5.81778,0.434439 l 0.71775,0.584643 -0.88656,0.992235 c -0.8556,0.957588 -0.9951,1.001412 -3.99525,1.255098 -3.64569,0.308268 -3.36489,0.161157 -2.97852,1.560495 0.44355,1.606425 0.5118,9.374392 0.0861,9.803401 -1.938,1.953183 -3.2394,0.563652 -3.5178,-3.756022 -0.37506,-5.819343 -1.10088,-6.75 -5.26428,-6.75 -2.68035,0 -3.4026,1.340331 -3.26886,6.066201 0.11247,3.973837 -0.43362,5.015302 -2.63724,5.029705 -0.36228,0.0024 -0.75558,-0.280782 -0.93189,-0.670905 z",
-       "m 13.641581,31.047584 c -2.20134,-2.167327 -1.96008,-16.347583 0.27816,-16.347583 1.88304,0 1.96017,0.509079 1.43898,9.49932 -0.17049,2.940567 0.10863,3.70068 1.35885,3.70068 0.53001,0 1.79025,-1.066458 1.79025,-1.514967 0,-0.345807 1.46295,0.05886 1.83546,0.507708 2.23629,2.694543 -4.15824,6.658948 -6.7017,4.154842 z",
-       undef, # j
-       undef, # k
-       "m 21.819781,31.956137 c -0.495,-0.217209 -3.78621,-1.011087 -7.31382,-1.764175 -8.42616,-1.798851 -7.48545,-0.01953 -7.36539,-13.93152 L 7.240801,4.650001 7.900711,4.11514 c 2.02272,-1.639441 2.36805,0.04817 2.36859,11.57517 l 0,9.840306 0.975,0.407349 c 1.0824,0.452223 8.28858,2.273388 11.325,2.862084 2.41305,0.467838 3.3,0.988038 3.3,1.935439 0,1.548831 -1.95753,2.138823 -4.05,1.220649 z",
-       "m 0.98200096,33.523792 -0.78,-0.675 1.33320004,-3.15 c 2.21355,-5.23004 3.7783,-11.70373 3.78879,-15.675 0.003,-1.11169 0.129,-1.725 0.35456,-1.725 0.19249,0 0.26086,-0.0891 0.1519,-0.1981 -0.38866,-0.38866 0.91691,-0.96433 1.96593,-0.86684 1.35198,0.12565 2.64027,1.07171 3.39429,2.4926 0.32333,0.60928 0.79038,1.31451 1.03788,1.56717 0.2475,0.25266 1.10944,1.29999 1.91542,2.3274 l 1.46543,1.86802 0.52987,-0.98862 c 0.29143,-0.54374 0.66959,-1.45279 0.84037,-2.02012 1.47454,-4.89852 2.41284,-6.02163 3.90361,-4.67251 0.2759,0.24969 0.93063,0.76606 1.45496,1.14749 1.64836,1.19913 5.48106,4.13755 6.10006,4.67674 0.32628,0.28422 1.38537,1.19177 2.35353,2.01677 2.0464,1.74382 2.34674,2.36889 1.44249,3.00225 -1.15215,0.807 -4.70574,0.20747 -4.70574,-0.79392 0,-1.75285 -6.61784,-5.85982 -7.06316,-4.38333 -0.51979,1.72338 -3.65835,8.0598 -4.15843,8.3954 -1.1529,0.77373 -2.20368,-0.37882 -6.67899,-7.32586 l -0.9054,-1.40546 -0.34701,1.50335 c -0.19086,0.82684 -0.34701,1.92221 -0.34701,2.43415 0,0.51195 -0.13108,1.3454 -0.29129,1.85212 -3.17596,10.04507 -3.26837,10.25971 -4.669,10.84493 -1.28225,0.53576 -1.16349,0.54991 -2.08626004,-0.24863 z",
-       "m 6.572901,34.956902 c -0.44487,-0.67895 -0.44679,-0.97801 -0.0226,-3.525 0.50853,-3.05372 0.97558,-6.9508 1.25035,-10.43311 0.15729,-1.99347 0.4773,-4.18086 0.90878,-6.21186 0.30665,-1.44344 4.63577,-0.93943 4.63577,0.53972 0,0.2952 0.135,0.62016 0.3,0.72214 0.165,0.10197 0.3,0.38646 0.3,0.63219 0,0.49015 0.45772,1.45166 2.41249,5.06781 3.39351,6.27768 4.24376,6.61465 4.54177,1.8 0.11234,-1.815 0.34033,-3.9075 0.50665,-4.65 0.16632,-0.7425 0.38574,-2.16 0.48761,-3.15 0.31794,-3.08984 0.61033,-3.67342 1.95425,-3.90047 2.63225,-0.44472 3.42165,0.70583 2.41268,3.51648 -1.0282,2.86421 -1.77863,7.09173 -2.16459,12.19412 -0.37331,4.93542 -0.90264,6.33987 -2.38946,6.33987 -0.93496,0 -2.90009,-1.13427 -3.10979,-1.79497 -0.10561,-0.33277 -0.30382,-0.60503 -0.44046,-0.60503 -0.13664,0 -0.50509,-0.50625 -0.81878,-1.125 -5.82517,-11.49007 -6.43077,-11.80352 -6.8103,-3.525 -0.30179,6.5828 -2.28684,10.65301 -3.95432,8.10811 z",
-       "m 17.675831,24.215552 c 2.20222,-1.24732 2.49157,-4.8815 0.47075,-5.91245 -2.6245,-1.33892 -4.95698,0.003 -4.91615,2.82825 0.0355,2.45606 0.68317,3.23288 3.10709,3.7267 0.0825,0.0168 0.68474,-0.27232 1.33831,-0.6425 z m -4.48831,4.01928 c -4.60465,-2.11229 -4.9648,-9.64165 -0.58884,-12.31055 4.06455,-2.47897 9.90511,-0.66463 10.6468,3.30737 1.19182,6.38253 -4.55564,11.52725 -10.05796,9.00318 z",
-       "m 16.053641,30.913262 c -1.58521,-0.86388 -1.75769,-1.6778 -1.75769,-8.29397 l 0,-5.78997 -0.975,-0.72197 c -0.53625,-0.39708 -1.5825,-1.04061 -2.325,-1.43006 -2.62446,-1.37657 -3.4231,-2.81256 -2.22858,-4.00707 0.75725,-0.75725 1.68616,-0.55736 3.90049,0.8393 3.0011,1.8929 5.36618,3.29018 7.92809,4.68385 2.92391,1.5906 3.78968,2.34355 4.03677,3.51072 0.46755,2.20846 -1.79092,2.20269 -5.05364,-0.0129 -1.84791,-1.25486 -1.87514,-1.20491 -2.14891,3.94201 l -0.1768,3.32388 0.7308,0.47883 c 0.56622,0.37101 0.9132,0.40948 1.54081,0.17087 2.15815,-0.82053 3.35966,0.16003 2.39377,1.95357 -0.94448,1.75379 -3.88496,2.4321 -5.86511,1.35295 z",
-       "m 10.726891,22.590282 c 2.30439,-2.3804 1.37936,-7.29149 -1.3734,-7.29149 -3.43519,0 -5.83824,3.3277 -4.65343,6.44399 0.61377,1.61435 4.72483,2.19246 6.02683,0.8475 z m 18.21387,15.13351 c -0.26195,-0.20625 -2.38863,-2.77204 -4.72597,-5.70176 -6.38976,-8.00921 -9.61245,-11.06166 -9.61245,-9.10467 0,1.42847 -4.44797,3.62389 -6.89292,3.40218 -8.50965004,-0.77162 -8.95007,-11.63257 -0.55675,-13.72968 0.77018,-0.19243 1.70497,-0.67415 2.0773,-1.07048 1.08453,-1.15443 2.06199,-0.50424 4.50115,2.99407 0.56168,0.80557 1.47034,1.95307 2.01926,2.55 0.54892,0.59694 1.72345,2.03034 2.61007,3.18534 0.88662,1.155 2.39501,3.00805 3.35197,4.11789 2.85292,3.30869 8.24754,9.34871 8.7815,9.83211 1.60416,1.45223 1.78769,2.93976 0.43854,3.55447 -0.96998,0.44195 -1.40108,0.43558 -1.9917,-0.0295 z",
-       "m 8.868811,35.998792 c -0.76349,-0.7635 -0.76147,-1.63061 0.006,-2.70887 0.92033,-1.29248 1.36708,-2.81266 2.0753,-7.06175 1.1022,-6.61292 1.19765,-7.39176 1.28425,-10.47938 l 0.0842,-3 -3.15,-0.0928 c -2.29939,-0.0677 -3.6039,0.0428 -4.83091,0.40916 -2.06568,0.6168 -2.96909,0.29574 -2.96909,-1.05517 0,-3.40344 12.06557,-4.42315 17.33256,-1.46485 3.49752,1.96444 7.19546,2.70585 10.17486,2.03998 1.98691,-0.44405 3.18386,0.62665 2.4648,2.20482 -1.18543,2.60174 -6.28037,2.37718 -12.33497,-0.54365 -2.25791,-1.08925 -3.23725,-0.70431 -3.23725,1.27243 0,0.27044 -0.19343,1.31034 -0.42985,2.31088 -0.23642,1.00054 -0.64752,3.23667 -0.91355,4.96917 -1.70452,11.10044 -2.15691,12.78489 -3.61162,13.4477 -1.04395,0.47565 -1.24755,0.44973 -1.94498,-0.2477 z",
-       "m 3.041411,36.973792 c -1.94485,-1.111 -2.57899004,-1.88737 -2.96054004,-3.62455 -0.16365,-0.7451 -0.0875,-1.13452 0.30716,-1.5706 0.92850004,-1.02599 1.64952004,-0.73049 3.16008004,1.29515 1.54785,2.0756 3.00003,-0.14534 4.75683,-7.275 0.46755,-1.8975 1.01241,-3.855 1.21077,-4.35 0.19836,-0.495 0.40617,-1.17 0.46185,-1.5 0.0557,-0.33 0.3189,-1.41 0.58503,-2.4 0.26613,-0.99 0.60393,-2.26213 0.75066,-2.82695 0.14673,-0.56483 0.47157,-1.14156 0.72186,-1.28162 0.25029,-0.14007 0.63048,-0.42372 0.84486,-0.63034 0.92196,-0.88848 5.5692,-3.57404 10.43982,-6.03296 2.8875,-1.45774 5.60835,-2.90418 6.04632,-3.21429 1.08387,-0.76747 2.11362,-0.70804 2.93808,0.16955 1.37118,1.45956 0.96621,1.79954 -6.63093,5.56661 -3.82674,1.8975 -7.10301,3.59383 -7.28058,3.76961 -0.1776,0.17579 -0.96405,0.69481 -1.74768,1.15338 -1.86249,1.08992 -2.39292,1.9296 -3.04908,4.82701 -0.29895,1.32 -0.86115,3.48 -1.24935,4.8 -0.38823,1.32 -0.85353,3.0075 -1.03404,3.75 -0.18051,0.7425 -0.57555,2.025 -0.87783,2.85 -0.30231,0.825 -0.71796,2.04 -0.92367,2.7 -1.11303,3.57117 -3.96366,5.25654 -6.46962,3.825 z",
-       "m 16.315961,31.732132 c -1.95282,-1.12912 -2.25063,-2.44234 -2.16813,-9.56018 0.0844,-7.27671 0.30909,-6.87319 -3.82815,-6.87319 -3.51876,0 -4.65372,-0.50612 -4.65372,-2.07528 0,-1.92756 0.21123,-1.96648 11.13801,-2.05211 l 9.87501,-0.0774 0.29349,0.77193 c 0.88632,2.33116 -0.24873,3.13286 -4.43553,3.13286 -4.22472,0 -4.14987,-0.0662 -4.55037,4.0271 -0.81309,8.31082 -0.0231,10.76316 2.76126,8.5729 2.03835,-1.60337 3.46167,0.60298 1.79313,2.7796 -1.50321,1.96093 -4.17135,2.54118 -6.225,1.35377 z",
-       undef, # u
-       "m 13.038981,17.120612 c -2.77722,-1.08591 -4.23714,-2.41178 -6.39687,-5.80945 -0.65889,-1.03653 -0.25344,-2.1993 0.86475,-2.47995 1.09569,-0.275 1.90119,0.31563 2.7708,2.0317 2.68449,5.2976 10.11939,4.716 13.04595,-1.02055 0.79437,-1.55709 3.27138,-1.46843 3.27138,0.1171 0,0.37046 -1.15014,2.30688 -1.71378,2.88542 -0.21243,0.21803 -0.38622,0.50402 -0.38622,0.63552 0,0.50695 -2.90865,3.13188 -4.05,3.65493 -1.63251,0.74815 -5.47455,0.74051 -7.40601,-0.0147 z",
-       undef, # w
-       undef, # x
-       undef, # y
-       undef, # z
-],
-'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
-}],
-'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' => [disptap(qw{
-       11 12 13 14 15 21 22 23 24 -24 25 31 32
-       33 34 35 41 42 43 44 45 51 52 53 54 55
-})],
-'Tap simplified' => [disptap(qw{
-       11 12 13 14 21 22 23 20 31 -31 -13 32 33
-       30 41 42 -13 43 40 10 51 52 53 50 -31 -40
-})],
-'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"/>
-       },
-],
-'Flag semaphore' => [
-       map {
-               local $_ = $_;
-               s/[1-4]\K(?=[4-9])/ /;
-               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 //, $_;
-               !$_ ? '-' : sprintf(
+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 => {
+       name => '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 => {
+       name => 'Old Roman Cursive',
+       style => [
+               'svg path { stroke-linecap: round; stroke-linejoin: round }',
+               '.sample span { margin-right: -10px }',
+       ],
+       list => [
+               map {
+                       s{\A-?\K(\w.+)}
+                        {<svg width="20" height="20" viewBox="0 0 12 20"><path d="$1"/></svg>}r
+               }
+               "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 => {
+       name => '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 => {
+       name => '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 => {
+       name => '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"/><path d="M%s"/>',
+                               @coords[0, 1],  # start point
+                               join(' ', map {
+                                       my $pos = join(',', @coords[$_*2, $_*2 + 1]);
+                                       $_ > 1 && $route[$_] == $route[$_ - 2] # curve back
+                                               ? 'Q4,4 '.$pos.'L' : $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 => {
+#      name => 'Palm Graffiti',
+#},
+ita2 => {
+       name => '<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
+       )],
+},
+moon => {
+       list => [
+               map { qq(<svg width="14" height="14" viewBox="-.5 -.5 7 7"><path d="$_"/></svg>) }
+               'M0,6 3,0 6,6',
+               'M1,0 V4 A2,2 0,0,0 5,4',
+               'M5,0 A4.5,3 0,0,0 5,6',
+               'M1,0 A4.5,3 0,0,1 1,6',
+               'M0,6 V0 H6',
+               'M1,6 V2 A2,2 0,0,1 5,2',
+               'M5,6 V2 A2,2 0,1,0 1,2',
+               'M1.5,3 A1.5,1.5 0,0,0 4.5,3 1.5,1.5 0,0,0 1.5,3 M3,1.5 A1,1.5 0,0,0 3,4.5',
+               'M3,0 V6',
+               'M5,0 V4 A2,2 0,0,1 1,4',
+               'M6,0 0,3 6,6',
+               'M0,0 V6 H6',
+               'M0,0 H6 V6',
+               'M0,6 V2 L6,6 V0',
+               'M0,3 A3,3 0,0,0 6,3 3,3 0,0,0 0,3',
+               'M6,4 H2 A2,1 0,0,1 2,2',
+               'M0,4 H4 A2,1 0,0,0 4,2',
+               'M0,0 6,6',
+               'M0,6 6,0',
+               'M0,3 H6',
+               'M0,0 V3 A3,3 0,0,0 6,3 V0',
+               'M0,0 3,6 6,0',
+               'M0,6 V3 A3,3 0,0,1 6,3 V6',
+               'M0,0 6,3 0,6',
+               'M6,0 V6 H0',
+               'M0,0 H6 L2,6 H6',
+       ],
+       style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+},
+braille => {
+       list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
+},
+tactile => {
+       name => '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 => {
+       name => '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 => {
+       name => '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 => {
+       name => '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 => {
+       name => '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 => {
+       name => '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 => {
+       name => 'Prussian semaphore',
+       list => [
+               map { /^\D+$/ ? $_ : sprintf
                        join('',
-                               '<svg width="20" 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 022 122 222 322 011 111 211 311
-         001 101 201 301 401 501 601 701 020
-       )
-],
-'Prussian semaphore' => [
-       map { !$_ ? '-' : sprintf
-               join('',
-                       '<svg width="20" 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 => {
+       name => '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 => {
+       name => '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 => {
+       name => '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 => {
+       name => '<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 => {
+       name => '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 => {
+       name => '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 => {
+       name => "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 031330
-               022020 130120 001320 233010 030210 022310 203001 233001
-               131001 231301 000202 023302 230003 032003 201003 101003
-       )
-],
-'Code 39' => [
-       # ISO/IEC 16388
-       map { tr/012/ ❘❙/r } qw(
-               211012 121012 221011 112012 212011 122011 111022 211021 121021 112021
-               211102 121102 221101 112102 212101 122101 111202 211201 121201 112201
-               201112 102112 202111 101212 201211 102211
-       )
-],
-'Code 128' => [
-       map { tr/1-3-/❘❙❚ /r }
-       # bar widths (1-3) followed by space of width 1 (implied) or 3 (-)
-       qw(
-               11-2 1-12 1-1-2 12-1 1-21 1-2-1 21-1 2-11 2-1-1 123  12-3 1-23 132
-               13-2 1-32 332   21-3 2-13 231   23-1 233  312   31-2 3-12 321  32-1
-       )
-],
-'<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>' => [
-       map { sprintf
-               '<svg width="20" height="20" viewBox="0 0 8 6">'
-               . '<path d="M1%s"/></svg>',
-               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 //
                }
-               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
-       )
-],
-'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 stroke-linecap="square" 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%s d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
-               ' stroke-linecap="round" stroke-linejoin="round"',
-               '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
-       ),
-],
-'Chromacons' => [
-       # Colour Alphabet by Paul Green-Armytage (2010)
-       map { sprintf '<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
-       },
-],
+               # 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 => {
+       title => 'Colour Alphabet by Paul Green-Armytage (2010)',
+#      style => '.sample { word-break: break-all }',
+       list => [
+               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
+               }
+       ],
+},
 );