summaryrefslogtreecommitdiff
path: root/lulua/data
diff options
context:
space:
mode:
Diffstat (limited to 'lulua/data')
-rw-r--r--lulua/data/report/index.html156
-rw-r--r--lulua/data/report/style.css27
2 files changed, 124 insertions, 59 deletions
diff --git a/lulua/data/report/index.html b/lulua/data/report/index.html
index 0e4c779..cda1c9d 100644
--- a/lulua/data/report/index.html
+++ b/lulua/data/report/index.html
@@ -2,13 +2,15 @@
<html lang="ar">
<head>
<meta charset="utf-8">
- <title>لؤلؤة</title>
+ <title>لؤلؤة: لوحة مفاتيح عربية</title>
<!--<meta name="description" content="">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:100,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous">
- <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
+ <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" integrity="sha384-e+NM0rMilIXo+lz6+dXhoHMjd2iTSxNsCHpqkvuSBsAhwMDRF/Wn2QRRNaLxTcN/" crossorigin="anonymous">
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6" crossorigin="anonymous"></script>
+ <script id="MathJax-script" async src="https://www.unpkg.com/mathjax@3.0.5/es5/tex-mml-chtml.js" integrity="sha384-L+g9M+CMLhBJNIlTx7C1IQRQV7IL/wRmGNxXVP6CPEJjVhE5LE1EBMVJtmmdueyg" crossorigin="anonymous"></script>
{# bokeh #}
{% for f in bokehres.js_files -%}
<script src="{{ f }}"></script>
@@ -26,7 +28,7 @@
<h1 class="title"><img class="logo" src="lulua-logo.svg" alt="لؤلؤة"></h1>
<div class="pure-g flexreverse">
<div class="pure-u-1 pure-u-sm-1-2">
- <!--<h2 class="subtitle">لوحة مفاتيح العربية المريحة</h1>-->
+ <h2 class="subtitle">لوحة مفاتيح عربية</h2>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<h2 class="subtitle" lang="en">Ergonomic Arabic Keyboard Layout</h2>
@@ -44,9 +46,9 @@
</div>
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<p>This is work in progress and contributions are welcome. Head over to
<a href="https://github.com/PromyLOPh/lulua">GitHub</a> to see where
@@ -56,9 +58,9 @@
</div>
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h2>Goals</h2>
<ul>
@@ -77,9 +79,9 @@
</div>
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h2>Usage</h2>
<dl>
@@ -99,9 +101,9 @@
<div class="indepth-card">
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h1>Learn more</h1>
</div>
@@ -111,12 +113,12 @@
<section>
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
<div class="lbox">
<h2>الأبجدية العربية</h2>
</div>
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h2>The Arabic alphabet</h2>
<p>
@@ -131,15 +133,56 @@
<!-- -->
The novel corpus built for the following analysis consists of
</p>
+ </div>
+ </div>
+</div>
+
+<div class="pure-g flexreverse">
+ <div class="pure-u-1 pure-u-xl-1-2">
+ <div class="lbox">
+ <figure class="table-overflow">
+ <table class="pure-table pure-table-horizontal"><thead><tr><th>مصدر</th><th></th><th>كلام</th><th>حروف</th></thead><tbody>
+ {% for c in corpus|sort(attribute='source.name.en') %}
+ <tr>
+ <td><a href="{{ c.source.url }}">{{ c.source.name.ar }}</a></td>
+ {% set count = c.get ('count') %}
+ {% if count %}
+ {# use new style formatting, for some reason %7,d does not work #}
+ <td>{{ '{:7,d}'.format(count.num)|arabnum }} {{ count.kind.ar }}</td>
+ {% else %}
+ <td></td>
+ {% endif %}
- <table class="pure-table"><thead><tr><th>Source</th><th></th><th>Words</th><th>Characters</th></thead><tbody>
- {% for c in corpus|sort(attribute='source.name') %}
+ {% set stats = c.get ('stats') %}
+ {% for k in ('words', 'characters') %}
+ {% set i = stats[k]|approx('ar') %}
+ <td>{{ '%5.1f'|format(i[0])|arabnum }} {{ i[1] }}</td>
+ {% endfor %}
+ </tr>
+ {% endfor %}
+ <tr><td>مجموع</td><td></td>
+ {% for k in ('words', 'characters') %}
+ {% set i = corpustotal[k]|approx('ar') %}
+ <td>{{ '%5.1f'|format(i[0])|arabnum }} {{ i[1] }}</td>
+ {% endfor %}
+ </tr>
+ </tbody></table>
+ <figcaption>
+ </figcaption>
+ </figure>
+ </div>
+ </div>
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
+ <div class="lbox">
+ <figure class="table-overflow">
+ <table class="pure-table pure-table-horizontal"><thead><tr><th>Source</th><th></th><th>Words</th><th>Characters</th></thead><tbody>
+ {% for c in corpus|sort(attribute='source.name.en') %}
<tr>
- <td><a href="{{ c.source.url }}">{{ c.source.name }}</a></td>
+ <td><a href="{{ c.source.url }}">{{ c.source.name.en }}</a></td>
{% set count = c.get ('count') %}
{% if count %}
{# use new style formatting, for some reason %7,d does not work #}
- <td>{{ '{:7,d}'.format(count[0])|numspace }}&#x202f;{{ count[1] }}</td>
+ <td>{{ '{:7,d}'.format(count.num)|numspace }}&#x2008;{{ count.kind.en }}</td>
{% else %}
<td></td>
{% endif %}
@@ -147,17 +190,28 @@
{% set stats = c.get ('stats') %}
{% for k in ('words', 'characters') %}
{% set i = stats[k]|approx %}
- <td>{{ '%5.1f'|format(i[0])|numspace }}&#x202f;{{ i[1] }}</td>
+ <td>{{ '%5.1f'|format(i[0])|numspace }}&#x2008;{{ i[1] }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr><td>Total</td><td></td>
{% for k in ('words', 'characters') %}
{% set i = corpustotal[k]|approx %}
- <td>{{ '%5.1f'|format(i[0])|numspace }}&#x202f;{{ i[1] }}</td>
+ <td>{{ '%5.1f'|format(i[0])|numspace }}&#x2008;{{ i[1] }}</td>
{% endfor %}
</tr>
</tbody></table>
+ <figcaption>
+ <p>
+ The chosen Quran representation does not include all quranic
+ diacritization symbols, like <a
+ href="https://github.com/khaledhosny/quran-data">other datasets</a>.
+ <!-- -->
+ This makes comparison fairer, since most keyboards presented below do
+ not include any of them.
+ </p>
+ </figcaption>
+ </figure>
<p>
The plot below shows <bdo dir="ltr" lang="ar">ا ل ي م و ن</bdo> can be
@@ -174,9 +228,9 @@
<div id="letterfreq-div"></div>
</div>
<figcaption class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<p>Arabic letter frequency distribution</p>
</div>
@@ -187,9 +241,9 @@
<section>
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h2>Layout properties</h2>
@@ -206,7 +260,9 @@
<dt class="finger thumb">cyan</dt>
<dd>thumb</dd>
</dl>
- <p>Asymmetry is defined as the difference between left and right hand usage.</p>
+ <p>Asymmetry is defined as the difference between left and right hand button
+ usage \(b_{left/right}\) and includes the thumb:</p>
+ $$a = \frac{b_{left}}{b_{total}} - \frac{b_{right}}{b_{total}}$$
<p>
The layout proposed uses four layers and assumes a 102/105 key ISO
@@ -289,9 +345,9 @@
<section id="related">
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h2><a href="#related">Related work</a></h2>
<p>This section explores existing keyboard layouts made for the
@@ -301,9 +357,9 @@
</div>
<div id="ar-asmo663" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-asmo663">ASMO 663</a></h3>
<p>
@@ -335,9 +391,9 @@
</figure>
<div id="ar-osx" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-osx">Mac OS X</a></h3>
<p>
@@ -364,9 +420,9 @@
<div id="ar-linux" class="pure-g flexreverse">
<figcaption class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-linux">Linux</a></h3>
<p>
@@ -395,9 +451,9 @@
</figure>
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<p>In contrast to the layouts presented so far the following
layouts claim to be optimized for the Arabic language and were, at
@@ -407,9 +463,9 @@
</div>
<div id="ar-alramly" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-alramly">Al-Ramly et al</a></h3>
<p>
@@ -454,9 +510,9 @@
</figure>
<div id="ar-idlebi" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-idlebi">Idlebi et al</a></h3>
<p>
@@ -502,9 +558,9 @@
</figure>
<div id="ar-malas" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-malas">Malas et al</a></h3>
<p>
@@ -536,9 +592,9 @@
</figure>
<div id="ar-khorshid" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-khorshid">Khorshid et al</a></h3>
<p>
@@ -571,9 +627,9 @@
</figure>
<div id="ar-osman" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-osman">Osman et al</a></h3>
<p>
@@ -606,9 +662,9 @@
</figure>
<div id="ar-phonetic" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#ar-phonetic">Phonetic</a></h3>
<p>
@@ -634,9 +690,9 @@
</figure>
<div id="intellark" class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h3><a href="#intellark">Intellark</a></h3>
<p>
@@ -660,9 +716,9 @@
<section>
<div class="pure-g flexreverse">
- <div class="pure-u-1 pure-u-md-1-2">
+ <div class="pure-u-1 pure-u-xl-1-2">
</div>
- <div class="pure-u-1 pure-u-md-1-2" lang="en">
+ <div class="pure-u-1 pure-u-xl-1-2" lang="en">
<div class="lbox">
<h2>Acknowledgements</h2>
diff --git a/lulua/data/report/style.css b/lulua/data/report/style.css
index d829aa4..e734a0e 100644
--- a/lulua/data/report/style.css
+++ b/lulua/data/report/style.css
@@ -39,6 +39,7 @@ body {
:lang(ar) {
direction: rtl;
font-family: "IBM Plex Sans Arabic";
+ text-align: right;
}
/* inside ltr text */
:lang(ar)[dir=ltr] {
@@ -47,8 +48,9 @@ body {
:lang(en) {
direction: ltr;
font-family: "IBM Plex Sans";
+ text-align: left;
}
-h1, h2, h3 {
+h1, h2, h3, th {
font-weight: 100;
}
h1 {
@@ -121,7 +123,6 @@ div.indepth-card {
}
/* for hand/finger stats */
div.fingerhandstats {
- text-align: center;
display: flex;
}
div.fingerhandstats div.fingers {
@@ -131,6 +132,9 @@ div.fingerhandstats div.fingers div {
margin: 0.1em;
overflow: hidden;
}
+div.fingerhandstats div.fingers div, div.fingerhandstats div.asymm, div.fingerhandstats div.hand {
+ text-align: center;
+}
div.fingerhandstats .left {
margin-right: 0.5em;
}
@@ -154,18 +158,20 @@ div.fingerhandstats .fingers .thumb {
border: 0.1em solid var(--finger-thumb);
}
+.table-overflow {
+ overflow-x: auto;
+}
+
table {
font-variant-numeric: tabular-nums;
}
-.pure-table td.numint {
- text-align: right;
- padding-right: 0;
+
+table thead {
+ background-color: inherit !important;
}
-.pure-table td.numfrac {
- border-left: none;
- text-align: left;
- padding-left: 0;
+table.pure-table {
+ border: none;
}
dl.colorcodes dt, dl.colorcodes dd {
@@ -221,3 +227,6 @@ dl.colorcodes .finger.thumb::before {
.layer.fourth:before {
content: "⭨";
}
+p.remark {
+ font-size: 0.9em;
+}