-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Steps to reproduce
- Install Google Fonts package from pub.dev, I'm using google_fonts: ^6.2.1
- Copy the provided code and paste it in main.dart
- 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
Rendered with Impeller, notice the gaps between characters in smaller texts are very noticeable
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
Type
Projects
Status