Font not rendering in some cases

[HakkyuKim]

Font not rendering issues were noticed in:

• Unicode and CJK are not displayed correctly. #39
• Text not rendering on samsung galaxy active watch 2 flutter-tizen#72

Even with some patches, the problem is not fully fixed. I tried to solve the problem, but I'm kind of stuck. I hope someone could give me some advice. Or, you could try to fix it if you're interested.

Using fontconfig

Problem: Using fontconfig matches wrong font style for English language on wearable devices.

On wearable devices, English text is matched to some other language font that doesn't contain glyphs for Latin characters. Skia doesn't get the font information from running fontconfig executables, it uses fontconfig apis to parse the configuration file itself. The problem happens only when system font is set to "default"(SamsungOneUI).

Fontconfig configuration file is in read-only file system: /etc/fonts, so maybe I shouldn't be changing this file directly, but change the skia code that parses it?

Wearable device:

# English text should be matched to "SamsungOneUI", but it gets matched to some other font in this list:

Fonts selected by "SamsungOneUI", 15 styles selected.
I/ConsoleMessage( 2451): family name for font is...: BreezeSansMyanmar
I/ConsoleMessage( 2451): family name for font is...: SamsungOneUISCN
I/ConsoleMessage( 2451): family name for font is...: BreezeColorEmoji
I/ConsoleMessage( 2451): family name for font is...: SamsungOneUIEthiopic
I/ConsoleMessage( 2451): family name for font is...: BreezeSansGeorgian
I/ConsoleMessage( 2451): family name for font is...: BreezeSansJapanese
I/ConsoleMessage( 2451): family name for font is...: BreezeSansKhmer
I/ConsoleMessage( 2451): family name for font is...: SamsungOneUITCN
I/ConsoleMessage( 2451): family name for font is...: SECEmoji
I/ConsoleMessage( 2451): family name for font is...: SamsungOneUIEthiopic
I/ConsoleMessage( 2451): family name for font is...: BreezeSansGeorgian
I/ConsoleMessage( 2451): family name for font is...: SamsungOneUIKorean
I/ConsoleMessage( 2451): family name for font is...: SamsungOneUI
I/ConsoleMessage( 2451): family name for font is...: SamsungOneUIKorean
I/ConsoleMessage( 2451): family name for font is...: SamsungOneUI

On other targets, it works fine.

TV device:

Mobile device:

Wearable emulator:

TV emulator:

Mobile emulator:

Not using fontconfig

If we don't use fontconfig(the current engine build), characters that use custom fonts can't use system fallback fonts if those characters don't have matching glyphs in the custom font files.

Wearable device:

TV device:

For some reason, the TV device I have can't run the app at the moment.

mobile device:

Wearable emulator:

TV emulator:

Mobile emulator:

Let me know if you need more details, or want to test with the app in the image.

[bwikbs]

Environment variables
FONTCONFIG_FILE is used to override the default configuration file.
FONTCONFIG_PATH is used to override the default configuration directory.
FONTCONFIG_SYSROOT is used to set a default sysroot directory.
FC_DEBUG is used to output the detailed debugging messages. see Debugging Applications section for more details.
FC_DBG_MATCH_FILTER is used to filter out the patterns. this takes a comma-separated list of object names and effects only when FC_DEBUG has MATCH2. see Debugging Applications section for more details.
FC_LANG is used to specify the default language as the weak binding in the query. if this isn't set, the default language will be determined from current locale.
FONTCONFIG_USE_MMAP is used to control the use of mmap(2) for the cache files if available. this take a boolean value. fontconfig will checks if the cache files are stored on the filesystem that is safe to use mmap(2). explicitly setting this environment variable will causes skipping this check and enforce to use or not use mmap(2) anyway.
SOURCE_DATE_EPOCH is used to ensure fc-cache(1) generates files in a deterministic manner in order to support reproducible builds. When set to a numeric representation of UNIX timestamp, fontconfig will prefer this value over using the modification timestamps of the

How about avoiding the problem by using the following environment variables?

FlutterDesktopEngineRef FlutterDesktopRunEngine(
    const FlutterDesktopEngineProperties& engine_properties,
    bool headed) {
  putenv((char*)"FONTCONFIG_PATH=/etc/mong_fonts/local.conf");
  putenv((char*)"FONTCONFIG_FILE=/etc/mong_fonts/");

I tried to make it simply, but it didn't work well, so I just leave an idea.

[HakkyuKim]

@bwikbs
Thanks for the idea! I'll look into this.

[bwikbs]

update 🆙
Confirm that fontconfig setting is changed with the following code.

FlutterDesktopEngineRef FlutterDesktopRunEngine(
    const FlutterDesktopEngineProperties& engine_properties,
    bool headed) {
  putenv((char*)"FONTCONFIG_PATH=:/home/owner/apps_rw/mong_fonts/");
  putenv((char*)"FONTCONFIG_FILE=fonts.conf");
  StartLogging();

we need to change smack as follows to read

chsmack -a '_' /home/owner/apps_rw/mong_fonts/* && chsmack -a '_' /home/owner/apps_rw/mong_fonts/conf.d/*

I think the next part of config make the problem.

	<alias binding="strong">
		<family>SamsungOneUI</family>
		<prefer>
			<family>SamsungOneUI</family>
			<family>BreezeColorEmoji</family>
			<family>SECEmoji</family>
			<family>SamsungOneUIKorean</family>
			<family>SamsungOneUISCN</family>
			<family>SamsungOneUITCN</family>
			<family>BreezeSansJapanese</family>
			<family>BreezeSansHindi</family>
			<family>BreezeSansBengali</family>
			<family>SamsungOneUIEthiopic</family>
			<family>BreezeSansGeorgian</family>
			<family>BreezeSansGujarathi</family>
			<family>BreezeSansKannada</family>
			<family>BreezeSansKhmer</family>
			<family>BreezeSansMalayalam</family>
			<family>BreezeSansMyanmar</family>
			<family>BreezeSansOriya</family>
			<family>BreezeSansPunjabi</family>
			<family>BreezeSansSinhala</family>
			<family>BreezeSansTamil</family>
			<family>BreezeSansTelugu</family>
			<family>BreezeSansMeeteiMayek</family>
			<family>BreezeSansTibetan</family>
			<family>SamsungOneUIOlChiki</family>
			<family>BreezeSansArmenian</family>
			<family>SamsungOneUILao</family>
			<family>BreezeSansThai</family>
			<family>SamsungOneUIArabic</family>
			<family>SamsungOneUIHebrew</family>
			<family>SamsungOneUIFallback</family>
		</prefer>
	</alias>

Without looking at the font, I don't know the exact cause yet... I'm thinking of just throwing away all the problematic parts. like this:

	<alias binding="strong">
		<family>SamsungOneUI</family>
		<prefer>
			<family>SamsungOneUI</family>
			<family>SamsungOneUIFallback</family>
		</prefer>
	</alias>

Or we just use 99-tizen.conf file from platform image. This seem to be ok...

[bwikbs]

update 🆙
I finally understand why it goes wrong! Plz, Forget what I suggested before. I guess It's not right way.
Here's the problematic part.

void FontCollection::SortSkTypefaces(
    std::vector<sk_sp<SkTypeface>>& sk_typefaces) {
  std::sort(
      sk_typefaces.begin(), sk_typefaces.end(),
      [](const sk_sp<SkTypeface>& a, const sk_sp<SkTypeface>& b) {
        SkFontStyle a_style = a->fontStyle();
        SkFontStyle b_style = b->fontStyle();

        int a_delta = std::abs(a_style.width() - SkFontStyle::kNormal_Width);
        int b_delta = std::abs(b_style.width() - SkFontStyle::kNormal_Width);

        if (a_delta != b_delta) {
          // If a family name query is so generic it ends up bringing in fonts
          // of multiple widths (e.g. condensed, expanded), opt to be
          // conservative and select the most standard width.
          //
          // If a specific width is desired, it should be be narrowed down via
          // the family name.
          //
          // The font weights are also sorted lightest to heaviest but Flutter
          // APIs have the weight specified to narrow it down later. The width
          // ordering here is more consequential since TextStyle doesn't have
          // letter width APIs.
          return a_delta < b_delta;
        } else if (a_style.width() != b_style.width()) {
          // However, if the 2 fonts are equidistant from the "normal" width,
          // just arbitrarily but consistently return the more condensed font.
          return a_style.width() < b_style.width();
        } else if (a_style.weight() != b_style.weight()) {
          return a_style.weight() < b_style.weight();
        } else {
          return a_style.slant() < b_style.slant();
        }
        // Use a cascade of conditions so results are consistent each time.
      });
}

In the case of a problem, our target consists of fonts that contain an exclusive language, and the wrong font is selected through this sorting.

Now that we know the cause, let's think about a patch. 😄

[bbrto21]

@HakkyuKim
Last night @bwikbs and I made some progress.
We found that when choosing the most closest font using a matched font family, it was missing to ensure that the font had the glyph. I think that if we fix this, we can re-enable the font-config and we can revert patches related to this that tried to fix this issue

[bbrto21]

#106 (comment)

[bbrto21]

#106 (comment)

I think we're getting close to the answer, let me do further analysis

[bbrto21]

#106 (comment)

This is the case where the first character to be matched in the process of creating the text Run is a special character.

I think the essence of this problem is that algorithms related to the font family assumes that the character coverage(or range) of the font family and the character expression coverage(or range) of individual fonts in font family are the same. and unfortunately, fonts belonging to SamsungOneUI(which we want to use as the default font family) have different character coverage. Therefore, fonts sometimes fail to render when using SamsungOneUI.

Consequently, there are two obvious problems when using the SamsugOneUI.
The first problem is, that as is already known, not to check the presence of glyphs when matching the character with the font in the font family.
The second problem is that if another font family is not selected, the algorithm re-use the already selected font, but it also not check the presence of glyphs

In my opinion, SamsungOneUI is absolutely not available on the current implementations unless we further develop the algorithm related to this font family belonging to a third party.

Please see this implementation to understand more about this issue

[bbrto21]

In my opinion, SamsungOneUI is absolutely not available on the current implementations unless we further develop the algorithm related to this font family belonging to a third party.

I have a few ideas, so I'll try.

[bwikbs]

@bbrto21 Thanks for the detailed analysis. 👍 I came up with an idea based on your analysis.
This caches the glyphs used to match font families and uses them when selecting fonts.
I'd love to hear your opinion.