#tap-simplified td {
line-height: 1ex;
}
+ #pigpen {
+ stroke-linecap: square;
+ }
+ #nyctographs,
+ #old-roman-cursive {
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ }
+ td {
+ white-space: nowrap;
+ }
svg path:not([fill]) {
stroke: currentColor;
my ($title, $cells) = @{$row};
printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
say '<th>', $title;
- say "\t", '<td>' x !/^<td/, $_ for @{$cells};
+ my $colspan = 1;
+ for (@{$cells}) {
+ if ($_ eq '>') {
+ $colspan++;
+ next;
+ }
+ print "\t<td";
+ if ($colspan > 1) {
+ print " colspan=$colspan";
+ $colspan = 1;
+ }
+ print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
+ print '>';
+ say;
+ }
}
say "</table>\n";
}
:></div>
+<script>
+var inputel = document.createElement('INPUT');
+inputel.oninput = function () {
+ 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;
+ }
+ }
+ var samplecol = row.getElementsByClassName('sample');
+ if (samplecol.length) {
+ samplecol = samplecol[0];
+ }
+ else {
+ samplecol = row.appendChild(document.createElement('TD'));
+ samplecol.className = 'sample';
+ }
+
+ var output = '';
+ var input = inputel.value.toUpperCase();
+ for (var i = 0; i < input.length; i++) {
+ var col = input.charCodeAt(i) - 64;
+ if (col < 1 || col > 26) {
+ output += ' ';
+ }
+ else {
+ output += cols[col].innerHTML.trimRight();
+ }
+ }
+ samplecol.innerHTML = output;
+ }
+};
+
+var container = document.createElement('P');
+container.appendChild(inputel);
+document.body.appendChild(container);
+
+</script>