发现问题
现网发现有些玩家昵称显示异常，部分字符显示不出来：
经查这是一个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/），该库基于许多其他库，如：
#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|字体和国际化
