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         svg circle:not([fill]) {
  76                 fill: currentColor;
  77         }
  78
  79         td {
  80                 vertical-align: top;
  81         }
  82         td > svg {
  83                 vertical-align: middle;
  84         }
  85 </style>
  86
  87 <h1>Latin alphabet</h1>
  88
  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>
  93
  94 <div>
  95
  96 <:
  97 use List::Util qw( pairs );
  98
  99 my @table = do 'writing-latn.inc.pl';
 100 if ($! or $@) {
 101         Alert("Table data not found", $@ || $!);
 102 }
 103 else {
 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;
 108                 say '<th>', $title;
 109                 my $colspan = 1;
 110                 for (@{$cells}) {
 111                         if ($_ eq '>') {
 112                                 $colspan++;
 113                                 next;
 114                         }
 115                         print "\t<td";
 116                         if ($colspan > 1) {
 117                                 print " colspan=$colspan";
 118                                 $colspan = 1;
 119                         }
 120                         print ' class=', $_ ? 'ex' : 'u-invalid' if s/^-//;
 121                         print '>';
 122                         say;
 123                 }
 124         }
 125         say "</table>\n";
 126 }
 127
 128 :></div>
 129
 130 <script>
 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];
 140                                 cols[++col] = same;
 141                         }
 142                 }
 143                 var samplecol = row.getElementsByClassName('sample');
 144                 if (samplecol.length) {
 145                         samplecol = samplecol[0];
 146                 }
 147                 else {
 148                         samplecol = row.appendChild(document.createElement('TD'));
 149                         samplecol.className = 'sample';
 150                 }
 151
 152                 var output = '';
 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 += ' &nbsp; ';
 158                         }
 159                         else {
 160                                 output += '<span>' + cols[col].innerHTML.trimRight() + '</span>';
 161                         }
 162                 }
 163                 samplecol.innerHTML = output;
 164         }
 165 };
 166
 167 var container = document.createElement('P');
 168 container.appendChild(inputel);
 169 document.body.appendChild(container);
 170
 171 </script>