diff options
Diffstat (limited to 'lulua/data/report')
| -rw-r--r-- | lulua/data/report/index.html | 266 | ||||
| -rw-r--r-- | lulua/data/report/style.css | 23 |
2 files changed, 198 insertions, 91 deletions
diff --git a/lulua/data/report/index.html b/lulua/data/report/index.html index 5c4ef8f..d240ba7 100644 --- a/lulua/data/report/index.html +++ b/lulua/data/report/index.html @@ -118,18 +118,18 @@ </div> <div class="pure-u-1 pure-u-md-1-2" lang="en"> <div class="lbox"> - <h2>The Arabic Alphabet</h2> + <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 + 28 letters make up the Arabic alphabet and quite a few extra + symbols are 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. + Since the performance of a keyboard layout depends on the text entered + it is necessary to study its mono-, di- and trigraph frequencies first. <!-- --> - The corpus used for the following analysis consists of + The novel corpus built 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> @@ -193,7 +193,7 @@ <div class="lbox"> <h2>Layout properties</h2> - <p>The following evaluation uses color coding to identify fingers:</p> + <p>Throughout this evaluation color coding is used to identify fingers:</p> <dl class="colorcodes"> <dt class="finger little">red</dt> <dd>little finger</dd> @@ -207,6 +207,44 @@ <dd>thumb</dd> </dl> <p>Asymmetry is defined as the difference between left and right hand usage.</p> + + <p> + The layout proposed uses four layers and assumes a 102/105 key ISO + keyboard common in Europe to accomodate the shift keys necessary. + <!-- --> + These are in order: <span class="layer second">Shift on the left and + right</span>, <span class="layer third">caps lock on the left and the + rightmost key in the middle row</span>, <span class="layer fourth">the + key right of the left shift key and the key labeled <em>Alt Gr</em> to + the right of the spacebar</span>. + <!-- --> + Symbols are assigned to the four layers by their function: <span + class="layer first">characters</span>, <span class="layer + second">punctuation</span>, <span class="layer + third">diacritics</span>, <span class="layer fourth">other</span>. + </p> + <p> + The first layer was optimized using an extended reimplementation of <a + href="http://mkweb.bcgsc.ca/carpalx/?typing_effort">carpalx</a>. + <!-- --> + From several runs with 100.000 iterations each the layout which had + good scores and looked reasonable to the human eye was picked. + <!-- --> + Optimal arrengement of layers two and up are still under investigation. + </p> + + <p> + The most frequent letters have all been assigned to the home row, which + makes them easily accessible. + <!-- --> + <bdo lang="ar" dir="ltr">ا</bdo> and <bdo lang="ar" dir="ltr">ل</bdo> + are typed with different hands, balancing the load on hands almost + evenly. + <!-- --> + The index and middle finger of both hands share the majority of the + typing load, but naturally the left middle finger is used more + frequently due to its assignment to the letter alif. + </p> </div> </div> </div> @@ -243,103 +281,129 @@ </figure> </section> -<section class="layoutgallery"> +<section id="related"> <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> + <h2><a href="#related">Related work</a></h2> + <p>This section explores existing keyboard layouts made for the + Arabic language and analyzes their usability.</p> </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 id="ar-asmo663" 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"> + <h3><a href="#ar-asmo663">ASMO 663</a></h3> <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 + Meterology Organization (<abbr>ASMO</abbr>), now part of + <a href="https://www.aidmo.org/"><abbr>AIDMO</abbr></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>. + <a href="https://www.aidmo.org/smcacc/ar/index.php?option=com_sobi2&Itemid=2&limitstart=2150">standard 663</a> + titled <em>Arabic terminal keyboard layout</em>. <!-- --> - This, however, turned out to be a failure, due to lack of adoption by - the typewriter industry. + The layout has several shortcomings: + Most notably it clusters letters by their visual similarity (<bdo + dir="ltr" lang="ar">ض ص، س ش، ح ج خ</bdo>) and not frequency. + <!-- --> + Also it overuses the right index finger by assigning the four + high-frequency letters <bdo lang="ar" dir="ltr">ا ت و ة</bdo> to + it. </p> </div> </div> - </figcaption> - </figure> + </div> - <figure id="ar-osx"> + <figure> <div class="lbox"> - <img src="ar-osx-heat.svg"> - {{ fingerhandstats(layoutstats['ar-osx']) }} + <img src="ar-asmo663-heat.svg"> + {{ fingerhandstats(layoutstats['ar-asmo663']) }} </div> - <figcaption class="pure-g flexreverse"> + </figcaption> + </figure> + + <div id="ar-osx" 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"> + <h3><a href="#ar-osx">Mac OS X</a></h3> <p> - Mac OS X’s Arabic keyboard layout makes a few small changes to the - layout by moving the <span lang="ar" dir="ltr">ة</span> to a hard - to reach spot on the right of the top row. + Mac OS X’s Arabic keyboard layout makes a few small changes to ASMO + 663 by moving the <bdo lang="ar" dir="ltr">ة</bdo> to a hard to + reach spot on the right of the top row. <!-- --> - It also moves the short vowels from the first to the second layer - and replaces them with punctuation. + It also moves the short vowels from the first to the top row of the + second layer and replaces them with symbols. <!-- --> The bottom row keys are aditionally shifted to the right, beginning - with <span lang="ar" dir="ltr">ر</span>. + with <bdo lang="ar" dir="ltr">ر</bdo>. </p> </div> </div> - </figcaption> - </figure> + </div> - <figure id="ar-linux"> + <figure> <div class="lbox"> - <img src="ar-linux-heat.svg"> - {{ fingerhandstats(layoutstats['ar-linux']) }} + <img src="ar-osx-heat.svg"> + {{ fingerhandstats(layoutstats['ar-osx']) }} </div> + </figure> + + <div id="ar-linux" class="pure-g flexreverse"> <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"> + <h3><a href="#ar-linux">Linux</a></h3> <p> - Instead we’re currently using this layout (on Linux), which is - similar, but not quite the same. + A more common layout is the one used on Linux, which also exists on + Windows with minor changes to the first layer. <!-- --> - Most notably this layout arranges letters by their visual similarity. + While its top and center row barely differ from ASMO 663 the + bottom row now contains a separate key for the ligature <bdo + lang="ar" dir="ltr">ﻻ</bdo>. <!-- --> - 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>. + But at the cost of pushing punctuation characters to the second + layer, <bdo dir="ltr" lang="ar">د</bdo> into the top and <bdo + dir="ltr" lang="ar">ذ</bdo> even further into the number row. </p> </div> </div> - </figcaption> - </figure> + </div> - <figure id="ar-malas"> + <figure> <div class="lbox"> - <img src="ar-malas-heat.svg"> - {{ fingerhandstats(layoutstats['ar-malas']) }} + <img src="ar-linux-heat.svg"> + {{ fingerhandstats(layoutstats['ar-linux']) }} </div> - <figcaption class="pure-g flexreverse"> + </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>In contrast to the layouts presented so far the following + layouts claim to be optimized for the Arabic language and were, at + least partially, created algorithmically.</p> + </div> + </div> + </div> + + <div id="ar-malas" 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"> + <h3><a href="#ar-malas">Malas et al</a></h3> <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>, @@ -358,82 +422,91 @@ </p> </div> </div> - </figcaption> - </figure> + </div> - <figure id="ar-osman"> + <figure id="ar-malas"> <div class="lbox"> - <img src="ar-osman-heat.svg"> - {{ fingerhandstats(layoutstats['ar-osman']) }} + <img src="ar-malas-heat.svg"> + {{ fingerhandstats(layoutstats['ar-malas']) }} </div> - <figcaption class="pure-g flexreverse"> + </figure> + + <div id="ar-khorshid" 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"> + <h3><a href="#ar-khorshid">Khorshid et al</a></h3> <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. + In figure 8 of 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> + published in 2010 Khorshid et al. present yet another layout. <!-- --> - Its genetic algorithm was seeded with just 54 Arabic e-books consisting - of 7 million characters in total. + They reject the idea of using contemporary text sources like + newspapers or books and consequently their only input text is a + copy of the Quran, whose distribution of mono- and digraphs + is quite different from modern, non-religious texts. <!-- --> - Overall it claims to be 9% faster than default layouts. + A 36% improvement over the standard keyboard based on their + criteria for ergonomic layouts is claimed in their conclusion as + well. <!-- --> - 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. + However their algorithm seems to favor the bottom row instead of the + easier to use top row since it places the letters <bdo dir="ltr" + lang="ar">ب ت ر</bdo> there. </p> </div> </div> - </figcaption> - </figure> + </div> <figure> <div class="lbox"> <img src="ar-khorshid-heat.svg"> {{ fingerhandstats(layoutstats['ar-khorshid']) }} </div> - <figcaption class="pure-g flexreverse"> + </figure> + + <div id="ar-osman" 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"> + <h3><a href="#ar-osman">Osman et al</a></h3> <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. + 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. <!-- --> - They claim a 36% improvement over the standard keyboard based on - their criteria for ergonomic layouts. + Its genetic algorithm was seeded with just 54 Arabic e-books consisting + of 7 million characters in total. <!-- --> - However in their layout from figure 8 the letters <bdo dir="ltr" - lang="ar">ل ب ر</bdo> are in suboptimal positions. + Overall it claims to be 9% faster than default layouts. <!-- --> - Also it seems their algorithm favors the bottom row instead of the - easier to use top row. + 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> + </div> - <figure> + <figure id="ar-osman"> <div class="lbox"> - <img src="ar-phonetic-heat.svg"> - {{ fingerhandstats(layoutstats['ar-phonetic']) }} + <img src="ar-osman-heat.svg"> + {{ fingerhandstats(layoutstats['ar-osman']) }} </div> - <figcaption class="pure-g flexreverse"> + </figure> + + <div id="ar-phonetic" 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"> + <h3><a href="#ar-phonetic">Phonetic</a></h3> <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. @@ -447,14 +520,21 @@ </p> </div> </div> - </figcaption> + </div> + + <figure> + <div class="lbox"> + <img src="ar-phonetic-heat.svg"> + {{ fingerhandstats(layoutstats['ar-phonetic']) }} + </div> </figure> - <div class="pure-g flexreverse"> + <div id="intellark" 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"> + <h3><a href="#intellark">Intellark</a></h3> <p> While technically speaking not a layout but alternative input method, <a href="http://www.intellaren.com/intellark">Intellark</a> by @@ -484,7 +564,13 @@ <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> + href="http://mkweb.bcgsc.ca/carpalx/?typing_effort">carpalx</a>. + <!-- --> + Neo Layout’s <a + href="https://github.com/neo-layout/neo-layout/tree/master/windows/kbdneo2/Quelldateien">kbdneo2</a> + Windows driver proved to be an invaluable source for understanding the + undocumented nature of Windows keyboard driver development. + </p> </div> </div> </div> diff --git a/lulua/data/report/style.css b/lulua/data/report/style.css index b95add7..d829aa4 100644 --- a/lulua/data/report/style.css +++ b/lulua/data/report/style.css @@ -76,6 +76,13 @@ a:focus, a:hover { color: var(--light-shades); border-radius: 0.1em; } +h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited { + color: inherit; +} +h1 a:focus, h1 a:hover, h2 a:focus, h2 a:hover, h3 a:focus, h3 a:hover { + background-color: inherit; + border-radius: inherit; +} div.title-card { background-color: var(--dark-accent); color: var(--light-shades); @@ -199,4 +206,18 @@ dl.colorcodes .finger.index::before { dl.colorcodes .finger.thumb::before { background-color: var(--finger-thumb); } - +.layer:before { + margin-right: 0.3em; +} +.layer.first:before { + content: "⋅"; +} +.layer.second:before { + content: "⭡"; +} +.layer.third:before { + content: "⭧"; +} +.layer.fourth:before { + content: "⭨"; +} |