I had an attempt at this, but there were two problems:

1. When the sub labels are centered, the dot in the letter "i" overlaps slightly with the "8" above it. Probably need more vertical padding between the labels? Might be worse for other languages.

2. I tried just centering the sub-labels, but it doesn't work in some cases. For example, the "A" key is not in the center of its div. The sub label needs to be placed in the same way as the "A" key, but I think the sub label div is a sibling of the key label div. Maybe the sub label div should be a child of the key label div?

hmm, i didn't notice it's centered in floating, interesting.

for the overlap issue you mentioned, i guess we'll need to adjust font-size a little.

for 'A' key, i guess it's because it takes extra width.

IMO I don't think centering the sub labels is a good idea. It can cause problems in some languages (e.g. the Myanmar keyboard) because the glyphs are quite tall. I don't think we do this on Android either right? Can we talk to UX about this?

Thank you Darren for all the info and advice.

I just talked to UX, they share the same point and prefer to keep it consistent between dock and floating.

Spec will be updated later.

Thanks Li!

Sorry, just changing the label :P (assuming we didn't change anything).