From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 11 Oct 2008 07:05:53 +0000 (+0000)
Subject: unicode: common and improved css
X-Git-Tag: v1.2~15
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/1feabc854356323923357263a4dec6fd05ecc46e?ds=sidebyside

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 cfaa433..38a5544 100644
--- 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 6019e5e..5593697 100644
--- 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 c5184a4..6193b97 100644
--- 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 81e54a3..d5e0145 100644
--- 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>