From f18c74928ccf255c0c03f352732dd674efd73040 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Wed, 12 Apr 2017 19:06:19 +0200
Subject: [PATCH] latin: style exceptions in row definitions

---
 latin.plp           | 86 ++++++++-------------------------------------
 writing-latn.inc.pl | 43 +++++++++++++++++++++++
 2 files changed, 57 insertions(+), 72 deletions(-)

diff --git a/latin.plp b/latin.plp
index 58c103f..25d8b10 100644
--- a/latin.plp
+++ b/latin.plp
@@ -17,83 +17,17 @@ Html({
 
 :>
 <style>
-	@font-face {
-		font-family: Suetterlin; /* R. G. Arens */
-		src: url("/suetterlin.ttf");
-	}
-	#suetterlin td { font-family: Suetterlin }
-	#ita2 td,
-	#tap td,
-	#shorttap td {
-		white-space: normal;
-		word-spacing: 5em; /* force line break between words */
-	}
-	#tap td,
-	#shorttap td {
-		line-height: 1ex;
-	}
-	#ita2 td {
-		font-size: 50%;
-	}
-	#cards td {
-		font-family: Symbola, "DejaVu Sans", serif, sans;
-	}
-	#pigpen {
-		stroke-linecap: square;
-	}
-	#nyctographs,
-	#roman {
-		stroke-linecap: round;
-		stroke-linejoin: round;
-	}
 	td {
+		vertical-align: top;
 		white-space: nowrap;
 	}
 	th {
 		width: auto !important;
 	}
 
-	.sample {
+	td svg {
 		vertical-align: middle;
-		text-align: left;
-		padding: 1px 0.3em;
-	}
-	#roman .sample span {
-		margin-right: -10px;
-	}
-	#tap .sample,
-	#shorttap .sample {
-		font-size: 80%;
-	}
-	#ita2 .sample,
-	#tap .sample,
-	#shorttap .sample {
-		word-spacing: 0;
-	}
-	#ita2 .sample span,
-	#tap .sample span,
-	#shorttap .sample span {
-		margin-right: 1ex;
-		white-space: nowrap;
 	}
-	#sutton .sample span,
-	#maritime .sample span,
-	#morse .sample span {
-		margin-right: 0.5ex;
-	}
-	#pigpen .sample svg {
-		margin-right: 0.1em;
-	}
-	#nyctographs .sample svg {
-		background: rgba(0,0,0, .1);
-		padding: 0.1em;
-		margin-right: 0.2em;
-	}
-	#unistrokes svg path {
-		stroke-linecap: round;
-		stroke-linejoin: round;
-	}
-
 	svg path:not([fill]) {
 		stroke: currentColor;
 		fill: none;
@@ -102,11 +36,10 @@ Html({
 		fill: currentColor;
 	}
 
-	td {
-		vertical-align: top;
-	}
-	td svg {
+	.sample {
 		vertical-align: middle;
+		text-align: left;
+		padding: 1px 0.3em;
 	}
 </style>
 
@@ -127,6 +60,15 @@ if ($! or $@) {
 	Alert("Table data not found", $@ || $!);
 }
 else {
+	say '<style>';
+	for my $row (pairs @table) {
+		my ($id, $info) = @{$row};
+		my $style = $info->{style} or next;
+		ref $style or $style = [$style];
+		say "\t", !/^@/ && "#$id ", $_ for @{$style};
+	}
+	say "</style>\n";
+
 	my %VOWELCOLS = (map { ($_ => 1) } 0, 4, 8, 14, 20, 24);
 	say '<table class="glyphs">';
 	say '<thead><tr><th># <small>ASCII − 64</small>';
diff --git a/writing-latn.inc.pl b/writing-latn.inc.pl
index f0a3e40..d8d0d53 100644
--- a/writing-latn.inc.pl
+++ b/writing-latn.inc.pl
@@ -5,6 +5,18 @@ use List::Util qw( pairs pairmap sum );
 my %C = qw(red #EC1C24  blue #3953A3  yellow #F9EC31  black #231F20);
 my $U = 0;  # optional unicode alternatives
 
+my @wrapstyle = (
+	'td { white-space: normal; word-spacing: 5em }', # force line break between words
+	'.sample { word-spacing: 0 }',
+	'.sample span { margin-right: 1ex; white-space: nowrap }', # larger space between letters
+);
+my $spacestyle = '.sample span { margin-right: 0.5ex }';  # separate multiple letters
+my @tapstyle = (
+	@wrapstyle,
+	'{ line-height: 1ex }',
+	'.sample { font-size: 80% }',
+);
+
 sub disptap {
 	my $code = shift;
 	my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
@@ -46,10 +58,21 @@ lowercase => {
 },
 suetterlin => {
 	title => 'Sütterlin',
+	style => [
+		'@font-face {
+			font-family: Suetterlin; /* R. G. Arens */
+			src: url("/suetterlin.ttf");
+		}',
+		'td { font-family: Suetterlin }',
+	],
 	list => [qw{ a b c d e f g h i j k l m n o p q r ſ s t u v w x y z }],
 },
 roman => {
 	title => 'Old Roman Cursive',
+	style => [
+		'svg path { stroke-linecap: round; stroke-linejoin: round }',
+		'.sample span { margin-right: -10px }',
+	],
 	list => [
 		map {
 			!m/^(-?)(\w.+)/ ? $_ :
@@ -85,6 +108,7 @@ roman => {
 },
 sutton => {
 	title => 'Sutton <abbr title="American Sign Lanugage">ASL</abbr>',
+	style => $spacestyle,
 	list => [
 		# American manual alphabet in Sutton (U+1D800+) notation
 		map { !!$_ && pack 'W*', map { hex "1D$_" } unpack '(A3)*', $_ } qw{
@@ -99,6 +123,7 @@ sutton => {
 },
 unistrokes => {
 	title => 'Unistrokes',
+	style => 'svg path { stroke-linecap: round; stroke-linejoin: round }',
 	list => [
 		map { '<svg width="14" height="16" viewBox="-1 -1 8 10">'.$_.'</svg>' }
 		map {
@@ -139,6 +164,7 @@ unistrokes => {
 #},
 ita2 => {
 	title => '<abbr title="International Telegraph Alphabet">ITA</abbr>2',
+	style => [@wrapstyle, 'td { font-size: 50% }'],
 	list => [map { tr/01/○●/r =~ s/..\K/ /r } qw(
 		11000 10011 01110 10010 10000 10110 01011 00101 01100 11010 11110 01001 00111
 		00110 00011 01101 11101 01010 10100 00001 11100 01111 11001 10111 10101 10001
@@ -167,6 +193,7 @@ tactile => {
 	],
 },
 morse => {
+	style => $spacestyle,
 	list => [map {tr/.-/‧‑/r} qw{
 		.- -... -.-. -.. . ..-. --. .... .. .--- -.- .-.. --
 		-. --- .--. --.- .-. ... - ..- ...- .-- -..- -.-- --..
@@ -174,6 +201,7 @@ morse => {
 },
 tap => {
 	title => 'Tap code',
+	style => \@tapstyle,
 	list => [map { disptap($_) } qw{
 		11 12 13 14 15 21 22 23  > 24 25 31 32
 		33 34 35 41 42 43 44 45 51 52 53 54 55
@@ -181,12 +209,14 @@ tap => {
 },
 shorttap => {
 	title => 'Short Tap',
+	style => \@tapstyle,
 	list => [map { disptap($_) } qw{
 		11 12 13 14 21 22 23 20 > 31 -13 32 33
 		30 41 42 -13 43 40 10 51 52 53 50 -31 -40
 	}],
 },
 cards => {
+	style => 'td { font-family: Symbola, "DejaVu Sans", serif, sans }',
 	list => [(
 		map { chr(0x1F0A0 + $_), sprintf('<b>%s</b>', chr(0x1F0B0 + $_)) }  # spades, hearts
 		1 .. 11, 13, 14  # A 2-10 J Q K
@@ -194,6 +224,7 @@ cards => {
 },
 maritime => {
 	title => 'Maritime flags',
+	style => $spacestyle,
 	list => [
 		# International Code of Signals, SVG fills
 		map { !!$_ && '<svg width="20" height="20" viewBox="0 0 30 30">'.s/\n?\t+//gr.'</svg>' }
@@ -444,6 +475,10 @@ dni => {
 	],
 },
 pigpen => {
+	style => [
+		'svg path { stroke-linecap: square }',
+		'.sample svg { margin-right: 0.1em }',
+	],
 	list => [
 		map {
 			qq(<svg width="12" height="12" viewBox="-.5 -.5 7 7">$_</svg>)
@@ -468,6 +503,14 @@ pigpen => {
 	],
 },
 nyctographs => {
+	style => [
+		'svg path { stroke-linecap: round; stroke-linejoin: round }',
+		'.sample svg {
+			background: rgba(0,0,0, .1);
+			padding: 0.1em;
+			margin-right: 0.2em;
+		}',
+	],
 	list => [
 		map { s/M[\d,\hM]+(?=[M"])//gr }  # clean up superfluous moves
 		map { sprintf
-- 
2.30.0