'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 }',
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"',
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 {
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>',