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 */
32 stroke-linecap: square;
36 stroke-linecap: round;
37 stroke-linejoin: round;
44 vertical-align: middle;
46 #old-roman-cursive .sample span {
50 #tap-simplified .sample {
54 #tap-code .sample span,
55 #tap-simplified .sample span {
65 #nyctographs .sample svg {
66 background: rgba(0,0,0, .1);
71 svg path:not([fill]) {
75 svg circle:not([fill]) {
83 vertical-align: middle;
87 <h1>Latin alphabet</h1>
89 <p>Variant encodings of the common ASCII (latin, roman,
90 or <span title="fuck yeah!">'mercan</span>) letters A–Z.
91 Also see <a href="/writing">related alphabets</a>
92 and <a href="/chars/abc">font comparison</a>.</p>
97 use List::Util qw( pairs );
99 my @table = do 'writing-latn.inc.pl';
101 Alert("Table data not found", $@ || $!);
104 say '<table class="glyphs">';
105 for my $row (pairs @table) {
106 my ($title, $cells) = @{$row};
107 printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
117 print " colspan=$colspan";
120 print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
131 var inputel = document.createElement('INPUT');
132 inputel.oninput = function () {
133 var rows = document.getElementsByClassName('glyphs')[0].rows;
134 for (var row of rows) {
135 cols = [ row.cells[0] ];
136 for (var col = 1; col <= 26; col++) {
137 cols[col] = cols[ col - 1 ].nextSibling;
138 for (var span = 1; span < cols[col].colSpan; span++) {
139 var same = cols[col];
143 var samplecol = row.getElementsByClassName('sample');
144 if (samplecol.length) {
145 samplecol = samplecol[0];
148 samplecol = row.appendChild(document.createElement('TD'));
149 samplecol.className = 'sample';
153 var input = inputel.value.toUpperCase();
154 for (var i = 0; i < input.length; i++) {
155 var col = input.charCodeAt(i) - 64;
156 if (col < 1 || col > 26) {
157 output += ' ';
160 output += '<span>' + cols[col].innerHTML.trimRight() + '</span>';
163 samplecol.innerHTML = output;
167 var container = document.createElement('P');
168 container.appendChild(inputel);
169 document.body.appendChild(container);