writing-latn.inc.pl

   1 use 5.014;
   2 use utf8;
   3 use warnings;
   4 use List::Util qw( pairs pairmap sum );
   5
   6 my %C = (
   7         red    => '#EC1C24',
   8         blue   => '#3953A3',
   9         yellow => '#F9EC31',
  10         black  => '#231F20',
  11 );
  12 my $U = 0;  # optional unicode alternatives
  13
  14 my @wrapstyle = (
  15         'td { white-space: normal; word-spacing: 10em }',
  16                 # force line break between words
  17         '.sample { word-spacing: 0 }',
  18         '.sample svg { margin-right: 1ex; white-space: nowrap; display: inline-block }',
  19                 # larger space between letters
  20 );
  21 my $spacestyle = '.sample svg { margin-right: 0.5ex }';  # separate letters
  22 my @tapstyle = (
  23         @wrapstyle,
  24         '{ line-height: 1ex }',
  25         'td:not(.sample) { vertical-align: top }',
  26         '.sample { font-size: 80% }',
  27 );
  28
  29 my @hueorder = (
  30         2,11,20,19,18,21,24,15,6,7,8,5,13, # red .. magenta, grey
  31         1,10,9,12,3,4,0, 14,23,22,25,16,17,26, # dark, light hues
  32 );
  33
  34 # Order to put similar sounds close to each other:
  35 #         ┌ R Y G C B M X
  36 #        ┌┼──────────────
  37 #        W│ o e y h s f -
  38 #         │muaixqgkdtbp l
  39 #        K│ w n j c z v r
  40
  41 my @hueletters = ((26) x 27);
  42 @hueletters[map { ord($_) - ord('a') } qw(
  43         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
  44 )] = @hueorder;
  45
  46 sub disptap {
  47         my $code = shift;
  48         my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
  49         if ($U) {
  50                 # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
  51                 return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
  52         }
  53         return $prefix . join(' ', map { '·' x $_ } @dots);
  54 }
  55
  56 sub dispdomino {
  57         my $code = shift;
  58         my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
  59         # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
  60         return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
  61 }
  62
  63 sub dispblock {
  64         my $code = shift;
  65         my ($prefix, $shape, $rotate) = $code =~ m/\A(-?)(\w)(\d?)/
  66                 or return $code;
  67         my %path = (
  68                 S => 'm0,1h1v-1h1',
  69                 Z => 'm0,0h1v1h1',
  70                 L => 'm0,0v2h1',
  71                 v => 'm0,0v1h1',
  72                 J => 'm1,0v2h-1',
  73                 T => 'm0,0h2.5h-1.5v1',
  74                 O => 'm0,0h1v1h-1',
  75                 I => 'm0,1h3',
  76                 i => 'm0,1h2',
  77                 o => 'm0,1h1',
  78         );
  79         my %col = qw(
  80                 S 120  Z 0  J 240  L 30  T 300  O 60  I 180
  81                 v 45,50%  i 165,50%  o 165,0%
  82         );
  83         s/\z(?<!%)/,100%/ for values %col;
  84         return sprintf(
  85                 '<svg height="24" viewBox="-.5 -.5 %s 4">'
  86                 . '<path d="%s" stroke="%s" fill="none"%s /></svg>',
  87                 $code eq 'I' ? 4 : $code =~ /T3|[LJO]$|[Iio]1/ ? 2 : 3,
  88                 $path{$shape}, "hsl($col{$shape},50%)", join('',
  89                         $rotate && sprintf(' transform="rotate(%s 1 1)"', $rotate * 90),
  90                         $prefix && ' style="opacity:.5"',
  91                 ),
  92         );
  93 }
  94
  95 sub dispbar {
  96         my $code = shift or return '';
  97
  98         return join '', pairmap {
  99                 ($a =~ tr/123/❘❙❚/r) . ($b =~ tr/321/  /dr)
 100         } split //, $code if $U;
 101
 102         my @cols = split //, $code;  # bar and space widths
 103         my $width = sum(@cols);
 104         return sprintf(
 105                 '<svg width="%d" height="%d" viewBox="-.5 0 %d %d"><path d="%s"/></svg>',
 106                 $width * 2, 14, $width, 7, join(' ',
 107                         'M0,0',
 108                         map {
 109                                 join('m1,-7', ('v7') x $_->[0]),  # line per bar width
 110                                 (map { sprintf 'm%d,-7', $_ + 1 } $_->[1] || ()),  # space forward
 111                         }
 112                         pairs @cols
 113                 )
 114         );
 115 }
 116
 117 sub disphues {
 118         my ($index, $hues, $opaque) = @_;
 119         $index >= 0 or $index = 26;
 120         my @lum = ($index % 3, $index / 3 % 3, $index / 9);  # hue opacities (0..2)x3
 121         my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
 122                 ('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
 123         return sprintf(
 124                 '<svg width="16" height="16" viewBox="0 0 12 12">%s</svg>',
 125                 join '', map {
 126                         my $colf = $lumf[ $lum[$_] ];
 127                         !$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
 128                                 5 + $_, $_ == 1 ? 7 : 5, 5, sprintf($colf, $hues->[$_])
 129                         );
 130                 } 0 .. 2
 131         );
 132 }
 133
 134 (
 135 uppercase => {
 136         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 }],
 137 },
 138 lowercase => {
 139         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 }],
 140 },
 141 suetterlin => {
 142         name => 'Sütterlin',
 143         style => [
 144                 '@font-face {
 145                         font-family: Suetterlin; /* R. G. Arens */
 146                         src: url("/suetterlin.ttf");
 147                 }',
 148                 'td { font-family: Suetterlin }',
 149         ],
 150         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 }],
 151 },
 152 roman => {
 153         name => 'Old Roman Cursive',
 154         style => [
 155                 'svg path { stroke-linecap: round; stroke-linejoin: round }',
 156                 '.sample svg { margin-right: -10px }',
 157         ],
 158         list => [
 159                 map {
 160                         s{\A-?\K(\w.+)}
 161                          {<svg width="20" height="20" viewBox="0 0 12 20"><path d="$1"/></svg>}r
 162                 }
 163                 "m2,4 c1,2 8,9 8,9 M2,15 6,9",
 164                 "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",
 165                 "m4,7 4,-2 m-4,4 c0,0 -2,7 3,6",
 166                 "m3,2 c0,0 7,10 7,12 m-2,-4 c-5,2 -4,9 1,3",
 167                 "m3,10 4,0 m2,-7 c0,0 -7,1 -5,16",
 168                 "m4,11 5,-2 m-3,-4 7,-4 M0,18 c0,0 4,3 5,-3 2,-6 2,-10 2,-10",
 169                 "m3,6 7,-2 m-7,4 c-2,5 4,9 6,6 l1,3",
 170                 "m7,9 4,-0 m-8,0 c4,0 6,-1 5,6 M1,3 c2,-0 2,12 2,12",
 171                 '>', # i = j
 172                 "m6,8 -0,7",
 173                 "-m9,5 -5,4 4,4 m-4,-10 -1,13",
 174                 "m3,2 c0,0 -1,9 1,10 5,2 6,2 6,2",
 175                 "m0,16 3,-10 4,6 2,-5 5,4",
 176                 "m2,16 1,-9 5,8 2,-9",
 177                 "m5,8 c-2,0 -2,6 1,5 4,-2 1,-5 1,-5",
 178                 "m5,8 c0,0 -1,8 2,6 m-3,-7 5,3",
 179                 "m3,6 9,12 m-9,-11 c-4,1 -3,4 -3,4 0,0 2,2 6,-1",
 180                 "m0,6 c3,-1 3,-1 6,0 2,1 3,3 6,1 m-7,-1 -2,11",
 181                 "m13,3 c0,0 -5,2 -8,4 -2,3 -1,5 -2,9 -1,1 -4,2 -4,2",
 182                 "m2,7 8,0 m-4,1 c0,0 -1,8 3,5",
 183                 '>', # u = v
 184                 "m2,5 c0,0 3,5 6,3 3,-2 2,-3 2,-3",
 185                 '-',
 186                 "m3,19 c-1,-6 6,-17 6,-17 M1,8 c0,0 10,1 10,1",
 187                 "-m0,7 c2,-3 5,-2 5,1 l0,11 c0,0 -0,-4 -0,-10 -0,-4 4,-4 6,-3",
 188                 "-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
 189         ],
 190 },
 191 sutton => {
 192         name => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
 193         style => $spacestyle,
 194         list => [
 195                 # American manual alphabet in Sutton (U+1D800+) notation
 196                 map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
 197                 8F7a9c    847a9c    86Da9c    801a9c    84Aa9c
 198                 8CEa9c    8F0       815aa2    892a9c    892a9c9A2aac
 199                 840a9c    8DCa9c    88Da9c
 200                 819a9c    876a9c    840a9caA1 8F0a9caA1 81Aa9c
 201                 903a9c    8FBa9c    815a9c    80Ea9c    887a9c
 202                 806a9c    89Aa9c    800a9c945aaa
 203                 0         965aa6
 204         }],
 205 },
 206 unistrokes => {
 207         name => 'Unistrokes',
 208         url   => 'https://www.google.com/patents/US5596656', # by Xerox
 209         style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
 210         list => [
 211                 map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
 212                 map {
 213                         sprintf('<circle cx="%s" cy="%s" r="1"/>', m/\AM(\d+),(\d+)(.?)/) . # start point
 214                         (!!$3 && qq(<path d="$_"/>))
 215                 }
 216                 'M3,8 V0',
 217                 'M0,0 6,4 0,8',
 218                 'M6,0 0,4 6,8',
 219                 'M6,0 0,4 6,8',
 220                 'M6,4 H0',
 221                 'M6,0 0,0 0,8',
 222                 'M0,8 6,8 6,0',
 223                 'M0,0 6,0 6,8',
 224                 'M3,0 V8',
 225                 'M6,0 6,8 0,8',
 226                 'M0,8 6,0',
 227                 'M0,0 0,8 6,8',
 228                 'M6,8 3,0 0,8',
 229                 'M0,8 3,0 6,8',
 230                 'M6,0 Q0,6 3,8 6,6 0,0',
 231                 'M0,0 Q4,8 6,4 4,0 0,8',
 232                 'M6,0 Q2,8 0,4 2,0 6,8',
 233                 'M0,0 6,8',
 234                 'M6,0 0,0 6,8 0,8',
 235                 'M0,4 H6',
 236                 'M6,0 3,8 0,0',
 237                 'M0,0 3,8 6,0',
 238                 'M0,0 0,8 6,0 6,8',
 239                 'M0,0 Q6,6 3,8 0,6 6,0',
 240                 'M6,0 0,8',
 241                 'M0,0 6,0 0,8 6,8',
 242                 'M3,4',
 243         ],
 244 },
 245 edgewrite => {
 246         name => 'EdgeWrite',
 247         url   => 'http://depts.washington.edu/ewrite/', # patented US7729542
 248         style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
 249         list => [
 250                 map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
 251                 map {
 252                         my @route = split //;
 253                         my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } @route; # x,y,
 254                         sprintf('<circle cx="%s" cy="%s" r="1"/><path d="M%s"/>',
 255                                 @coords[0, 1],  # start point
 256                                 join(' ', map {
 257                                         my $pos = join(',', @coords[$_*2, $_*2 + 1]);
 258                                         $_ > 1 && $route[$_] == $route[$_ - 2] # curve back
 259                                                 ? 'Q4,4 '.$pos.'L' : $pos
 260                                 } 0 .. $#route),
 261                         )
 262                 }
 263                 # corners (0..3) clockwise from top-left in order
 264                 qw(
 265                         213 0232 1023 1323 103 102 10132 0213 02 132 02123 023 20313 2031
 266                         10231 0102 10131 201 1032 013 0231 021 02131 0312 0313 0123  01
 267                 )
 268         ],
 269 },
 270 #graffiti => {
 271 #       name => 'Palm Graffiti',
 272 #},
 273 ita2 => {
 274         name => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
 275         style => [@wrapstyle, 'td { font-size: 50% }'],
 276         list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
 277                 11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
 278                 00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
 279                 00100
 280         )],
 281 },
 282 moon => {
 283         list => [
 284                 map { qq(<svg width="14" height="14" viewBox="-.5 -.5 7 7"><path d="$_"/></svg>) }
 285                 'M0,6 3,0 6,6',
 286                 'M1,0 V4 A2,2 0,0,0 5,4',
 287                 'M5,0 A4.5,3 0,0,0 5,6',
 288                 'M1,0 A4.5,3 0,0,1 1,6',
 289                 'M0,6 V0 H6',
 290                 'M1,6 V2 A2,2 0,0,1 5,2',
 291                 'M5,6 V2 A2,2 0,1,0 1,2',
 292                 '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',
 293                 'M3,0 V6',
 294                 'M5,0 V4 A2,2 0,0,1 1,4',
 295                 'M6,0 0,3 6,6',
 296                 'M0,0 V6 H6',
 297                 'M0,0 H6 V6',
 298                 'M0,6 V2 L6,6 V0',
 299                 'M0,3 A3,3 0,0,0 6,3 3,3 0,0,0 0,3',
 300                 'M6,4 H2 A2,1 0,0,1 2,2',
 301                 'M0,4 H4 A2,1 0,0,0 4,2',
 302                 'M0,0 6,6',
 303                 'M0,6 6,0',
 304                 'M0,3 H6',
 305                 'M0,0 V3 A3,3 0,0,0 6,3 V0',
 306                 'M0,0 3,6 6,0',
 307                 'M0,6 V3 A3,3 0,0,1 6,3 V6',
 308                 'M0,0 6,3 0,6',
 309                 'M6,0 V6 H0',
 310                 'M0,0 H6 L2,6 H6',
 311         ],
 312         style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
 313 },
 314 braille => {
 315         list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
 316 },
 317 tactile => {
 318         name => '5-point Tactile',
 319         list => [
 320                 map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
 321                 map {
 322                         join '', map { sprintf '<circle cx="%d" cy="%d" r="4"/>',
 323                                 !$_ ?  9 : $_ & 1 ? 4 : 14,
 324                                 !$_ ? 12 : $_ < 3 ? 4 : 20,
 325                         } split //
 326                 }
 327                 qw{
 328                         4 234 012 14 0 014 023 12
 329                         02 024 0134 23 013 03 01 123
 330                         0124 13 04 1 34 0123 134 0234
 331                         034 124
 332                 }
 333         ],
 334 },
 335 morse => {
 336         style => $spacestyle,
 337         list => [map {tr/.-/‧‑/r} qw{
 338                 .- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
 339                 -. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
 340         }],
 341 },
 342 tap => {
 343         name => 'Tap code',
 344         style => \@tapstyle,
 345         list => [map { disptap($_) } qw{
 346                 11 12 13 14 15 21 22 23  > 24 25 31 32
 347                 33 34 35 41 42 43 44 45 51 52 53 54 55
 348         }],
 349 },
 350 shorttap => {
 351         name => 'Short Tap',
 352         style => \@tapstyle,
 353         list => [map { disptap($_) } qw{
 354                 11 12 13 14 21 22 23 20 > 31 -13 32 33
 355                 30 41 42 -13 43 40 10 51 52 53 50 -31 -40
 356         }],
 357         altlist => [map { disptap($_) } qw{
 358                 10 14 -13 12 20 23 22 21 30 -34 13 33 32
 359                 31 40 43 -13 42 41 11 50 -23 -50 -1341 -31 -41
 360         }],
 361 },
 362 domino => {
 363         name => 'Domino tiles',
 364         list => [map { dispdomino($_) } qw{
 365                 10 11 20 21 22 30 31 32 33 40 41 42 43
 366                 44 50 51 52 53 54 55 60 61 62 63 64 65
 367         }],
 368 },
 369 tetromino => {
 370         style => [
 371                 'svg path { stroke-linecap: square }',
 372         ],
 373         name => 'Tetrominos',
 374         list => [map { dispblock($_) } qw{
 375                 T2 T1 I  T3
 376                 i  L1 J  L3
 377                 o1 I1 L2 L  -S1 Z1
 378                 O  J2 v2 -J3 S  T
 379                 J1 v1 v  v3 i1 Z
 380         }],
 381 },
 382 cards => {
 383         style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
 384         list => [(
 385                 map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) }  # spades, hearts
 386                 1 .. 11, 13, 14  # A 2-10 J Q K
 387         ), '', chr(0x1F0CF), chr(0x1F0DF) ],
 388 },
 389 maritime => {
 390         name => 'Maritime flags',
 391         style => $spacestyle,
 392         list => [
 393                 # International Code of Signals, SVG fills
 394                 map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
 395                 split /\n\n/, qq{
 396                         <path fill="$C{blue}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
 397                         <path fill="white" d="M0,0 h15 v30 h-15"/>
 398
 399                         <path fill="$C{red}" d="M0,0 h30 l-7.5,15 7.5,15 h-30 z"/>
 400
 401                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 402                         <path fill="white" d="M0,6  h30 v18 h-30" />
 403                         <path fill="$C{red}" d="M0,12 h30 v6  h-30" />
 404
 405                         <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
 406                         <path fill="$C{blue}" d="M0,6 h30 v18 h-30"/>
 407
 408                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 409                         <path fill="$C{blue}" d="M0,0 h30 v15 h-30"/>
 410
 411                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 412                         <path fill="$C{red}" d="M15,0 l15,15 -15,15 -15,-15"/>
 413
 414                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 415                         <path fill="$C{yellow}" d="M 0,0 h5 v30 h-5"/>
 416                         <path fill="$C{yellow}" d="M10,0 h5 v30 h-5"/>
 417                         <path fill="$C{yellow}" d="M20,0 h5 v30 h-5"/>
 418
 419                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 420                         <path fill="white" d="M0,0 h15 v30 h-15"/>
 421
 422                         <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
 423                         <circle fill="$C{black}" r="7.5" cx="15" cy="15"/>
 424
 425                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 426                         <path fill="white" d="M0,10 h30 v10 h-30"/>
 427
 428                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 429                         <path fill="$C{yellow}" d="M0,0 h15 v30 h-15"/>
 430
 431                         <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
 432                         <path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
 433
 434                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 435                         <path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11
 436                                 M0,4v22l11,-11 M30,4v22l-11,-11"/>
 437
 438                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 439                         <path fill="$C{blue}" d="
 440                                 M0,0     h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
 441                                 m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
 442                                 m7.5,-30 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
 443                                 m7.5,-15 h7.5v7.5h-7.5 m0,7.5h7.5v7.5h-7.5
 444                         "/>
 445
 446                         <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
 447                         <path fill="$C{red}" d="M0,0 h30 v30"/>
 448
 449                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 450                         <path fill="white" d="M10,10 h10 v10 h-10"/>
 451
 452                         <path fill="$C{yellow}" d="M0,0 h30v30 h-30z"/>
 453
 454                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 455                         <path fill="$C{yellow}" d="M12.5,0 v30 h5 v-30"/>
 456                         <path fill="$C{yellow}" d="M0,12.5 h30 v5 h-30"/>
 457
 458                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 459                         <path fill="$C{blue}" d="M10,10 h10 v10 h-10"/>
 460
 461                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 462                         <path fill="$C{red}" d="M0,0 h10 v30 h-10"/>
 463                         <path fill="$C{blue}" d="M20,0 h10 v30 h-10"/>
 464
 465                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 466                         <path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
 467
 468                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 469                         <path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11
 470                                 M0,4v22l11,-11 M30,4v22l-11,-11"/>
 471
 472                         <path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
 473                         <path fill="white" d="M5,5 h20 v20 h-20"/>
 474                         <path fill="$C{red}" d="M10,10 h10 v10 h-10"/>
 475
 476                         <path fill="white" d="M0,0 h30v30 h-30z"/>
 477                         <path fill="$C{blue}" d="M12.5,0 v30 h5 v-30"/>
 478                         <path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>
 479
 480                         <path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
 481                         <path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6
 482                                 M24,0h6l-30,30v-6 M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
 483
 484                         <path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
 485                         <path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
 486                         <path fill="$C{yellow}" d="M0,0  h31 l-15,15"/>
 487                         <path fill="$C{red}" d="M0,30 h31 l-15,-15"/>
 488
 489
 490
 491                         <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
 492                         <path fill="$C{yellow}" d="M0,9 20,15 0,21"/>
 493
 494                         <path fill="$C{blue}" d="M0,5 30,15 0,25"/>
 495                         <path fill="white" d="M15,10 30,15 15,20"/>
 496                 },
 497         ],
 498 },
 499 flag => {
 500         name => 'Flag semaphore',
 501         list => [
 502                 map {
 503                         local $_ = $_;
 504                         s/[1-4]\K(?=[4-9])/ /; # prevent unwanted vertical crossing
 505                         tr/1-9/↙←↖↑↗→↘↓/;
 506                         s{(\S)(?=.)}{<span style="position:absolute">$1</span>};
 507                         $_
 508                 }
 509                 qw(
 510                         1 2 3 4 5  6 7 21 31 46  14 51 16 17 23
 511                         24 25 26 27 34  35 47 56 57 36  67
 512                 )
 513         ],
 514 },
 515 chappe => {
 516         name => 'Chappe semaphore',
 517         list => [
 518                 map {
 519                         my ($r, $pr, $pl) = split //, $_;
 520                         /^\D$/ ? $_ : sprintf(
 521                                 join('',
 522                                         '<svg width="16" height="20" viewBox="0 0 10 15">',
 523                                         '<path d="M5,6 v7"/>',
 524                                         '<path d="M0,%s h10 %s" transform="rotate(%d 5 6)"/>',
 525                                         '</svg>',
 526                                 ),
 527                                 ['6', '3v3', '9v-3']->[$pl],
 528                                 [ '',  'v3',  'v-3']->[$pr],
 529                                 $r * 45,
 530                         );
 531                 }
 532                 # 360° rotation (0-7) and position state (0-2) of left and right bars
 533                 qw(
 534                   021 121 221 321 421 521 621 721
 535                   > 022 122 222 322 011 111 211 311
 536                   001 101 201 301 401 501 601 701 020
 537                 )
 538         ],
 539 },
 540 prussian => {
 541         name => 'Prussian semaphore',
 542         list => [
 543                 map { /^\D+$/ ? $_ : sprintf
 544                         join('',
 545                                 '<svg width="10" height="20" viewBox="0 0 8 18">',
 546                                 '<path d="M4,1 v18"/>',
 547                                 (map {(
 548                                         qq(<path d="M0 $_ h4" transform="rotate(%d 4 $_)"/>),
 549                                         qq(<path d="M4 $_ h4" transform="rotate(-%d 4 $_)"/>),
 550                                 )} 3, 7, 14),
 551                                 '</svg>',
 552                         ),
 553                         map { ($_ - 2) * 45 % 360 } split //, $_
 554                 }
 555                 # rotation state (0-3) for left and right bar of 3 rows
 556                 qw(
 557                         003000 000200 203300 000030 033030 000130 000330 032330 > 031330
 558                         022020 130120 001320 233010 030210 022310 203001 233001
 559                         131001 231301 000202 023302 230003 032003 201003 101003
 560                 )
 561         ],
 562 },
 563 code39 => {
 564         name => 'Code 39',
 565         list => [map { dispbar($_) } qw(
 566                 2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
 567                 1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
 568                 2121111211 1111211221 2111211211 1121211211 1111112221 2111112211
 569                 1121112211 1111212211 2211111121 1221111121 2221111111 1211211121
 570                 2211211111 1221211111            1221112111 0 1211212111
 571         )], # ISO/IEC 16388
 572 },
 573 code93 => {
 574         name => 'Code 93',
 575         list => [map { dispbar($_) } qw(
 576                 211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
 577                 132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
 578                 221121 222111 112122 112221 122121 123111        311211 0 111141
 579         )],
 580 },
 581 code128 => {
 582         name => 'Code 128',
 583         list => [map { dispbar($_) } qw(
 584                 111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
 585                 112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
 586                 213131 311123 311321 331121 312113 312311      212222 0 211412 23311120
 587         )],
 588 },
 589 rm4scc => {
 590         name => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
 591         list => [
 592                 map {
 593                         my $len = length $_;
 594                         !$len ? '' : sprintf(
 595                                 '<svg width="%d" height="20" viewBox="0 0 %d 6">'
 596                                 . '<path d="M1%s"/></svg>',
 597                                 $len * 5, $len * 2,
 598                                 join ' m2',
 599                                 map { sprintf ',%dv%dm0,-%d',
 600                                         ($_ & 1 ? 0 : 2),  2 + ($_ & 2) + ($_ & 1) * 2,
 601                                         ($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
 602                                 }
 603                                 split //
 604                         );
 605                 }
 606                 qw(
 607                                                                 2121 2301
 608                         0132 0312 0330 2112 2130 2310
 609                         1023 1203 1221 3003 3021 3201
 610                         1032 1212 1230 3012 3030 3210
 611                         1122 1302 1320 3102 3120 3300
 612                         0033
 613                 ), # 0 for space
 614                 '', 1, 3  # start/end
 615         ],
 616 },
 617 rgbmap => {
 618         name => 'RGBmap',
 619         style => [
 620                 'svg { isolation: isolate }',
 621                 'svg circle { mix-blend-mode: screen }',
 622                 '.sample { background: black }',
 623         ],
 624         list => [
 625                 map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
 626                 @hueorder[23..25,20..22, 12, 6..11,0..5, 16..18, 13..15, 19, 26],
 627         ],
 628 },
 629 cmymap => {
 630         name => 'CMYmap',
 631         style => [
 632                 'svg { isolation: isolate }',  # mix on white
 633                 'svg circle { mix-blend-mode: multiply }',
 634                 '.sample { background: white }',
 635         ],
 636         list => [
 637                 map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
 638 #               @hueorder[13..18, 19, 0..11, 20..25, 12, 26],
 639                 @hueletters
 640         ],
 641 },
 642 dni => {
 643         name => "D'ni",
 644         style => [
 645                 'svg { border: 1px solid currentColor }',
 646                 '.sample svg + svg { border-left: 0 }',
 647         ],
 648         list => [
 649                 map {
 650                         state $v = [
 651                                 '',
 652                                 'M0,4 8,4',
 653                                 'M0,8 Q4,4 8,8',
 654                                 'M0,4 4,8 8,4',
 655                                 'M2,0 2,4 8,4',
 656                                 'M0,0 8,8 M0,8 8,0', # cross
 657                                 'M3.5,4 h1', # dot
 658                         ];
 659                         state $h = [
 660                                 '',
 661                                 'M4,0 4,8',
 662                                 'M0,0 Q4,4 0,8',
 663                                 'M4,-.5 0,4 4,8.5',
 664                                 'M4,8 4,2 8,2',
 665                         ];
 666                         sprintf(
 667                                 '<svg width="16" height="16" viewBox="0 0 8 8"><path d="%s"/></svg>',
 668                                 $h->[$_ % 5] . $v->[$_ / 5] || $v->[6],
 669                         );
 670                 } 0 .. 5*5
 671         ],
 672 },
 673 pigpen => {
 674         style => [
 675                 'svg path { stroke-linecap: square }',
 676                 '.sample svg { margin-right: 0.1em }',
 677         ],
 678         list => [
 679                 map {
 680                         qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
 681                 }
 682                 map {
 683                         local $_ = $_;
 684                         s/^H/mX,0/ or s/^V/m0,X/ or s/^/m0,0/;
 685                         s/[hv]\K|X/6/g;
 686                         s/(?:v|,[^0]).*?v\K/-/;
 687                         s/(?:h|m[^0]).*?h\K/-/;
 688                         m/h/ or s/v/l3,/g;
 689                         m/v/ or s/h([^h]*)/l$1,3/g;
 690                         my $dot = s/\.// && qq(<circle cx="3" cy="3" r="1"/>);
 691                         qq(<path d="$_"/>$dot)
 692                 }
 693                 qw(
 694                         Hvh  vhv  vh  hvh  vhvh  Hhvh  hv  Vvhv  Hhv
 695                         Hvh. vhv. vh. hvh. vhvh. Hhvh. hv. Vvhv. Hhv.
 696                         vv  hh  Hhh  Vvv
 697                         vv. hh. Hhh. Vvv.
 698                 ),
 699         ],
 700 },
 701 nyctographs => {
 702         style => [
 703                 'svg path { stroke-linecap: round; stroke-linejoin: round }',
 704                 '.sample svg {
 705                         background: rgba(0,0,0, .1);
 706                         padding: 0.1em;
 707                         margin-right: 0.2em;
 708                 }',
 709         ],
 710         list => [
 711                 map { s/M[\d,\hM]+(?=[M"])//gr }  # clean up superfluous moves
 712                 map { sprintf
 713                         '<svg width="14" height="14" viewBox="-.5 -.5 5 5">'
 714                         . '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
 715                         'h.5v.5h-.5v-.5',  # start anchor
 716                         map { ['M', 'h0M', 'L']->[$_] }
 717                         split //
 718                 }
 719                 # draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
 720                 qw(
 721                         0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
 722                         0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020
 723                         0000
 724                 ),
 725         ],
 726 },
 727 chromacons => {
 728         title => 'Colour Alphabet by Paul Green-Armytage (2010)',
 729         style => [
 730                 #'.sample { word-break: break-all }',
 731                 '.sample { background: white }',
 732         ],
 733         list => [
 734                 map {
 735                         sprintf('<span%s>%s</span>',
 736                                 !!$_ && sprintf(' style="background:#%s" title="%s"', split /:/),
 737                                 chr(8195) . (!$_ && chr(8203)) # em space (plus zwsp for spaces)
 738                         );
 739                 }
 740                 qw{
 741                         F0A3FF:Amethyst 0075DC:Blue     993F00:Caramel  4C005C:Damson
 742                         191919:Ebony    005C31:Forest   2BCE48:Green    FFCC99:Honeydew
 743                         808080:Iron     94FFB5:Jade     8F7C00:Khaki    9DCC00:Lime
 744                         C20088:Mallow   003380:Navy     FFA405:Orpiment FFA8BB:Pink
 745                         426600:Quagmire FF0010:Red      5EF1F2:Sky      00998F:Turquoise
 746                         E0FF66:Uranium  740AFF:Violet   990000:Wine     FFFF80:Xanthin
 747                         FFFF00:Yellow   FF5005:Zinnia   0
 748                 }
 749         ],
 750 },
 751 );