發(fā)現(xiàn)問題

現(xiàn)網(wǎng)發(fā)現(xiàn)有些玩家昵稱顯示異常，部分字符顯示不出來：

經(jīng)查這是一個Unicode為\u0655的阿拉伯字符——Arabic Hamza Below，屬于Hamza其中一種表現(xiàn)形式。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()創(chuàng)建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）大部分函數(shù)是在引擎層實現(xiàn)的空函數(shù)，這里不得不繼續(xù)到Flutter Engine看看還有什么發(fā)現(xiàn)。

@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庫，檢索阿拉伯語文本處理的相關(guān)文件，直接就看到本例中的字符\u0655，通過命名猜測把它當做一種組合字符，實際驗證了如果這個字符出現(xiàn)在阿拉伯字符的后面，F(xiàn)lutter也能正常顯示出來了。

解決辦法

而本例中這種特殊符號應用于英文字符后面，由于是個性化昵稱并沒有實際含義，那是否還有辦法解決呢？這里翻閱了下HarfBuzz的issue，找到一個同樣是阿拉伯字符顯示不出的問題：Vowels are not rendered correctly in some Persian/Arabic/Hebrew fonts，注意到了這條回復：

在 DejaVu Sans Mono 字體中，“非間距”變音符號被設計為具有非零的提前寬度。這大概是因為它是一種“等寬”字體，其中每個字形都應具有相同的寬度；這甚至適用于“非間距”字符。如果字體沒有 GPOS 表——即沒有特定的 OpenType 定位——那么這里的補丁將通過強制變音符號為零寬度來解決問題，而不管它們在字體中的度量。

參考這個解決辦法，也引入“零寬空格”，相當于組合對象就是空格，果然可以顯示出來了：

總結(jié)

有關(guān)字符顯示異常相關(guān)文章持續(xù)匯總ing：

• 阿拉伯文異常：BUG|Flutter文本字符打點和國際化
• 泰文異常：BUG|Flutter Text組件和國際化
• 土耳其文異常： BUG|字體和國際化