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 span { 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 span { 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;
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 22 22">%s</svg>',
+ '<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"/>',
- 10 + $_, $_ == 1 ? 12 : 10, 10, sprintf($colf, $hues->[$_])
+ 5 + $_, $_ == 1 ? 7 : 5, 5, sprintf($colf, $hues->[$_])
);
} 0 .. 2
);
],
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",
},
unistrokes => {
title => '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>' }
},
edgewrite => {
title => '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"/>', @coords[0, 1]) . # start point
- sprintf('<path d="M%s"/>', join ' ', map {
- my $pos = join(',', @coords[$_*2, $_*2 + 1]);
- $_ > 1 && $route[$_] == $route[$_ - 2] ? 'Q4,4 '.$pos.'L' : # curve back
- $pos
- } 0 .. $#route)
+ 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(
<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"/>
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 23311120
+ 213131 311123 311321 331121 312113 312311 212222 0 211412 23311120
)],
},
rm4scc => {
],
list => [
map { disphues($_, [0, 240, 120], 1) } # Red, Blue, Green
- 0 .. 3*3*3 - 2
+ @hueorder[23..25,20..22, 12, 6..11,0..5, 16..18, 13..15, 19, 26],
],
},
cmymap => {
],
list => [
map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
- 0 .. 3*3*3 - 1
+# @hueorder[13..18, 19, 0..11, 20..25, 12, 26],
+ @hueletters
],
},
dni => {
title => "D'ni",
+ style => [
+ 'svg { border: 1px solid currentColor }',
+ '.sample span + span 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 0000
+ 0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020
+ 0000
),
],
},
chromacons => {
+# style => '.sample { word-break: break-all }',
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
}
],
},
git.shiar.nl / sheet.git / blobdiff