my %C = qw(red #EC1C24 blue #3953A3 yellow #F9EC31 black #231F20);
my $U = 0; # optional unicode alternatives
+my @wrapstyle = (
+ 'td { white-space: normal; word-spacing: 5em }', # force line break between words
+ '.sample { word-spacing: 0 }',
+ '.sample span { margin-right: 1ex; white-space: nowrap }', # larger space between letters
+);
+my $spacestyle = '.sample span { margin-right: 0.5ex }'; # separate multiple letters
+my @tapstyle = (
+ @wrapstyle,
+ '{ line-height: 1ex }',
+ '.sample { font-size: 80% }',
+);
+
sub disptap {
my $code = shift;
my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
);
}
+sub disprgb {
+ my ($index) = @_;
+ my $circle = '<circle cx="%s" cy="%s" r="8" fill="#%X%X%X"/>';
+ return sprintf(
+ '<svg width="16" height="16" viewBox="0 0 22 22">%s</svg>',
+ join '',
+ sprintf($circle, 10, 10, [0, 8, 15]->[$index % 3], 0, 0),
+ sprintf($circle, 11, 12, 0, [0, 8, 15]->[$index / 3 % 3], 0),
+ sprintf($circle, 12, 10, 0, 0, [0, 8, 15]->[$index / 9]),
+ );
+}
+
(
-'Uppercase' => {
+uppercase => {
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 }],
},
-'Lowercase' => {
+lowercase => {
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 }],
},
-'Sütterlin' => {
+suetterlin => {
+ title => 'Sütterlin',
+ style => [
+ '@font-face {
+ font-family: Suetterlin; /* R. G. Arens */
+ src: url("/suetterlin.ttf");
+ }',
+ 'td { font-family: Suetterlin }',
+ ],
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 }],
},
-'Old Roman Cursive' => {
+roman => {
+ title => 'Old Roman Cursive',
+ style => [
+ 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ '.sample span { margin-right: -10px }',
+ ],
list => [
map {
!m/^(-?)(\w.+)/ ? $_ :
"-m3,6 c4,-1 3,3 3,3 -1,3 -2,5 -1,5 1,1 3,0 3,0",
],
},
-'Sutton <abbr title="American Sign Lanugage">ASL</abbr>' => {
+sutton => {
+ title => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
+ style => $spacestyle,
list => [
# American manual alphabet in Sutton (U+1D800+) notation
map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
0 965aa6
}],
},
-'Unistrokes' => {
+unistrokes => {
+ title => 'Unistrokes',
+ style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
list => [
map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
map {
'M3,4',
],
},
-# 'Palm Graffiti' => {},
-'<abbr title="International Telegraph Alphabet">ITA</abbr>2' => {
+#graffiti => {
+# title => 'Palm Graffiti',
+#},
+ita2 => {
+ title => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
+ style => [@wrapstyle, 'td { font-size: 50% }'],
list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
00100
)],
},
-'Braille' => {
+braille => {
list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
},
-'5-point Tactile' => {
+tactile => {
+ title => '5-point Tactile',
list => [
map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
map {
}
],
},
-'Morse' => {
+morse => {
+ style => $spacestyle,
list => [map {tr/.-/‧‑/r} qw{
.- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
-. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
}],
},
-'Tap code' => {
+tap => {
+ title => 'Tap code',
+ style => \@tapstyle,
list => [map { disptap($_) } qw{
11 12 13 14 15 21 22 23 > 24 25 31 32
33 34 35 41 42 43 44 45 51 52 53 54 55
}],
},
-'Short Tap' => {
+shorttap => {
+ title => 'Short Tap',
+ style => \@tapstyle,
list => [map { disptap($_) } qw{
11 12 13 14 21 22 23 20 > 31 -13 32 33
30 41 42 -13 43 40 10 51 52 53 50 -31 -40
}],
},
-'Cards' => {
+cards => {
+ style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
list => [(
map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) } # spades, hearts
1 .. 11, 13, 14 # A 2-10 J Q K
), '', chr(0x1F0CF), chr(0x1F0DF) ],
},
-'Maritime flags' => {
+maritime => {
+ title => 'Maritime flags',
+ style => $spacestyle,
list => [
# International Code of Signals, SVG fills
map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
},
],
},
-'Flag semaphore' => {
+flag => {
+ title => 'Flag semaphore',
list => [
map {
local $_ = $_;
)
],
},
-'Chappe semaphore' => {
+chappe => {
+ title => 'Chappe semaphore',
list => [
map {
my ($r, $pr, $pl) = split //, $_;
)
],
},
-'Prussian semaphore' => {
+prussian => {
+ title => 'Prussian semaphore',
list => [
map { /^\D+$/ ? $_ : sprintf
join('',
)
],
},
-'Code 39' => {
+code39 => {
+ title => 'Code 39',
list => [map { dispbar($_) } qw(
2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
2211211111 1221211111 1221112111 0 1211212111
)], # ISO/IEC 16388
},
-'Code 93' => {
+code93 => {
+ title => 'Code 93',
list => [map { dispbar($_) } qw(
211113 211212 211311 221112 221211 231111 112113 112212 112311 122112
132111 111123 111222 111321 121122 131121 212112 212211 211122 211221
221121 222111 112122 112221 122121 123111 311211 0 111141
)],
},
-'Code 128' => {
+code128 => {
+ title => 'Code 128',
list => [map { dispbar($_) } qw(
111323 131123 131321 112313 132113 132311 211313 231113 231311 112133
112331 132131 113123 113321 133121 313121 211331 231131 213113 213311
213131 311123 311321 331121 312113 312311 212222 0 211412 2331112
)],
},
-'<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>' => {
+rm4scc => {
+ title => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
list => [
map {
my $len = length $_;
'', 1, 3 # start/end
],
},
-"D'ni" => {
+rgbmap => {
+ title => 'RGBmap',
+ style => [
+ 'svg { isolation: isolate }',
+ 'svg circle { mix-blend-mode: screen }',
+ ],
+ list => [ map { disprgb($_) } 0 .. 3*3*3 ],
+},
+dni => {
+ title => "D'ni",
list => [
map {
state $window = 'M-.5,-.5H8.5V8.5H-.5Z';
} 0 .. 5*5
],
},
-'Pigpen' => {
+pigpen => {
+ style => [
+ 'svg path { stroke-linecap: square }',
+ '.sample svg { margin-right: 0.1em }',
+ ],
list => [
map {
qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
),
],
},
-'Nyctographs' => {
+nyctographs => {
+ style => [
+ 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ '.sample svg {
+ background: rgba(0,0,0, .1);
+ padding: 0.1em;
+ margin-right: 0.2em;
+ }',
+ ],
list => [
map { s/M[\d,\hM]+(?=[M"])//gr } # clean up superfluous moves
map { sprintf
),
],
},
-'Chromacons' => {
+chromacons => {
list => [
# Colour Alphabet by Paul Green-Armytage (2010)
map {