On-screen/mobile key with bitmap

I have a challenge with some keys on the on-screen and mobile layouts being legible. I thought using bitmaps instead of text would help.

  1. Does the format (png, bmp, tif, jpg) make any difference? (whichever I use seems to require the same number of lines in Code.)
  2. How can I get the mobile layout to use the bitmap that the on-screen layout is using?

Bitmaps will tend to give a poorer result over time – they don’t scale well so on some screens they will always look a bit rough.

Mobile layouts don’t technically support bitmaps directly; you can include bitmaps or SVG (scalable images, e.g. use Inkscape to create) with some clever use of CSS and embedding of the images with base64 encoding – if you are desperate to try this I can scrape together a sample; it’s not entirely trivial and does run the risk of being somewhat less forward-compatible.

What are the issues with the legibility? Can you include screen shots? On mobile devices, you can control the relative font size to enlarge it, and you can always include a custom font on all platforms – for some languages we’ve actually created a custom font with specific metrics that make it larger just for the on screen keyboard. Although that font is not usually appropriate for general use, it works well for the on screen keyboard.

I’ve got a blog post on my personal blog site about a slightly different case for Lao which may be of interest as it indirectly addresses your issue: https://marc.durdin.net/2015/01/how-to-rendering-combining-marks-consistently-across-platforms-a-long-story/