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