font: link digraph column header to digraphs page
[sheet.git] / charset.plp
index 2dc69649d2b02c56d7468cb602d8f4b385f0e361..e5fdd45966452046996d6e398e5611e499f9022e 100644 (file)
@@ -1,30 +1,25 @@
-<:
-use utf8;
-use strict;
-use warnings;
-use open IO => ':utf8';
-
-our $VERSION = '1.0';
-
-$header{content_type} = 'text/html; charset=utf-8';
-
-:><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
-<html>
+<(common.inc.plp)><:
+
+Html({
+       title => 'charset cheat sheet',
+       version => 'v1.0',
+       description => [
+               "Reference sheet with all glyphs in common character encoding tables,",
+               "and an overview of Unicode ranges and UTF-8 bytes.",
+       ],
+       keywords => [qw'
+               charset codepage unicode ascii utf8 latin glyph character encoding
+               reference common overview table
+       '],
+       stylesheet => [qw'light'],
+});
 
-<head>
-<title>charset cheat sheet</title>
-<meta http-equiv="content-type" content="utf-8">
-<link rel="stylesheet" type="text/css" media="all" href="/base.css">
-</head>
-
-<body>
+:>
 <h1>Character encoding</h1>
 
 <:
-my $diinfo = do 'digraphs.inc.pl';
-my %di = map { $diinfo->{$_}->[0] => $_ } grep { ref $diinfo->{$_} }
-       keys %$diinfo;
+use Shiar_Sheet::FormatChar;
+my $glyphs = Shiar_Sheet::FormatChar->new;
 
 use Encode qw(decode resolve_alias);
 # generate character table(s)
@@ -53,14 +48,29 @@ my @request = map {
                if ($input =~ s/-$//) {
                        $endpoint = $row{offset} ? $row{offset} < 160 ? 159 : 191 : 127;
                }
-               if ($row{set} = resolve_alias($input)) {
+
+               if ($input =~ /^U([0-9a-f]+)(?:-([0-9a-f]+))?/) {
+                       my $start = hex($1) << ($2 ? 4 : 8);
+                       my $end = $2 ? hex($2) << 4 : $start + 240;
+                       $row{table} = join '', map { chr } $start .. $end+15;
+                       utf8::upgrade($row{table});  # prevent latin1 output
+                       $row{set} = sprintf 'Unicode block U+%02Xxx', $start >> 8;
+               }
+               elsif ($input eq 'U') {
+                       $row{table} = ' ' x 512;
+                       $row{set} = 'Unicode planes';
+                       $row{cell} = do 'charset-ucplanes.inc.pl';
+               }
+               elsif ($row{set} = resolve_alias($input)) {
                        if ($row{set} eq 'Internal') {
                                $row{table} = ' ' x ($endpoint < 255 ? 640 : 4096);
                                $row{set} = 'Unicode BMP';
+                               $row{cell} = do 'charset-unicode.inc.pl';
                        }
                        elsif ($row{set} eq 'utf-8-strict') {
                                $row{table} = undef;
                                $row{set} = 'UTF-8';
+                               $row{cell} = do 'charset-utf8.inc.pl';
                        }
                        else {
                                $row{table} = decode($row{set}, pack 'C*', $row{offset} .. $endpoint);
@@ -86,606 +96,11 @@ for my $cp437 (grep {$request[$_]->{set} eq 'cp437'} 0 .. $#request) {
        );
 }
 
-sub quote {
-       local $_ = shift;
-       s/"/&quot;/g;
-       s/</&lt;/g;
-       s/>/&gt;/g;
-       return $_;
-}
-
-sub printcell_unicode {
-       my ($value) = @_;
-       if ($value > 0xFFF) {
-               print "\n".'<td class="X">?';
-       }
-       elsif ($value == 0) {
-               print '<td colspan="2" class="X Cc" style="border-right:none">control';
-       }
-       elsif ($value == 2) {
-               print '<td colspan="2" class="X L Po" style="border-left:none; border-right:none">comn';
-       }
-       elsif ($value == 4) {
-               print '<td colspan="4" class="X L Latin" style="border-left:none">basic latin';
-       }
-       elsif ($value == 8) {
-               print '<td colspan="2" class="X Cc" style="border-right:none">control';
-       }
-       elsif ($value == 10) {
-               print '<td colspan="2" class="X L So" style="border-left:none; border-right:none">comn';
-       }
-       elsif ($value == 12) {
-               print '<td colspan="4" class="X L Latin" style="border-left:none">latin1';
-       }
-       elsif ($value == 0x10) {
-               print '<td colspan="8" class="X L Latin">latin extended-A';
-       }
-       elsif ($value == 0x18) {
-               print '<td colspan="8" class="X L Latin">latin extended-B';
-       }
-       elsif ($value == 0x20) {
-               print '<td colspan="5" class="X L Latin">latin ext-B';
-       }
-       elsif ($value == 0x25) {
-               print '<td colspan="6" class="X L Latin">IPA';
-       }
-       elsif ($value == 0x2B) {
-               print '<td colspan="5" class="X Sk">spacing modifier';
-       }
-       elsif ($value == 0x30) {
-               print '<td colspan="8" class="X Mn">diacritics';
-       }
-       elsif ($value == 0x38) {
-               print '<td colspan="8" class="X L Greek">greek';
-       }
-       elsif ($value == 0x40) {
-               print '<td colspan="16" class="X L Cyrillic">cyrillic';
-       }
-       elsif ($value == 0x50) {
-               print '<td colspan="3" class="X L Cyrillic">cyrillic+';
-       }
-       elsif ($value == 0x53) {
-               print '<td colspan="5" class="X L Armenian">armenian';
-       }
-       elsif ($value == 0x58) {
-               print '<td colspan="8" class="X L Hebrew">hebrew';
-       }
-       elsif ($value == 0x60) {
-               print '<td colspan="16" class="X L Arabic">arabic';
-       }
-       elsif ($value == 0x70) {
-               print '<td colspan="5" class="X L Aramaic">syriac';
-       }
-       elsif ($value == 0x75) {
-               print '<td colspan="3" class="X L Arabic">arabic+';
-       }
-       elsif ($value == 0x78) {
-               print '<td colspan="4" class="X L African">thaana';
-       }
-       elsif ($value == 0x7C) {
-               print '<td colspan="4" class="X L African">n\'ko';
-       }
-       elsif ($value == 0x80) {
-               print '<td colspan="4" class="X Xr L Hebrew">samaritan';
-       }
-       elsif ($value == 0x84) {
-               print '<td colspan="2" class="X Xr L Aramaic">manda';
-       }
-       elsif ($value == 0x86) {
-               print '<td colspan="12" class="">reserved';
-       }
-       elsif ($value == 0x90) {
-               print '<td colspan="8" class="X L Brahmic">devanagari';
-       }
-       elsif ($value == 0x98) {
-               print '<td colspan="8" class="X L Brahmic">bengali';
-       }
-       elsif ($value == 0xA0) {
-               print '<td colspan="8" class="X L Brahmic">gurmukhi';
-       }
-       elsif ($value == 0xA8) {
-               print '<td colspan="8" class="X L Brahmic">gujarati';
-       }
-       elsif ($value == 0xB0) {
-               print '<td colspan="8" class="X L Brahmic">oriya';
-       }
-       elsif ($value == 0xB8) {
-               print '<td colspan="8" class="X L Brahmic">tamil';
-       }
-       elsif ($value == 0xC0) {
-               print '<td colspan="8" class="X L Brahmic">telugu';
-       }
-       elsif ($value == 0xC8) {
-               print '<td colspan="8" class="X L Brahmic">kannada';
-       }
-       elsif ($value == 0xD0) {
-               print '<td colspan="8" class="X L Brahmic">malayalam';
-       }
-       elsif ($value == 0xD8) {
-               print '<td colspan="8" class="X L Brahmic">sinhala';
-       }
-       elsif ($value == 0xE0) {
-               print '<td colspan="8" class="X L Brahmic Khmer">thai';
-       }
-       elsif ($value == 0xE8) {
-               print '<td colspan="8" class="X L Brahmic Khmer">lao';
-       }
-       elsif ($value == 0xF0) {
-               print '<td colspan="16" class="X L Brahmic">tibetan';
-       }
-       elsif ($value == 0x100) {
-               print '<td colspan="10" class="X L Brahmic">myanmar';
-       }
-       elsif ($value == 0x10A) {
-               print '<td colspan="6" class="X L Aramaic">georgian';
-       }
-       elsif ($value == 0x110) {
-               print '<td colspan="16" class="X L Hangul">hangeul jamo';
-       }
-       elsif ($value == 0x120) {
-               print '<td colspan="16" class="X L African">ethiopic';
-       }
-       elsif ($value == 0x130) {
-               print '<td colspan="8" class="X L African">ethiopic';
-       }
-       elsif ($value == 0x138) {
-               print '<td colspan="2" class="X L African">eth+';
-       }
-       elsif ($value == 0x13A) {
-               print '<td colspan="6" class="X L Syllabic">cherokee';
-       }
-       elsif ($value == 0x140) {
-               print '<td colspan="16" rowspan="2" class="X L Syllabic">unified canadian aboriginal syllabics';
-       }
-       elsif ($value == 0x160) {
-               print '<td colspan="8" class="X L Syllabic">unified canadian syllabics';
-       }
-       elsif ($value == 0x168) {
-               print '<td colspan="2" class="X L Alpha">ogham';
-       }
-       elsif ($value == 0x16A) {
-               print '<td colspan="6" class="X L Alpha">runic';
-       }
-       elsif ($value == 0x170) {
-               print '<td colspan="2" class="X L Brahmic">tagalog';
-       }
-       elsif ($value == 0x172) {
-               print '<td colspan="2" class="X L Brahmic">hanun';
-       }
-       elsif ($value == 0x174) {
-               print '<td colspan="2" class="X L Brahmic">buhid';
-       }
-       elsif ($value == 0x176) {
-               print '<td colspan="2" class="X L Brahmic" title="tagbanwa">tagb';
-       }
-       elsif ($value == 0x178) {
-               print '<td colspan="8" class="X L Brahmic Khmer">khmer';
-       }
-       elsif ($value == 0x180) {
-               print '<td colspan="11" class="X L Aramaic">mongolian';
-       }
-       elsif ($value == 0x18B) {
-               print '<td colspan="5" class="X Xr L Syllabic">canadian+';
-       }
-       elsif ($value == 0x190) {
-               print '<td colspan="5" class="X L Brahmic">limbu';
-       }
-       elsif ($value == 0x195) {
-               print '<td colspan="4" class="X L Brahmic">tai le';
-       }
-       elsif ($value == 0x198) {
-               print '<td colspan="6" class="X L Brahmic">new tai lue';
-       }
-       elsif ($value == 0x19E) {
-               print '<td colspan="2" class="X L Brahmic Khmer" title="khmer symbols">km';
-       }
-       elsif ($value == 0x1A0) {
-               print '<td colspan="2" class="X L Brahmic">lontara';
-       }
-       elsif ($value == 0x1A2) {
-               print '<td colspan="9" class="X Xr L Brahmic">tai tham';
-       }
-       elsif ($value == 0x1AB) {
-               print '<td colspan="5" class="">reserved';
-       }
-       elsif ($value == 0x1B0) {
-               print '<td colspan="8" class="X L Brahmic">balinese';
-       }
-       elsif ($value == 0x1B8) {
-               print '<td colspan="4" class="X L Brahmic">sundanese';
-       }
-       elsif ($value == 0x1BC) {
-               print '<td colspan="4" class="X Xr L Brahmic">batak';
-       }
-       elsif ($value == 0x1C0) {
-               print '<td colspan="5" class="X L Brahmic">lepcha';
-       }
-       elsif ($value == 0x1C5) {
-               print '<td colspan="3" class="X L Alpha">ol chiki';
-       }
-       elsif ($value == 0x1C8) {
-               print '<td colspan="5" class="">reserved';
-       }
-       elsif ($value == 0x1CD) {
-               print '<td colspan="3" class="X Xr Brahmic">vedic';
-       }
-       elsif ($value == 0x1D0) {
-               print '<td colspan="8" class="X L Latin">phonetic';
-       }
-       elsif ($value == 0x1D8) {
-               print '<td colspan="4" class="X L Latin">phonetic+';
-       }
-       elsif ($value == 0x1DC) {
-               print '<td colspan="4" class="X Mn">combining';
-       }
-       elsif ($value == 0x1E0) {
-               print '<td colspan="16" class="X L Latin">latin extended additional';
-       }
-       elsif ($value == 0x1F0) {
-               print '<td colspan="16" class="X L Greek">greek+';
-       }
-       elsif ($value == 0x200) {
-               print '<td colspan="7" class="X Po">general punctuation';
-       }
-       elsif ($value == 0x207) {
-               print '<td colspan="3" class="X Latin">suþscript'; # suth now means "sub and/or sup"
-       }
-       elsif ($value == 0x20A) {
-               print '<td colspan="3" class="X Sc">currency';
-       }
-       elsif ($value == 0x20D) {
-               print '<td colspan="3" class="X Mn">overlay';
-       }
-       elsif ($value == 0x210) {
-               print '<td colspan="5" class="X So">letterlike';
-       }
-       elsif ($value == 0x215) {
-               print '<td colspan="4" class="X Latin">number';
-       }
-       elsif ($value == 0x219) {
-               print '<td colspan="7" class="X So">arrows';
-       }
-       elsif ($value == 0x220) {
-               print '<td colspan="16" class="X Sm">mathematical symbols';
-       }
-       elsif ($value == 0x230) {
-               print '<td colspan="16" class="X So">miscellaneous technical';
-       }
-       elsif ($value == 0x240) {
-               print '<td colspan="4" class="X So">control';
-       }
-       elsif ($value == 0x244) {
-               print '<td colspan="2" class="X So">OCR';
-       }
-       elsif ($value == 0x246) {
-               print '<td colspan="10" class="X Latin">enclosed alphanumerics';
-       }
-       elsif ($value == 0x250) {
-               print '<td colspan="8" class="X So">box drawing';
-       }
-       elsif ($value == 0x258) {
-               print '<td colspan="2" class="X So">blocks';
-       }
-       elsif ($value == 0x25A) {
-               print '<td colspan="6" class="X So">geometric shapes';
-       }
-       elsif ($value == 0x260) {
-               print '<td colspan="16" class="X So">miscellaneous symbols';
-       }
-       elsif ($value == 0x270) {
-               print '<td colspan="12" class="X So">dingbats';
-       }
-       elsif ($value == 0x27C) {
-               print '<td colspan="3" class="X So">maths-A';
-       }
-       elsif ($value == 0x27F) {
-               print '<td colspan="1" class="X So" title="supplemental arrows-A">arr';
-       }
-       elsif ($value == 0x280) {
-               print '<td colspan="16" class="X L Alpha">braille';
-       }
-       elsif ($value == 0x290) {
-               print '<td colspan="8" class="X So">supplemental arrows-B';
-       }
-       elsif ($value == 0x298) {
-               print '<td colspan="8" class="X Sm">mathematical symbols-B';
-       }
-       elsif ($value == 0x2A0) {
-               print '<td colspan="16" class="X Sm">supplemental mathematical operators';
-       }
-       elsif ($value == 0x2B0) {
-               print '<td colspan="16" class="X So">miscellaneous symbols and arrows';
-       }
-       elsif ($value == 0x2C0) {
-               print '<td colspan="6" class="X L Cyrillic">glagolitic';
-       }
-       elsif ($value == 0x2C6) {
-               print '<td colspan="2" class="X L Latin">latin-C';
-       }
-       elsif ($value == 0x2C8) {
-               print '<td colspan="8" class="X L Greek">coptic';
-       }
-       elsif ($value == 0x2D0) {
-               print '<td colspan="3" class="X L Aramaic">georgian+';
-       }
-       elsif ($value == 0x2D3) {
-               print '<td colspan="5" class="X L Alpha">tifinagh'; #TODO: proto-canaanite
-       }
-       elsif ($value == 0x2D8) {
-               print '<td colspan="6" class="X L African">ethiopic+';
-       }
-       elsif ($value == 0x2DE) {
-               print '<td colspan="2" class="X L Cyrillic">cyrl-A';
-       }
-       elsif ($value == 0x2E0) {
-               print '<td colspan="8" class="X Po">punctuation+';
-       }
-       elsif ($value == 0x2E8) {
-               print '<td colspan="8" class="X L Han">cjk radicals';
-       }
-       elsif ($value == 0x2F0) {
-               print '<td colspan="14" class="X L Han">kangxi radicals';
-       }
-       elsif ($value == 0x2FE) {
-               print '<td colspan="1" class="">';
-       }
-       elsif ($value == 0x2FF) {
-               print '<td colspan="1" class="X So Han">idc';
-       }
-       elsif ($value == 0x300) {
-               print '<td colspan="4" class="X Po Han">cjk misc';
-       }
-       elsif ($value == 0x304) {
-               print '<td colspan="6" class="X L Hiragana">hiragana';
-       }
-       elsif ($value == 0x30A) {
-               print '<td colspan="6" class="X L Katakana">katakana';
-       }
-       elsif ($value == 0x310) {
-               print '<td colspan="3" class="X L Bopomofo">bopomofo';
-       }
-       elsif ($value == 0x313) {
-               print '<td colspan="6" class="X L Katakana">hangeul compat';
-       }
-       elsif ($value == 0x319) {
-               print '<td colspan="1" class="X L Han" title="kanbun">kbn';
-       }
-       elsif ($value == 0x31A) {
-               print '<td colspan="2" class="X L Bopomofo" title="bopomofo extended">bpmf';
-       }
-       elsif ($value == 0x31C) {
-               print '<td colspan="3" class="X L Han" title="CJK strokes">strokes';
-       }
-       elsif ($value == 0x31F) {
-               print '<td colspan="1" class="X L Katakana" title="katakana phonetic extensions">k+';
-       }
-       elsif ($value == 0x320) {
-               print '<td colspan="16" class="X L Han">enclosed cjk characters';
-       }
-       elsif ($value == 0x330) {
-               print '<td colspan="16" class="X Xd L Han">cjk compatibility';
-       }
-       elsif ($value == 0x340) {
-               print '<td colspan="16" rowspan="25" class="X L Han">cjk unified ideographs extension A';
-       }
-       elsif ($value == 0x4D0) {
-               print '<td colspan="12" class="X L Han" style="border-top:none">cjk unified ideographs extension A';
-       }
-       elsif ($value == 0x4DC) {
-               print '<td colspan="4" class="X So">hexagrams';
-       }
-       elsif ($value == 0x4E0) {
-               print '<td colspan="16" rowspan="82" class="X L Han">cjk unified ideographs';
-       }
-       elsif ($value == 0xA00) {
-               print '<td colspan="16" rowspan="4" class="X L Syllabic">yi';
-       }
-       elsif ($value == 0xA40) {
-               print '<td colspan="9" class="X L Syllabic" style="border-top:none">yi';
-       }
-       elsif ($value == 0xA49) {
-               print '<td colspan="4" class="X L Syllabic">yi radicals';
-       }
-       elsif ($value == 0xA4D) {
-               print '<td colspan="3" class="X Xr L Latin">lisu';
-       }
-       elsif ($value == 0xA50) {
-               print '<td colspan="16" class="X L Syllabic">vai';
-       }
-       elsif ($value == 0xA60) {
-               print '<td colspan="4" class="X L Syllabic" style="border-top:none">vai';
-       }
-       elsif ($value == 0xA64) {
-               print '<td colspan="6" class="X L Cyrillic">cyrillic extended-B';
-       }
-       elsif ($value == 0xA6A) {
-               print '<td colspan="6" class="X Xr L Syllabic">bamum';
-       }
-       elsif ($value == 0xA70) {
-               print '<td colspan="2" class="X L Mn">tones';
-       }
-       elsif ($value == 0xA72) {
-               print '<td colspan="14" class="X L Latin">latin extended-D';
-       }
-       elsif ($value == 0xA80) {
-               print '<td colspan="3" class="X L Brahmic">sylheti';
-       }
-       elsif ($value == 0xA83) {
-               print '<td colspan="1" class="X Xr No">in';
-       }
-       elsif ($value == 0xA84) {
-               print '<td colspan="4" class="X L Brahmic">phags-pa';
-       }
-       elsif ($value == 0xA88) {
-               print '<td colspan="6" class="X L Brahmic">saurashtra';
-       }
-       elsif ($value == 0xA8E) {
-               print '<td colspan="2" class="X Xr L Brahmic">deva+';
-       }
-       elsif ($value == 0xA90) {
-               print '<td colspan="3" class="X L Brahmic">kayah li';
-       }
-       elsif ($value == 0xA93) {
-               print '<td colspan="3" class="X L Brahmic">rejang';
-       }
-       elsif ($value == 0xA96) {
-               print '<td colspan="2" class="X Xr L Hangul">jamo-A';
-       }
-       elsif ($value == 0xA98) {
-               print '<td colspan="6" class="X Xr L Brahmic">javanese';
-       }
-       elsif ($value == 0xA9E) {
-               print '<td colspan="2" class="">res';
-       }
-       elsif ($value == 0xAA0) {
-               print '<td colspan="6" class="X L Brahmic">cham';
-       }
-       elsif ($value == 0xAA6) {
-               print '<td colspan="2" class="X Xr L Brahmic" title="myanmar extended-A">mym-A';
-       }
-       elsif ($value == 0xAA8) {
-               print '<td colspan="6" class="X Xr L Brahmic Khmer">tai viet';
-       }
-       elsif ($value == 0xAAE) {
-               print '<td colspan="2" class="X Xr L Brahmic" title="meetei mayek extended">mtei+';
-       }
-       elsif ($value == 0xAB0) {
-               print '<td colspan="12" class="">reserved';
-       }
-       elsif ($value == 0xABC) {
-               print '<td colspan="4" class="X Xr L Brahmic" title="meetei mayek">manipuri';
-       }
-       elsif ($value == 0xAC0) {
-               print '<td colspan="16" rowspan="43" class="X L Hangul">hangeul syllables';
-       }
-       elsif ($value == 0xD70) {
-               print '<td colspan="11" class="X L Hangul" style="border-top:none">hangeul syllables';
-       }
-       elsif ($value == 0xD7B) {
-               print '<td colspan="5" class="X L Hangul">haungeul jamo-B';
-       }
-       elsif ($value == 0xD80) {
-               print '<td colspan="16" rowspan="4" class="X Cs">high surrogates';
-       }
-       elsif ($value == 0xDC0) {
-               print '<td colspan="16" rowspan="4" class="X Cs">low surrogates';
-       }
-       elsif ($value == 0xE00) {
-               print '<td colspan="16" rowspan="25" class="X Co">private use';
-       }
-       elsif ($value == 0xF90) {
-               print '<td colspan="16" rowspan="2" class="X L Han">cjk compatibility ideographs';
-       }
-       elsif ($value == 0xFB0) {
-               print '<td colspan="5" class="X Xd L">presentation';
-       }
-       elsif ($value == 0xFB5) {
-               print '<td colspan="11" class="X Xd L Arabic" style="border-bottom:none">';
-       }
-       elsif ($value == 0xFC0) {
-               print '<td colspan="16" class="X Xd L Arabic" style="border-top:none; border-bottom:none">arabic presentation forms A';
-       }
-       elsif ($value == 0xFD0) {
-               print '<td colspan="13" class="X Xd L Arabic" style="border-top:none">';
-       }
-       elsif ($value == 0xFDD) {
-               print '<td colspan="2" class="Xi">?';
-       }
-       elsif ($value == 0xFDF) {
-               print '<td colspan="1" class="X Xd L Arabic" style="border-top:none">';
-       }
-       elsif ($value == 0xFE0) {
-               print '<td colspan="1" class="X Cc">var';
-       }
-       elsif ($value == 0xFE1) {
-               print '<td colspan="1" class="X L Pd">ver';
-       }
-       elsif ($value == 0xFE2) {
-               print '<td colspan="1" class="X L Mn">½';
-       }
-       elsif ($value == 0xFE3) {
-               print '<td colspan="2" class="X Xd Pd Han">comp';
-       }
-       elsif ($value == 0xFE5) {
-               print '<td colspan="2" class="X Xd L Latin">small';
-       }
-       elsif ($value == 0xFE7) {
-               print '<td colspan="9" class="X Xd L Arabic">arabic presentation B';
-       }
-       elsif ($value == 0xFF0) {
-               print '<td colspan="15" class="X L Latin">halfwidth &amp; fullwidth forms';
-       }
-       elsif ($value == 0xFFF) {
-               print '<td colspan="1" class="X Cc">sp';
-       }
-}
-
-sub printcell_utf8 {
-       my ($value) = @_;
-       if ($value <= 0x7F) {
-               print '<td rowspan="8" colspan="16" class="X di-a"',
-                         ' title="U+0000 – U+007F">single byte ASCII'
-                       if $value == 0;
-       }
-       elsif ($value <= 0xBF) {
-               print '<td rowspan="4" colspan="16" class="X di-d"',
-                         '>multi-byte continuation'
-                       if $value == 0x80;
-       }
-       elsif ($value <= 0xC1) {
-               print '<td colspan="2" class="X di-b" style="border-right:none; border-bottom:none"',
-                         ' title="U+0000 – U+007F">(overl.)'
-                       if $value == 0xC0;
-       }
-       elsif ($value <= 0xDF) {
-               print '<td rowspan="2" colspan="14" class="X di-prop" style="border-left:none"',
-                         ' title="U+0080 – U+03FF">2-byte sequence start'
-                       if $value == 0xC2;
-               print '<td rowspan="1" colspan="16" class="X di-prop" style="border-top:none"',
-                         ' title="U+0400 – U+07FF">'
-                       if $value == 0xD0;
-       }
-       elsif ($value <= 0xEF) {
-               print '<td colspan="16" class="X di-prop"',
-                         ' title="U+0800 – U+FFFF">3-byte sequence start'
-                       if $value == 0xE0;
-       }
-       elsif ($value <= 0xF4) {
-               print '<td colspan="5" class="X di-prop" style="border-right:none"',
-                         ' title="U+1·0000 – U+10·FFFF">4-byte sequence'
-                       if $value == 0xF0;
-       }
-       elsif ($value <= 0xF7) {
-               print '<td colspan="3" class="X di-b" style="border-left:none"',
-                         ' title="U+11·0000 – U+1FF·FFFF">(overflow)'
-                       if $value == 0xF5;
-       }
-       elsif ($value <= 0xFB) {
-               print '<td colspan="4" class="X di-b"',
-                         ' title="U+200·0000 – U+3FFF·FFFF">5-byte'
-                       if $value == 0xF8;
-       }
-       elsif ($value <= 0xFD) {
-               print '<td colspan="2" class="X di-b"',
-                         ' title="U+4000·0000 – 7FFFF·FFFF">6-byte'
-                       if $value == 0xFC;
-       }
-       elsif ($value <= 0xFF) {
-               print '<td colspan="2" class="di-invalid">invalid'
-                       if $value == 0xFE;
-       }
-       else {
-               print "\n".'<td class="X">?';
-       }
-}
-
-print "<ul>\n";
-
 my @nibble = (0..9, 'A'..'F');
 for my $row (@request) {
-       print '<li><table class="glyphs">';
+       printf '<div class="section"><table class="glyphs%s">', !$row->{cell} && ' charmap';
        printf '<caption>%s</caption>', $row->{set};
-       print '<col>';
+       print '<col>' x 17;
        for my $section (qw{thead}) {
                print "<$section><tr><th>↱";
                print '<th>', $_ for @nibble;
@@ -695,12 +110,8 @@ for my $row (@request) {
        for my $msb (0 .. (length($row->{table}) || 256) - 1 >> 4) {
                printf '<tr><th>%X', $msb + ($row->{offset} >> 4);
                for my $lsb (0 .. $#nibble) {
-                       if ($row->{set} eq 'UTF-8') {
-                               printcell_utf8(($msb<<4) + $lsb);
-                               next;
-                       }
-                       elsif ($row->{set} eq 'Unicode BMP') {
-                               printcell_unicode(($msb<<4) + $lsb);
+                       if ($row->{cell}) {
+                               print $row->{cell}->(($msb<<4) + $lsb);
                                next;
                        }
 
@@ -709,41 +120,55 @@ for my $row (@request) {
                                print '<td>';
                                next;
                        }
-                       my $info = [ord $glyph];
-                       if (defined (my $mnem = $di{ord $glyph})) {
-                               $info = $diinfo->{$mnem};
-                       }
-                       my ($codepoint, $name, $prop, $script, $string) = @$info;
 
-                       $glyph = quote($string || $glyph);
-                       my $desc = sprintf 'U+%04X%s', $codepoint, $name && " ($name)";
-                       my @class = ('X', grep {$_} $prop, $script);
-
-                       $glyph = "<span>$glyph</span>" if $prop eq 'Zs';
-
-                       printf "\n".'<td class="%s" title="%s">%s',
-                               join(' ', @class), quote($desc), $glyph;
+                       print "\n".$glyphs->glyph_cell($glyph);
                }
                print "\n";
        }
-       print "</table>\n";
+       print "</table></div>\n";
 }
 
-print "</ul>\n";
-
 :>
 <hr>
 
-<p class="footer">
-       <a href="http://sheet.shiar.nl/" rel="home">sheet.shiar.nl</a>/charset
-       <a href="git://git.shiar.nl/sheet" rel="vcs-git" title="Git repository"><:= "v$VERSION" :></a>
-       created by <a href="http://shiar.nl/" rel="author">Shiar</a> •
-       <a title="Licensed under the GNU Affero General Public License, version 3" rel="copyright"
-          href="http://www.fsf.org/licensing/licenses/agpl-3.0.html">AGPLv3</a> •
-       last update <:
-               use Time::Format qw(time_format);
-               print time_format('yyyy-mm-dd', (stat $ENV{SCRIPT_FILENAME})[9]);
-       :>
-</p>
+<div class="legend">
+       <table class="glyphs"><tr>
+       <td class="X Cc">control
+       <td class="X Zs"><span>whitespace</span>
+       <td class="X Mn">diacritic<table class="glyphs"><tr>
+               <td class="X Sk">letter
+               </table>
+       <td class="X Po">punctuation<table class="glyphs"><tr>
+               <td class="X Pf">quote
+               </table>
+       <td class="X So">symbol<table class="glyphs"><tr>
+               <td class="X Sm">math
+               <td class="X Sc">currency
+               </table>
+       <td class="X No">numeric
+       <td class="X Greek">greek<table class="glyphs"><tr>
+               <td class="X Latin">latin
+               <td class="X Cyrillic">cyrillic
+               </table>
+       <td class="X Aramaic">aramaic<table class="glyphs"><tr>
+               <td class="X Brahmic">brahmic
+               <td class="X Arabic">arabic
+               </table>
+       <td class="X Syllabic">syllabic<table class="glyphs"><tr>
+               <td class="X African">african
+               <td class="X Hiragana">japanese
+               <td class="X Han">cjk
+               <td class="X Bopomofo">chinese
+               </table>
+       <td class="X Alpha">alphabetic
+       </table>
+
+       <table class="glyphs"><tr>
+       <td class="X">unicode 5.0
+       <td class="X Xr">proposed
+       <td class="X Xd">deprecated
+       <td class="">unassigned
+       <td class="X Xi">invalid
+       </table>
+</div>
 
-</html>