[Web][HTML] Add mirrored characters support for RTL languages

[bleroux]

Description

Handling RTL text in the HTML renderer was introduced by #26811.

It seems that there is a missing piece related to mirrored characters (see https://www.w3.org/International/articles/inline-bidi-markup/uba-basics#mirroring).

This PR adds this feature by relying on the HTML “dir” attribute.

Before/after

Here is a simplified sample (compared to the one in flutter/flutter#108431) to illustrate the issue:

Code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.deepPurple,
      body: Center(
        child: Text(
          "(1)",
          textDirection: TextDirection.rtl,
          style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold, color: Colors.white),
        ),
      ),
    );
  }
}

Before (using HTML Renderer):

After (using HTML Renderer):

Implementation choice

@mdebbar
I was not able to figure out if there is already some web_ui code to handle mirrored characters.
So the solution I choosed is to rely on the HTML dir attribute and apply it to “flt-span” which is created for each text fragment (adding it only when a text fragment direction is RTL).

Related Issue

Fixes: flutter/flutter#108431

Tests

Adds 1 test.

[flutter-dashboard]

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

Changes reported for pull request #39162 at sha 996c681

[mdebbar]

The PR looks good to me. Thanks for contributing this fix!

There are some golden triage issues (bug: https://bugs.chromium.org/p/skia/issues/detail?id=13907). Let's wait a bit to see what the Skia team says. I'll triage them later.

[bleroux]

The PR looks good to me. Thanks for contributing this fix!

There are some golden triage issues (bug: https://bugs.chromium.org/p/skia/issues/detail?id=13907). Let's wait a bit to see what the Skia team says. I'll triage them later.

Great! I was trying to figure out if my PR broke those golden and noticed all golden add this message 'Computing closest positive and negative image. Check back later.'. It might be related to the Tree being currently broken and some golden are stuck?

[mdebbar]

It might be related to the Tree being currently broken and some golden are stuck?

It's not related to tree status. This is a bug in the Gold system where some images lose their triage status after a while.

[harryterkelsen]

LGTM