We have this problem using french :
- On = Activer
- Off = Désactiver
Theses words are to large to be used in a square button (see screenshot)
I think other language may have this problem too.
Here is some solutions :
- Use power On / Off symbols instead: | and O (see https://en.wikipedia.org/wiki/Power_symbol)
- Keep On / Off in all language
- Instead of using the on / off lang string, create and use a specific on / off strings (ex. switch.on, switch.off) to allow local translation of this. It may be also be used to create specific local strings for admin of user instance to differentiate this strings from other on / off strings.
- Adapt the font size to fit the container width (not possible in pure css) See :
- Use a standard checkbox (half joking!)