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