diff options
| author | Lars-Dominik Braun <lars@6xq.net> | 2020-02-22 13:20:31 +0100 |
|---|---|---|
| committer | Lars-Dominik Braun <lars@6xq.net> | 2020-02-22 13:23:26 +0100 |
| commit | 0f8643954fd9507aec85bab46046e71a497bfffe (patch) | |
| tree | 28708a991bd136fd255282326e93f7588120a2e3 /doc/index.html | |
| parent | a91fc5e945b841ae54f67ed331409ad857178f13 (diff) | |
| download | lulua-0f8643954fd9507aec85bab46046e71a497bfffe.tar.gz lulua-0f8643954fd9507aec85bab46046e71a497bfffe.tar.bz2 lulua-0f8643954fd9507aec85bab46046e71a497bfffe.zip | |
doc: Switch to jinja2-based rendering
Pre-rendering HTML was not the best idea. Instead pre-process the data,
cache it into data files and do the HTML rendering only as the final
step.
Also adds asymmetry to analysis and uses tabular numbers and spaces
instead of ugly table hacks to align numbers.
Diffstat (limited to 'doc/index.html')
| -rw-r--r-- | doc/index.html | 418 |
1 files changed, 0 insertions, 418 deletions
diff --git a/doc/index.html b/doc/index.html deleted file mode 100644 index cc5c69f..0000000 --- a/doc/index.html +++ /dev/null @@ -1,418 +0,0 @@ -<!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"> - <script src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script> - <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> - - include(`corpus.html') - - <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> - </div> - </div> -</div> - -<figure id="ar-lulua-heat"> -<div class="lbox" lang="en"> - <img src="ar-lulua-heat.svg"> - include(`ar-lulua-fingerhand.html') -</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"> - include(`ar-asmo663-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> - 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"> - include(`ar-linux-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> - 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"> - include(`ar-malas-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> - 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"> - include(`ar-osman-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> - 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"> - include(`ar-khorshid-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> - 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"> - include(`ar-phonetic-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> - 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> |