doc: Add hand/finger stats to all layouts

Adds a preprocessing step to the doc HTML document.

2 files changed, 53 insertions, 16 deletions

diff --git a/doc/index.html b/doc/index.html
index e5f7973..f9daf88 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -178,18 +178,9 @@
 <figure id="ar-lulua-heat">
 <div class="lbox" lang="en">
 	<img src="ar-lulua-heat.svg">
+	#include "ar-lulua-fingerhand.html"
 </div>
-<figcaption class="pure-g flexreverse">
-	<div class="pure-u-1 pure-u-md-1-2">
-	</div>
-	<div class="pure-u-1 pure-u-md-1-2" lang="en">
-	<div class="lbox">
-		<p>Button heatmap</p>
-	</div>
-	</div>
-</figcaption>
 </figure>
-</section>
 
 <section class="layoutgallery">
 	<div class="pure-g flexreverse">
@@ -205,6 +196,7 @@
 	<figure id="ar-asmo663">
 	<div class="lbox">
 		<img src="ar-asmo663-heat.svg">
+		#include "ar-asmo663-fingerhand.html"
 	</div>
 	<figcaption class="pure-g flexreverse">
 		<div class="pure-u-1 pure-u-md-1-2">
@@ -229,6 +221,7 @@
 	<figure id="ar-linux">
 	<div class="lbox">
 		<img src="ar-linux-heat.svg">
+		#include "ar-linux-fingerhand.html"
 	</div>
 	<figcaption class="pure-g flexreverse">
 		<div class="pure-u-1 pure-u-md-1-2">
@@ -253,6 +246,7 @@
 	<figure id="ar-malas">
 	<div class="lbox">
 		<img src="ar-malas-heat.svg">
+		#include "ar-malas-fingerhand.html"
 	</div>
 	<figcaption class="pure-g flexreverse">
 		<div class="pure-u-1 pure-u-md-1-2">
@@ -268,10 +262,12 @@
 			optimized for typing speed only, claiming 35% faster typing compared
 			to the <a href="#ar-linux">currently used layouts</a>.
 			<!-- -->
-			However the choice to put <bdo dir="ltr" lang="ar">ي</bdo> in the top
-			row seems odd and suggests the authors did not take the time to review
-			the layout manually, given this letter is the third most frequent one
-			even in their own research.
+			However the decision to put <bdo dir="ltr" lang="ar">ي</bdo> in the top
+			row seems odd.
+			<!-- -->
+			Assigning the same left index finger to <bdo dir="ltr" lang="ar">ا
+			ي و</bdo>, which are three of the most frequent letters, heavily
+			strains this particular finger.
 			</p>
 		</div>
 		</div>
@@ -281,6 +277,7 @@
 	<figure id="ar-osman">
 	<div class="lbox">
 		<img src="ar-osman-heat.svg">
+		#include "ar-osman-fingerhand.html"
 	</div>
 	<figcaption class="pure-g flexreverse">
 		<div class="pure-u-1 pure-u-md-1-2">
@@ -313,6 +310,7 @@
 	<figure>
 	<div class="lbox">
 		<img src="ar-khorshid-heat.svg">
+		#include "ar-khorshid-fingerhand.html"
 	</div>
 	<figcaption class="pure-g flexreverse">
 		<div class="pure-u-1 pure-u-md-1-2">
@@ -328,8 +326,11 @@
 			They claim a 36% improvement over the standard keyboard based on
 			their criteria for ergonomic layouts.
 			<!-- -->
-			However in their layout from figure 8 both letters <bdo dir="ltr"
-			lang="ar">ب ر</bdo> are in suboptimal positions.
+			However in their layout from figure 8 the letters <bdo dir="ltr"
+			lang="ar">ل ب ر</bdo> are in suboptimal positions.
+			<!-- -->
+			Also it seems their algorithm favors the bottom row instead of the
+			easier to use top row.
 			</p>
 		</div>
 		</div>
@@ -339,6 +340,7 @@
 	<figure>
 	<div class="lbox">
 		<img src="ar-phonetic-heat.svg">
+		#include "ar-phonetic-fingerhand.html"
 	</div>
 	<figcaption class="pure-g flexreverse">
 		<div class="pure-u-1 pure-u-md-1-2">
diff --git a/doc/style.css b/doc/style.css
index 5aa9a55..0f137c4 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -106,3 +106,38 @@ div.indepth-card {
 .lbox {
 	margin: 0 5vw;
 }
+/* for hand/finger stats */
+div.fingerhandstats {
+	text-align: center;
+	display: flex;
+}
+div.fingerhandstats div.fingers {
+	display: flex;
+}
+div.fingerhandstats div.fingers div {
+	margin: 0.1em;
+	overflow: hidden;
+}
+div.fingerhandstats .left {
+	margin-right: 0.5em;
+}
+div.fingerhandstats .right {
+	margin-left: 0.5em;
+}
+/* keep in sync with render-svg.css */
+div.fingerhandstats .fingers .little {
+	border: 0.1em solid #dc322f; /* red */
+}
+div.fingerhandstats .fingers .ring {
+	border: 0.1em solid #268bd2; /* blue */
+}
+div.fingerhandstats .fingers .middle  {
+	border: 0.1em solid #d33682; /* magenta */
+}
+div.fingerhandstats .fingers .index {
+	border: 0.1em solid #6c71c4; /* violet */
+}
+div.fingerhandstats .fingers .thumb {
+	border: 0.1em solid #2aa198; /* cyan */
+}
+