writing-latn.inc.pl

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