Arabic Quran diacritics problem

[dahabit]

Hello Dartisans,

There is a problem with Flutter using a custom font "KFGQPC Uthmanic Script HAFS " with Arabic Text that contains diacritics like Quran

The text with the same font on ios simulator using Xcode is working perfectly

on the other hand, when using flutter the same Text 'يَسۡ‍َٔلُونَ' with the same font is not displayed correctly

this is known issue with Android, I don't know why it appears with flutter although Flutter is using different text engine
Font
The font that used with these two examples is built specially for that and it has good support for that type of writing

http://fonts.qurancomplex.gov.sa/?page_id=35
Direct download link
http://fonts.qurancomplex.gov.sa/download/UthmanicHafs1Ver09Font.zip

the Hex code for the word is
يَسۡ‍َٔلُونَ (25 bytes): "\u64A\u64E\u633\u6E1\u200D\u654\u64E\u644\u64F\u648\u646\u64E"

the diacritics moved to the begining off the letter not the end

Steps to Reproduce & Examples

Xcode sample

Source Code
https://github.com/dahabit/xcode_arabic_test

Flutter Example

Source Code
https://github.com/dahabit/flutter-arabic-diacritics-test

[jason-simmons]

Flutter text rendering on Android does use some of the same libraries (Skia, HarfBuzz, FreeType) that are used by the Android UI framework

[dahabit]

@jason-simmons yeah, I heard that, I thought that Android using something else and this mean that issue will be with Flutter and may be the fuchsia os :(

[dahabit]

First I would like to thank @slightfoot for his help

second, this what we get until now

1- the problem how Skia engine deal with Arabic joining and render the letters in a wrong way & apple use another closed source solution for that
the problem with u200D if we replace it with u0640 everything works perfectly

for more info about Arabic joining check here "Arabic Cursive Joining"
https://www.unicode.org/versions/Unicode10.0.0/ch09.pdf

I'm now working to collect all words that have the similar problem to find the best solution for that

[slightfoot]

These two issues might help/be related:

• Should pass the Locale from Localizations to Text/RichText/etc to painting.TextStyle to ui.TextStyle #16408 - Should pass the Locale from Localizations to Text/RichText/etc to painting.TextStyle to ui.TextStyle
• Pass Text/RichText locale along to RenderParagraph #17879 - Pass Text/RichText locale along to RenderParagraph

This issue should be re-retested when the above is merged.

[zoechi]

@dahabit is this still an issue.
What @slightfoot linked to seems to be fixed.

[slightfoot]

Needs retesting, but I think is a bug in the unicode parsing.

[dahabit]

Thanks, @zoechi for your reply and sorry for the late response the issue still not fixed
I tested it with the latest update on dev channel today 15-9-2018

[✓] Flutter (Channel dev, v0.5.8, on Mac OS X 10.13.6 17G65, locale en-EG)

[Hixie]

This is probably an issue in HarfBuzz. cc @behdad

[behdad]

Ugh. This is a true hack of a font & text encoding. But since Uniscribe also produces the Apple result, I'll find a way to match it in HarfBuzz. cc @khaledhosny

[behdad]

Khaled: I think what's happening is we are jumping over the joiner and attach hamza somwhere the font doesn't expect...

[behdad]

Khaled: I think what's happening is we are jumping over the joiner and attach hamza somwhere the font doesn't expect...

Whereas the font expects, and other engines do, that the hamza be left there simply because it cannot jump over the ZWJ to find a base to attach to...