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                 white-space: normal;
  29                 word-spacing: 5em; /* force line break between words */
  30         }
  31         #pigpen {
  32                 stroke-linecap: square;
  33         }
  34         #nyctographs,
  35         #old-roman-cursive {
  36                 stroke-linecap: round;
  37                 stroke-linejoin: round;
  38         }
  39         td {
  40                 white-space: nowrap;
  41         }
  42
  43         #pigpen .sample > svg {
  44                 margin-right: 0.1em;
  45         }
  46         #nyctographs .sample > svg {
  47                 background: rgba(0,0,0, .1);
  48                 padding: 0.1em;
  49                 margin-right: 0.2em;
  50         }
  51
  52         svg path:not([fill]) {
  53                 stroke: currentColor;
  54                 fill: none;
  55         }
  56
  57         td {
  58                 vertical-align: top;
  59         }
  60         td > svg {
  61                 vertical-align: middle;
  62         }
  63 </style>
  64
  65 <h1>Latin alphabet</h1>
  66
  67 <p>Variant encodings of the common ASCII (latin, roman,
  68 or <span title="fuck yeah!">'mercan</span>) letters A–Z.
  69 Also see <a href="/writing">related alphabets</a>
  70 and <a href="/unicode">common chars</a>.</p>
  71
  72 <div>
  73
  74 <:
  75 use List::Util qw( pairs );
  76
  77 my @table = do 'writing-latn.inc.pl';
  78 if ($! or $@) {
  79         Alert("Table data not found", $@ || $!);
  80 }
  81 else {
  82         say '<table class="glyphs">';
  83         for my $row (pairs @table) {
  84                 my ($title, $cells) = @{$row};
  85                 printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
  86                 say '<th>', $title;
  87                 my $colspan = 1;
  88                 for (@{$cells}) {
  89                         if ($_ eq '>') {
  90                                 $colspan++;
  91                                 next;
  92                         }
  93                         print "\t<td";
  94                         if ($colspan > 1) {
  95                                 print " colspan=$colspan";
  96                                 $colspan = 1;
  97                         }
  98                         print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
  99                         print '>';
 100                         say;
 101                 }
 102         }
 103         say "</table>\n";
 104 }
 105
 106 :></div>
 107
 108 <script>
 109 var inputel = document.createElement('INPUT');
 110 inputel.oninput = function () {
 111         var rows = document.getElementsByClassName('glyphs')[0].rows;
 112         for (var row of rows) {
 113                 cols = [ row.cells[0] ];
 114                 for (var col = 1; col <= 26; col++) {
 115                         cols[col] = cols[ col - 1 ].nextSibling;
 116                         for (var span = 1; span < cols[col].colSpan; span++) {
 117                                 var same = cols[col];
 118                                 cols[++col] = same;
 119                         }
 120                 }
 121                 var samplecol = row.getElementsByClassName('sample');
 122                 if (samplecol.length) {
 123                         samplecol = samplecol[0];
 124                 }
 125                 else {
 126                         samplecol = row.appendChild(document.createElement('TD'));
 127                         samplecol.className = 'sample';
 128                 }
 129
 130                 var output = '';
 131                 var input = inputel.value.toUpperCase();
 132                 for (var i = 0; i < input.length; i++) {
 133                         var col = input.charCodeAt(i) - 64;
 134                         if (col < 1 || col > 26) {
 135                                 output += ' &nbsp; ';
 136                         }
 137                         else {
 138                                 output += cols[col].innerHTML.trimRight();
 139                         }
 140                 }
 141                 samplecol.innerHTML = output;
 142         }
 143 };
 144
 145 var container = document.createElement('P');
 146 container.appendChild(inputel);
 147 document.body.appendChild(container);
 148
 149 </script>