:>
<style>
- @font-face {
- font-family: Suetterlin; /* R. G. Arens */
- src: url("/suetterlin.ttf");
- }
- #suetterlin td { font-family: Suetterlin }
- #ita2 td,
- #tap td,
- #shorttap td {
- white-space: normal;
- word-spacing: 5em; /* force line break between words */
- }
- #tap td,
- #shorttap td {
- line-height: 1ex;
- }
- #ita2 td {
- font-size: 50%;
- }
- #cards td {
- font-family: Symbola, "DejaVu Sans", serif, sans;
- }
- #pigpen {
- stroke-linecap: square;
- }
- #nyctographs,
- #roman {
- stroke-linecap: round;
- stroke-linejoin: round;
- }
td {
+ vertical-align: top;
white-space: nowrap;
}
th {
width: auto !important;
}
- .sample {
+ td svg {
vertical-align: middle;
- text-align: left;
- padding: 1px 0.3em;
- }
- #roman .sample span {
- margin-right: -10px;
- }
- #tap .sample,
- #shorttap .sample {
- font-size: 80%;
- }
- #ita2 .sample,
- #tap .sample,
- #shorttap .sample {
- word-spacing: 0;
- }
- #ita2 .sample span,
- #tap .sample span,
- #shorttap .sample span {
- margin-right: 1ex;
- white-space: nowrap;
}
- #sutton .sample span,
- #maritime .sample span,
- #morse .sample span {
- margin-right: 0.5ex;
- }
- #pigpen .sample svg {
- margin-right: 0.1em;
- }
- #nyctographs .sample svg {
- background: rgba(0,0,0, .1);
- padding: 0.1em;
- margin-right: 0.2em;
- }
- #unistrokes svg path {
- stroke-linecap: round;
- stroke-linejoin: round;
- }
-
svg path:not([fill]) {
stroke: currentColor;
fill: none;
fill: currentColor;
}
- td {
- vertical-align: top;
- }
- td svg {
+ .sample {
vertical-align: middle;
+ text-align: left;
+ padding: 1px 0.3em;
}
</style>
Alert("Table data not found", $@ || $!);
}
else {
+ say '<style>';
+ for my $row (pairs @table) {
+ my ($id, $info) = @{$row};
+ my $style = $info->{style} or next;
+ ref $style or $style = [$style];
+ say "\t", !/^@/ && "#$id ", $_ for @{$style};
+ }
+ say "</style>\n";
+
my %VOWELCOLS = (map { ($_ => 1) } 0, 4, 8, 14, 20, 24);
say '<table class="glyphs">';
say '<thead><tr><th># <small>ASCII − 64</small>';
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;
},
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 }],
},
roman => {
title => 'Old Roman Cursive',
+ style => [
+ 'svg path { stroke-linecap: round; stroke-linejoin: round }',
+ '.sample span { margin-right: -10px }',
+ ],
list => [
map {
!m/^(-?)(\w.+)/ ? $_ :
},
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{
},
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 {
#},
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
],
},
morse => {
+ style => $spacestyle,
list => [map {tr/.-/‧‑/r} qw{
.- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
-. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
},
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
},
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 => {
+ 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
},
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>' }
],
},
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 => {
+ 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