Css for changing color in shift layer keys

amadel · June 12, 2024, 7:49am

On both the default and shift layers of my polytonic Greek keyboard I use the same keys for accents, the reason being that they are used identically in both lower case and upper case initial characters.
CSS is working fine in the default layer: the accent keys are yellow.
It does not work in the shift layer, even though in the shift layer the modifier of the accent keys is set to default.
Any ideas why this is happening?
Thanks in advance.

Nyny · June 12, 2024, 8:38am

Hello @amadel,

Could you share me your project folder so I can take a look at it?

Thank you!

amadel · June 12, 2024, 12:25pm

Hi, Nyny,

I attach the source file of my keyboard, the css file and the touch keyboard lay-out.
I hope this helps in spotting the problem - if any.

Thanks a lot,

Α.

— Note: Email replies will be posted to the SIL Software Community Site —

| Nyny
June 12 |

| - |

Hello @amadel,

Could you share me your project folder so I can take a look at it?

Thank you!

keymangr_all.kmn (35.3 KB)

(Attachment keymangr_all.css is missing)

keymangr_all.keyman-touch-layout (33.5 KB)

amadel · June 12, 2024, 12:59pm

Hi Nyny,
The .css file was rejected, so I send you the statements that relate to the accent keys of my keyboard.

.phone div.kmw-key.kmw-key-default[id$=‘K_Q’] { background-color: yellow; color: black; font-weight: bolder}
.phone div.kmw-key.kmw-key-default[id$=‘K_LBRKT’] { background-color: yellow; color: black; font-weight: bolder}
.phone div.kmw-key.kmw-key-default[id$=‘K_COLON’] { background-color: yellow; color:black; font-weight: bolder}
.phone div.kmw-key.kmw-key-default[id$=‘K_RBRKT’] { background-color: yellow; color:black; font-weight: bolder}
.phone div.kmw-key.kmw-key-default[id$=‘K_QUOTE’] { background-color: yellow; color:black; font-weight: bolder}

.tablet div.kmw-key.kmw-key-default[id$=‘K_Q’] { background-color: yellow; color: black; font-weight: bolder}
.tablet div.kmw-key.kmw-key-default[id$=‘K_LBRKT’] { background-color: yellow; color: black; font-weight: bolder}
.tablet div.kmw-key.kmw-key-default[id$=‘K_RBRKT’] { background-color: yellow; color:black; font-weight: bolder}
.tablet div.kmw-key.kmw-key-default[id$=‘K_QUOTE’] { background-color: yellow; color:black; font-weight: bolder}
.tablet div.kmw-key.kmw-key-default[id$=‘K_COLON’] { background-color: yellow; color:black; font-weight: bolder}

I hope this helps,

— Note: Email replies will be posted to the SIL Software Community Site —

| Nyny
June 12 |

| - |

Hello @amadel,

Could you share me your project folder so I can take a look at it?

Thank you!

Nyny · June 13, 2024, 5:40am

Hello @amadel,

I have checked your file and to make the color appear, you need to choose current layer for Modifier.

Then include the css code as below:

.phone div.kmw-key.kmw-key-default[id$='K_Q'], .tablet div.kmw-key.kmw-key-default[id$='K_Q']
  { background: yellow ; color: black ; } 

.phone div.kmw-key.kmw-key-default[id$='K_LBRKT'], .tablet div.kmw-key.kmw-key-default[id$='K_LBRKT']
  { background: yellow ; color: black ; }

.phone div.kmw-key.kmw-key-default[id$='K_COLON'], .tablet div.kmw-key.kmw-key-default[id$='K_COLON']
  { background: yellow ; color: black ; }

.phone div.kmw-key.kmw-key-default[id$='K_RBRKT'], .tablet div.kmw-key.kmw-key-default[id$='K_RBRKT']
  { background: yellow ; color: black ; }

.phone div.kmw-key.kmw-key-default[id$='K_QUOTE'], .tablet div.kmw-key.kmw-key-default[id$='K_QUOTE']
  { background: yellow ; color: black ; }

keymangr_all.kmn (35.3 KB)

Thanks!

amadel · June 13, 2024, 6:48am

Hi Nyny, thanks for your response.

I have already tried what you suggest. The problem is that when the modifier changes to current (i.e. SHIFT), the behaviour of the accent keys changes. This is normal, since the intended behaviour of the accent keys is identical in lower case (default layer) and upper case (shift layer). So it makes sense to set the modifier to default in the shift layer.

Important observation: two of the accent keys, K_Q and K_QUOTE have longpress keys, also defined with modifier = default. For some reason that I do not understand the longpress keys are yellow!

Does this give you any clue?

— Note: Email replies will be posted to the SIL Software Community Site —

| Nyny
June 13 |

| - |

Hello @amadel,

I have checked your file and to make the color appear, you need to choose current layer for Modifier.

Then include the css code as below:

.phone div.kmw-key.kmw-key-default[id$='K_Q'], .tablet div.kmw-key.kmw-key-default[id$='K_Q']
  { background: yellow ; color: black ; } 

.phone div.kmw-key.kmw-key-default[id$='K_LBRKT'], .tablet div.kmw-key.kmw-key-default[id$='K_LBRKT']
  { background: yellow ; color: black ; }

.phone div.kmw-key.kmw-key-default[id$='K_COLON'], .tablet div.kmw-key.kmw-key-default[id$='K_COLON']
  { background: yellow ; color: black ; }

.phone div.kmw-key.kmw-key-default[id$='K_RBRKT'], .tablet div.kmw-key.kmw-key-default[id$='K_RBRKT']
  { background: yellow ; color: black ; }

.phone div.kmw-key.kmw-key-default[id$='K_QUOTE'], .tablet div.kmw-key.kmw-key-default[id$='K_QUOTE']
  { background: yellow ; color: black ; }

keymangr_all.kmn (35.3 KB)

Thanks!

joshua_horton · June 14, 2024, 2:57am

Hello there! @Nyny brought this to my attention, as there are a few details here that are certainly less-than-intuitive.

One of the bigger factors: whenever a standard key has a custom-set layer property, its ID in HTML, which CSS references, is changed somewhat. If K_QUOTE is set to act as if on the default layer, the ID will end in K_QUOTE+default as a result.

Note the structure of your CSS selectors:

.phone div.kmw-key.kmw-key-default[id$='K_RBRKT'], .tablet div.kmw-key.kmw-key-default[id$='K_RBRKT']
  { background: yellow ; color: black ; }

This part:

[id$='K_RBRKT']

is looking for keys that end in K_RBRKT, with no appended +default.

For selectors:

^= - “starts with”
$= - “ends with”
*= - “contains”

Standard-key ID structure: <actual layer>-key ID (if modifier = (current layer))

Tack on +<modifier layer> if something is set for “Modifier” there.

The history on this goes back to bug(web): key-id aliasing results in issues for predictive text, recorder module · Issue #4617 · keymanapp/keyman · GitHub - predictive text suffers greatly if the same key ID appears twice in the same layer, just with different settings for “Modifier”. We needed a way to clearly distinguish between the two keys.

Longpress keys tack on popup- before all of that. But, there is one complicating factor - at present, they never tack on the +<modifier layer> portion! This is why the the setting didn’t affect whether or not the CSS was applied for longpress keys.

This is also something we’d consider a bug, so I’ll look into getting it fixed so that the +<modifier layer> part is more consistent. I’ve written it up as bug(web): longpress keys with touch layout "modifier" are indistinguishable from same-ID keys without · Issue #11782 · keymanapp/keyman · GitHub.

If you’re wanting to prevent the special styling from being applied to longpress keys, you can probably use something based on :not() to prevent it from applying to them. As all longpress keys start with popup-, I imagine the following to be about the right component to add:

:not([id^='popup-'])

For example,

div.kmw-key.kmw-key-default:not([id^="popup-"])

would apply to all base keys, but not the longpress keys.

amadel · June 14, 2024, 6:54am

Many thanks! Problem solved.

Very useful explanations. Probably worth inserting somewhere in the documentation, so that people like me do not take up your precious time.

— Note: Email replies will be posted to the SIL Software Community Site —

| joshua_horton
June 14 |

| - |

amadel:

It does not work in the shift layer, even though in the shift layer the modifier of the accent keys is set to default.
Any ideas why this is happening?

Hello there! @Nyny brought this to my attention, as there are a few details here that are certainly less-than-intuitive.

One of the bigger factors: whenever a standard key has a custom-set layer property, its ID in HTML, which CSS references, is changed somewhat. If K_QUOTE is set to act as if on the default layer, the ID will end in K_QUOTE+default as a result.

Note the structure of your CSS selectors:

.phone div.kmw-key.kmw-key-default[id$='K_RBRKT'], .tablet div.kmw-key.kmw-key-default[id$='K_RBRKT']
  { background: yellow ; color: black ; }

This part:

[id$='K_RBRKT']

is looking for keys that end in K_RBRKT, with no appended +default.

For selectors:

^= - “starts with”
$= - “ends with”
*= - “contains”

Standard-key ID structure: <actual layer>-key ID (if modifier = (current layer))

Tack on +<modifier layer> if something is set for “Modifier” there.

The history on this goes back to bug(web): key-id aliasing results in issues for predictive text, recorder module · Issue #4617 · keymanapp/keyman · GitHub - predictive text suffers greatly if the same key ID appears twice in the same layer, just with different settings for “Modifier”. We needed a way to clearly distinguish between the two keys.

Longpress keys tack on popup- before all of that. But, there is one complicating factor - at present, they never tack on the +<modifier layer> portion! This is why the the setting didn’t affect whether or not the CSS was applied for longpress keys.

This is also something we’d consider a bug, so I’ll look into getting it fixed so that the +<modifier layer> part is more consistent.

joshua_horton · June 19, 2024, 9:04am

Glad this helped you! Also, thanks for the suggestion - we’ve now added content at the following two links to make this information more accessible in the future: