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         #pigpen .sample > svg {
  42                 margin-right: 0.1em;
  43         }
  44         #nyctographs .sample > svg {
  45                 background: rgba(0,0,0, .1);
  46                 padding: 0.1em;
  47                 margin-right: 0.2em;
  48         }
  49
  50         svg path:not([fill]) {
  51                 stroke: currentColor;
  52                 fill: none;
  53         }
  54
  55         td {
  56                 vertical-align: top;
  57         }
  58         td > svg {
  59                 vertical-align: middle;
  60         }
  61 </style>
  62
  63 <h1>Latin alphabet</h1>
  64
  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>
  69
  70 <div>
  71
  72 <:
  73 use List::Util qw( pairs );
  74
  75 my @table = do 'writing-latn.inc.pl';
  76 if ($! or $@) {
  77         Alert("Table data not found", $@ || $!);
  78 }
  79 else {
  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;
  84                 say '<th>', $title;
  85                 my $colspan = 1;
  86                 for (@{$cells}) {
  87                         if ($_ eq '>') {
  88                                 $colspan++;
  89                                 next;
  90                         }
  91                         print "\t<td";
  92                         if ($colspan > 1) {
  93                                 print " colspan=$colspan";
  94                                 $colspan = 1;
  95                         }
  96                         print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
  97                         print '>';
  98                         say;
  99                 }
 100         }
 101         say "</table>\n";
 102 }
 103
 104 :></div>
 105
 106 <script>
 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];
 116                                 cols[++col] = same;
 117                         }
 118                 }
 119                 var samplecol = row.getElementsByClassName('sample');
 120                 if (samplecol.length) {
 121                         samplecol = samplecol[0];
 122                 }
 123                 else {
 124                         samplecol = row.appendChild(document.createElement('TD'));
 125                         samplecol.className = 'sample';
 126                 }
 127
 128                 var output = '';
 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 += ' &nbsp; ';
 134                         }
 135                         else {
 136                                 output += cols[col].innerHTML.trimRight();
 137                         }
 138                 }
 139                 samplecol.innerHTML = output;
 140         }
 141 };
 142
 143 var container = document.createElement('P');
 144 container.appendChild(inputel);
 145 document.body.appendChild(container);
 146
 147 </script>