Background
The current custom keyboard has plugin supports custom keys ( buttons ) by separating it through two commas buttons ) by entering it keys through in the custom Keyboard inputbox, The input box currently has max character length of 51 characters ( 26 English Alphabets and 25 commas ).input box each separated out through comma.
Expand | ||||
---|---|---|---|---|
|
| |||
Problem Statement
Statement: 1
In In the custom keyboard expected to support 26 Characters Irrespective of the language . But almost all indic languages characters created through combing Base Character + Sound Character.
But We calculate the length limitation through javascript String.length Which does't fit with indian languages.
No Format |
---|
Example
जानवरों
Actual Length 4, Javascript Length 7 |
Statement : 2
The keyboard does allocate a fixed width for each keys by calculating through
( Number of Keys / 2 ) / 100
No Format |
---|
Example
जानवरों
|
, It applies a fixed length for all the keys, Due that on some cases current keyboard layout implementation, All the keys fixed to the same width. The disadvantage of it is when applying a fixed width for a key which has many characters in it, The key wraps inside the fixed width. Because of that the keyboard layout breaks.
Expand | ||
---|---|---|
| ||
Solutions
Solution for Problem Statement 1
...
Key Design Issues
Solutions
The solution for design Issue -1
grapheme-splitter
Library to Count the number ( Reference Link for more test cases https://runkit.com/shivashanmugam/5c3413183adcf800145d7b41 )Code Block | |||
---|---|---|---|
|
...
| |
Telugu
"సింహం అడవి రాజు" character length 9
"పసిఫిక్ సముద్రం ప్రపంచంలోనే అతిపెద్ద సముద్రం" character length 27
Tamil
"சிங்கம் காட்டில் அரசன்" character length 14
"பசிபிக் கடல் உலகிலேயே மிகப் பெரிய கடல் ஆகும்" character length 30
Hindi
"जंगल का राजा शेर है" character length 13
|
Limitations on the solution
On some cases does It does not work exactly as expected
Case 1: प्रशांत महासागर दुनिया का सबसे बड़ा महासागर है
Actual number of characters => 30
Grapheme splitter length => 31
Case 2 : க்ஷௌ
Actual Number of character => 1
Grapheme splitter count it as => 2
Acknowledgement from
Solution for Problem Statement 2
Using HTML Flex Box
Changes in row Container Grapheme Splitter does not handle all the test cases, For some inputs, it is not determining the character length correctly. Also there was no docs about it's test coverage for a specific language.
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 ( Grapheme Splitter )
If the User allowed to enter 26 keys with each containing 1 linguistic character count we face two main challenges.
Challenge 1
maxlength
property of the input box cannot be static,
It needs to dynamic based on user input to input-box. Currently the max length is set as 51. ( 26 character + 25 Comma )
Challenge 2
In the keyboard layout two rows don't have enough space.
I have added screenshot of one of the worst case input scenario of Tamil Language.
Each Key is a single character in the below example. ( In Javascript the total length is 51, Excluding spaces )
Code Block | ||
---|---|---|
| ||
கொ, கோ, கௌ, சோ, சௌ, பொ, போ, பௌ, ணொ, ணோ, ணௌ, தொ, தோ, தௌ, நொ, நோ, நௌ, லொ, லோ, லௌ, றொ, யொ, யோ, யௌ, மொ, மோ |
Rendering of the above input in keyboard
Solution for design Issue 2
Using Flex-box CSS feature enables dynamic width for each keys.
Changes in Keyboard row div container
Code Block | ||
---|---|---|
| ||
display : flex; flex-wrap : truewrap; |
Changes in each keys ( buttons )
Code Block | ||
---|---|---|
| ||
flex-grow : 1; min-width: 7%; | ||
Expand | ||
|
...