Optional 27th glyph allows altered representation (for bar codes) or styling
(consistency) for whitespace in sample text (hidden in table).
printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
say '<th>', $title;
my $colspan = 1;
printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
say '<th>', $title;
my $colspan = 1;
if ($_ eq '>') {
$colspan++;
next;
if ($_ eq '>') {
$colspan++;
next;
print " colspan=$colspan";
$colspan = 1;
}
print " colspan=$colspan";
$colspan = 1;
}
+ print ' hidden' if $col > 26; # sample only
print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
print '>';
say;
print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
print '>';
say;
function appendsample() {
var rows = document.getElementsByClassName('glyphs')[0].rows;
for (var row of rows) {
function appendsample() {
var rows = document.getElementsByClassName('glyphs')[0].rows;
for (var row of rows) {
- cols = [ row.cells[0] ];
- for (var col = 1; col <= 26; col++) {
- cols[col] = cols[ col - 1 ].nextSibling;
- for (var span = 1; span < cols[col].colSpan; span++) {
- var same = cols[col];
- cols[++col] = same;
- }
- }
+ // append sample column
var samplecol = row.getElementsByClassName('sample');
if (samplecol.length) {
samplecol = samplecol[0];
var samplecol = row.getElementsByClassName('sample');
if (samplecol.length) {
samplecol = samplecol[0];
samplecol.className = 'sample';
}
samplecol.className = 'sample';
}
+ // prepare alphabet lookup table
+ cols = [ row.cells[0] ];
+ for (var col = 1; col <= samplecol.cellIndex; col++) {
+ var next = cols[col - 1].nextSibling;
+ if (next == samplecol) break;
+ cols[col] = next;
+ for (var span = 1; span < cols[col].colSpan; span++) {
+ var same = cols[col];
+ cols[++col] = same;
+ }
+ }
+
+ // copy letters into sample
var output = '';
var input = this.value.toUpperCase();
for (var i = 0; i < input.length; i++) {
var col = input.charCodeAt(i) - 64;
var output = '';
var input = this.value.toUpperCase();
for (var i = 0; i < input.length; i++) {
var col = input.charCodeAt(i) - 64;
- if (col < 1 || col > 26) {
- output += ' ';
+ if (col < 1) col = 27; // space
+ if (col < cols.length) {
+ output += '<span>' + cols[col].innerHTML.trimRight() + '</span>';
- output += '<span>' + cols[col].innerHTML.trimRight() + '</span>';
}
}
samplecol.innerHTML = output;
}
}
samplecol.innerHTML = output;
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
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
)],
'Braille' => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
'5-point Tactile' => [
)],
'Braille' => [qw{ ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵ }],
'5-point Tactile' => [
map { tr/012/ ❘❙/r } qw(
211012 121012 221011 112012 212011 122011 111022 211021 121021 112021
211102 121102 221101 112102 212101 122101 111202 211201 121201 112201
map { tr/012/ ❘❙/r } qw(
211012 121012 221011 112012 212011 122011 111022 211021 121021 112021
211102 121102 221101 112102 212101 122101 111202 211201 121201 112201
- 201112 102112 202111 101212 201211 102211
+ 201112 102112 202111 101212 201211 102211 102121
qw(
21111 21121 21131 22111 22121 23111 11211 11221 11231
12211 13211 11112 11122 11132 12112 13112 21211 21221
qw(
21111 21121 21131 22111 22121 23111 11211 11221 11231
12211 13211 11112 11122 11132 12112 13112 21211 21221
- 21112 21122 22112 22211 11212 11222 12212 12311
+ 21112 21122 22112 22211 11212 11222 12212 12311 31121
join ' ',
map {
$_ eq '' ? 'm2,-7' :
join ' ',
map {
$_ eq '' ? 'm2,-7' :
+ $_ eq '.' ? 'm3,-7' :
+ $_ eq ':' ? 'm4,-7' :
join 'm1,-7', ('v7') x $_
}
join 'm1,-7', ('v7') x $_
}
- split /(-)?/, $_ # each bar [123] and space [ -]
+ split /([.:])?/ # each bar [123] and space [ .:]
- # bar widths (1-3) followed by space of width 1 (implied) or 3 (-)
+ # bar widths (1-3) followed by space of width 1 (implied), 2 (.) or 3 (:)
- 11-2 1-12 1-1-2 12-1 1-21 1-2-1 21-1 2-11 2-1-1 123 12-3 1-23 132
- 13-2 1-32 332 21-3 2-13 231 23-1 233 312 31-2 3-12 321 32-1
+ 11:2 1:12 1:1:2 12:1 1:21 1:2:1 21:1 2:11 2:1:1 123 12:3 1:23 132
+ 13:2 1:32 332 21:3 2:13 231 23:1 233 312 31:2 3:12 321 32:1 22.2
)
],
'<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>' => [
)
],
'<abbr title="Royal Mail 4-State Customer Code">RM4SCC</abbr>' => [
($_ & 1 ? 0 : 2), 2 + ($_ & 2) + ($_ & 1) * 2,
($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
}
($_ & 1 ? 0 : 2), 2 + ($_ & 2) + ($_ & 1) * 2,
($_ & 1 ? 0 : 2) + 2 + ($_ & 2) + ($_ & 1) * 2,
}
1023 1203 1221 3003 3021 3201
1032 1212 1230 3012 3030 3210
1122 1302 1320 3102 3120 3300
1023 1203 1221 3003 3021 3201
1032 1212 1230 3012 3030 3210
1122 1302 1320 3102 3120 3300
. '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
'h.5v.5h-.5v-.5', # start anchor
map { ['M', 'h0M', 'L']->[$_] }
. '<path d="M0,0%s %s4,0 %s4,4 %s0,4 %s0,0"/></svg>',
'h.5v.5h-.5v-.5', # start anchor
map { ['M', 'h0M', 'L']->[$_] }
}
# 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
}
# 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
+ 0222 2222 0102 0200 2201 2002 2200 0100 0110 0120 2001 2010 2020 0
),
],
'Chromacons' => [
# Colour Alphabet by Paul Green-Armytage (2010)
),
],
'Chromacons' => [
# Colour Alphabet by Paul Green-Armytage (2010)
- map { sprintf '<span style="background:#%s" title="%s">%s</span>', split(/:/, $_), chr(8195) }
+ map {
+ sprintf !$_ ? '<span>%2$s</span>' : '<span style="background:#%s" title="%s">%s</span>',
+ split(/:/), chr(8195);
+ }
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
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
- },
+ FFFF80:Xanthin FFFF00:Yellow FF5005:Zinnia 0
+ }