Setting vertical align of truncated tails for NSAttributedString with NSTextAttachment

Question

I'm using the following code to generate a NSAttributedString for UILabel in iOS 8.

// a long long Chinese title 
NSString *title = @"这是一个很长很长很长很长很长很长的中文标题";
// setup icon attachment
NSTextAttachment *iconAttachment = [[NSTextAttachment alloc] init];
iconAttachment.image = [UIImage imageNamed:imageName];
iconAttachment.bounds = bounds;
NSAttributedString *ycardImageString = [NSAttributedString attributedStringWithAttachment:iconAttachment];

// setup attributed text
NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:title];
if (shouldShowYcard) {
    [attributedText insertAttributedString:ycardImageString atIndex:0];
    [attributedText insertAttributedString:[[NSAttributedString alloc] initWithString:@" "] atIndex:1];
    [attributedText addAttribute:NSBaselineOffsetAttributeName value:@(offset) range:NSMakeRange(0, 1)];
}
NSRange titleRange = NSMakeRange(shouldShowYcard ? 2 : 0, title.length);
[attributedText addAttribute:NSFontAttributeName value:font range:titleRange];
[attributedText addAttribute:NSForegroundColorAttributeName value:color range:titleRange];

However it seems that the NSTextAttachment will effect the vertical position of truncated tails, just like the following pictures.

Is there a way to set the vertical aignment for the truncated tails?

My goal is to have bottom align tails in Chinese language.

This is an icon for test.

Did You upload your screen shot that shows a english language text ? — Himanshu Moradiya, Oct 15 '16 at 11:34
@HimanshuMoradiya I just upload the screen shot in English. But it seems to be a Chinese only bug... — xi.lin, Oct 18 '16 at 07:11
in your screen shot its shows dot. because of your text length big and you need same output with vertical alignment right ? — Himanshu Moradiya, Oct 18 '16 at 07:16
Yes. I need both of them in the bottom, just like the English version. — xi.lin, Oct 18 '16 at 07:24
@Jecky I want to have bottom align tails when showing Chinese title. You can see in the picture that currently the Chinese title have a middle align tail. — xi.lin, Oct 18 '16 at 07:34
@xi.lin Check out my updated answer, I update it as you want — Jitendra Modi, Oct 18 '16 at 10:53
@Jecky It still not work in my app. Could you use my recently uploaded icon file to have a try and show the screenshot? Thanks. — xi.lin, Oct 18 '16 at 11:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126003/discussion-between-jecky-and-xi-lin). — Jitendra Modi, Oct 18 '16 at 11:22
@Jecky Yes, I've tried. Your code and my original code both works well in iOS 10. But they both failed in iOS 8. — xi.lin, Oct 18 '16 at 12:37
@xi.lin I have given you right answer for ios 10 . Would you like to approve for others ? Actually I try this code in ios 9.3 in xcode 7.3 and its working perfectly. — Jitendra Modi, Oct 18 '16 at 12:38
@Jecky In fact my sample code works well in iOS9/iOS10 too. I can give you an upvote but I cannot approve it. Thanks! — xi.lin, Oct 18 '16 at 12:55
Ok, No problem. My help just worth to you Thats enough for me — Jitendra Modi, Oct 18 '16 at 13:00

Jitendra Modi · Answer 1 · 2016-10-18T11:45:10.630

Try this One

   UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(50, 300, 300, 30)];
    [self.view addSubview:lbl];
    NSString *t= @"这是一个很长很长很长很长很长很长的中文标题漢字";
    NSTextAttachment *iconatt = [[NSTextAttachment alloc]init];
    iconatt.image = [UIImage imageNamed:@"phnzY.png"];
    iconatt.bounds = CGRectMake(0, 0, 44, 22);

    NSAttributedString *ycardstring = [NSAttributedString attributedStringWithAttachment:iconatt];
    NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:t];
    [attributedText insertAttributedString:ycardstring atIndex:0];
    [attributedText insertAttributedString:[[NSAttributedString alloc] initWithString:@" "] atIndex:1];
     [attributedText addAttribute:NSBaselineOffsetAttributeName value:@(0.0) range:NSMakeRange(0, 1)];
        NSRange titleRange = NSMakeRange( 0 , t.length);
    [attributedText addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:22.0] range:titleRange];
    [attributedText addAttribute:NSForegroundColorAttributeName value:[UIColor blackColor] range:titleRange];
    lbl.attributedText = attributedText;

It will Give output Like this

it didn't work. Your code gives the output since you haven't insert `ycardstring` into `y10` or `y11` — xi.lin, Oct 18 '16 at 10:37

score 2 · Answer 2 · answered Oct 16 '16 at 15:54

You can try to use NSMutableParagraphStyle to set the paragraphStyle. Here is the Code:

    let label1 = UILabel(frame: CGRect(x: 50, y: 50, width: 100, height: 30))
    let label2 = UILabel(frame: CGRect(x: 50, y: 90, width: 100, height: 30))
    view.addSubview(label1)
    view.addSubview(label2)
    let t = "12341421dsadyusatdiuwtquyidtywatyudigsaydgsadysaghdkgaugduiyyudgasgdj"
    let iconAttachment = NSTextAttachment()
    iconAttachment.image = UIImage(named: "caseEditorBtn0")
    iconAttachment.bounds = CGRect(x: 0, y: 0, width: 20, height: 30);
    let ycardImageString = NSAttributedString(attachment: iconAttachment)
    let yT0 = NSMutableAttributedString(string: t)
    let yT1 = NSMutableAttributedString(string: t)

    let p = NSMutableParagraphStyle()
    p.lineBreakMode = .byTruncatingTail //set line break model
    p.alignment = .right                //set aligment
    yT1.setAttributes([NSParagraphStyleAttributeName: p], range: NSRange(location: 0, length: yT1.length))
    yT0.setAttributes([NSParagraphStyleAttributeName: p], range: NSRange(location: 0, length: yT0.length))
    //insert you custom text attachment at last, or it may be not show
    yT0.insert(ycardImageString, at: 0) 

    label1.attributedText =  yT0
    label2.attributedText = yT1

I tried to set a `NSMutableParagraphStyle` with `lineBreakMode`, but it didn't work on Chinese text. — xi.lin, Oct 18 '16 at 07:12

score 0 · Accepted Answer · edited May 23 '17 at 12:23

OK, finally I choose a ugly way to fix this problem by setting NSBaselineOffsetAttributeName for truncate tail.

Here is a way to calculate the truncate part. But in my case, my label width is fixed so that I can directly set the range for control.

if (title.length > 10 && ([[[UIDevice currentDevice] systemVersion] floatValue] < 9.0)) {
    [attributedText addAttribute:NSBaselineOffsetAttributeName value:@(-4) range:NSMakeRange(9, 1)];
}

Setting vertical align of truncated tails for NSAttributedString with NSTextAttachment

3 Answers3

Linked