We are working on an app that requires RTL and LTR language text on the same screen, often in the same sentence, rendered using custom fonts. This poses several non-trivial problems:

  1. The design uses different custom fonts for each of the LTR and RTL languages. If we use the LTR font, the RTL text doesnt look good and vice versa.
  2. RTL fonts have greater line heights than LTR fonts so if the line height is adjusted for RTL, it gets messed up in LTR and vice versa.

One suggestion is to use text markup for language boundaries in multiline text. Then based on markup we will use the equivalent of <span>s in text labels and apply a custom font to each span with custom line height. This sounds like a solution that will require significant text processing on the device and may not be portable, so the questions are:

  1. Has any one successfully tried this approach for mixed-language text rendering?
  2. Are there any other suggestions to render mixed language text on mobile devices?

Related posts

Recent Viewed