3 use List::Util qw( pairs pairmap sum );
5 my %C = qw(red #EC1C24 blue #3953A3 yellow #F9EC31 black #231F20);
6 my $U = 0; # optional unicode alternatives
9 'td { white-space: normal; word-spacing: 5em }', # force line break between words
10 '.sample { word-spacing: 0 }',
11 '.sample span { margin-right: 1ex; white-space: nowrap }', # larger space between letters
13 my $spacestyle = '.sample span { margin-right: 0.5ex }'; # separate multiple letters
16 '{ line-height: 1ex }',
17 '.sample { font-size: 80% }',
22 my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
24 # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
25 return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
27 return $prefix . join(' ', map { '·' x $_ } @dots);
31 my $code = shift or return '';
33 return join '', pairmap {
34 ($a =~ tr/123/❘❙❚/r) . ($b =~ tr/321/ /dr)
35 } split //, $code if $U;
37 my @cols = split //, $code; # bar and space widths
38 my $width = sum(@cols);
40 '<svg width="%d" height="%d" viewBox="-.5 0 %d %d"><path d="%s"/></svg>',
41 $width * 2, 14, $width, 7, join(' ',
44 join('m1,-7', ('v7') x $_->[0]), # line per bar width
45 (map { sprintf 'm%d,-7', $_ + 1 } $_->[1] || ()), # space forward
53 my ($index, $hues, $opaque) = @_;
54 my @lum = ($index % 3, $index / 3 % 3, $index / 9); # hue opacities (0..2)x3
55 my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
56 ('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
58 '<svg width="16" height="16" viewBox="0 0 22 22">%s</svg>',
60 my $colf = $lumf[ $lum[$_] ];
61 !$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
62 10 + $_, $_ == 1 ? 12 : 10, 10, sprintf($colf, $hues->[$_])
70 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 }],
73 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 }],
79 font-family: Suetterlin; /* R. G. Arens */
80 src: url("/suetterlin.ttf");
82 'td { font-family: Suetterlin }',
84 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 }],
87 title => 'Old Roman Cursive',
89 'svg path { stroke-linecap: round; stroke-linejoin: round }',
90 '.sample span { margin-right: -10px }',
94 !m/^(-?)(\w.+)/ ? $_ :
95 $1.'<svg width="20" height="20" viewBox="0 0 12 20"><path d="'.$2.'"/></svg>'
97 "m2,4 c1,2 8,9 8,9 M2,15 6,9",
98 "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",
99 "m4,7 4,-2 m-4,4 c0,0 -2,7 3,6",
100 "m3,2 c0,0 7,10 7,12 m-2,-4 c-5,2 -4,9 1,3",
101 "m3,10 4,0 m2,-7 c0,0 -7,1 -5,16",
102 "m4,11 5,-2 m-3,-4 7,-4 M0,18 c0,0 4,3 5,-3 2,-6 2,-10 2,-10",
103 "m3,6 7,-2 m-7,4 c-2,5 4,9 6,6 l1,3",
104 "m7,9 4,-0 m-8,0 c4,0 6,-1 5,6 M1,3 c2,-0 2,12 2,12",
107 "-m9,5 -5,4 4,4 m-4,-10 -1,13",
108 "m3,2 c0,0 -1,9 1,10 5,2 6,2 6,2",
109 "m0,16 3,-10 4,6 2,-5 5,4",
110 "m2,16 1,-9 5,8 2,-9",
111 "m5,8 c-2,0 -2,6 1,5 4,-2 1,-5 1,-5",
112 "m5,8 c0,0 -1,8 2,6 m-3,-7 5,3",
113 "m3,6 9,12 m-9,-11 c-4,1 -3,4 -3,4 0,0 2,2 6,-1",
114 "m0,6 c3,-1 3,-1 6,0 2,1 3,3 6,1 m-7,-1 -2,11",
115 "m13,3 c0,0 -5,2 -8,4 -2,3 -1,5 -2,9 -1,1 -4,2 -4,2",
116 "m2,7 8,0 m-4,1 c0,0 -1,8 3,5",
118 "m2,5 c0,0 3,5 6,3 3,-2 2,-3 2,-3",
120 "m3,19 c-1,-6 6,-17 6,-17 M1,8 c0,0 10,1 10,1",
121 "-m0,7 c2,-3 5,-2 5,1 l0,11 c0,0 -0,-4 -0,-10 -0,-4 4,-4 6,-3",
122 "-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
126 title => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
127 style => $spacestyle,
129 # American manual alphabet in Sutton (U+1D800+) notation
130 map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
131 8F7a9c 847a9c 86Da9c 801a9c 84Aa9c
132 8CEa9c 8F0 815aa2 892a9c 892a9c9A2aac
134 819a9c 876a9c 840a9caA1 8F0a9caA1 81Aa9c
135 903a9c 8FBa9c 815a9c 80Ea9c 887a9c
136 806a9c 89Aa9c 800a9c945aaa
141 title => 'Unistrokes',
142 style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
144 map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
146 sprintf('<circle cx="%s" cy="%s" r="1"/>', m/\AM(\d+),(\d+)(.?)/) . # start point
147 (!!$3 && qq(<path d="$_"/>))
163 'M6,0 Q0,6 3,8 6,6 0,0',
164 'M0,0 Q4,8 6,4 4,0 0,8',
165 'M6,0 Q2,8 0,4 2,0 6,8',
172 'M0,0 Q6,6 3,8 0,6 6,0',
179 # title => 'Palm Graffiti',
182 title => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
183 style => [@wrapstyle, 'td { font-size: 50% }'],
184 list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
185 11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
186 00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
191 list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
194 title => '5-point Tactile',
196 map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
198 join '', map { sprintf '<circle cx="%d" cy="%d" r="4"/>',
199 !$_ ? 9 : $_ & 1 ? 4 : 14,
200 !$_ ? 12 : $_ < 3 ? 4 : 20,
204 4 234 012 14 0 014 023 12
205 02 024 0134 23 013 03 01 123
206 0124 13 04 1 34 0123 134 0234
212 style => $spacestyle,
213 list => [map {tr/.-/‧‑/r} qw{
214 .- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
215 -. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
221 list => [map { disptap($_) } qw{
222 11 12 13 14 15 21 22 23 > 24 25 31 32
223 33 34 35 41 42 43 44 45 51 52 53 54 55
227 title => 'Short Tap',
229 list => [map { disptap($_) } qw{
230 11 12 13 14 21 22 23 20 > 31 -13 32 33
231 30 41 42 -13 43 40 10 51 52 53 50 -31 -40
235 style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
237 map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) } # spades, hearts
238 1 .. 11, 13, 14 # A 2-10 J Q K
239 ), '', chr(0x1F0CF), chr(0x1F0DF) ],
242 title => 'Maritime flags',
243 style => $spacestyle,
245 # International Code of Signals, SVG fills
246 map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
248 <path fill="$C{blue}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
249 <path fill="white" d="M0,0 h15 v30 h-15"/>
251 <path fill="$C{red}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
253 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
254 <path fill="white" d="M0,6 h30 v18 h-30" />
255 <path fill="$C{red}" d="M0,12 h30 v6 h-30" />
257 <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
258 <path fill="$C{blue}" d="M0,6 h30 v18 h-30"/>
260 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
261 <path fill="$C{blue}" d="M0,0 h30 v15 h-30"/>
263 <path fill="white" d="M0,0 h30v30 h-30z"/>
264 <path fill="$C{red}" d="M15,0 l15,15 -15,15 -15,-15"/>
266 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
267 <path fill="$C{yellow}" d="M 0,0 h5 v30 h-5"/>
268 <path fill="$C{yellow}" d="M10,0 h5 v30 h-5"/>
269 <path fill="$C{yellow}" d="M20,0 h5 v30 h-5"/>
271 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
272 <path fill="white" d="M0,0 h15 v30 h-15"/>
274 <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
275 <circle fill="$C{black}" r="7.5" cx="15" cy="15"/>
277 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
278 <path fill="white" d="M0,10 h30 v10 h-30"/>
280 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
281 <path fill="$C{yellow}" d="M0,0 h15 v30 h-15"/>
283 <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
284 <path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
286 <path fill="white" d="M0,0 h30v30 h-30z"/>
287 <path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
289 <path fill="white" d="M0,0 h30v30 h-30z"/>
290 <path fill="$C{blue}" d="
291 M0,0 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
292 m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
293 m7.5,-30 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
294 m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
297 <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
298 <path fill="$C{red}" d="M0,0 h30 v30"/>
300 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
301 <path fill="white" d="M10,10 h10 v10 h-10"/>
303 <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
305 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
306 <path fill="$C{yellow}" d="M12.5,0 v30 h5 v-30"/>
307 <path fill="$C{yellow}" d="M0,12.5 h30 v5 h-30"/>
309 <path fill="white" d="M0,0 h30v30 h-30z"/>
310 <path fill="$C{blue}" d="M10,10 h10 v10 h-10"/>
312 <path fill="white" d="M0,0 h30v30 h-30z"/>
313 <path fill="$C{red}" d="M0,0 h10 v30 h-10"/>
314 <path fill="$C{blue}" d="M20,0 h10 v30 h-10"/>
316 <path fill="white" d="M0,0 h30v30 h-30z"/>
317 <path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
319 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
320 <path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
322 <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
323 <path fill="white" d="M5,5 h20 v20 h-20"/>
324 <path fill="$C{red}" d="M10,10 h10 v10 h-10"/>
326 <path fill="white" d="M0,0 h30v30 h-30z"/>
327 <path fill="$C{blue}" d="M12.5,0 v30 h5 v-30"/>
328 <path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>
330 <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
331 <path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6 M24,0h6l-30,30v-6
332 M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
334 <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
335 <path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
336 <path fill="$C{yellow}" d="M0,0 h31 l-15,15"/>
337 <path fill="$C{red}" d="M0,30 h31 l-15,-15"/>
341 <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
342 <path fill="$C{yellow}" d="M0,9 20,15 0,21"/>
344 <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
345 <path fill="white" d="M15,10 30,15 15,20"/>
350 title => 'Flag semaphore',
354 s/[1-4]\K(?=[4-9])/ /; # prevent unwanted vertical crossing
356 s{(\S)(?=.)}{<span style="position:absolute">$1</span>};
360 1 2 3 4 5 6 7 21 31 46 14 51 16 17 23
361 24 25 26 27 34 35 47 56 57 36 67
366 title => 'Chappe semaphore',
369 my ($r, $pr, $pl) = split //, $_;
370 /^\D$/ ? $_ : sprintf(
372 '<svg width="16" height="20" viewBox="0 0 10 15">',
373 '<path d="M5,6 v7"/>',
374 '<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
377 ['6', '3v3', '9v-3']->[$pl],
378 [ '', 'v3', 'v-3']->[$pr],
382 # 360° rotation (0-7) and position state (0-2) of left and right bars
384 021 121 221 321 421 521 621 721
385 > 022 122 222 322 011 111 211 311
386 001 101 201 301 401 501 601 701 020
391 title => 'Prussian semaphore',
393 map { /^\D+$/ ? $_ : sprintf
395 '<svg width="10" height="20" viewBox="0 0 8 18">',
396 '<path d="M4,1 v18"/>',
398 qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
399 qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
403 map { ($_ - 2) * 45 % 360 } split //, $_
405 # rotation state (0-3) for left and right bar of 3 rows
407 003000 000200 203300 000030 033030 000130 000330 032330 > 031330
408 022020 130120 001320 233010 030210 022310 203001 233001
409 131001 231301 000202 023302 230003 032003 201003 101003
415 list => [map { dispbar($_) } qw(
416 2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
417 1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
418 2121111211 1111211221 2111211211 1121211211 1111112221 2111112211
419 1121112211 1111212211 2211111121 1221111121 2221111111 1211211121
420 2211211111 1221211111 1221112111 0 1211212111
425 list => [map { dispbar($_) } qw(
426 211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
427 132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
428 221121 222111 112122 112221 122121 123111 311211 0 111141
433 list => [map { dispbar($_) } qw(
434 111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
435 112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
436 213131 311123 311321 331121 312113 312311 212222 0 211412 2331112
440 title => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
444 !$len ? '' : sprintf(
445 '<svg width="%d" height="20" viewBox="0 0 %d 6">'
446 . '<path d="M1%s"/></svg>',
449 map { sprintf ',%dv%dm0,-%d',
450 ($_ & 1 ? 0 : 2), 2 + ($_ & 2) + ($_ & 1) * 2,
451 ($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
458 0132 0312 0330 2112 2130 2310
459 1023 1203 1221 3003 3021 3201
460 1032 1212 1230 3012 3030 3210
461 1122 1302 1320 3102 3120 3300
470 'svg { isolation: isolate }',
471 'svg circle { mix-blend-mode: screen }',
472 '.sample { background: black }',
475 map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
482 'svg { isolation: isolate }', # mix on white
483 'svg circle { mix-blend-mode: multiply }',
484 '.sample { background: white }',
487 map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
495 state $window = 'M-.5,-.5H8.5V8.5H-.5Z';
502 'M0,0 8,8 M0,8 8,0', # cross
512 sprintf '<svg width="16" height="16" viewBox="-.5 -.5 9 9"><path d="%s"/></svg>',
513 $window . ($h->[$_ % 5] . $v->[$_ / 5] || $v->[6]);
519 'svg path { stroke-linecap: square }',
520 '.sample svg { margin-right: 0.1em }',
524 qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
528 s/^H/mX,0/ or s/^V/m0,X/ or s/^/m0,0/;
530 s/(?:v|,[^0]).*?v\K/-/;
531 s/(?:h|m[^0]).*?h\K/-/;
533 m/v/ or s/h([^h]*)/l$1,3/g;
534 my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1"/>);
535 qq(<path d="$_"/>$dot)
538 Hvh vhv vh hvh vhvh Hhvh hv Vvhv Hhv
539 Hvh. vhv. vh. hvh. vhvh. Hhvh. hv. Vvhv. Hhv.
547 'svg path { stroke-linecap: round; stroke-linejoin: round }',
549 background: rgba(0,0,0, .1);
555 map { s/M[\d,\hM]+(?=[M"])//gr } # clean up superfluous moves
557 '<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
558 . '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
559 'h.5v.5h-.5v-.5', # start anchor
560 map { ['M', 'h0M', 'L']->[$_] }
563 # draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
565 0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
566 0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020 0
572 # Colour Alphabet by Paul Green-Armytage (2010)
574 sprintf('<span%s>%s</span>',
575 !!$_ && sprintf(' style="background:#%s" title="%s"', split /:/),
576 chr(8195), # em space
580 F0A3FF:Amethyst 0075DC:Blue 993F00:Caramel 4C005C:Damson 191919:Ebony
581 005C31:Forest 2BCE48:Green FFCC99:Honeydew 808080:Iron 94FFB5:Jade
582 8F7C00:Khaki 9DCC00:Lime C20088:Mallow
583 003380:Navy FFA405:Orpiment FFA8BB:Pink 426600:Quagmire FF0010:Red
584 5EF1F2:Sky 00998F:Turquoise E0FF66:Uranium 740AFF:Violet 990000:Wine
585 FFFF80:Xanthin FFFF00:Yellow FF5005:Zinnia 0