Display diacritics (Dotted Circle) on the touch keyboard

[Roger_Nadoumngar]

hello, I am still working on my QWERTY keyboard from Chad and we installed it on the android but, one correctly displays the diacritics(Dotted Circle) and the other displays another symbol like box but i cannot show screenshots and I am confused. your help will be welcome thank you!

[jheath]

Here are the screen shots:

[Nyny]

Hello @Roger_Nadoumngar,

This happened because the current font doesn’t support it. Can you make sure that you added the required font into .kps file (Files tab) and also selected it in keyboard font (Keyboards tab)?

Dotted Circle with Combining Diacritics on Keycap

You can fix the square box issue by picking a font such as Doulos SIL in the Package Editor/Keyboards tab to include with your keyboard: [image] Some devices, particularly older ones, may not show the dotted circle, but most modern devices are more consistently showing it now.

Thanks!

[Marc]

This looks like a font issue. It can be challenging to get dotted circles working consistently across devices. With Keyman Developer 17, we have a pathway for improving this situation, but it is a little technical: &displayMap

We would be happy to help you navigate the technicalities of this feature, but please bear with us. I am going on leave tomorrow and the rest of the keyboard support team are still coming up to speed with usage of the feature, so it may take a little bit to get there.

@Lorna and @Martin_Hosken may be the best placed to support you in using &displayMap.

[jheath]

I don’t really see how &displayMap is going to help us. As @Marc said, this looks like a font issue. But it doesn’t seem like re-mapping the characters to other code points (which seems to be what &displayMap is doing) is going to help us. We just need the code points already there to be displayed properly, which seems to be related to getting an appropriate font into the Keyman package and using it to display the keycaps on the visual touch keyboard.

I think we’ll start by trying to follow the advice in the discussion referred to by Nyny above.

[drowe]

&displayMap is intended to work with a custom font that has each character combination needed for the keyboard display encoded as a single glyph (in Unicode’s private use area). This way the display is independent of the operating system or rendering software.

If you can find a font that displays the character combinations you need reliably, that is a good solution. There are cases, however, where a sequence that works on one operating system fails on another. For those cases, the &displayMap and a custom font is the best solution.

[jheath]

@drowe

For those cases, the &displayMap and a custom font is the best solution.

That sounds like a lot of work… We’re actually making some progress by putting the Africa subset version of Andika into the font - that seems to help with the touch keyboard display on Android.

But now we are having problems with font choice in the HTML help file that shows up on Android. Roger posted on this, but in a different thread: Dotted Circle with Combining Diacritics on Keycap - #22 by Roger_Nadoumngar. I think he meant to post it here, so I’ll try to quote it:

@Roger_Nadoumngar

I changed the font with andika and I find that it displays diacritics well, since I use AndikaAfr. I wanted to know if this caused any other display problems or if it displayed all the special characters?
then in my help page it displays the same chosen as before no dotted circle, as in the screenshot

This is the font we currently have in the CSS file
font-face {
font-family: CharisSILWeb;
font-weight: normal;
font-style: normal;
src: url(“https://fonts.languagetechnology.org/fonts/sil/charissil/web/CharisSIL-Regular.woff2”) format(“woff2”);
}
body {
font-family: ‘Charis SIL’, CharisSILWeb, Gentium, serif;
}
but it doesn’t display this

[jheath]

So to flesh out what Roger said, with the AndikaAfr font added into the package, and the configuration done as mentioned in the other thread, we are now getting dotted circles for our diacritics on the keyboard layout.

But when we install the keyboard (on Android), it pops up the Help HTML page as part of the installation process, and THAT is the screen shot that Roger gave above, with Xbox’es instead of dotted circles. (The original Xbox?!) It should be noted that when the same keyboard is installed on Windows, when the HTML Help pops up after installation, it shows up very nicely with Charis SIL font and dotted circles supporting the diacritics.

Roger also gave you the font definitions for the CSS on our Help web page, which clearly shows that all of the fonts that were chosen were serif, but the screen shot shows very clearly that the font that is being used is sans serif.

So why, in the display of our HTML Help file on Android, is our font-family definition being ignored? There are a few other formatting details that seem to be missing as well - some table formatting, some colors in headings, etc. When the Keyman HTML Help file is displayed on Android, does it use a restricted set of HTML commands - i.e. not a full HTML implementation?

One thing we can try is adding AndikaAfr (the font in the package) into the font-family list in the CSS. That may help with the display of the diacritics, but it won’t be great for the readability of the Help file.

Thanks for any insights you can give us…
Jeff & Roger

[Marc]

Keyman does not use a restricted set of HTML commands. It uses a normal webview (which is Chrome behind the scenes).

Could you share the project with us (zip via private message)? Otherwise we are really just guessing on the causes of the issues, which is not an effective way to address the problem!

[Roger_Nadoumngar]

thank you for your help here is the zip file
sil_tchad_qwerty.zip (280.4 KB)

[Nyny]

You need to add Td.css into Package files.

Here’s the result:

[Roger_Nadoumngar]

Thank you for all your help. I see that it is almost ready for publication. I just have a few more checks to do. If I encounter any more problems, I will come back. This was a great experience for me and to help others.

[Roger_Nadoumngar]

I come back with one last question, on the phone it doesn’t seem to be able to download the Charis SIL woff2 font, but it uses a serif font by default. is there a solution for this? thanks

[Marc]

For the on screen keyboard, you can include a font in the package, and select it in the Package Editor (see Package tutorial, Step 3: Creating a package and adding files – I note that this documentation is not especially clear or complete)