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 #pigpen .sample > svg {
44 #nyctographs .sample > svg {
45 background: rgba(0,0,0, .1);
50 svg path:not([fill]) {
59 vertical-align: middle;
63 <h1>Latin alphabet</h1>
65 <p>Variant encodings of the common ASCII (latin, roman,
66 or <span title="fuck yeah!">'mercan</span>) letters A–Z.
67 Also see <a href="/writing">related alphabets</a>
68 and <a href="/unicode">common chars</a>.</p>
73 use List::Util qw( pairs );
75 my @table = do 'writing-latn.inc.pl';
77 Alert("Table data not found", $@ || $!);
80 say '<table class="glyphs">';
81 for my $row (pairs @table) {
82 my ($title, $cells) = @{$row};
83 printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
93 print " colspan=$colspan";
96 print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
107 var inputel = document.createElement('INPUT');
108 inputel.oninput = function () {
109 var rows = document.getElementsByClassName('glyphs')[0].rows;
110 for (var row of rows) {
111 cols = [ row.cells[0] ];
112 for (var col = 1; col <= 26; col++) {
113 cols[col] = cols[ col - 1 ].nextSibling;
114 for (var span = 1; span < cols[col].colSpan; span++) {
115 var same = cols[col];
119 var samplecol = row.getElementsByClassName('sample');
120 if (samplecol.length) {
121 samplecol = samplecol[0];
124 samplecol = row.appendChild(document.createElement('TD'));
125 samplecol.className = 'sample';
129 var input = inputel.value.toUpperCase();
130 for (var i = 0; i < input.length; i++) {
131 var col = input.charCodeAt(i) - 64;
132 if (col < 1 || col > 26) {
133 output += ' ';
136 output += cols[col].innerHTML.trimRight();
139 samplecol.innerHTML = output;
143 var container = document.createElement('P');
144 container.appendChild(inputel);
145 document.body.appendChild(container);