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 mono )],
  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         #short-tap td {
  28                 white-space: normal;
  29                 word-spacing: 5em; /* force line break between words */
  30         }
  31         #tap-code td,
  32         #short-tap td {
  33                 line-height: 1ex;
  34         }
  35         #ita2 td {
  36                 font-size: 50%;
  37         }
  38         #cards td {
  39                 font-family: Symbola, "DejaVu Sans", serif, sans;
  40         }
  41         #pigpen {
  42                 stroke-linecap: square;
  43         }
  44         #nyctographs,
  45         #old-roman-cursive {
  46                 stroke-linecap: round;
  47                 stroke-linejoin: round;
  48         }
  49         td {
  50                 white-space: nowrap;
  51         }
  52         th {
  53                 width: auto !important;
  54         }
  55
  56         .sample {
  57                 vertical-align: middle;
  58                 text-align: left;
  59                 padding: 1px 0.3em;
  60         }
  61         #old-roman-cursive .sample span {
  62                 margin-right: -10px;
  63         }
  64         #tap-code .sample,
  65         #short-tap .sample {
  66                 font-size: 80%;
  67         }
  68         #ita2 .sample,
  69         #tap-code .sample,
  70         #short-tap .sample {
  71                 word-spacing: 0;
  72         }
  73         #ita2 .sample span,
  74         #tap-code .sample span,
  75         #short-tap .sample span {
  76                 margin-right: 1ex;
  77                 white-space: nowrap;
  78         }
  79         #sutton-asl .sample span,
  80         #maritime-flags .sample span,
  81         #morse .sample span {
  82                 margin-right: 0.5ex;
  83         }
  84         #pigpen .sample svg {
  85                 margin-right: 0.1em;
  86         }
  87         #nyctographs .sample svg {
  88                 background: rgba(0,0,0, .1);
  89                 padding: 0.1em;
  90                 margin-right: 0.2em;
  91         }
  92         #unistrokes svg path {
  93                 stroke-linecap: round;
  94                 stroke-linejoin: round;
  95         }
  96
  97         svg path:not([fill]) {
  98                 stroke: currentColor;
  99                 fill: none;
 100         }
 101         svg circle:not([fill]) {
 102                 fill: currentColor;
 103         }
 104
 105         td {
 106                 vertical-align: top;
 107         }
 108         td svg {
 109                 vertical-align: middle;
 110         }
 111 </style>
 112
 113 <h1>Latin alphabet</h1>
 114
 115 <p id=intro>Variant encodings of the common ASCII (latin, roman,
 116 or <span title="fuck yeah!">'mercan</span>) letters A–Z.
 117 Also see <a href="/writing">related alphabets</a>
 118 and <a href="/chars/abc">font comparison</a>.</p>
 119
 120 <div>
 121
 122 <:
 123 use List::Util qw( pairs );
 124
 125 my @table = do 'writing-latn.inc.pl';
 126 if ($! or $@) {
 127         Alert("Table data not found", $@ || $!);
 128 }
 129 else {
 130         my %VOWELCOLS = (map { ($_ => 1) } 0, 4, 8, 14, 20, 24);
 131         say '<table class="glyphs">';
 132         say '<thead><tr><th># <small>ASCII − 64</small>';
 133         print '<td>', $_ for 1 .. 26;
 134         say '</thead>';
 135
 136         for my $row (pairs @table) {
 137                 my ($title, $info) = @{$row};
 138                 printf '<tr id="%s">', (lc $title) =~ s/<[^>]+>//gr =~ s/\s+/-/gr;
 139                 say '<th>', $title;
 140                 my $colspan = 1;
 141                 my $col = 0;
 142                 for (@{ $info->{list} }) {
 143                         $col++;
 144                         if ($_ eq '>') {
 145                                 $colspan++;
 146                                 next;
 147                         }
 148                         my @class;
 149                         push @class ,'l0' if $VOWELCOLS{$col - $colspan};
 150                         push @class, $_ ? 'ex' : 'u-invalid' if s/^-//;
 151
 152                         print "\t<td";
 153                         if ($col > 26) {
 154                                 # special character for sample generation
 155                                 print ' hidden';  # sample only
 156                         }
 157                         else {
 158                                 print ' title=', chr($col + ord('A') - $colspan);
 159                         }
 160                         if ($colspan > 1) {
 161                                 print " colspan=$colspan";
 162                                 $colspan = 1;
 163                         }
 164                         printf ' class="%s"', "@class" if @class;
 165                         print '>';
 166                         say;
 167                 }
 168         }
 169         say "</table>\n";
 170 }
 171
 172 :></div>
 173
 174 <script type="text/javascript" src="/latinsample.js"></script>
 175 <script type="text/javascript"> prependinput(document.getElementById('intro')) </script>
 176