Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16120] iOS: Label with custom font cut off

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionNot Our Bug
Resolution Date2014-02-02T23:07:13.000+0000
Affected Version/sRelease 3.2.0
Fix Version/sn/a
ComponentsiOS
LabelsSDK3.2.0, labels
Reporternicolomonili
AssigneeIngo Muschenetz
Created2013-12-25T16:23:54.000+0000
Updated2014-02-02T23:07:13.000+0000

Description

The text of a label using a custom font (Helvetica Neue LT Std) is cut off in iOS 7. In 3.1.4, I had to add extra height to the label to prevent the clipping. In 3.2.0, on iOS 6, the label looks correct. in 3.2.0, on iOS 7.0.1 simulator the text is clipped even if the height of the label is greater than the total height of th text. The first attached image shows the text on the simulator iOS 6.0.1, the second on the simulator iOS 7.0.3
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
 
var test_label = Ti.UI.createLabel({
    text : "ABCDEFGHILMNOPQRSTUVZ",
    font : {
        fontFamily : 'Helvetica Neue LT Std',
        fontSize : 36
    },
    textAlign : 'left',
    height : 50,
    borderColor : 'blue'
});
 
win1.add(test_label);
 
win1.open();

Attachments

FileDateSize
2014-01-27_1345.png2014-01-27T21:49:30.000+000070688
2014-01-27_1346.png2014-01-27T21:49:30.000+000070466
app.zip2013-12-30T18:28:17.000+00007331867
font_projects_both.zip2014-01-27T21:49:30.000+00004796907
iOS 6.0.1 simulator.png2013-12-25T16:23:54.000+000014905
iOS 7.0.3 simulator.png2013-12-25T16:23:54.000+000014601

Comments

  1. nicolomonili 2013-12-25

    simple code test
     
       var test_label = Ti.UI.createLabel({
           text : "ABCDEFGHILMNOPQRSTUVZ",
           font : {
               fontFamily : 'Helvetica Neue LT Std',
               fontSize : 36
           },
           textAlign : 'left',
           left : 500,
           height : 50,
           borderColor : 'blue'
       });
       
    with this [custom font](https://www.dropbox.com/s/fhfgmyy59rii448/font.otf)
  2. nicolomonili 2013-12-27

    nothing ... ?
  3. nicolomonili 2013-12-27

  4. Ingo Muschenetz 2013-12-28

    Nicolo. We appreciate your tickets. Since we like you, I'd like to help you get better service.

    This issue was filed on Christmas Day using the community support channel. You cannot expect immediate support.

    Your tickets can be complicated and confusing. We read them in our triage meetings and have to skip them and come back later.

    Some suggestions:

    Give us a simple example that works. We had to correct your test case.

    Describe in very simple terms what is broken. Pictures help show the difference (which you provided). But from what I understand, it appears that we fixed things on iOS6, but it's broken on iOS 7. If that's the case, say that this is broken on iOS 7.

    I've edited your ticket to illustrate my understanding. Please let me know if you agree. Please try using the latest version of the SDK from the 3.1.X CI builds. This should work for you.
  5. nicolomonili 2013-12-28

    I do not expect them absolutely a reply on Christmas Day, in fact thank you for the help you offer to us developers. to clarify the problem I can tell you this: using the SDK 3.1.4 on with apple SDK 6 and 7 I had no problem with the use of custom fonts, enough to increase the height of the label and the text contained in it was not cut now with the SDK 3.2.0 this has changed. now on iOS 6 the text is not cut but the height of the label is larger than the set, while on iOS 7 the text is cut
  6. Ingo Muschenetz 2013-12-28

    Did you try the latest 3.1.X branch?
  7. nicolomonili 2013-12-28

    now try this : 3.1.4.v20131213162008
  8. nicolomonili 2013-12-28

    with this SDK (3.1.4.v20131213162008) i have this error
       [ERROR] :  ** BUILD FAILED **
       [ERROR] :  The following build commands failed:
       [ERROR] :  	Ld build/Debug-iphonesimulator/Ottica\ Artioli.app/Ottica\ Artioli normal i386
       [ERROR] :  (1 failure)
       
  9. Alan Leard 2013-12-30

    I have attached a sample app with font that clips when built with the 3.2.0.GA SDK and iOS 7.0.3 for the 7.0.3 Simulator but the same configuration built for the 6.1 simulator does not clip.
  10. nicolomonili 2013-12-30

    Yes, but your test was developed with Alloy
  11. Ritu Agrawal 2014-01-02

    Moving this ticket to engineering as Alan can reproduce the issue with the attached project with iOS 7.0.3 simulator but not with iOS 6 simulator.
  12. nicolomonili 2014-01-21

    there are no updates ?
  13. Ingo Muschenetz 2014-01-21

    This appears to be a known Apple issue with iOS 7, custom fonts, and labels. There are a number of Stack Overflow posts on the subject. I've found two possible fixes to the problem, detailed here: http://stackoverflow.com/questions/19036051/ios-7-custom-fonts-alignment. Can you please try the following: "To edit these \[heights\] in the font you will need to download the [Apple Font Tool Suite](http://developer.apple.com/fonts/). Once you’ve installed this you need to open Terminal and navigate to the directory that contains your font. After that enter the following command:
        ftxdumperfuser -t hhea -A d font.ttf
        
    This will create a file called font.hhea.xml, open this new file into a text editor and adjust the values for ascender and descender. Generally if you font sits too low you want to decrease ascender and increase descender. After editing and saving enter the following command into terminal to reconstruct your Font file:
        ftxdumperfuser -t hhea -A f font.ttf
        
    You can now use the font.ttf file in your application. If the font still isn’t right just repeat the above procedure until you are happy." If that appears to be too much work, people have also suggested you can use the "Glyphs" application to re-export the font. Can you please try the solution above and let us know if it addresses the issue?
  14. nicolomonili 2014-01-21

    1) thank you very much for your answer, always very friendly and helpful 2) (since we do not have available until tonight my mac development, I tried the solution of using Glyphs). - I imported the font.otf, and then I exported it. - Opening the two fonts (the original and the exported with glyphs) with font viewer of Mac and the situation seems to be already improved! The spaces seem to be already decreased. I will update you immediately after i can run the test on the app! screen attached (left the original font, right the exported with glyphs) https://www.dropbox.com/s/r530cs1hz2zlzmx/Schermata%202014-01-21%20alle%2011.44.28.png
  15. Sabil Rahim 2014-01-21

    additional info : http://www.andyyardley.com/2012/04/24/custom-ios-fonts-and-how-to-fix-the-vertical-position-problem/
  16. nicolomonili 2014-01-21

    I managed to do a test on the app finally, and I solved the problem by exporting the font with Glyphs
  17. Alan Leard 2014-01-27

    The attached files show that the same font in a native iOS project are not clipped but in a titanium project are clipped.
  18. Alan Leard 2014-01-27

    See attached files that demonstrate the same font is not clipped in a native iOS project but is clipped in a titanium project.
  19. Ingo Muschenetz 2014-01-27

    [~aleard] Did you attempt to adjust the font using the tools mentioned above?
  20. Alan Leard 2014-01-27

    Sorry, they said they had already run it on the font they sent. I just adjusted it and was able to fix the issue.
  21. Neeraj Gupta 2014-02-02

    Closing in correct status.

JSON Source