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