0

My setup: Flutter v1.17.4, Mac OS X 10.15.4, locale en-US, Dart v2.8.4

In the Thai language, vowels can appear above and below consonants. In my Thai language learning app, I want to style a consonant differently than its associated vowel.

Using Flutter's RichText and TextSpan, I almost achieved this. But as the image below shows, there's a problem. The vowel thinks it is missing its associated consonant. As a result, the vowel renders with a dotted circle, where it expects the consonant to be. The consonant is in the preceding TextSpan.

How can I make Flutter render this Thai text, with a differently styled vowel and consonant, and without the dotted red circle?

Code that created the chars in the image below.

  RichText thaiConsonantAndVowelAbove(){
    return RichText(
        text: TextSpan(
            children: <TextSpan>[
              TextSpan(text: "ง", style: TextStyle(color: Colors.white, fontSize: 100)),
              TextSpan(text: "ู", style: TextStyle(color: Colors.red, fontSize: 100))
            ]
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(children: <Widget>[Expanded(child: thaiConsonantAndVowelAbove(), flex: 1)]);
  }

Thai vowel with unwanted dotted circle

devdanke
  • 1,309
  • 15
  • 27
  • did you use a Thai font? – dev001 Jul 08 '20 at 11:24
  • Thank you dev001! I'd been using Robotium because it displayed the Thai characters okay in normal situations. But it couldn't handle separating a related vowel and consonant in TextSpans. Using a Thai font works. If you add your comment as an answer, I'll be glad to accept it. Thanks again. – devdanke Jul 08 '20 at 17:08

1 Answers1

0

Thanks to dev001 for helping solve the problem. I did not know that a Thai font is required for some low level styling of Thai characters. Thai and non-Thai fonts can correctly display Thai characters in most situations. However, it seems that only Thai fonts can be used to correctly render a Thai string that is composed of several Flutter TextSpans, and when that string is split between a consonant and a vowel (or tone mark) it must appear in the same space as the consonant.

TLDR: Use a Thai font when you want to style every part of Thai text.

If dev001 submits their comment as an answer, I'll mark it as correct.

Google has graciously made many Thai fonts available for free: https://fonts.google.com/?subset=thai

devdanke
  • 1,309
  • 15
  • 27
  • Did you manage to figure out how to independently style a tone mark while maintaining it's position above a vowel? For example trying to style the tone mark: - ้ independently in the word ลิ้น will lose it's position and will be overlapping the vowel: - ิ – Hayden Campbell Dec 05 '22 at 03:44
  • Hi Hayden, Yes, the code approach listed in my question worked **if and only if** used with an actual Thai font. Not a Western font that can displays Thai chars. (I'm guessing a real Thai font knows how to place vowels and tone marks in the correct sub character position. I'm no Unicode expert). My styling was color only, which doesn't affect size. What style are you applying? May I suggest you try my example to see if a color only style change works? See the link to Google Thai fonts, which you'll need to use in your app. – devdanke Dec 05 '22 at 12:40