diff options
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/index.html | 34 | ||||
| -rw-r--r-- | doc/style.css | 35 |
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 */ +} + |