unicode: common and improved css

Merge all inline styling with digraphs.css, making minor improvements along
the way.

diff --git a/base.css b/base.css
index cfaa4339eacce9e07419c3c913646e0b757ccfba..38a55442a3501856f81645ede3d170f9f164045a 100644 (file)
--- a/base.css
+++ b/base.css
@@ -29,6 +29,20 @@ h2 {
        margin-bottom: -4ex;
 }
 
+/* footer */
+
+hr {
+       clear: both;
+       visibility: hidden;
+       height: 2ex;
+       margin: 0;
+}
+
+p.footer {
+       margin: 0;
+       text-align: center;
+}
+
 /* "keyboard" (list of keys) */
 
 ul {
@@ -134,20 +148,6 @@ ul.keys li.vim7 {
        -moz-border-radius: 0;
 }
 
-/* footer */
-
-hr {
-       clear: both;
-       visibility: hidden;
-       height: 2ex;
-       margin: 0;
-}
-
-p.footer {
-       margin: 0;
-       text-align: center;
-}
-
 /* l/r help columns */
 
 .help {

diff --git a/digraphs.css b/digraphs.css
index 6019e5e4787b25e9a64547cfc1d3c717e90671a8..5593697a166ee8eb1e11406410691c074e26ec53 100644 (file)
--- a/digraphs.css
+++ b/digraphs.css
@@ -21,6 +21,11 @@ h1 {
        font-size: 180%;  /* 200% * 90% */
        margin: 0 0 0.5ex;
 }
+h2 {
+       margin: 0 1ex;
+       font-size: 100%;
+       clear: both;
+}
 p {
        text-align: center;
        font-size: 90%;  /* like base.css body */
@@ -32,26 +37,87 @@ p#footer {
 
 /* digraph table */
 
-table {
+table.glyphs {
        border-collapse: collapse;
+}
+.glyphs thead th, .glyphs td {
+       text-align: center;
+       width: 1.6em; /* regular interval */
+}
+.glyphs th, .glyphs td {
+       border-color: #778;
+       border: 1px solid #888;
+       background: #DDD;
+}
+
+/* table headers */
+
+.glyphs th {
+       text-align: left;
+       font-size: 50%;
+       background: #888;
+       background: #778;
+       background: #889;
+       color: #FFF;
+       padding: 0 0.2em;
+}
+.glyphs.dimap th,
+.glyphs thead td {
+       /* reset to background styling */
+       border: 0;
+       background: transparent;
+       color: inherit;
+       font-size: 90%;
+}
+.glyphs thead td {
+       width: auto;
+}
+
+/* digraphs map */
+
+table.glyphs.dimap {
        table-layout: fixed; /* prevent resizing, notably in msie6 */
 }
-tbody, colgroup {
-       border: 2px double #888;
+.glyphs.dimap thead th, .glyphs.dimap td {
+       /* below-maximum size (but still average enough to be regular) so we can fit more */
+       width: 1.2em; /* msie only looks at the first row */
+       min-width: 1em; /* prevents gecko from restricting to page width */
 }
-tbody {
-       border-width: 2px 0;
+.glyphs.dimap th {
+       text-align: center; /* row headers are also glyph-sized */
 }
-colgroup {
-       border-width: 0 2px;
+
+.glyphs.dimap tbody, .glyphs.dimap colgroup {
+       border: 2px double #888; /* major character group grid */
 }
+.glyphs.dimap tbody {
+       border-width: 2px 0; /* horizontal group dividers */
+}
+.glyphs.dimap colgroup {
+       border-width: 0 2px; /* vertical divides */
+}
+
+/* digraph selection */
+
+.diinfo {
+       -moz-column-width: 24em;
+}
+.diinfo > div {
+       overflow: hidden;
+}
+
+.diinfo table.glyphs {
+       margin: 1ex 1ex 2ex;
+       float: left;
+}
+
+/* legend */
 
 #legend {
        margin-top: 1em;
 }
 #legend table {
        width: 100%;
-       table-layout: auto;
 }
 #legend tbody {
        border: 0;
@@ -60,21 +126,38 @@ colgroup {
        padding: 0 0.2em;
 }
 
-/* character cells */
+/* glyph cell overlay (digraph labels) */
 
-thead th, td {
-       width: 1.2em; /* msie only looks at the first row */
-       min-width: 1em; /* prevents gecko from restricting to page width */
+.glyphs.dilabel td {
+       padding: 0;
+       padding-bottom: 1.1ex; /* reserve space for label */
+       vertical-align: bottom;
 }
-th, td {
-       text-align: center;
+.glyphs small {
+       font-size: 50%;
+       display: block;
+       margin-top: 0.2ex;
+       margin-bottom: -2.2ex; /* take cell padding */
 }
-td {
-       border: 1px solid #888;
-       background: #DDD;
+.glyphs small.digraph {
+       background: #888;
+       color: #FFF;
+
+       background: #000;
+       color: #FFF;
+       opacity: 0.3;
+}
+.glyphs small.value {
+       background: #CCC;
+       color: #666;
+
+       background: #800;
+       color: #FFF;
+       opacity: 0.3;
 }
 
-/* properties */
+/* character properties */
+
 td.X  {background: #FFF} /* unidentified */
 td.Xr {background: #EEE} /* reverse */
 td.Xa {color: #0A0} /* ascii */
@@ -108,7 +191,7 @@ td.Zs                      {background: #ACB} /* space */
 td.Zs span                 {background: #EEE}
 td.Co                      {background: #A99} /* private */
 
-/* alternate categories */
+/* implementation-based alternatives */
 td.Ascii    {background: #EFD} /* ascii */
 td.Di       {background: #FFD} /* rfc-1345 digraph */
 td.DiProp   {background: #FED} /* proposed digraph */

diff --git a/digraphs.plp b/digraphs.plp
index c5184a40296c60096f9411475f6de17b642d1f72..6193b97d07ffc7dab0dd6a532ea65609f02c0cd1 100644 (file)
--- a/digraphs.plp
+++ b/digraphs.plp
@@ -47,7 +47,7 @@ my @chars = (
 );
 my @chars2 = (['_'], @chars);  # trailing character (extended set)
 
-print '<table><col>';
+print '<table class="glyphs dimap"><col>';
 print qq'<colgroup span="$_">' for map {scalar @$_} @chars2;
 print "</colgroup><col>\n";
 for my $section (qw{thead tfoot}) {
@@ -88,7 +88,7 @@ for my $c1group (@chars) {
 print "</table>\n";
 :>
 <div id="legend">
-       <table><tr>
+       <table class="glyphs"><tr>
        <td class="X Cc">control
        <td class="X Zs"><span>spacing</span>
        <td class="X Mn">modifier
@@ -109,7 +109,7 @@ print "</table>\n";
        <td class="X Bopomofo">chinese
        </table>
 
-       <table><tr>
+       <table class="glyphs"><tr>
        <td class="X">unicode
        <td class="X Xl">latin1
        <td class="X Xa">ascii

diff --git a/unicode.plp b/unicode.plp
index 81e54a3f5593f2b4c57acb924ffa5715a081aea1..d5e01450b3258ddbadbad49c49a803fbe243d113 100644 (file)
--- a/unicode.plp
+++ b/unicode.plp
@@ -17,78 +17,6 @@ $header{content_type} = 'text/html; charset=utf-8';
 <title>digraph cheat sheet</title>
 <meta http-equiv="content-type" content="utf-8">
 <link rel="stylesheet" type="text/css" media="all" href="/digraphs.css">
-<style>
-#list-common {
-       overflow: hidden;
-}
-
-table {
-       margin: 1ex 1ex 2ex;
-       float: left;
-       table-layout: auto;
-}
-thead td {
-       width: auto;
-}
-tbody {
-       border-width: 0;
-}
-h2, h3 {
-       clear: both;
-}
-h2 {
-       margin: 0 1ex;
-       font-size: 100%;
-}
-
-th {
-       text-align: left;
-       font-size: 50%;
-       background: #888;
-       background: #778;
-       background: #889;
-       color: #FFF;
-       padding: 0 0.2em;
-}
-th, td {
-       border-color: #778;
-       border: 1px solid #888;
-}
-thead td {
-       border: 0;
-       background: transparent;
-}
-thead th {
-       text-align: center;
-}
-
-td {
-       vertical-align: top;
-       margin: 0;
-       padding: 0;
-       width: 1.6em;
-}
-small {
-       font-size: 50%;
-       display: block;
-}
-small.digraph {
-       background: #888;
-       color: #FFF;
-
-       background: #000;
-       color: #FFF;
-       opacity: 0.3;
-}
-small.value {
-       background: #CCC;
-       color: #666;
-
-       background: #800;
-       color: #FFF;
-       opacity: 0.3;
-}
-</style>
 </head>
 
 <body>
@@ -97,7 +25,7 @@ small.value {
 <p>i^k in <a href="/">Vim</a>.
 Also see the <a href="/digraphs">complete digraphs table</a>.</p>
 
-<div id="list-common">
+<div class="diinfo">
 
 <:
 my $diinfo = do 'digraphs.inc.pl';
@@ -173,26 +101,29 @@ sub table {
                        @$colheads
        }
 
-       return sprintf "<table>\n%s</table>\n", join '', map {"<tr>$_\n"} @rows;
+       return sprintf qq{<table class="glyphs dilabel">\n%s</table>\n},
+               join '', map {"<tr>$_\n"} @rows;
 }
 
-print "<h2>Common</h2>\n\n";
+print "<div>\n", "<h2>Popular</h2>\n\n";
 print table(@$_) for (
        [ 3 => [qw{. « » . ‹ › . ‘ ’ . “ ” . „ ‚}]],
        [ 3 => [qw{. † ‡ • . § ¶ # . © ® ™ . − × ÷ . ± ² √}]],
        [ 3 => [qw{. å ä ö ü ß . Å æ ø ű ſ}]],
        [ 3 => [qw{. ¿ ç ñ é ê è}]],
 );
+print "</div>\n\n";
 
-print "<h2>Arrows</h2>\n\n";
+print "<div>\n", "<h2>Arrows</h2>\n\n";
 print table(@$_) for (
        [ 4 => [qw{. ↖ ↑ ↗ ↔ . ← - → ↕ . ↙ ↓ ↘ -}]],
        [ 4 => [qw{. ⇖ ⇑ ⇗ ⇔ . ⇐ - ⇒ ⇕ . ⇙ ⇓ ⇘ -}]],
        [ 3 => [qw{. ◤ ▲ ◥ . ◀ ◆ ▶ . ◣ ▼ ◢}]],
        [ 3 => [qw{. ◸ △ ◹ . ◁ ◇ ▷ . ◺ ▽ ◿}]],
 );
+print "</div>\n\n";
 
-print "<h2>Line drawing</h2>\n\n";
+print "<div>\n", "<h2>Line drawing</h2>\n\n";
 print table(@$_) for (
        [ 4 => [qw{. ┌ ┬ ┐ . ├ ┼ ┤ . └ ┴ ┘}]],
        [ 4 => [qw{. ┏ ┳ ┓ . ┣ ╋ ┫ . ┗ ┻ ┛}]],
@@ -209,8 +140,9 @@ print table(@$_) for (
        [ 3 => [qw{. ╒ ╤ ╕ . ╞ ╪ ╡ . ╘ ╧ ╛ }]],
        [ 3 => [qw{. ╓ ╥ ╖ . ╟ ╫ ╢ . ╙ ╨ ╜ }]],
 );
+print "</div>\n\n";
 
-print "<h2>Blocks</h2>\n\n";
+print "<div>\n", "<h2>Blocks</h2>\n\n";
 print table(@$_) for (
        [ 3 => [qw{. ▘ ▀ ▝ . ▌ █ ▐ . ▖ ▄ ▗ }]],
        [ 3 => [qw{. ░ . ▒ . ▓ }]],
@@ -218,16 +150,18 @@ print table(@$_) for (
        [ 2 => [qw{. ▁ ▂ ▃ ▄ ▅ ▆ ▇ ▔ . ▏ ▎ ▍ ▌ ▋ ▊ ▉ ▕ }]],
        [ 3 => [qw{. □ ▣ ■ . ▤ ▦ ▥ . ▧ ▩ ▨}]],
 );
+print "</div>\n\n";
 
-print "<h2>Signs</h2>\n\n";
+print "<div>\n", "<h2>Signs</h2>\n\n";
 print table(@$_) for (
        [ 8 => [qw{. ¤ ¢ ₥ € £ ₨ $ ¥ . ₫ ₭ ₦ ₱ ₧ ₮ ₩ ₪}]],
        [ 4 => [qw{. ♠ ♡ ♢ ♣ . ♤ ♥ ♦ ♧}]],
        [ 5 => [qw{. ☉ ☿ ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇}]],  # solar
        [12 => [qw{. ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓}]],  # zodiac
 );
+print "</div>\n\n";
 
-print "<h2>IPA</h2>\n\n";
+print "<div>\n", "<h2>IPA</h2>\n\n";
 print table(@$_) for (
        [
                12 => [qw{
@@ -278,8 +212,9 @@ print table(@$_) for (
                [map {substr($_, 0, 1).':'.$_, substr($_, 0, 1)." r:$_ rounded"} qw{Front Central Back}]
        ],
 );
+print "</div>\n\n";
 
-print "<h2>Alphabetics</h2>\n\n";
+print "<div>\n", "<h2>Alphabetics</h2>\n\n";
 print table(1,
        [ map { ('.', split //, $_->[1]) } @$_ ],
        [ map {                 $_->[0]  } @$_ ],
@@ -289,8 +224,9 @@ print table(1,
        [Greek    => 'αίϊηϋπψσςθξΩ'],
        [Hebrew   => 'אײיעונןסשטצץ'],
 ];
+print "</div>\n\n";
 
-print "<h2>Japanese</h2>\n\n";
+print "<div>\n", "<h2>Japanese</h2>\n\n";
 print table(@$_) for (
        [
                1 => [qw{
@@ -348,6 +284,7 @@ print table(@$_) for (
                [qw{A I U E O}],
        ],
 );
+print "</div>\n\n";
 
 :></div>