Repository: flutter
Issue: Cannot properly apply colour to individual characters in Text.rich if the characters are not side by side (e.g. in Thai) on iOS/macOS platforms
Labels: platform-ios,framework,platform-mac,a: internationalization,dependency: skia,a: typography,a: desktop,has reproducible steps,P2,team-engine,triaged-engine,found in release: 3.16,found in release: 3.18

### Steps to reproduce

Create a Rich.text with TextSpans for a word that contains characters above or under a character (e.g. ไก่). Set a different colour for each character. In addition, on mobile web, the character is displayed separate.

### Expected results

The colour should be applied to each character individually.

### Actual results

The colour is applied vertically, so if another character is below, that colour is applied to the proceeding character.

### Code sample

<details open><summary>Code sample</summary>

```dart
class TextView extends StatelessWidget {
  const TextView({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
        body: Center(
      child: Text.rich(
        TextSpan(
          children: [
            TextSpan(
              text: 'ไ',
              style: TextStyle(color: Colors.red),
            ),
            TextSpan(
              text: 'ก',
              style: TextStyle(color: Colors.amber),
            ),
            TextSpan(
              text: '่',
              style: TextStyle(color: Colors.green),
            ),
          ],
        ),
        style: TextStyle(fontSize: 96),
      ),
    ));
  }
}
```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots</summary>

Incorrect, iOS or macOS:

![Simulator Screenshot - iPhone 15 - 2024-01-07 at 21 15 44](https://github.com/flutter/flutter/assets/964414/e38a400d-1884-4b74-a65b-943cb3b9b9fb)

Note: this issue exists regardless of whether Impeller is on or not.

Correct, on the Web (and Android):

</details>
<img width="612" alt="Screenshot 2024-01-07 at 19 55 16" src="https://github.com/flutter/flutter/assets/964414/8c050245-12cb-4dae-aa9a-0dea95989d9b">

On mobile Web:

![Simulator Screenshot - iPhone 15 - 2024-01-07 at 20 20 01](https://github.com/flutter/flutter/assets/964414/0b8089ce-c67e-4062-932c-e4d48ea84de0)

### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.5, on macOS 14.1.2 23B92 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] IntelliJ IDEA Community Edition (version 2023.2)
[✓] VS Code (version 1.85.1)
[✓] Connected device (4 available)
    ! Error: Browsing on the local area network for Lukasz’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

• No issues found!
```

</details>