[TIMOB-23114] iOS: Fonts issues on iOS 9

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Duplicate
Resolution Date	2017-08-13T19:19:31.000+0000
Affected Version/s	Release 5.2.0
Fix Version/s	n/a
Components	iOS
Labels	breaking-change, bug, fontweight, suggestion
Reporter	Khalil Sarabey
Assignee	Hans Knöchel
Created	2016-03-26T05:09:25.000+0000
Updated	2018-08-06T17:41:12.000+0000

Description

I'm using the latest SDK but this issue has been there since the release of San Francisco font.

First of all, the semibold weight doesn't work, it renders a normal (regular) font (I think it would be a good idea for Titanium to support more weights, this is very limited for people who care a lot about UI) Second thing, the system font on iOS (San francisco) is a dynamic font, it uses custom tracking for different font sizes, this is also not working, the tracking is always 0. Even when I try to embed the font and use it as a custom font, all font weights work but none of the tracking is applied which causes a not so good font display. I don't know if this helps, but if you want to see the difference between properly rendered fonts and wrongly rendered ones, you can try using any constant of the textStyle, they render perfectly well.

Attachments

File	Date	Size
Simulator Screen Shot Mar 26, 2016, 6.58.03 AM.png	2016-03-26T05:09:28.000+0000	41383

Comments

Hans Knöchel 2016-03-26

Hey there! So did this work on 5.1.2.GA (earlier versions)? Just want to troubleshoot as much as possible before further investigations.

Hans Knöchel 2016-03-26

The issue is valid. Our current font proxy does not support semibold, light, black etc fontWeights. iOS 8.2 introduced the following constants:

   UIKIT_EXTERN const CGFloat UIFontWeightUltraLight NS_AVAILABLE_IOS(8_2);
   UIKIT_EXTERN const CGFloat UIFontWeightThin NS_AVAILABLE_IOS(8_2);
   UIKIT_EXTERN const CGFloat UIFontWeightLight NS_AVAILABLE_IOS(8_2);
   UIKIT_EXTERN const CGFloat UIFontWeightRegular NS_AVAILABLE_IOS(8_2);
   UIKIT_EXTERN const CGFloat UIFontWeightMedium NS_AVAILABLE_IOS(8_2);
   UIKIT_EXTERN const CGFloat UIFontWeightSemibold NS_AVAILABLE_IOS(8_2);
   UIKIT_EXTERN const CGFloat UIFontWeightBold NS_AVAILABLE_IOS(8_2);
   UIKIT_EXTERN const CGFloat UIFontWeightHeavy NS_AVAILABLE_IOS(8_2);
   UIKIT_EXTERN const CGFloat UIFontWeightBlack NS_AVAILABLE_IOS(8_2);

We should replace the current WebFont implementation (which is responsible for setting all font-specifications) with a newer, generic solution that used the above constants to determine the font-weight. But since that is a major task and the above API's are only available in iOS 8.2 and later and we still support iOS 7, this task needs to be shifted to at least the next major release, when we decide to increase the minimum iOS version to iOS 8.x. Demo code:

   var win = Ti.UI.createWindow({
     backgroundColor : "#fff",
     layout: "vertical"
   });
   var label1 = Ti.UI.createLabel({
     text : "This is a normal font",
     top: 50,
     left: 50,
     font: {
         fontSize: 15
     }
   });
   var label2 = Ti.UI.createLabel({
     text : "This is a semibold font",
     left: 50,
     font: {
         fontWeight: "semibold",
         fontSize: 15
     },
     top: 10,
   });
   var label3 = Ti.UI.createLabel({
     text : "This is a bold font",
     left: 50,
     font: {
         fontWeight: "bold",
         fontSize: 15
     },
     top: 10
   });
   
   win.add([label1,label2,label3]);
   win.open();

Khalil Sarabey 2016-03-26

Hey Hans ! The issue is valid on 5.1.2.GA also, actually it's valid with all SDKs that supported iOS9. So in that case the solution would be to use the default textStyle or maybe create a module to solve this issue? I'm thinking hyperloop to use the native UIFont and UILabel, but I still haven't tried hyperloop and I have no idea how it works! Thanks for your reply and help!
Khalil Sarabey 2016-03-26

By the way, apple stopped supporting iOS 7 in 2014, I don't think you guys should worry about or support it anymore... Just a thought :)
Hans Knöchel 2016-03-27

Hey [~khalilsarabey], thanks for your thoughts! I will take a closer look on this. And as you may know, changing a minimum SDK version is always a struggle, because people have their targets which they don't want to change. But I'm with you, changing the version would ease a lot of stuff.
Hans Knöchel 2017-05-07

Hey [~khalilsarabey]! Coming back to this issue, I found a way to fix the semibold values, as well as using the correct weight for bold font-weights (see [this example](https://abload.de/img/simulatorscreenshot070tswd.png) on how it looks). Are you ok with that change? Than I would push the PR for it asap. Thank you! P.S.: Additionally, we could likely support the following as well (iOS-only, not sure about Android parity): * thin * light * ultralight * medium * heavy * black Would this help?
Hans Knöchel 2017-08-09

Hey [~khalilsarabey], not sure if you are still following this issue, but I want to resolve this this week. I fixed the semi-bold font already (by using the UIFontWeightSemibold constants), and I am also looking into the other font-weights described above that should be very straight forward to add. One thing I am unsure to scope right now is the font-tracking change. We currently create most of the fonts using the fontWithName constructor of the UIFont, which leads to the exact problems you brought up (it does not ave dynamic font-tracking or it possible to change the font based on the font-size). This is a known problem and Apple recommends to not use that constructor when dealing with system-fonts (see discussion [here](https://stackoverflow.com/questions/32426341/using-the-fontwithsize-api-with-san-francisco)). So we will try to migrate all system-fonts to a proper constructor-call to be more future save. Would you agree on those points? I would like to prevent starting effort on something that is meant to be implemented differently. Thank you! *EDIT*: Seems like when you are not passing any special/non-system font-family, the system-font tracking is applied correctly. A prior fix we did for 6.2.0 will also fix some font-size issues with bold fonts that made them deferring from the size of default fonts. If you can, please try the below PR and give feedback about your thoughts, appreciate it!

Hans Knöchel 2017-08-09

PR (master): https://github.com/appcelerator/titanium_mobile/pull/9294 PR (6_2_X): https://github.com/appcelerator/titanium_mobile/pull/9300 Test-Case:

   var win = Ti.UI.createWindow({
     backgroundColor : "#fff",
     layout: "vertical"
   });
   var label1 = Ti.UI.createLabel({
     text : "This is a normal font",
     top: 50,
     left: 50,
     font: {
         fontSize: 15
     }
   });
   var label2 = Ti.UI.createLabel({
     text : "This is a semibold font",
     left: 50,
     font: {
         fontWeight: "semibold",
         fontSize: 15
     },
     top: 10,
   });
   var label3 = Ti.UI.createLabel({
     text : "This is a bold font",
     left: 50,
     font: {
         fontWeight: "bold",
         fontSize: 15
     },
     top: 10
   });
    
   win.add([label1,label2,label3]);
   win.open();

Khalil Sarabey 2017-08-09

Hello Hans! Thanks for the follow up, you're absolutely right, I noticed the tracking issue also when building native apps, I don't know why they do this it makes no sense, and at the same time they give you a tracking table to do it manually. But in all cases, I think have the font weights available in Titanium would be great! Thanks again!
Hans Knöchel 2017-08-11

Hey Khalil, the PR's are up! But we noticed during code-review that the new constructors are requiring iOS 8.2, but we have a minimum SDK of 8.0, which makes it a (tiny but still) breaking change. Long story short, to not break any existing backwards compatibility, it has to go into Titanium SDK 7.0.0 (scheduled for this November). But in case you want to use it before, you can simply add the code-changes of the PR to your local source (patch it) and benefit from it today. I hope that helps, thank you!
Hans Knöchel 2017-08-13

Will do it in 6.2.0, together with thin, light and ultra-light! Will also rewrite the logic behind it in 7.0.0 to also allow heavy, medium and black.
Eric Merriman 2018-08-06

Closing as a duplicate. If this is in error, please reopen.

JSON Source