Skip to content

[Web Canvaskit]Arabic text has an unexpected linebreak #103846

Description

@navaronbracke

In Flutter 3.0 there are text rendering issues for Arabic text in some cases.

Note for triage: I reproduced it on Dartpad with Flutter 3.0, as I am still on Flutter 2.10.4 and could not test it locally on a device.
I will only be able to migrate to Flutter 3.0 in the next week or two, while I internally await any hotfixes to the stable release.
Therefore I cannot give any meaningful output for flutter doctor -v for Flutter 3.0.

The original report came from a discussion on the Flutter Discord.

Steps to Reproduce

  1. flutter create myapp
  2. Replace the code in main.dart with the code sample
  3. flutter run
  4. The text renders in the middle of the screen, but in two lines.

Expected results: The Arabic text should have been rendered on one line.

Actual results: The Arabic text renders with a line break in the middle of the text.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Center(
        child: Text(
          'ٱلْرَّحْمَـانُ'
        ),
      ),
    );
  }
}
Details

Dartpad output

Arabic_discord

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work lista: internationalizationSupporting other languages or locales. (aka i18n)a: typographyText rendering, possibly libtxtdependency: skiaSkia team may need to help use: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webfound in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer version

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions