flutter / flutter/flutter

Arabic Text Rendering Issue with Specific Letter in Flutter

Open
#143,975 3 comments 1 reaction 0 assignees View on GitHub
a: internationalization a: typography found in release: 3.19 found in release: 3.20 framework has reproducible steps P2 team-engine triaged-engine
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

## Environment

**Flutter version**: Flutter 3.19.1 • channel stable
**Simulator**: XCode
**Target Platform and Version**: iOS 17
**Devices Tested**: iPhone 15

--------

Hello everyone!

I've encountered a rendering issue in my Flutter application where a specific Arabic letter/ligature (الإ) does not display correctly. This problem occurs with certain fonts, such as Google's Lateef and Scheherazade New. Interestingly, the issue is not present when using the Amiri font, where the text renders as expected. A while ago, everything was working fine with Lateef, and I'm unsure what changes might have caused this issue to arise now.

### Expected results

The expected behavior is for the Arabic letter/ligature to render correctly in the application, similar to how it renders when using the Amiri font or when viewed in web browsers and other platforms outside of Flutter.

This is Scheherazade New on Google's website;

‏لقطة الشاشة ٢٠٢٤-٠٢-٢٣ في ١٢ ٤٤ ٠٤ ص

### Actual results

When using the Lateef and Scheherazade New fonts, the specific Arabic letter/ligature appears incorrectly (parts of the letter are not disconnected when they should be. This is despite these fonts supporting the letter correctly in other environments and platforms.

‏لقطة الشاشة ٢٠٢٤-٠٢-٢٣ في ١٢ ٤٢ ٥٩ ص

### Code sample

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Arabic Text Rendering Issue Demo'),
),
body: FontTestWidget(),
),
);
}
}

class FontTestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Define the style for each font for consistency
TextStyle textStyle(double size) => TextStyle(fontSize: size);

return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Using Lateef Font:', style: textStyle(24)),
Text(
'الآ',
style: textStyle(24).copyWith(fontFamily: 'Lateef'),
),
Divider(),
Text('Using Scheherazade New Font:', style: textStyle(24)),
Text(
'الآ',
style: textStyle(24).copyWith(fontFamily: 'Scheherazade New'),
),
Divider(),
Text('Using Amiri Font (for comparison):', style: textStyle(24)),
Text(
'الآ',
style: textStyle(24).copyWith(fontFamily: 'Amiri'),
),
],
),
);
}
}
```

### Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

### Logs

‏لقطة الشاشة ٢٠٢٤-٠٢-٢٣ في ١٢ ٤٢ ٥٩ ص

### Flutter Doctor output

```console
flutter --disable-analytics

If you opt out of telemetry, an opt-out event will be sent, and then no further
information will be sent. This data is collected in accordance with the Google
Privacy Policy (https://policies.google.com/privacy).

macbookpro@pc-239 xxroject % flutter doctor -v
[✓] Flutter (Channel stable, 3.19.1, on macOS 14.3 23D56 darwin-arm64, locale ar-JO)
• Flutter version 3.19.1 on channel stable at /Users/macbookpro/Documents/Arabicxx/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision abb292a07e (2 days ago), 2024-02-20 14:35:05 -0800
• Engine revision 04817c99c9
• Dart version 3.3.0
• DevTools version 2.31.1

[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.15.0

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.86.0)
• VS Code at /Users/macbookpro/Downloads/Visual Studio Code.app/Contents
• Flutter extension version 3.82.0

[✓] Connected device (3 available)
• iPhone 15 Pro Max (mobile) • A1F7A009-F3EC-4B51-9E6E-C505219D1A89 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.3 23D56 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.57

[✓] Network resources
• All expected network resources are available.

! Doctor found issues in 1 category.
The Flutter CLI developer tool uses Google Analytics to report usage and diagnostic
data along with package dependencies, and crash reporting to send basic crash
reports. This data is used to help improve the Dart platform, Flutter framework,
and related tools.

Telemetry is not sent on the very first run. To disable reporting of telemetry,
run this terminal command:

flutter --disable-analytics

If you opt out of telemetry, an opt-out event will be sent, and then no further
information will be sent. This data is collected in accordance with the Google
Privacy Policy (https://policies.google.com/privacy).
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.