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