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 Key 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 cover 100% the cases due to the requirement of language expertise and sheer number in a possibilities.

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

Solution for Problem Statement 2

As giving the fixed length for each keys breaks the UI, Using Flex-box feature gives dynamic width for each keys based it's rendered width.

Changes in Keyboard row div container

display : flex;
flex-wrap : true;

Changes in each keys ( buttons )

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