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%;