Background

   The keyboard plugin supports custom keys by entering keys through in input box each separated out through comma.

Problem Statement

Statement : 1

   As per requirement user should be allowed to enter maximum of 26 Linguistic Character. Splitting or counting a character linguistically is not straight forward in Javascript.

Statement : 2

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

Key Design Issues

Solutions

Solution for design Issue -1 

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 work a perfect 100%,  On some cases it is not determining the character length right. Also there was no documentation or mentions about it's test case coverage.

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

There are key implementation challenges involvedt .

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 challenges.

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 )

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

Rendering as per current implementation

Solution for design Issue 2

Using Flex-box CSS feature enables dynamic width for each keys.

Changes in Keyboard row div container

display : flex;
flex-wrap : true;

Changes in each keys ( buttons )

flex-grow : 1;
min-width: 7%;