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