digraphs: external stylesheet
[sheet.git] / digraphs.plp
index 93dfd75b698b115a5a44898c1bc4f5b8e4b07dea..937228ca77ee6b44e29a85b892ec61be8165fc59 100644 (file)
@@ -4,8 +4,6 @@ use strict;
 use warnings;
 use open IO => ':utf8';
 
-use Unicode::UCD qw(charinfo);
-
 our $VERSION = '1.0';
 
 $header{content_type} = 'text/html; charset=utf-8';
@@ -17,77 +15,7 @@ $header{content_type} = 'text/html; charset=utf-8';
 <head>
 <title>digraph cheat sheet</title>
 <meta http-equiv="content-type" content="utf-8">
-<style>
-h1 {
-       text-align: center;
-       margin: 0 auto 0.2em;
-}
-table {
-       border-collapse: collapse;
-       table-layout: fixed; /* prevent resizing, notably in msie6 */
-}
-#legend {
-       margin-top: 1em;
-}
-#legend table {
-       width: 100%;
-       table-layout: auto;
-#}
-#legend td {
-       padding: 0 0.2em;
-}
-thead th, td {
-       width: 1.2em; /* msie only looks at the first row */
-       min-width: 1em; /* prevents gecko from restricting to page width */
-}
-th, td {
-       text-align: center;
-}
-td {
-       border: 1px solid #888;
-       background: #DDD;
-}
-td.X {
-       background: #FFF;
-}
-
-td.Lm, td.Mc, td.Me, td.Zl, td.Zp, td.Cs {background:red} /* unknown */
-
-/* letters */
-td.Greek    {background: #FFE0CF}
-td.Cyrillic {background: #FFDDA8}
-td.Latin    {background: #FFB}
-td.Hebrew   {background: #FFD}
-td.Arabic   {background: #EFE}
-td.Hiragana {background: #DFC}
-td.Katakana {background: #DFA}
-td.Bopomofo {background: #BFC}
-
-td.Nd, td.Nl,
-td.No {background: #FBB} /* number */
-td.Sc {background: #FCD} /* currency */
-td.Sm {background: #ECE} /* math */
-td.So {background: #DDCCFF} /* symbol */
-td.Cf, td.Pd,
-td.Po {background: #CDF} /* punctuation */
-td.Ps, td.Pe, td.Pi,
-td.Pf {background: #BEF} /* quote */
-td.Lm,
-td.Sk {background: #CEE} /* spacing modifier */
-td.Mn {background: #ACC} /* modifier */
-td.Cc {background: #BBB; color: #666} /* control */
-td.Zs {background: #ACB} /* space */
-td.Zs span {background: #EEE}
-
-td.Xa {color: #040} /* ascii */
-td.Xl {color: #080} /* latin1 */
-td.Co {color: #800} /* private */
-td.Xz {color: #F00} /* proposed */
-
-tr:hover td {
-       background: #FF8;
-}
-</style>
+<link rel="stylesheet" type="text/css" media="all" href="digraphs.css">
 </head>
 
 <body>
@@ -122,20 +50,15 @@ for my $c1 (@chars) {
                        print '<td>';
                        next;
                }
-               my $chr = $di->{$mnem};
-               my $glyph = chr $chr;
-               utf8::upgrade($glyph);  # prevent latin1 output
-               my $info = charinfo($chr);
-
-               my $desc = $mnem;
-               $desc .= " ($_)" for $info->{name} || ();
+               my ($codepoint, $name, $prop, $script) = @{ $di->{$mnem} };
 
-               my @class = 'X';
-               push @class, $_ for $info->{category} || ();
-               push @class, $_ for $info->{script} || ();
+               my $glyph = chr $codepoint;
+               utf8::upgrade($glyph);  # prevent latin1 output
+               my $desc = $mnem . ($name && " ($name)");
+               my @class = ('X', grep {$_} $prop, $script);
 
                $glyph = quote($glyph);
-               $glyph = "<span>$glyph</span>" if $info->{category} eq 'Zs';
+               $glyph = "<span>$glyph</span>" if $prop eq 'Zs';
 
                printf "\n".'<td class="%s" title="%s">%s',
                        join(' ', @class), quote($desc), $glyph;
@@ -167,8 +90,8 @@ print "</table>\n";
 
        <table><tr>
        <td class="X">unicode
-       <td class="X Xa">ascii
        <td class="X Xl">latin1
+       <td class="X Xa">ascii
        <td class="X Co">private
        <td class="X Xz">proposed
        </table>