Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15856] iOS: Titanium.UI.iOS.AttributedString clipping problems when used with ATTRIBUTE_BASELINE_OFFSET

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionNot Our Bug
Resolution Date2013-12-03T00:24:41.000+0000
Affected Version/sn/a
Fix Version/sn/a
Componentsn/a
LabelsATTRIBUTE_BASELINE_OFFSET, AttributedString, look1
ReporterMalcolm Hollingsworth
AssigneePedro Enrique
Created2013-11-29T16:42:51.000+0000
Updated2018-08-06T17:52:09.000+0000

Description

When using the new AttributedString on a label with the attribute of ATTRIBUTE_BASELINE_OFFSET the text within the label is clipped. This appears in differently depending on choice of font (default or custom) the value set for the offset. * When you use the default typeface then the top line of the text is clipped off. 
 
var text = 'We\'re pleased to announce the beta version of 3.2.0, a major update to our 3.1.0 version of the Titanium SDK and Titanium Studio.\n\nVersion 3.2.0 brings numerous fixes and improvements across both products, as well as preliminary support for iOS 7.1 and Android 4.4. Today, we\'re asking you to help test out the release and provide feedback before it becomes generally available in mid-December.';

var attr = Ti.UI.iOS.createAttributedString({
    text: text,
    attributes: [
        {
            type: Ti.UI.iOS.ATTRIBUTE_BASELINE_OFFSET,
            value: 12,
            range: [0,  text.length]
        }
    ]
});

var label = Ti.UI.createLabel({
    attributedString: attr,
    backgroundColor: '#fff',
    borderColor: '#666',
    borderWidth: 1,
    color: '#000',
    font: {
        //fontFamily: 'TitilliumText22L-Light',
        fontSize: 24
    },
    height: Ti.UI.SIZE,
    //height: 400,
    //verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
    width: 500
});
Values for *verticalAlign* and *height* do not affect the problem. * Custom fonts make the problem much worse - whilst this may be the fault of the font, the fact that this occurs on the default font must mean it is the clipping routine at fault. * If you use the documented sample code and add only the ATTRIBUTE_BASELINE_OFFSET attribute this also affects the display of the string by truncated the display with ellipsis. 
 
var text =  'Bacon ipsum dolor Appcelerator Titanium rocks! sit amet fatback leberkas salami sausage tongue strip steak.';

var attr = Titanium.UI.iOS.createAttributedString({
    text: text,
    attributes: [
        // Underlines text
        {
            type: Titanium.UI.iOS.ATTRIBUTE_UNDERLINES_STYLE,
            value: Titanium.UI.iOS.ATTRIBUTE_UNDERLINE_STYLE_SINGLE,
            range: [0, text.length]
        },
        // Sets a background color
        {
            type: Titanium.UI.iOS.ATTRIBUTE_BACKGROUND_COLOR,
            value: "red",
            range: [text.indexOf('Appcelerator'), ('Appcelerator').length]
        },
        {
            type: Titanium.UI.iOS.ATTRIBUTE_BACKGROUND_COLOR,
            value: "blue",
            range: [text.indexOf('Titanium'), ('Titanium').length]
        },
        {
            type: Titanium.UI.iOS.ATTRIBUTE_BACKGROUND_COLOR,
            value: "yellow",
            range: [text.indexOf('rocks!'), ('rocks!').length]
        },
        // Sets a foreground color
        {
            type: Titanium.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
            value: "orange",
            range: [0,  text.length]
        },
        {
            type: Titanium.UI.iOS.ATTRIBUTE_FOREGROUND_COLOR,
            value: "black",
            range: [text.indexOf('rocks!'), ('rocks!').length]
        },
        {
            type: Ti.UI.iOS.ATTRIBUTE_BASELINE_OFFSET,
            value: 24,
            range: [0,  text.length]
        }
    ]
});

var label = Titanium.UI.createLabel({
    left: 20,
    right: 20,
    height: Titanium.UI.SIZE,
    attributedString: attr
});

Attachments

FileDateSize
default.jpg2013-11-29T16:42:51.000+000079190
mixed.jpg2013-11-29T17:48:46.000+000023814
TitilliumText22L-Light.jpg2013-11-29T16:42:51.000+000068337

Comments

  1. Malcolm Hollingsworth 2013-11-29

    Example when used with the sample code from the documentation adding only base_offset
  2. Pedro Enrique 2013-12-03

    Tested with native Objective-C app and also fails. Looks like an iOS 7 bug. Tested on iPad and iPhone iOS 7 - Fails iOS 6 - Works as expected 
       - (void)viewDidLoad
   {
       [super viewDidLoad];
       [[self view] setBackgroundColor:[UIColor whiteColor]];
       
       NSString *text = @"We're pleased to announce the beta version of 3.2.0, a major update to our 3.1.0 version of the Titanium SDK and Titanium Studio.\n\nVersion 3.2.0 brings numerous fixes and improvements across both products, as well as preliminary support for iOS 7.1 and Android 4.4. Today, we're asking you to help test out the release and provide feedback before it becomes generally available in mid-December.'";
       
       CGFloat width = 500;
       CGFloat left = self.view.frame.size.width / 2 - width / 2;
       
       UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(left, 200, width, 500)];
       [[label layer] setBorderColor:[UIColor blackColor].CGColor];
       [[label layer] setBorderWidth:1];
       [label setNumberOfLines:0];
       [label setBackgroundColor:[UIColor whiteColor]];
       
       NSMutableAttributedString *attr = [[NSMutableAttributedString alloc] initWithString:text];
   
       [attr addAttribute: NSBaselineOffsetAttributeName
                    value: [NSNumber numberWithFloat:12]
                    range: NSMakeRange(0, [text length])
        ];
       
       [attr addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"TitilliumText22L-Light" size:24] range:NSMakeRange(0, [text length])];
       
   
       [label setAttributedText:attr];
       [[self view] addSubview:label];
       [label sizeToFit];
   }
  3. Malcolm Hollingsworth 2013-12-03

    @Pedro thanks for the ObjectiveC checks. Given there is now an obvious issue;

    Will the Titanium documentation be updated to show this failure?

    Do you inform Apple of the problem?

    Do you know if the problem persists in iOS7.1?

  4. Pedro Enrique 2014-05-31

    Tested again, issue persists in iOS 7.1 Again, it works well in iOS 6.1 but fails in 7.0 and above.
  5. Malcolm Hollingsworth 2014-05-31

    Thanks for the revisit. Were the tests performed with the ObjectiveC code above? Just wanting to confirm again that the issue is with Apple and not with Titanium. Cheers.
  6. Pedro Enrique 2014-05-31

    Yes, I tested with the Objective-C code on the iPad and iPhone simulator. Both with iOS 6.1 and 7.1
  7. Ingo Muschenetz 2014-05-31

    Can we find/file a relate bug with Apple?
  8. Eric Merriman 2018-08-06

    Closing as "not our bug". If you disagree, please reopen.

JSON Source