diff options
Diffstat (limited to 'lulua/data/report/index.html')
| -rw-r--r-- | lulua/data/report/index.html | 474 |
1 files changed, 474 insertions, 0 deletions
diff --git a/lulua/data/report/index.html b/lulua/data/report/index.html new file mode 100644 index 0000000..5649fab --- /dev/null +++ b/lulua/data/report/index.html @@ -0,0 +1,474 @@ +<!doctype html> +<html lang="ar"> +<head> + <meta charset="utf-8"> + <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"> + {# bokeh #} + {% for f in bokehres.js_files -%} + <script src="{{ f }}"></script> + {%- endfor %} + {% for f in bokehres.css_files -%} + <link rel="stylesheet" href="{{ f }}"> + {%- endfor %} + <link rel="stylesheet" href="style.css"> +</head> +<body> + +<div class="title-card pure-g"> + <div class="pure-u-1 pure-u-lg-1-3"> + <div class="lbox"> + <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>--> + </div> + <div class="pure-u-1 pure-u-sm-1-2"> + <h2 class="subtitle" lang="en">Ergonomic Arabic Keyboard Layout</h2> + </div> + </div> + </div> + </div> + <div class="pure-u-1 pure-u-lg-2-3"> + <div class="lbox"> + <div class="layout"> + <img src="ar-lulua.svg" alt="لؤلؤة"> + </div> + </div> + </div> +</div> + +<div 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>This is work in progress and contributions are welcome. Head over to + <a href="https://github.com/PromyLOPh/lulua">GitHub</a> to see where + you can help.</p> + </div> + </div> +</div> + +<div 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"> + <h2>Goals</h2> + <ul> + <li>Ergonomic typing of unvocalized and vocalized text with 10 fingers</li> + <li>Modern Standard Arabic and Quranic Arabic</li> + <li>Localized numbers (European/Arabic-Indic)</li> + <li>Usable as primary or secondary keyboard</li> + <li>Compose-based</li> + <li>Support for Markdown, RST, Wikitext and similar markup</li> + </ul> + + <p>Other languages using the Arabic alphabet (regional dialects, Urdu, + Persian) are explicitly not supported.</p> + </div> + </div> +</div> + +<div 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"> + <h2>Usage</h2> + <dl> + <dt>Windows</dt> + <dd>Download <a href="ar-lulua-w64.zip">driver</a> and follow instructions in <kbd>INSTALL.txt</kbd></dd> + <dt>Android</dt> + <dd>Install + <a href="https://play.google.com/store/apps/details?id=com.menny.android.anysoftkeyboard">AnySoftKeyboard</a> + and + <a href="https://play.google.com/store/apps/details?id=com.anysoftkeyboard.languagepack.arabic">Arabic for AnySoftKeyboard</a> + <dt>Linux</dt> + <dd>Run: <code>xmodmap <a href="ar-lulua.xmodmap">ar-lulua.xmodmap</a></code></dd> + </dl> + </div> + </div> +</div> + +<div class="indepth-card"> +<div 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"> + <h1>Learn more</h1> + </div> + </div> +</div> +</div> + +<section> +<div class="pure-g flexreverse"> + <div class="pure-u-1 pure-u-md-1-2"> + <div class="lbox"> + <h2>الأبجدية العربية</h2> + </div> + </div> + <div class="pure-u-1 pure-u-md-1-2" lang="en"> + <div class="lbox"> + <h2>The Arabic Alphabet</h2> + <p> + There are 28 letters in the Arabic alphabet, plus quite a few extra + symbols required for proper text input, like the hamza in its different + shapes <bdo dir="ltr" lang="ar">أ إ آ ء ئ ؤ</bdo>, ta marbutah <bdo + dir="ltr" lang="ar">ة</bdo>, alif maqsurah <bdo dir="ltr" + lang="ar">ى</bdo> and various diacritics for vowelized texts. + <!-- --> + Since the usability of a keyboard layout depends on the text entered + it is necessary to study letter and letter combination frequencies first. + <!-- --> + The corpus used for the following analysis consists of + </p> + + <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') %} + <tr> + <td><a href="{{ c.source.url }}">{{ c.source.name }}</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 }} {{ count[1] }}</td> + {% else %} + <td></td> + {% endif %} + + {% set stats = c.get ('stats') %} + {% for k in ('words', 'characters') %} + {% set i = stats[k]|approx %} + <td>{{ '%5.1f'|format(i[0])|numspace }} {{ 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 }} {{ i[1] }}</td> + {% endfor %} + </tr> + </tbody></table> + + <p> + The plot below shows <bdo dir="ltr" lang="ar">ا ل ي م و ن</bdo> can be + considered the most frequently used letters in the Arabic language. + <!-- --> + Together they account for more than 55% of all letters in the corpus. + </p> + </div> + </div> +</div> + +<figure id="letterfreq"> +<div class="lbox" lang="en"> + <div id="letterfreq-div"></div> +</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>Arabic letter frequency distribution</p> + </div> + </div> +</figcaption> +</figure> +</section> + +<section> +<div 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"> + <h2>Layout properties</h2> + + <p>The following evaluation uses color coding to identify fingers:</p> + <dl class="colorcodes"> + <dt class="finger little">red</dt> + <dd>little finger</dd> + <dt class="finger ring">blue</dt> + <dd>ring finger</dd> + <dt class="finger middle">magenta</dt> + <dd>middle finger + <dt class="finger index">violet</dt> + <dd>index finger</dd> + <dt class="finger thumb">cyan</dt> + <dd>thumb</dd> + </dl> + <p>Asymmetry is defined as the difference between left and right hand usage.</p> + </div> + </div> +</div> + +{% macro fingerhandstats(stats) %} +{% set hands = stats.hands %} +{% set fingers = stats.fingers %} +<div class="fingerhandstats" dir="ltr" lang="en"> +{% for hand in Direction %} + {% set handpct = hands[hand]/stats.buttonPresses*100 %} + <div class="{{ hand.name.lower() }}" style="width: {{ '%.3f'|format(handpct) }}%;"> + <div class="hand">{{ '%.2f'|format(handpct) }}%</div> + <div class="fingers"> + {% for finger in fingerOrder[hand] %} + {% set fingerpct = fingers[(hand, finger)]/stats.buttonPresses*100 %} + {# finger width is relative to parent (i.e. hand) #} + {% set fingerwidth = fingers[(hand, finger)]/hands[hand]*100 %} + <div class="{{ finger.name.lower() }}" style="width: {{ '%.3f'|format(fingerwidth) }}%;">{{ '%.2f'|format(fingerpct) }}</div> + {% endfor %} + </div> + </div> + {% if loop.first %} + <div class="asymm"><small>Asymmetry: {{ '%.3f'|format(stats.asymmetry) }}</small></div> + {% endif %} +{% endfor %} +</div> +{% endmacro %} + +<figure id="ar-lulua-heat"> +<div class="lbox" lang="en"> + <img src="ar-lulua-heat.svg"> + {{ fingerhandstats(layoutstats['ar-lulua']) }} +</div> +</figure> +</section> + +<section class="layoutgallery"> + <div 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"> + <h2>Related work</h2> + </div> + </div> + </div> + + <figure id="ar-asmo663"> + <div class="lbox"> + <img src="ar-asmo663-heat.svg"> + {{ fingerhandstats(layoutstats['ar-asmo663']) }} + </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> + Trying to unify existing layouts, the Arab Standardization and + Meterology Organization (ASMO), now part of + <a href="https://www.aidmo.org/">AIDMO</a>, published an Arabic + keyboard layout in 1987 as + <a href="https://www.aidmo.org/smcacc/ar/index.php?option=com_sobi2&Itemid=2&limitstart=2150">standard 663</a>. + <!-- --> + This, however, turned out to be a failure, due to lack of adoption by + the typewriter industry. + </p> + </div> + </div> + </figcaption> + </figure> + + <figure id="ar-linux"> + <div class="lbox"> + <img src="ar-linux-heat.svg"> + {{ fingerhandstats(layoutstats['ar-linux']) }} + </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> + Instead we’re currently using this layout (on Linux), which is + similar, but not quite the same. + <!-- --> + Most notably this layout arranges letters by their visual similarity. + <!-- --> + Thus it allocates suboptimal or even awkward positions to frequently + used letters like <bdo dir="ltr" lang="ar">ا ل</bdo> and + <bdo dir="ltr" lang="ar">ذ</bdo>. + </p> + </div> + </div> + </figcaption> + </figure> + + <figure id="ar-malas"> + <div class="lbox"> + <img src="ar-malas-heat.svg"> + {{ fingerhandstats(layoutstats['ar-malas']) }} + </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> + The work by Malas et al. (2008), + <a href="https://pdfs.semanticscholar.org/1bf8/74dcaa7f21c2cc3c6c5e526b61a9ee352bba.pdf">Toward Optimal Arabic Keyboard Layout Using Genetic Algorithm</a>, + presents an alternative layout generated by a genetic algorithm. + <!-- --> + They used a snapshot of the Arabic Wikipedia probably from around 2008 and + optimized for typing speed only, claiming 35% faster typing compared + to the <a href="#ar-linux">currently used layouts</a>. + <!-- --> + 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> + </figcaption> + </figure> + + <figure id="ar-osman"> + <div class="lbox"> + <img src="ar-osman-heat.svg"> + {{ fingerhandstats(layoutstats['ar-osman']) }} + </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> + In 2015 patent + <a href="https://patents.google.com/patent/US9041657B2/en">9,041,657 B2</a> + was filed in the US, presenting yet another computer-generated layout. + <!-- --> + Its genetic algorithm was seeded with just 54 Arabic e-books consisting + of 7 million characters in total. + <!-- --> + Overall it claims to be 9% faster than default layouts. + <!-- --> + This layout rips off most of the standard layout’s second layer, + but amusingly fails to include a question mark, while it does + provide <em>three</em> single-quote marks ’ and <em>two</em> Arabic + semicolon <bdo dir="ltr" lang="ar">؛</bdo>. + <!-- --> + Additionally it places <bdo dir="ltr" lang="ar">ي</bdo> in an even + worse position than Malas’ layout. + </p> + </div> + </div> + </figcaption> + </figure> + + <figure> + <div class="lbox"> + <img src="ar-khorshid-heat.svg"> + {{ fingerhandstats(layoutstats['ar-khorshid']) }} + </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> + In the paper + <a href="https://www.researchgate.net/publication/264837659_A_new_optimal_Arabic_keyboard_layout_using_genetic_algorithm">A new optimal Arabic keyboard layout using genetic algorithm</a> + Khorshid et al. present yet another + layout. + <!-- --> + They claim a 36% improvement over the standard keyboard based on + their criteria for ergonomic layouts. + <!-- --> + 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> + </figcaption> + </figure> + + <figure> + <div class="lbox"> + <img src="ar-phonetic-heat.svg"> + {{ fingerhandstats(layoutstats['ar-phonetic']) }} + </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> + The <a href="http://arabic.omaralzabir.com/home">Arabic Phonetic Keyboard</a> + simply maps the QWERTY layout to Arabic letters, based on their sound. + Thus Q becomes <bdo dir="ltr" lang="ar">ق</bdo>, Y becomes <bdo dir="ltr" lang="ar">ي</bdo> and so on. + It claims to be optimized for writing vowelized texts, especially + Quranic Arabic, and thus includes quite a few combining characters and + special symbols. + Although it claims to make frequently used letters easily available – + based on the work of Intellaren – it makes no effort to arrange letters + according to their usage frequency. + </p> + </div> + </div> + </figcaption> + </figure> + + <div 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> + While technically speaking not a layout but alternative input + method, <a href="http://www.intellaren.com/intellark">Intellark</a> by + Intellaren is worth mentioning. + <!-- --> + It is based on repeatedly pressing the same button to modifiy the + current character. + <!-- --> + For example pressing A on the QWERTY keyboard cycles through the + alternatives <bdo dir="ltr" lang="ar">ا أ إ آ</bdo> and <bdo dir="ltr" lang="ar">ء</bdo>. + <!-- --> + Obviously this is slow, error-prone and violates Dvorak’s guidelines + for keyboard layout designs. + </p> + </div> + </div> + </div> +</section> + +<section> +<div 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"> + <h2>Acknowledgements</h2> + + <p>This work would not have been possible without Martin Krzywinski’s + work on <a + href="http://mkweb.bcgsc.ca/carpalx/?typing_effort">carpalx</a>.</p> + </div> + </div> +</div> +</section> + +<script> +fetch('letterfreq.json') + .then(function(response) { return response.json(); }) + .then(function(item) { Bokeh.embed.embed_item(item, 'letterfreq-div'); }) +</script> + +</body> +</html> |