BUG|Flutter Text组件和国际化（二）

发现问题

现网发现有些玩家昵称显示异常，部分字符显示不出来：

经查这是一个Unicode为\u0655的阿拉伯字符——Arabic Hamza Below，属于Hamza其中一种表现形式。Hamza既可以单独显示，也可以变成变音符号和载体放在一起，下图贴出了部分阿拉伯字符集，红框圈起来的就是ء各种样式，本例的字符顾名思义就是显示在其他字符下方的Hamza。

定位原因

因为之前在 BUG|字体和国际化 遇到过也是某些字符显示不出来的情况，第一反应是先确认是否是字体引起的。实际上并不是，连在最简单的flutter demo上都无法显示出来，测试了下在不同平台上的展示情况，虽然这个字符显示位置不同但至少能在原生app上看到，于是带着这个疑惑看看Flutter是如何渲染文本的。

组件层

从Text组件开始，从build()可知其实是通过RichText组件完成的，且文本data被传到了TextSpan（继承InlineSpan）组件中。

class Text extends StatelessWidget {
  const Text(
    String this.data, {
    ...
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);
  ...
  @override
  Widget build(BuildContext context) {
    ...
    Widget result = RichText(
      ...
      text: TextSpan(
        style: effectiveTextStyle,
        text: data,
        children: textSpan != null ? <InlineSpan>[textSpan!] : null,
      ),
    );
    return result;
  }
}  

渲染层

接着看RichText是怎么处理text（TextSpan）的，会在createRenderObject()创建RenderParagraph时使用，这就是渲染文本的对象了。

class RichText extends MultiChildRenderObjectWidget {

  @override
  RenderParagraph createRenderObject(BuildContext context) {
    assert(textDirection != null || debugCheckHasDirectionality(context));
    return RenderParagraph(text,
    ...
    );
  }
}

绘制层

而RenderParagraph并不是直接处理TextSpan，而是通过TextPainter来管理。

class RenderParagraph extends RenderBox
    with ContainerRenderObjectMixin<RenderBox, TextParentData>,
             RenderBoxContainerDefaultsMixin<RenderBox, TextParentData>,
                  RelayoutWhenSystemFontsChangeMixin {

  RenderParagraph(InlineSpan text, {
    ...
  }) : assert(text != null),
       ...
       _textPainter = TextPainter(
         text: text,
        ...
       ) {
    addAll(children);
    _extractPlaceholderSpans(text);
  }
}

TextPainter里通过ParagraphBuilder生成了最终绘制文本的ui.Paragraph，并在paint就可以把文本在画布中draw出来了。

class TextPainter { 
  ui.Paragraph _createLayoutTemplate() {
    final ui.ParagraphBuilder builder = ui.ParagraphBuilder(
      _createParagraphStyle(TextDirection.rtl),
    ); 
    ...
    return builder.build()
  ..layout(const ui.ParagraphConstraints(width: double.infinity));
}

  ui.ParagraphStyle _createParagraphStyle([ TextDirection? defaultTextDirection ]) {
    return _text!.style?.getParagraphStyle(
      ...
    );
  }
  
  void paint(Canvas canvas, Offset offset) {
    ...
    canvas.drawParagraph(_paragraph, offset);
  }

实际上ParagraphBuilder（ui.Paragraph）大部分函数是在引擎层实现的空函数，这里不得不继续到Flutter Engine看看还有什么发现。

@pragma('vm:entry-point')
class Paragraph extends NativeFieldWrapperClass1 {
  @pragma('vm:entry-point')
  Paragraph._();
  bool _needsLayout = true;
  double get width native 'Paragraph_width';
  double get height native 'Paragraph_height';
  double get longestLine native 'Paragraph_longestLine';
  double get minIntrinsicWidth native 'Paragraph_minIntrinsicWidth';
  double get maxIntrinsicWidth native 'Paragraph_maxIntrinsicWidth';
  double get alphabeticBaseline native 'Paragraph_alphabeticBaseline';
  ...
}

引擎层

Flutter Engine 渲染文本的引擎是LibTxt（路径engine/third_party/txt/），该库基于许多其他库，如：

• Minikin：测量和布置文本
• ICU：帮助 Minikin 处理如文本分段
• HarfBuzz：帮助 Minikin 处理如选择合适的字体字形
• Skia ：绘制文本和装饰

#include "flutter/fml/logging.h" 
#include "font_collection.h" 
#include "font_skia.h" 
#include "minikin/FontLanguageListCache.h" 
#include "minikin/GraphemeBreak.h" 
#include "minikin/HbFontCache. h" 
#include "minikin/LayoutUtils.h" 
#include "minikin/LineBreaker.h" 
#include "minikin/MinikinFont.h" 
#include "third_party/skia/include/core/SkCanvas.h" 
#include "third_party/skia /include/core/SkFont.h" 
#include "third_party/skia/include/core/SkFontMetrics.h"
#include "third_party/skia/include/core/SkMaskFilter.h"
#include "third_party/skia/include/core/SkPaint.h" 
#include "third_party/skia/include/core/SkTextBlob.h" 
#include "third_party/skia/include/core/SkTypeface.h" 
#include "third_party/ skia/include/effects/SkDashPathEffect.h" 
#include "third_party/skia/include/effects/SkDiscretePathEffect.h" 
#include "unicode/ubidi.h" 
#include "unicode/utf16.h"

这里主要看下HarfBuzz库，检索阿拉伯语文本处理的相关文件，直接就看到本例中的字符\u0655，通过命名猜测把它当做一种组合字符，实际验证了如果这个字符出现在阿拉伯字符的后面，Flutter也能正常显示出来了。

解决办法

而本例中这种特殊符号应用于英文字符后面，由于是个性化昵称并没有实际含义，那是否还有办法解决呢？这里翻阅了下HarfBuzz的issue，找到一个同样是阿拉伯字符显示不出的问题：Vowels are not rendered correctly in some Persian/Arabic/Hebrew fonts，注意到了这条回复：

在 DejaVu Sans Mono 字体中，“非间距”变音符号被设计为具有非零的提前宽度。这大概是因为它是一种“等宽”字体，其中每个字形都应具有相同的宽度；这甚至适用于“非间距”字符。如果字体没有 GPOS 表——即没有特定的 OpenType 定位——那么这里的补丁将通过强制变音符号为零宽度来解决问题，而不管它们在字体中的度量。

参考这个解决办法，也引入“零宽空格”，相当于组合对象就是空格，果然可以显示出来了：

总结

有关字符显示异常相关文章持续汇总ing：

• 阿拉伯文异常：BUG|Flutter文本字符打点和国际化
• 泰文异常：BUG|Flutter Text组件和国际化
• 土耳其文异常： BUG|字体和国际化