latin.plp

   1 <(common.inc.plp)><:
   2
   3 Html({
   4         title => 'latin alphabet cheat sheet',
   5         version => '1.3',
   6         description => [
   7         ],
   8         keywords => [qw'
   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
  13         '],
  14         stylesheet => [qw'light dark red'],
  15         data => ['writing-latn.inc.pl'],
  16 });
  17
  18 :>
  19 <style>
  20         @font-face {
  21                 font-family: Suetterlin; /* R. G. Arens */
  22                 src: url("/suetterlin.ttf");
  23         }
  24         #sütterlin td { font-family: Suetterlin }
  25         #tap-code td,
  26         #tap-simplified td {
  27                 line-height: 1ex;
  28         }
  29         #pigpen {
  30                 stroke-linecap: square;
  31         }
  32         #nyctographs,
  33         #old-roman-cursive {
  34                 stroke-linecap: round;
  35                 stroke-linejoin: round;
  36         }
  37         td {
  38                 white-space: nowrap;
  39         }
  40
  41         svg path:not([fill]) {
  42                 stroke: currentColor;
  43                 fill: none;
  44         }
  45
  46         td {
  47                 vertical-align: top;
  48         }
  49         td > svg {
  50                 vertical-align: middle;
  51         }
  52 </style>
  53
  54 <h1>Latin alphabet</h1>
  55
  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>
  60
  61 <div>
  62
  63 <:
  64 use List::Util qw( pairs );
  65
  66 my @table = do 'writing-latn.inc.pl';
  67 if ($! or $@) {
  68         Alert("Table data not found", $@ || $!);
  69 }
  70 else {
  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;
  75                 say '<th>', $title;
  76                 my $colspan = 1;
  77                 for (@{$cells}) {
  78                         if ($_ eq '>') {
  79                                 $colspan++;
  80                                 next;
  81                         }
  82                         print "\t<td";
  83                         if ($colspan > 1) {
  84                                 print " colspan=$colspan";
  85                                 $colspan = 1;
  86                         }
  87                         print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
  88                         print '>';
  89                         say;
  90                 }
  91         }
  92         say "</table>\n";
  93 }
  94
  95 :></div>
  96
  97 <script>
  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];
 107                                 cols[++col] = same;
 108                         }
 109                 }
 110                 var samplecol = row.getElementsByClassName('sample');
 111                 if (samplecol.length) {
 112                         samplecol = samplecol[0];
 113                 }
 114                 else {
 115                         samplecol = row.appendChild(document.createElement('TD'));
 116                         samplecol.className = 'sample';
 117                 }
 118
 119                 var output = '';
 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 += ' &nbsp; ';
 125                         }
 126                         else {
 127                                 output += cols[col].innerHTML.trimRight();
 128                         }
 129                 }
 130                 samplecol.innerHTML = output;
 131         }
 132 };
 133
 134 var container = document.createElement('P');
 135 container.appendChild(inputel);
 136 document.body.appendChild(container);
 137
 138 </script>