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%;
Applying a minimum width ensures enough space for each button.