Arabic/Kurdish text rendering issue on web only

[evan8133]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

Hello everyone,

I'm having a problem that I need help with. I'm using Arabic/Kurdish text in a simple Text widget, and it works perfectly on mobile. However, when I try it on the web platform, things go wrong.

To be honest, I'm not sure why this is happening. Take a look at the example I've shown in "Actual Result 1" below. You'll see that the issue mostly affects the Text widget, while the app bar seems to be fine.

Expected results

Expected result 1
Expected result 2

As the images above shows the app running on mobile platform and there is no issues.

Actual results

Actual result 1
Actual result 2

But im getting bold texts sometime worse than just bold text as you can see in the images below:

Other cases 1
Other cases 2

Code sample

Code for the Expected/Actual result 1

import 'package:flutter/material.dart';
import 'package:kleely/screens/admin/admin_drawer.dart';

class AdminMainScreen extends StatelessWidget {
  const AdminMainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const AdminDrawer(),
      appBar: AppBar(
        title: const Text('سەرپەرشتیار'),
      ),
      body: const Center(
        child: Text('سەرپەرشتیار'),
      ),
    );
  }
}

Code for the Other cases 1

import 'package:flutter/material.dart';

class SubscriptionOverlayBanner extends StatelessWidget {
  final VoidCallback onPressed;

  const SubscriptionOverlayBanner({super.key, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      height: screenHeight * 0.2,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: double.infinity,
          height:
              MediaQuery.of(context).size.height * 0.2, // 20% of screen height
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.primary.withOpacity(0.9),
            borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
          ),
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                'بەشداری هیچ پلانێکت نییە تکایە پلانێک دیاری بکە',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: onPressed,
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                child: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                  child: Text("بەشداری پالن بکە", style: TextStyle(fontSize: 16)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.0, on macOS 14.0 23A5328b darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.81.1)
[✓] Connected device (3 available)
    ! Error: Arivan’s iPhone is busy: Fetching debug symbols for Arivan’s iPhone. Xcode will continue when Arivan’s iPhone is finished. (code -10)
[✓] Network resources

[huycozy]

Hi @evan8133
You are seeing the issue on mobile browser that uses HTML renderer. This issue also appears with English text as well and is a known issue at #89919 (and a similar one: #80103)

Closing this as a duplicate. Please follow up on those issues for updates. Thanks!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.