From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 4 May 2020 21:01:22 +0000 (+0200)
Subject: dieren: image figures captioned by names
X-Git-Tag: v1.12^0
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/70012d8c5997c66e3377b80da318be12c48f2f55

dieren: image figures captioned by names
---

diff --git a/base.css b/base.css
index 3dc2fac..3c00aa4 100644
--- a/base.css
+++ b/base.css
@@ -662,6 +662,24 @@ ul.legend-set li {
 	padding: 0 0.2em;
 }
 
+/* images */
+
+figure {
+	margin: 0;
+	position: relative;
+}
+figcaption {
+	position: absolute;
+	padding: 0 1em;
+	background: rgba(0, 0, 0, .5);
+	right: 0;
+	bottom: 0;
+}
+img {
+	vertical-align: bottom;
+	width: 100%;
+}
+
 /* page-specific */
 
 #browser td > a {
diff --git a/dieren.plp b/dieren.plp
index 1a6eb11..bf15ec7 100644
--- a/dieren.plp
+++ b/dieren.plp
@@ -18,19 +18,19 @@ Html({
 table {
 	width: 100%;
 }
-tr:first-child th {
-	word-break: break-all;
-}
-img {
+td {
 	vertical-align: bottom;
+}
+figure {
 	width: 100%;
+	height: 100%;
 }
-img[hidden] {
+figure[hidden] {
 	transition: opacity 1s 0s;
 	display: inline;
 	opacity: 0;
 }
-img[hidden]:hover {
+figure[hidden]:hover {
 	opacity: 1;
 	transition-delay: 2s;
 }
@@ -56,20 +56,20 @@ else {
 <:
 my @table = qw(
 	 >:        origineel: zee-:        meer_water:    aardig:      anders:      #:
-	 >hond:    hond       zeehond      waterhond?     prairiehond  vleerhond    #rodehond
+	 >hond:    hond       zeehond      waterhond??    prairiehond  vleerhond    #rodehond
 	 >kat:     kat        zeekat       meerkat        cat_325?    vliegende_kat #tijgerkat
 	#>haas:    haas       zeehaas      waterhaas      aardhaas?    ossenhaas?   #
 	 >muis:    muis       zeemuis      waterspitsmuis aardmuis     vleermuis    #
 	 >rat:     rat        zeerat       waterrat       woestijnrat  buidelrat    #beverrat
-	 >egel:    egel       zee-egel     wateregel?     aardegel?    mierenegel   #
+	 >egel:    egel       zee-egel     wateregel??    aardegel??   mierenegel   #
 	 >varken:  varken     zeevarken    waterzwijn     aardvarken   stekelvarken #
-	 >koe:     koe        zeekoe       meerkoetje     aardkoe?     koedoe       #haiku?
-	 >paard:   paard      zeepaardje   nijlpaard      aardpaard?   luipaard     #
+	 >koe:     koe        zeekoe       meerkoetje     aardekoe??   koedoe       #haiku?
+	 >paard:   paard      zeepaardje   nijlpaard      aardpaard??  luipaard     #
 	#>hoorn:   eenhoorn   zeehoorn     zee-eenhoorn?  aardhoorn?   neushoorn    #eekhoorn
-	#>bra:     brassiere? zebra        waterbra?      aardbra?     cobra        #sabra
+	#>bra:   bra(ssière)? zebra        waterbra?      aardbra?     cobra        #sabra
 	#>olifant: olifant    zeeolifant   waterolifant?  landolifant? #            #
 	 >beer:    beer       zeebeer      waterbeertje   ijsbeer      wasbeer      #neusbeer
-	 >leeuw:   leeuw      zeeleeuw     waterleeuw?    aardleeuw?   mierenleeuw  #
+	 >leeuw:   leeuw      zeeleeuw     waterleeuw??   aardleeuw??  mierenleeuw  #
 	 >wolf:    wolf       zeewolf      waterwolf?     aardwolf     korenwolf    #buidelwolf
 	 >haan:    haan       zeehaan      waterhaan      rotshaan     sprinkhaan   #wilde_haan??
 	#>pad:     pad        zeepad?      waterpad?      landpad      schildpad    #paddenstoel
@@ -99,28 +99,44 @@ while (my $name = shift @table) {
 			last if $name =~ m/^>/;
 		}
 	}
-	$name =~ y/_/ /;
 	if ($name =~ s/^>//) {
 		# leading dash starts a new row
 		say '</tr>' if $name;
 		print "<tr>";
 	}
+	my ($img) = $name =~ /^([\w-]+)/;
+	$name =~ y/_/ /;
 	if ($name =~ s/:$//) {
 		# trailing colon indicates header text
 		print "<th>$name</th>";
 		next;
 	}
-	printf '<td title="%s">', $name // '?';
+	print '<td>';
 	my $hidden = $name =~ s/\?$//;
-	if ($name and -e (my $img = "data/dieren/$name.jpg")) {
+	my $alt = $name;
+	$name = "<q>$name</q>" if $name =~ s/\?$//;
+
+	printf '<figure%s>', $hidden && !exists $get{v} && ' hidden';
+	if ($img and -e ($img = "data/dieren/$img.jpg")) {
+		my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
+		if ($alt) {
+			$name .= " ($alt)";
+		}
+		else {
+			$alt = $name;
+		}
+		print "<figcaption>$name</figcaption>";
 		printf '<img src="/%s"', $img;
-		printf ' alt="%s"', -l $img ? readlink($img) =~ s/\.jpg$//r : $name;
-		print ' hidden' if $hidden and not exists $get{v};
+		printf ' alt="%s"', $alt;
 		print ' />';
 	}
-	elsif (!$hidden) {
+	elsif ($hidden) {
+		printf '<figcaption>%s</figcaption>', "$name?";
+	}
+	else {
 		print $name;
 	}
+	print '</figure>';
 	print '</td>';
 }
 say '</tr></table>';