4 title => 'latin alphabet cheat sheet',
9 latin roman alphabet script letter unicode font glyph abc
10 code encoding spelling symbol writing comparison character
11 secret cursive fraktur blind braille morse deaf asl hand
12 barcode bar color semaphore flag
14 stylesheet => [qw'light dark red'],
15 data => ['writing-latn.inc.pl'],
21 font-family: Suetterlin; /* R. G. Arens */
22 src: url("/suetterlin.ttf");
24 #sütterlin td { font-family: Suetterlin }
30 stroke-linecap: square;
34 stroke-linecap: round;
35 stroke-linejoin: round;
41 svg path:not([fill]) {
50 vertical-align: middle;
54 <h1>Latin alphabet</h1>
56 <p>Variant encodings of the common ASCII (latin, roman,
57 or <span title="fuck yeah!">'mercan</span>) letters A–Z.
58 Also see <a href="/writing">related alphabets</a>
59 and <a href="/unicode">common chars</a>.</p>
64 use List::Util qw( pairs );
66 my @table = do 'writing-latn.inc.pl';
68 Alert("Table data not found", $@ || $!);
71 say '<table class="glyphs">';
72 for my $row (pairs @table) {
73 my ($title, $cells) = @{$row};
74 printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
84 print " colspan=$colspan";
87 print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
98 var inputel = document.createElement('INPUT');
99 inputel.oninput = function () {
100 var rows = document.getElementsByClassName('glyphs')[0].rows;
101 for (var row of rows) {
102 cols = [ row.cells[0] ];
103 for (var col = 1; col <= 26; col++) {
104 cols[col] = cols[ col - 1 ].nextSibling;
105 for (var span = 1; span < cols[col].colSpan; span++) {
106 var same = cols[col];
110 var samplecol = row.getElementsByClassName('sample');
111 if (samplecol.length) {
112 samplecol = samplecol[0];
115 samplecol = row.appendChild(document.createElement('TD'));
116 samplecol.className = 'sample';
120 var input = inputel.value.toUpperCase();
121 for (var i = 0; i < input.length; i++) {
122 var col = input.charCodeAt(i) - 64;
123 if (col < 1 || col > 26) {
124 output += ' ';
127 output += cols[col].innerHTML.trimRight();
130 samplecol.innerHTML = output;
134 var container = document.createElement('P');
135 container.appendChild(inputel);
136 document.body.appendChild(container);