CSS does not work on custom layer

[ibrahima]

Hi all,
I have created a keyboard (pulaar_fulfulde_2021) with a custom style I applied to all layers. I have the usual layers: default, shift, numeric. But I have created a custom layer to simulate Caps-lock. That layer is named caps.
Now my problem is CSS is working on all layers except the custom layer.

Here is a sample of the CSS code for each layer:

/Android - default/ Working
.android .kmw-keyboard-pulaar_fulfulde_2021 #default-K_A,

/Special Keys/ Working
.android .kmw-keyboard-pulaar_fulfulde_2021 #default-K_CAPS,

/Android - shift/ Working
.android .kmw-keyboard-pulaar_fulfulde_2021 #shift-K_A,

/Android caps/ NOT Working the custom layer I created
.android .kmw-keyboard-pulaar_fulfulde_2021 #caps-K_A,

/Android numeric/ Working
.android .kmw-keyboard-pulaar_fulfulde_2021 #numeric-K_1,

I suspect it might have something to do with the naming of keys. Any thoughts?
Cheers
Ibrahima

[ibrahima]

Hi again,
I actually figured out how to solve the issue. I also found out that you only need one line of CSS code to modify the entire keyboard keys!

[Marc]

Well done – you got there before Makara or I had a chance to respond

Would you mind sharing the one line of code you ended up with which modified the entire keyboard?

[ibrahima]

Hi Marc,
I had already shut my computer down when I wrote that. That is why I didn’t include the code. (I am sending this from my phone). And it’s still shut down as it’s early morning in Europe and I am still in bed .
I spent more than a day trying to solve that. And when it worked, I was exhausted but so happy!
I still have one minor issue: special active keys are not showing their active state color.
Here’s a shot of t he layer in question.

[ibrahima]

Hi all
I worked a few more hours and finally solved all issues! First, the single line of CSS code that I used to change the style of all keys is the following:

.phone.android .kmw-key.kmw-key-default { background: #000000; color:rgb(255, 255, 255);border:1px solid #FFFFFF; }

Then I had an issue with specials keys styling (no color when active). I solved that with the code:

/*Special on */
.phone.android .kmw-key.kmw-key-shift-on, .phone.android .kmw-key.kmw-key-special-on { color:#fff;background-color:#77f;border:1px solid #FFFFFF; }

But I realised I needed to comment out the special keys everywhere else except in the following:

/Android global/
.phone.android .kmw-key.kmw-key-shift, .phone.android .kmw-key.kmw-key-special, .phone.android .kmw-keyboard-pulaar_fulfulde_2021 #default-K_NUMLOCK { background: #3b3939; color:rgb(255, 255, 255);border:0.1px solid rgb(209, 208, 208); }

That will give the result I was expecting.

[Marc]

That looks good! One small tweak that I would suggest: in order to make sure that your keyboard layout styling affects only your keyboard, you should include your keyboard’s identifier in the CSS rules:

.phone.android .kmw-keyboard-pulaar_fulfulde_2021 .kmw-key.kmw-key-default { 
  background: #000000;
  color:rgb(255, 255, 255);
  border:1px solid #FFFFFF; 
}

.phone.android .kmw-keyboard-pulaar_fulfulde_2021 .kmw-key.kmw-key-shift-on, 
.phone.android .kmw-keyboard-pulaar_fulfulde_2021 .kmw-key.kmw-key-special-on {
  color:#fff;
  background-color:#77f;
  border:1px solid #FFFFFF;
}

You might also want to use #fff consistently everywhere for white (you are currently using #FFFFFF and rgb(255, 255, 255) as well!)

I’m not entirely sure what the final Android global special keys rule is doing? Can you elaborate?

[ibrahima]

Thank you Marc,
Yes you’re right, I omitted the keyboard identifier while tweaking and experimenting with code. I will add it everywhere needed.
Also thanks for the remark on consistency. I will take that into account.
I am actually learning (fast) by doing and I tend to be overwhelmed by excitement when things finally work out the way I want.
As for Android global, it a name I gave to tweaks on special keys. Should have named it better.
Other than that, why on earth does the Doulos SIL font work on Chrome test page and NOT on my phone? Looks like my keyboard displays some other font. See screenshot.

Thanks again
Ibrahima

[Marc]

In order to get the font to work on the phone in-app, you need to include it in the keyboard package, and select it as the keyboard font within the keyboard package settings:

Then you should install the package onto your device (which can do from the Compile tab for testing purposes).

[ibrahima]

I am laughing at myself again . I did not select the font.
How stpd of me! I have been forgetting that tiny detail every single time!! Sorry @makara who was the last to remind me that! I will be more careful next time.
Feature request: That being an important setting, it would be good to have some sort of warning when we don’t select a font in the package settings while a font is included in the list. Absent-minded people like me will probably forget again and spend days moving heaven and earth trying to figure out why that font is refusing to display on Android.

Thanks Marc.

[ibrahima]

Hi all,
Although this thread was about CSS, I am not sure if this fits in. But Iwas wondering where to edit these:

• spacebar caption on the keyboard.
• key text alignment
• keyboard/key padding

My first keyboard is almost finished as far as functionality is concerned. I am focusing now on style and ergonomics. Then I will write the help, readme, etc.

Thanks all for helping.
Ibrahima

[Marc]

• The spacebar caption on the keyboard is currently controlled by Keyman; it shouldn’t be changed by the keyboard. I do want to make it clearer because it’s currently not wonderful. We already have an issue open to work on this. What are you wanting on it?
• The text alignment on key caps is controlled by CSS, so you could override that, but be aware that the CSS may change in future versions of Keyman and impact the display of your keyboard.
• Key padding is controlled in the touch layout editor - see the Padding left option for each key. You can add padding on the right of the keyboard with a Spacer type key.

[ibrahima]

Thanks a lot Marc
Understood the caption issue. Actually on my keyboard, it shows too much text Fulah (tappirde_pulaar_fulfulde_2021) and with parentheses. Not that clean.

Also understood the CSS compatbility issues. Fortunately, these are just for styling and don’t affect functionality.

Thanks

[ibrahima]

Hi all
I hope you had wonderful holidays. And I take this opportunity to wish you a very happy new year 2022! I have not yet completed this project as I had issues that were not solved. Those are:

• Keyboard not starting with capitals
• Long-press keys are not responding to css formatting
• When shift+comma is pressed, I get < character. Cannot find the error anywhere in the code.
• Would like to submit the keyboard at last!

I know it is a lot but I just wanted to summarize.
Cheers all and thank you in advance.

Ibrahima

[Marc]

Hi @ibrahima,

Welcome back! To respond to the issues you are experiencing:

• Keyboard not starting with capitals

  Full automatic start-of-sentence support is a new feature we are introducing in Keyman 15. This will be released in a few months; the feature is currently undergoing testing. We have completed the documentation; see Casing support to learn more.

• Long-press keys are not responding to css formatting

  This is a current limitation on Android devices where the long-press keys are rendered by the Keyman app, and not as part of a web page. The technical reason for this is to allow the long-press popup to be displayed outside the boundaries of the keyboard itself, which is not possible if it is part of the keyboard web host. Adding CSS support to the longpress keys then becomes quite technically complex. (We are considering if we can render the long-press box as a separate web host in a future update, but performance may be a problem.)

  On iOS and on the web, the long-press keys should be rendered with the CSS formatting – because on iOS, the system does not allow us to render outside the boundaries of the keyboard, sadly, so we are forced into a compromise with the positioning of the long-press box.

• When shift+comma is pressed, I get < character. Cannot find the error anywhere in the code.

  Shift+, on a US English keyboard generates the < character. I’d have to see your code to help diagnose why it is not working as you expect in your keyboard.

• Would like to submit the keyboard at last!

  Hurrah! Start here!

Hope that helps!

[ibrahima]

Hi Marc,
Thanks a lot for your insights! I tried to to paste code here but it says limit exceeded. Maybe I should use my Github to store eveything there?
Regards
Ibrahima

[Marc]

@ibrahima

Maybe I should use my Github to store eveything there?

That sounds like a very sensible plan.

[ibrahima]

Thanks a lot.
Here is the link to my GitHub page. You will find the keyboard files in the repo Pulaar_Fulfulde_2021.

ibrahimasarr - Repositories

Cheers
Ibrahima

[Marc]

I’ve had a quick look at the keyboard. Can you tell me a little more about the Shift+, issue? Which device are you using? Are you using a hardware keyboard or on screen keyboard?

[ibrahima]

Thanks Marc,
I am using the Android version of the keyboard. So it is a touch keyboard on a Samsung phone.
When I press shift+, (comma) I get <.
I checked my design layout and shift+, is K_COMMA.
So I don’t understand where the < comes from.

Thanks for your help
Ibrahima

[Marc]

Okay, I’m a little confused; are you pressing Shift+, on a hardware keyboard (e.g. Bluetooth) attached to an Android phone? Or are you pressing the , on the Shift layer of your keyboard, which is a longpress option under the . key as far as I can tell?

In either case, I am unable to reproduce the issue as you describe (although there seems to be something not quite right about the Shift/Caps switching as a separate issue?)