+:></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);