Skip to content

[Impeller] Unwanted gaps between Arabic characters #147577

@jehadhmoudah

Description

@jehadhmoudah

Steps to reproduce

  1. Install Google Fonts package from pub.dev, I'm using google_fonts: ^6.2.1
  2. Copy the provided code and paste it in main.dart
  3. Run

Expected results

What I'm expecting is for the text to be rendered without any gaps between characters.

Actual results

I'm using the font family IBM Plex Sans Arabic for an app I'm working on, when using Skia, everything renders fine except for smaller text sizes, but when switching to Impeller, Impeller renders gaps between characters not just for smaller text sizes, but also for larger ones, and in some cases, the characters overlap each other's ends.

I don't know if it is noticeable or not, but if you analyze the two images provided, you're going to find that characters rendered with Skia are slightly bolder than characters rendered with Impeller.

I'm not sure if there's a way to make characters bolder across the whole app, but if there is, I don't think that this would be a viable solution, because it would make the UI look very heavy.

Note that this issue also appears when using other Arabic font families.

Code sample

Code sample
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: GoogleFonts.ibmPlexSansArabic().fontFamily,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Title"),
      ),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 12.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.labelSmall,
                textAlign: TextAlign.center,
              ),
              const Divider(),
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.labelMedium,
                textAlign: TextAlign.center,
              ),
              const Divider(),
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.labelLarge,
                textAlign: TextAlign.center,
              ),
              const Divider(),
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.titleSmall,
                textAlign: TextAlign.center,
              ),
              const Divider(),
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.titleMedium,
                textAlign: TextAlign.center,
              ),
              const Divider(),
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.titleLarge,
                textAlign: TextAlign.center,
              ),
              const Divider(),
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.headlineSmall,
                textAlign: TextAlign.center,
              ),
              const Divider(),
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.headlineMedium,
                textAlign: TextAlign.center,
              ),
              const Divider(),
              Text(
                'ولما كان تناسي حقوق الإنسان وازدراؤها قد أفضيا إلى أعمال همجية',
                style: Theme.of(context).textTheme.headlineLarge,
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Rendered with Skia, gaps between characters are barely noticeable
IMG_9674

Rendered with Impeller, notice the gaps between characters in smaller texts are very noticeable
IMG_9671

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.1.1 23B81 darwin-arm64, locale en-PS)
[✓] 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 2022.3)
[✓] VS Code (version 1.87.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: internationalizationSupporting other languages or locales. (aka i18n)a: typographyText rendering, possibly libtxte: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.19Found to occur in 3.19found in release: 3.22Found to occur in 3.22has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionslimpellerEngine binary size reduction. go/slimpellerteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions