font-family: Suetterlin; /* R. G. Arens */
src: url("/suetterlin.ttf");
}
- .glyphs tr:first-child+tr+tr td { font-family: Suetterlin }
+ #sütterlin td { font-family: Suetterlin }
+ #tap-code td,
+ #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;
<div>
<:
+use List::Util qw( pairs );
+
my @table = do 'writing-latn.inc.pl';
if ($! or $@) {
Alert("Table data not found", $@ || $!);
}
else {
say '<table class="glyphs">';
- print ref $_ ne 'ARRAY' ? "<tr><th>$_\n" : map {/^<td/ ? $_ : "\t<td>$_\n"} @$_
- for @table;
+ for my $row (pairs @table) {
+ my ($title, $cells) = @{$row};
+ printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
+ say '<th>', $title;
+ 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>