...
| Expand | ||
|---|---|---|
| ||
|
Problem Statement
...
Solutions
Solution for Key design Issue -1
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
Telugu "సింహం అడవి రాజు" character length 9 "పసిఫిక్ సముద్రం ప్రపంచంలోనే అతిపెద్ద సముద్రం" character length 27 Tamil "சிங்கம் காட்டில் அரசன்" character length 14 "பசிபிக் கடல் உலகிலேயே மிகப் பெரிய கடல் ஆகும்" character length 30 Hindi "जंगल का राजा शेर है" character length 13 |
Limitations on the solution
Grapheme Splitter does't cover 100% the cases due to the requirement of language expertise and sheer number in a possibilities.
| Code Block | ||
|---|---|---|
| ||
Case 1 "प्र" Expected value of character length 1 Actual value through grapheme splitter is 2 Case 2 க்ஷௌ Expected value of character length 1 Actual value through grapheme splitter is 2 |
Challenges Involved in implementing the solution
If the User allowed to enter 26 keys with each containing 1 linguistic character count we face two main challanges.
Challenge 1
maxlength property of the input box cannot be static,
It needs to dynamic based on user input. Currently the maxlength is set as 51. ( 26 character + 25 Comma )
Challenge 2
Two rows not enough for the keys.
I have added screenshot of one of the worst case input scenario of Tamil Language, Each Key is a single character in tamil. ( In Javascript the total length is 52 )
| Code Block | ||
|---|---|---|
| ||
கொ, கோ, கௌ, சோ, சௌ, பொ, போ, பௌ, ணொ, ணோ, ணௌ, தொ, தோ, தௌ, நொ, நோ, நௌ, லொ, லோ, லௌ, றொ, யொ, யோ, யௌ, மொ, மோ |
Rendering as per current implementation
Solution for Problem Statement 2
As giving the fixed length for each keys breaks the UI, Using Flex-box CSS feature gives enables dynamic width for each keys based it's rendered width.
Changes in Keyboard row div container
...