How to reposition displayed characters in on-screen keyboards?

Keyman Keyman How To
,
1

in on-screen layout, the character position is badly positioned, too much to the lower right, with a lot of space in upper right. In our new keyboard standard for Javanese Script, it’s imperative to show the full script, without any section cut, because there are many characters that’s different only in the lower section where it’s cut in the on-screen layout.

image
image1356×465 65.5 KB

viewed in the Keyman Developer

image
image696×309 66.6 KB

viewed in the installed Keyman Desktop

This is opposed to the touch layout, where they could be displayed centered vertically and horizontally, and shown in full character, as per our specification.

image
image1036×388 91.2 KB

For comparison, these are my mockups for full character on-screen layout:

image
image1176×403 67.1 KB

One of them is rather large compared to others (fourth button in fourth row), we need to change it to an image.

image
image1183×407 37.4 KB

centered. different layout from above.

image
image1183×407 51.3 KB

two sets. with several characters in row 1 reduced in size.

image
image1183×407 37.7 KB

two sets with Latin.

image
image1183×407 58.9 KB

three sets

2

Trying to edit the first paragraph, always return “there was an error updating that topic”. i gave up.

in on-screen layout, the character position is badly positioned, too much to the lower right, with a lot of space in upper left. In our new keyboard standard for Javanese Script, it’s imperative to show the full script, without any section cut, because there are many characters that are different only in the lower section where they’re cut in the on-screen layout.

Note, the first 3 screenshot using Windows default font: Javanese Text. My mockups using Google’s NotoSans, but the new version (unofficially, we call it version 2)

Different fonts do have different line heights, therefore it’s best if the reposition could be done manually.

3

I don’t think there is a way to change the line heights in the Developer, but you should be able to do it using CSS.

4

is there a tutorial on how to use this css? thanks!

5

Not currently, but this thread may help somehow: Advanced [Re]styling of Mobile Keyboards with CSS.

Particularly, you can try:

.kmw-keyboard-sil_cameroon_qwerty .kmw-key span,
.kmw-keyboard-sil_cameroon_qwerty\:\:sil_cameroon_qwerty .kmw-key span,
.kmw-keyboard-cloud\:\:sil_cameroon_qwerty .kmw-key span  { line-height: 1;}

sil_cameroon_qwerty should be replaced with yours.

6

Try and adjust the line-height to suit your need.

7

sorry if my question is silly. is that css for osk or mobile? i don’t want to reposition touch layout, but osk. would that affect both, just touch, or just osk? thanks.

8

Ah, CSS won’t work with OSK. It only works for web and touch per documentation here.

9

Yes, currently the desktop OSK is a lot less customisable than I’d like. I don’t have any good solutions at present; we may try and move to a HTML-based solution in the future but that has its own challenges (particularly around security)

10

looks like that left me with using image then.