'td { white-space: normal; word-spacing: 10em }',
# force line break between words
'.sample { word-spacing: 0 }',
- '.sample span { margin-right: 1ex; white-space: nowrap; display: inline-block }',
+ '.sample svg { margin-right: 1ex; white-space: nowrap; display: inline-block }',
# larger space between letters
);
-my $spacestyle = '.sample span { margin-right: 0.5ex }'; # separate letters
+my $spacestyle = '.sample svg { margin-right: 0.5ex }'; # separate letters
my @tapstyle = (
@wrapstyle,
'{ line-height: 1ex }',
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) = (12, 9);
+ my @w = map { $w / ($_ || 1) } @dots;
+ return sprintf(
+ '<svg height="20" viewBox="-.5 -.5 %s %s">'
+ . '<path d="%s" /></svg>',
+ $w + 1, $h + 1, join(' ',
+ "m0,$h l+$w[0],-$h" x $dots[0], # slashes
+ "m0,$h l-$w[1],-$h" x $dots[1], # backslashes
+ )
+ );
+}
+
sub dispblock {
my $code = shift;
my ($prefix, $shape, $rotate) = $code =~ m/\A(-?)(\w)(\d?)/
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">'
+ '<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"',
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 }],
},
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 {
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 => {
name => 'Unistrokes',
url => 'https://www.google.com/patents/US5596656', # by Xerox
)
],
},
-#graffiti => {
-# name => 'Palm Graffiti',
-#},
ita2 => {
name => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
style => [@wrapstyle, 'td { font-size: 50% }'],
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
}],
- altlist => [map { disptap($_) } qw{
+ altlist => [map { dispdash($_) } qw{
10 14 -13 12 20 23 22 21 30 -34 13 33 32
31 40 43 -13 42 41 11 50 -23 -50 -1341 -31 -41
}],
},
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{
name => "D'ni",
style => [
'svg { border: 1px solid currentColor }',
- '.sample span + span svg { border-left: 0 }',
+ '.sample svg + svg { border-left: 0 }',
],
list => [
map {
},
chromacons => {
title => 'Colour Alphabet by Paul Green-Armytage (2010)',
-# style => '.sample { word-break: break-all }',
+ style => [
+ #'.sample { word-break: break-all }',
+ '.sample { background: white }',
+ ],
list => [
map {
sprintf('<span%s>%s</span>',