...

In the current keyboard layout implementation all , All the key was keys fixed to same width. The disadvantage of the design it is when applying fixed width for a keys with too which many characters in it, the The key wraps inside the fixed width and . Because of that the keyboard layout breaks.

Key Design Issues

...

Solutions

Solution for design Issue -1 

...

Limitations on the solution

Grapheme Splitter does 't work a perfect 100%not handle all the test cases,  On For some cases inputs, it is not determining the character length right. Also there was no documentation or mentions docs about it's test case coverage on a language.

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  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 keysIn 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 tamilthe below example. ( In Javascript the total length is 52 51, Excluding spaces )

கொ, கோ, கௌ, சோ, சௌ, பொ, போ, பௌ, ணொ, ணோ, ணௌ, தொ, தோ, தௌ, நொ, நோ, நௌ, லொ, லோ, லௌ, றொ, யொ, யோ, யௌ, மொ, மோ

Rendering as per current implementationof the above input in keyboard

Solution for design Issue 2

...