use 5.014;
use utf8;
-use List::Util qw( pairs pairmap sum );
-
-my %C = qw(red #EC1C24 blue #3953A3 yellow #F9EC31 black #231F20);
+use warnings;
+use List::Util qw( pairs pairmap sum min max );
+
+my %C = (
+ 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
+ 'td { white-space: normal; word-spacing: 10em }',
+ # force line break between words
'.sample { word-spacing: 0 }',
- '.sample span { margin-right: 1ex; white-space: nowrap }', # larger space between letters
+ '.sample svg { margin-right: 1ex; white-space: nowrap; display: inline-block }',
+ # larger space between letters
);
-my $spacestyle = '.sample span { margin-right: 0.5ex }'; # separate multiple letters
+my $spacestyle = '.sample svg { margin-right: 0.5ex }'; # separate letters
my @tapstyle = (
@wrapstyle,
'{ line-height: 1ex }',
+ 'td:not(.sample) { vertical-align: top }',
'.sample { font-size: 80% }',
);
+my @hueorder = (
+ 2,11,20,19,18,21,24,15,6,7,8,5,13, # red .. magenta, grey
+ 1,10,9,12,3,4,0, 14,23,22,25,16,17,26, # dark, light hues
+);
+
+# Order to put similar sounds close to each other:
+# ┌ R Y G C B M X
+# ┌┼──────────────
+# W│ o e y h s f -
+# │muaixqgkdtbp l
+# K│ w n j c z v r
+
+my @hueletters = ((26) x 27);
+@hueletters[map { ord($_) - ord('a') } qw(
+ 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
+)] = @hueorder;
+
sub disptap {
my $code = shift;
my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
return $prefix . join(' ', map { '·' x $_ } @dots);
}
+sub dispdomino {
+ my $code = shift;
+ my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
+ # unicode glyph alternative as DOMINO TILE HORIZONTAL-0a-0b
+ return $prefix . chr(0x1F031 + ($dots[0] * 7) + $dots[1]);
+}
+
+sub dispdash {
+ my $code = shift;
+ my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
+ my ($w, $h) = (max(6, 4 * max(@dots)), 9);
+ my ($w0, $w1) = ($w / $dots[0], $dots[1] ? $w / $dots[1] : 1);
+ return sprintf(
+ '<svg height="20"%s viewBox="-.5 -.5 %s %s">'
+ . '<path d="%s" /></svg>',
+ $prefix && ' style="opacity:.5"',
+ $w + 1, $h + 1, join(' ',
+ "m0,$h l+$w0,-$h" x $dots[0], # slashes
+ "m0,$h l-$w1,-$h" x $dots[1], # backslashes
+ )
+ );
+}
+
+sub dispblock {
+ my $code = shift;
+ my ($prefix, $shape, $rotate) = $code =~ m/\A(-?)(\w)(\d?)/
+ or return $code;
+ my %path = (
+ S => 'm0,1h1v-1h1',
+ Z => 'm0,0h1v1h1',
+ L => 'm0,0v2h1',
+ v => 'm0,0v1h1',
+ J => 'm1,0v2h-1',
+ T => 'm0,0h2.5h-1.5v1',
+ O => 'm0,0h1v1h-1',
+ I => 'm0,1h3',
+ i => 'm0,1h2',
+ o => 'm0,1h1',
+ );
+ my %col = (
+ S => 120, Z => 0, J => 240, L => 30, T => 300, O => 60, I => 180,
+ v => '45,50%', i => '165,50%', o => '165,0%',
+ );
+ s/\z(?<!%)/,100%/ for values %col;
+ my @gaps = (grep $_,
+ $code =~ /[Ii]$|T[23]|L3?$|S1|Z$|J1|v3?$/ ? 'gapl1' : (),
+ $code =~ /T$|L2|Z$/ ? 'gapr1' : (),
+ );
+ return sprintf(
+ '<svg height="24" viewBox="-.5 -.5 %s 4"%s>'
+ . '<path d="%s" stroke="%s" fill="none"%s /></svg>',
+ $code eq 'I' ? 4 : $code =~ /T3|[LJO]$|[Iio]1/ ? 2 : 3,
+ @gaps ? qq( class="@gaps") : '',
+ $path{$shape}, "hsl($col{$shape},50%)", join('',
+ $rotate && sprintf(' transform="rotate(%s 1 1)"', $rotate * 90),
+ $prefix && ' style="opacity:.5"',
+ ),
+ );
+}
+
sub dispbar {
my $code = shift or return '';
);
}
-(
+sub disphues {
+ my ($index, $hues, $opaque) = @_;
+ $index >= 0 or $index = 26;
+ my @lum = ($index % 3, $index / 3 % 3, $index / 9); # hue opacities (0..2)x3
+ my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
+ ('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
+ return sprintf(
+ '<svg width="16" height="16" viewBox="0 0 12 12">%s</svg>',
+ join '', map {
+ my $colf = $lumf[ $lum[$_] ];
+ !$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
+ 5 + $_, $_ == 1 ? 7 : 5, 5, sprintf($colf, $hues->[$_])
+ );
+ } 0 .. 2
+ );
+}
+
++{
+default => [qw( written sign digital touch tactile sound games semaphore barcode personal )],
+written => [qw( uppercase lowercase suetterlin roman )],
+digital => [qw( stroke ita2 )],
+stroke => [qw( graffiti unistrokes edgewrite )],
+touch => [qw( moon braille )],
+sign => ['sutton'],
+sound => [qw( morse tap shorttap )],
+games => [qw( domino tetromino cards )],
+semaphore => [qw( maritime flag chappe prussian )],
+barcode => [qw( rm4scc code39 code93 code128 )],
+personal => [qw( rgbmap cmymap dni pigpen nyctographs chromacons )],
+
+order => {
+ name => '#',
+ list => [1 .. 26],
+},
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 }],
},
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 }],
},
suetterlin => {
- title => 'Sütterlin',
+ name => 'Sütterlin',
style => [
'@font-face {
font-family: Suetterlin; /* R. G. Arens */
src: url("/suetterlin.ttf");
}',
'td { font-family: Suetterlin }',
+ 'td:hover::first-letter { text-transform: 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 }],
},
roman => {
- title => 'Old Roman Cursive',
+ name => 'Old Roman Cursive',
style => [
'svg path { stroke-linecap: round; stroke-linejoin: round }',
- '.sample span { margin-right: -10px }',
+ '.sample svg { margin-right: -10px }',
],
list => [
map {
- !m/^(-?)(\w.+)/ ? $_ :
- $1.'<svg width="20" height="20" viewBox="0 0 12 20"><path d="'.$2.'"/></svg>'
+ s{\A-?\K(\w.+)}
+ {<svg width="20" height="20" viewBox="0 0 12 20"><path d="$1"/></svg>}r
}
"m2,4 c1,2 8,9 8,9 M2,15 6,9",
"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",
],
},
sutton => {
- title => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
+ name => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
style => $spacestyle,
list => [
# American manual alphabet in Sutton (U+1D800+) notation
0 965aa6
}],
},
+graffiti => {
+ name => 'Palm Graffiti',
+ style => [
+ '@font-face {
+ font-family: Graffiti;
+ src: url("/graffiti.ttf");
+ }',
+ 'td { font-family: Graffiti }',
+ ],
+ 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 * y z }],
+},
unistrokes => {
- title => 'Unistrokes',
+ name => 'Unistrokes',
+ url => 'https://www.google.com/patents/US5596656', # by Xerox
style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
list => [
map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
map {
- sprintf('<circle cx="%s" cy="%s" r="1"/>', m/\AM(\d+),(\d+)(.?)/) . # start point
- (!!$3 && qq(<path d="$_"/>))
+ my ($x, $y, $next) = m/\AM(\d+),(\d+)(.)?/;
+ sprintf('<circle cx="%s" cy="%s" r="1"/>', $x, $y) . # start point
+ (defined $next && qq(<path d="$_"/>))
}
'M3,8 V0',
'M0,0 6,4 0,8',
'M3,4',
],
},
-#graffiti => {
-# title => 'Palm Graffiti',
-#},
+edgewrite => {
+ name => 'EdgeWrite',
+ url => 'http://depts.washington.edu/ewrite/', # patented US7729542
+ style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ list => [
+ map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
+ map {
+ my @route = split //;
+ my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } @route; # x,y,
+ sprintf('<circle cx="%s" cy="%s" r="1"/><path d="M%s"/>',
+ @coords[0, 1], # start point
+ join(' ', map {
+ my $pos = join(',', @coords[$_*2, $_*2 + 1]);
+ $_ > 1 && $route[$_] == $route[$_ - 2] # curve back
+ ? 'Q4,4 '.$pos.'L' : $pos
+ } 0 .. $#route),
+ )
+ }
+ # corners (0..3) clockwise from top-left in order
+ qw(
+ 213 0232 1023 1323 103 102 10132 0213 02 132 02123 023 20313 2031
+ 10231 0102 10131 201 1032 013 0231 021 02131 0312 0313 0123 01
+ )
+ ],
+},
ita2 => {
- title => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
+ name => '<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
00100
)],
},
+moon => {
+ list => [
+ map { qq(<svg width="14" height="14" viewBox="-.5 -.5 7 7"><path d="$_"/></svg>) }
+ 'M0,6 3,0 6,6',
+ 'M1,0 V4 A2,2 0,0,0 5,4',
+ 'M5,0 A4.5,3 0,0,0 5,6',
+ 'M1,0 A4.5,3 0,0,1 1,6',
+ 'M0,6 V0 H6',
+ 'M1,6 V2 A2,2 0,0,1 5,2',
+ 'M5,6 V2 A2,2 0,1,0 1,2',
+ 'M1.5,3 A1.5,1.5 0,0,0 4.5,3 1.5,1.5 0,0,0 1.5,3 M3,1.5 A1,1.5 0,0,0 3,4.5',
+ 'M3,0 V6',
+ 'M5,0 V4 A2,2 0,0,1 1,4',
+ 'M6,0 0,3 6,6',
+ 'M0,0 V6 H6',
+ 'M0,0 H6 V6',
+ 'M0,6 V2 L6,6 V0',
+ 'M0,3 A3,3 0,0,0 6,3 3,3 0,0,0 0,3',
+ 'M6,4 H2 A2,1 0,0,1 2,2',
+ 'M0,4 H4 A2,1 0,0,0 4,2',
+ 'M0,0 6,6',
+ 'M0,6 6,0',
+ 'M0,3 H6',
+ 'M0,0 V3 A3,3 0,0,0 6,3 V0',
+ 'M0,0 3,6 6,0',
+ 'M0,6 V3 A3,3 0,0,1 6,3 V6',
+ 'M0,0 6,3 0,6',
+ 'M6,0 V6 H0',
+ 'M0,0 H6 L2,6 H6',
+ ],
+ style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+},
braille => {
list => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
},
tactile => {
- title => '5-point Tactile',
+ name => '5-point Tactile',
list => [
map { '<svg width="9" height="12" viewBox="0 0 18 24">'.$_.'</svg>' }
map {
}],
},
tap => {
- title => 'Tap code',
+ name => 'Tap code',
style => \@tapstyle,
list => [map { disptap($_) } qw{
11 12 13 14 15 21 22 23 > 24 25 31 32
}],
},
shorttap => {
- title => 'Short Tap',
+ name => 'Short Tap',
style => \@tapstyle,
- list => [map { disptap($_) } qw{
+ altlist => [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
}],
+ list => [map { dispdash($_) } qw{
+ 10 14 -24 12 20 23 22 21 30 -34 13 33 32
+ 31 40 43 -13 42 41 11 50 -53 -44 -52 -51 -54
+ }],
+},
+domino => {
+ name => 'Domino tiles',
+ style => [
+ # enlarge single tile height to span full vertical combinations
+ 'td { font-size: 200%; line-height: .6; padding: 0 0 .3ex }',
+ ],
+ list => [map { dispdomino($_) } qw{
+ 10 11 20 21 22 30 31 32 33 40 41 42 43
+ 44 50 51 52 53 54 55 60 61 62 63 64 65
+ }],
+},
+tetromino => {
+ style => [
+ 'svg path { stroke-linecap: square }',
+ '.sample .gapl1 + .gapr1 { margin-left: -6.3px }',
+ ],
+ name => 'Tetrominos',
+ list => [map { dispblock($_) } qw{
+ T2 T1 I T3
+ i L1 J L3
+ o1 I1 L2 L -S1 Z1
+ O J2 v2 -J3 S T
+ J1 v1 v v3 i1 Z
+ }],
},
cards => {
style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
), '', chr(0x1F0CF), chr(0x1F0DF) ],
},
maritime => {
- title => 'Maritime flags',
+ name => 'Maritime flags',
style => $spacestyle,
list => [
# International Code of Signals, SVG fills
<path fill="$C{yellow}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
<path fill="white" d="M0,0 h30v30 h-30z"/>
- <path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
+ <path fill="$C{blue}" d="M4,0h22l-11,11 M4,30h22l-11,-11
+ M0,4v22l11,-11 M30,4v22l-11,-11"/>
<path fill="white" d="M0,0 h30v30 h-30z"/>
<path fill="$C{blue}" d="
<path fill="$C{red}" d="M0,0 h15 v15 h-15 M15,15 h15 v15 h-15"/>
<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
- <path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11 M0,4v22l11,-11 M30,4v22l-11,-11"/>
+ <path fill="white" d="M4,0h22l-11,11 M4,30h22l-11,-11
+ M0,4v22l11,-11 M30,4v22l-11,-11"/>
<path fill="$C{blue}" d="M0,0 h30v30 h-30z"/>
<path fill="white" d="M5,5 h20 v20 h-20"/>
<path fill="$C{blue}" d="M0,12.5 h30 v5 h-30"/>
<path fill="$C{red}" d="M0,0 h30v30 h-30z"/>
- <path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6 M24,0h6l-30,30v-6
- M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
+ <path fill="$C{yellow}" d="M0,0h6l-6,6 M12,0h6l-18,18v-6
+ M24,0h6l-30,30v-6 M30,6v6l-18,18h-6 M30,18v6l-6,6h-6"/>
<path fill="$C{black}" d="M0,0 h30v30 h-30z"/>
<path fill="$C{blue}" d="M30,0 v31 l-15,-15"/>
],
},
flag => {
- title => 'Flag semaphore',
+ name => 'Flag semaphore',
list => [
map {
local $_ = $_;
],
},
chappe => {
- title => 'Chappe semaphore',
+ name => 'Chappe semaphore',
list => [
map {
my ($r, $pr, $pl) = split //, $_;
],
},
prussian => {
- title => 'Prussian semaphore',
+ name => 'Prussian semaphore',
list => [
map { /^\D+$/ ? $_ : sprintf
join('',
],
},
code39 => {
- title => 'Code 39',
+ name => 'Code 39',
list => [map { dispbar($_) } qw(
2111121121 1121121121 2121121111 1111221121 2111221111 1121221111
1111122121 2111122111 1121122111 1111222111 2111111221 1121111221
)], # ISO/IEC 16388
},
code93 => {
- title => 'Code 93',
+ name => '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
)],
},
code128 => {
- title => 'Code 128',
+ name => '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
+ 213131 311123 311321 331121 312113 312311 212222 0 211412 23311120
)],
},
rm4scc => {
- title => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
+ name => '<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>',
list => [
map {
my $len = length $_;
'', 1, 3 # start/end
],
},
+rgbmap => {
+ name => 'RGBmap',
+ style => [
+ 'svg { isolation: isolate }',
+ 'svg circle { mix-blend-mode: screen }',
+ '.sample { background: black }',
+ ],
+ list => [
+ map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
+ @hueorder[23..25,20..22, 12, 6..11,0..5, 16..18, 13..15, 19, 26],
+ ],
+},
+cmymap => {
+ name => 'CMYmap',
+ style => [
+ 'svg { isolation: isolate }', # mix on white
+ 'svg circle { mix-blend-mode: multiply }',
+ '.sample { background: white }',
+ ],
+ list => [
+ map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
+# @hueorder[13..18, 19, 0..11, 20..25, 12, 26],
+ @hueletters
+ ],
+},
dni => {
- title => "D'ni",
+ name => "D'ni",
+ style => [
+ 'svg { border: 1px solid currentColor }',
+ '.sample svg + svg { border-left: 0 }',
+ ],
list => [
map {
- state $window = 'M-.5,-.5H8.5V8.5H-.5Z';
state $v = [
'',
'M0,4 8,4',
'M4,-.5 0,4 4,8.5',
'M4,8 4,2 8,2',
];
- sprintf '<svg width="16" height="16" viewBox="-.5 -.5 9 9"><path d="%s"/></svg>',
- $window . ($h->[$_ % 5] . $v->[$_ / 5] || $v->[6]);
+ sprintf(
+ '<svg width="16" height="16" viewBox="0 0 8 8"><path d="%s"/></svg>',
+ $h->[$_ % 5] . $v->[$_ / 5] || $v->[6],
+ );
} 0 .. 5*5
],
},
# draw style (0=empty, 1=dot, 2=line connect) to right, down, left, up
qw(
0010 0112 2022 2220 2000 2012 0122 0202 0020 0220 0012 0022 2202
- 0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020 0
+ 0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020
+ 0000
),
],
},
chromacons => {
+ title => 'Colour Alphabet by Paul Green-Armytage (2010)',
+ style => [
+ #'.sample { word-break: break-all }',
+ '.sample { background: white }',
+ ],
list => [
- # Colour Alphabet by Paul Green-Armytage (2010)
map {
sprintf('<span%s>%s</span>',
!!$_ && sprintf(' style="background:#%s" title="%s"', split /:/),
- chr(8195), # em space
+ chr(8195) . (!$_ && chr(8203)) # em space (plus zwsp for spaces)
);
}
qw{
- F0A3FF:Amethyst 0075DC:Blue 993F00:Caramel 4C005C:Damson 191919:Ebony
- 005C31:Forest 2BCE48:Green FFCC99:Honeydew 808080:Iron 94FFB5:Jade
- 8F7C00:Khaki 9DCC00:Lime C20088:Mallow
- 003380:Navy FFA405:Orpiment FFA8BB:Pink 426600:Quagmire FF0010:Red
- 5EF1F2:Sky 00998F:Turquoise E0FF66:Uranium 740AFF:Violet 990000:Wine
- FFFF80:Xanthin FFFF00:Yellow FF5005:Zinnia 0
+ F0A3FF:Amethyst 0075DC:Blue 993F00:Caramel 4C005C:Damson
+ 191919:Ebony 005C31:Forest 2BCE48:Green FFCC99:Honeydew
+ 808080:Iron 94FFB5:Jade 8F7C00:Khaki 9DCC00:Lime
+ C20088:Mallow 003380:Navy FFA405:Orpiment FFA8BB:Pink
+ 426600:Quagmire FF0010:Red 5EF1F2:Sky 00998F:Turquoise
+ E0FF66:Uranium 740AFF:Violet 990000:Wine FFFF80:Xanthin
+ FFFF00:Yellow FF5005:Zinnia 0
}
],
},
-);
+};