digraphs: css update, cell groups

Add table groups (major borders) bringing a bit more structure to the sea of
6400 cells.  A couple of other css-related changes.

diff --git a/digraphs.css b/digraphs.css
index 3e5300422d999637dd9de5b4c10e675400fad48e..4fa8f7c2e32603f06d424c0a7cb7c70f9f8c2186 100644 (file)
--- a/digraphs.css
+++ b/digraphs.css
@@ -21,7 +21,7 @@ h1 {
        font-size: 200%;
        margin: 0 0 0.2em;
 }
        font-size: 200%;
        margin: 0 0 0.2em;
 }

-p.footer {
+p#footer {

        margin: 1em 0 0;
        text-align: center;
 }
        margin: 1em 0 0;
        text-align: center;
 }


@@ -32,6 +32,16 @@ table {
        border-collapse: collapse;
        table-layout: fixed; /* prevent resizing, notably in msie6 */
 }
        border-collapse: collapse;
        table-layout: fixed; /* prevent resizing, notably in msie6 */
 }

+tbody, colgroup {
+       border: 2px double #888;
+}
+tbody {
+       border-width: 2px 0;
+}
+colgroup {
+       border-width: 0 2px;
+}
+

 #legend {
        margin-top: 1em;
 }
 #legend {
        margin-top: 1em;
 }


@@ -39,6 +49,9 @@ table {
        width: 100%;
        table-layout: auto;
 }
        width: 100%;
        table-layout: auto;
 }

+#legend tbody {
+       border: 0;
+}

 #legend td {
        padding: 0 0.2em;
 }
 #legend td {
        padding: 0 0.2em;
 }

diff --git a/digraphs.plp b/digraphs.plp
index 6e8a30a867f4900289f22bd64caffa2ae4566244..b62b57774b9f85a425dc9b84ed6b3b26e2c62c0f 100644 (file)
--- a/digraphs.plp
+++ b/digraphs.plp
@@ -32,38 +32,46 @@ sub quote {
        return $_;
 }
 
        return $_;
 }
 

-my @chars = ((map {chr} ord '!' .. ord 'Z'), 'a'..'z');
-splice @chars, $_, 1, () for 2, 3-1, 5-2, 31-3;  # remove character exceptions # $ & @
-my @chars2 = (@chars, '_');  # trailing character (extended set)
+my @chars = (
+       [qw{! " % ' ( ) * + , - . /}],
+       ['0'..'9'], [qw{: ; < = > ?}],
+       ['A'..'M'], ['N'..'Z'],
+       ['a'..'m'], ['n'..'z'],
+);
+my @chars2 = (@chars, ['_']);  # trailing character (extended set)

 
 

-print '<table>';
+print '<table><col>';
+print qq'<colgroup span="$_">' for map {scalar @$_} @chars2;
+print "\n";

 for my $section (qw{thead tfoot}) {
        print "<$section><tr><th>&nbsp;";
 for my $section (qw{thead tfoot}) {
        print "<$section><tr><th>&nbsp;";

-       print "<th>$_" for @chars2;
+       print "<th>$_" for map {@$_} @chars2;

 }
 }

-print '<tbody>';
-for my $c1 (@chars) {
-       print "<tr><th>$c1";
-       for my $c2 (@chars2) {
-               my $mnem = $c1 . $c2;
-               if (not defined $di->{$mnem}) {
-                       print '<td>';
-                       next;
-               }
-               my ($codepoint, $name, $prop, $script) = @{ $di->{$mnem} };
+for my $c1group (@chars) {
+       print '<tbody>';
+       for my $c1 (@$c1group) {
+               print "<tr><th>$c1";
+               for my $c2 (map {@$_} @chars2) {
+                       my $mnem = $c1 . $c2;
+                       if (not defined $di->{$mnem}) {
+                               print '<td>';
+                               next;
+                       }
+                       my ($codepoint, $name, $prop, $script) = @{ $di->{$mnem} };

 
 

-               my $glyph = chr $codepoint;
-               utf8::upgrade($glyph);  # prevent latin1 output
-               my $desc = $mnem . ($name && " ($name)");
-               my @class = ('X', grep {$_} $prop, $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 $prop eq 'Zs';
+                       $glyph = quote($glyph);
+                       $glyph = "<span>$glyph</span>" if $prop eq 'Zs';

 
 

-               printf "\n".'<td class="%s" title="%s">%s',
-                       join(' ', @class), quote($desc), $glyph;
+                       printf "\n".'<td class="%s" title="%s">%s',
+                               join(' ', @class), quote($desc), $glyph;
+               }
+               print "\n<th>$c1\n";

        }
        }

-       print "\n<th>$c1\n";

 }
 print "</table>\n";
 :>
 }
 print "</table>\n";
 :>


@@ -97,7 +105,7 @@ print "</table>\n";
        </table>
 </div>
 
        </table>
 </div>
 

-<p class="footer">
+<p id="footer">

        <a href="http://vi.shiar.net/digraphs">vi.<strong>shiar.net</strong>/digraphs</a>
        <a href="git://dev.shiar.net/vi-cheat"><:= "v$VERSION" :></a>
        created by Shiar •
        <a href="http://vi.shiar.net/digraphs">vi.<strong>shiar.net</strong>/digraphs</a>
        <a href="git://dev.shiar.net/vi-cheat"><:= "v$VERSION" :></a>
        created by Shiar •