Background

   The current custom keyboard has supports keys ( buttons ) by separating it through two commas by entering it through in the custom Keyboard inputbox,  The input box currently  has max character length of 51 characters ( 26 English Alphabets and 25 commas ).

Problem Statement

Statement : 1

   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.

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

Example 
जानवरों

, It applies a fixed length for all the keys, Due that on some cases the keyboard layout breaks.

Solutions

Solution for Problem Statement 1

Using grapheme splitter to Count the Number of characters

var graphemeSplitter = require("grapheme-splitter")
var splitter = new graphemeSplitter();
console.log(splitter.countGraphemes("जानवरों")) // As expected counts it as 4

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 

display : flex;
flex-wrap : true;

Changes in keys ( buttons )

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