-my @t = (qw{
- .>Latin a b c d e f g h i j k l m n o p q r s t u v w x y z
- .>Braille ⠁ ⠃ ⠉ ⠙ ⠑ ⠋ ⠛ ⠓ ⠊ ⠚ ⠅ ⠇ ⠍ ⠝ ⠕ ⠏ ⠟ ⠗ ⠎ ⠞ ⠥ ⠧ ⠺ ⠭ ⠽ ⠵
- .>Morse ‧‑ ‑‧‧‧ ‑‧‑‧ ‑‧‧ ‧ ‧‧‐‧ ‐‐‧ ‧‧‧‧ ‧‧ ‧‐‐‐ ‐‧‐ ‧‐‧‧ ‐‐
- ‐‧ ‐‐‐ ‧‐‐‧ ‐‐‧‐ ‧‐‧ ‧‧‧ ‐ ‧‧‐ ‧‧‧‐ ‧‐‐ ‐‧‧‐ ‐‧‐‐ ‐‐‧‧
-});
-print $glyphs->table(exists $get{uc} ? [map {s/\s.//; uc} @t] : \@t);
+:></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 += '<span>' + cols[col].innerHTML.trimRight() + '</span>';
+ }
+ }
+ samplecol.innerHTML = output;
+ }
+};