...
The keyboard does allocate a fixed width for each keys by calculating through
| No Format |
|---|
[ ( Number of Keys / 2 ) / 100 |
...
| No Format |
|---|
Example ] जानवरों% |
, It As it applies a fixed length for all the keys , Due that on some cases the keyboard layout breaks.
...
On some cases does It does not work exactly as expected
| Background Color | ||||
|---|---|---|---|---|
| ||||
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 from Grapheme Splitter
Solution for Problem Statement 2
Using HTML Flex BoxAs 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 Container div container
| Code Block | ||
|---|---|---|
| ||
display : flex; flex-wrap : true; |
Changes in each keys ( buttons )
| Code Block | ||
|---|---|---|
| ||
flex-grow : 1; min-width: 7%; |
Applying a minimum width ensures enough space for each button.
| Expand | ||
|---|---|---|
| ||
|
...