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