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