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 }
29 word-spacing: 5em; /* force line break between words */
39 stroke-linecap: square;
43 stroke-linecap: round;
44 stroke-linejoin: round;
51 vertical-align: middle;
53 #old-roman-cursive .sample span {
57 #tap-simplified .sample {
62 #tap-simplified .sample {
66 #tap-code .sample span,
67 #tap-simplified .sample span {
77 #nyctographs .sample svg {
78 background: rgba(0,0,0, .1);
83 svg path:not([fill]) {
87 svg circle:not([fill]) {
95 vertical-align: middle;
99 <h1>Latin alphabet</h1>
101 <p>Variant encodings of the common ASCII (latin, roman,
102 or <span title="fuck yeah!">'mercan</span>) letters A–Z.
103 Also see <a href="/writing">related alphabets</a>
104 and <a href="/chars/abc">font comparison</a>.</p>
109 use List::Util qw( pairs );
111 my @table = do 'writing-latn.inc.pl';
113 Alert("Table data not found", $@ || $!);
116 say '<table class="glyphs">';
117 for my $row (pairs @table) {
118 my ($title, $cells) = @{$row};
119 printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
129 print " colspan=$colspan";
132 print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
143 var inputel = document.createElement('INPUT');
144 inputel.oninput = function () {
145 var rows = document.getElementsByClassName('glyphs')[0].rows;
146 for (var row of rows) {
147 cols = [ row.cells[0] ];
148 for (var col = 1; col <= 26; col++) {
149 cols[col] = cols[ col - 1 ].nextSibling;
150 for (var span = 1; span < cols[col].colSpan; span++) {
151 var same = cols[col];
155 var samplecol = row.getElementsByClassName('sample');
156 if (samplecol.length) {
157 samplecol = samplecol[0];
160 samplecol = row.appendChild(document.createElement('TD'));
161 samplecol.className = 'sample';
165 var input = inputel.value.toUpperCase();
166 for (var i = 0; i < input.length; i++) {
167 var col = input.charCodeAt(i) - 64;
168 if (col < 1 || col > 26) {
169 output += ' ';
172 output += '<span>' + cols[col].innerHTML.trimRight() + '</span>';
175 samplecol.innerHTML = output;
179 var container = document.createElement('P');
180 container.appendChild(inputel);
181 document.body.appendChild(container);