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