Flutter Web HTML渲染器下RTL语言（波斯语）括号显示异常求助

问题重现 #

使用HTML渲染器（执行flutter run --web-renderer html）运行Flutter Web应用时，包含括号()的波斯语RTL文本会出现排版异常，括号及包裹内容错位；但用默认CanvasKit渲染器显示正常。测试代码如下：

const Text('You have pushed the button this (many) times:'),
const Text('You have pushed the (دکمه) this (many) times:'),
const Text('تعداد (دفعات) فشار دادن دکمه:', textDirection: TextDirection.rtl),
const Text('تعداد (دفعات) فشار (push) دکمه:', textDirection: TextDirection.rtl),

手动添加RTL/LTR Unicode标记仅能部分解决混合LTR内容（如push）的问题，无法彻底修复所有场景。

根本原因 #

HTML渲染器依赖浏览器原生文本布局引擎处理双向文本，而括号属于中性字符，其显示方向会被周围文本的上下文自动推断，在RTL与LTR文本混合时容易出现方向判断错误；CanvasKit是Flutter自研的渲染引擎，对双向文本的排版逻辑更精准，不会出现这类问题。

完整解决方案 #

1. 手动添加Unicode双向控制标记 #

通过强制指定括号内文本的方向，避免浏览器自动推断错误：

• 纯波斯语（RTL）内容：在括号内文本前后添加RLM（右向左标记，U+200F）
• 混合LTR内容（如英文push）：在LTR文本前后添加LRM（左向右标记，U+200E）

修改后的代码示例：

const Text('تعداد (\u200Fدفعات\u200F) فشار دادن دکمه:', textDirection: TextDirection.rtl),
const Text('تعداد (\u200Fدفعات\u200F) فشار (\u200Epush\u200E) دکمه:', textDirection: TextDirection.rtl),

2. 使用RichText拆分文本块 #

将不同方向的文本片段拆分为独立的TextSpan，明确指定每个片段的textDirection，让HTML渲染器能正确识别各部分的排版方向：

RichText(
  textDirection: TextDirection.rtl,
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: [
      const TextSpan(text: 'تعداد '),
      const TextSpan(text: '(دفعات)'),
      const TextSpan(text: ' فشار '),
      TextSpan(
        text: '(push)',
        textDirection: TextDirection.ltr,
      ),
      const TextSpan(text: ' دکمه:'),
    ],
  ),
)

3. 封装自定义RTL文本组件 #

如果需要频繁处理这类文本，可以封装一个工具组件，自动识别括号内的文本方向并添加对应处理逻辑，避免重复手动操作：

Widget RtlText(String text, {TextStyle? style}) {
  final regex = RegExp(r'\((.*?)\)');
  final parts = text.split(regex);
  final spans = <InlineSpan>[];

  for (int i = 0; i < parts.length; i++) {
    final part = parts[i];
    if (i % 2 == 0) {
      spans.add(TextSpan(text: part, style: style));
    } else {
      // 判断内容是否为RTL字符（波斯语Unicode范围）
      final isRtl = part.contains(RegExp(r'[\u0600-\u06FF]'));
      spans.add(TextSpan(
        text: isRtl ? '\u200F$part\u200F' : '\u200E$part\u200E',
        style: style,
        textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,
      ));
    }
  }

  return RichText(
    textDirection: TextDirection.rtl,
    text: TextSpan(children: spans),
  );
}

// 调用示例
RtlText('تعداد (دفعات) فشار (push) دکمه:')

验证 #

使用flutter run --web-renderer html运行修改后的代码，所有带括号的RTL文本均能正常显示，括号与内容排版无错位。

内容的提问来源于stack exchange，提问作者navid