Center NSTextAttachment image next to single line UILabel

Question

I'd like to append an NSTextAttachment image to my attributed string and have it centered vertically.

I've used the following code to create my string:

NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:DDLocalizedString(@"title.upcomingHotspots") attributes:attrs];
NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
attachment.image = [[UIImage imageNamed:@"help.png"] imageScaledToFitSize:CGSizeMake(14.f, 14.f)];
cell.textLabel.attributedText = [str copy];

However, the image appears to align to the top of the cell's textLabel.

How can I change the rect in which the attachment is drawn?

I have a category class for having NSString with UIImage and vise versa. https://github.com/Pradeepkn/TextWithImage Enjoy. — PradeepKN, Oct 01 '15 at 14:23

MG Han · Answer 1 · 2022-04-15T11:05:04.487

You can use the capHeight of the font.

Objective-C

NSTextAttachment *icon = [[NSTextAttachment alloc] init];
UIImage *iconImage = [UIImage imageNamed:@"icon.png"];
[icon setBounds:CGRectMake(0, roundf(titleFont.capHeight - iconImage.size.height)/2.f, iconImage.size.width, iconImage.size.height)];
[icon setImage:iconImage];
NSAttributedString *iconString = [NSAttributedString attributedStringWithAttachment:icon];
[titleText appendAttributedString:iconString];

Swift

let iconImage = UIImage(named: "icon.png")!
var icon = NSTextAttachment()
icon.bounds = CGRect(x: 0, y: (titleFont.capHeight - iconImage.size.height).rounded() / 2, width: iconImage.size.width, height: iconImage.size.height)
icon.image = iconImage
let iconString = NSAttributedString(attachment: icon)
titleText.append(iconString)

The attachment image is rendered on the baseline of the text. And the y axis of it is reversed like the core graphics coordinate system. If you want to move the image upward, set the bounds.origin.y to positive.

The image should be aligned vertically center with the capHeight of the text. So we need to set the bounds.origin.y to (capHeight - imageHeight)/2.

Avoiding some jagged effect on the image, we should round the fraction part of the y. But fonts and images are usually small, even 1px difference makes the image looks like misaligned. So I applied the round function before dividing. It makes the fraction part of the y value to .0 or .5

In your case, the image height is larger than the capHeight of the font. But you can use the same way. The offset y value will be negative. And it will be laid out from the below of the baseline.

References:

Apple developer Text Programming Guide for iOS

The illustration is worth a +1 alone! Thanks for sharing. – turingtested Oct 27 '20 at 17:08 — turingtested, Oct 27 '20 at 17:08
What's the text behind "The image"? – CyberMew Apr 02 '22 at 16:52 — CyberMew, Apr 02 '22 at 16:52

score 117 · Answer 2 · answered Feb 05 '15 at 22:22

117

Try - [NSTextAttachment bounds]. No subclassing required.

For context, I am rendering a UILabel for use as the attachment image, then setting the bounds like so: attachment.bounds = CGRectMake(0, self.font.descender, attachment.image.size.width, attachment.image.size.height) and baselines of text within label image and text in attributed string line up as desired.

answered Feb 05 '15 at 22:22

Travis

6,252
3
17
14

This works as long as you don't need to scale the image. – phatmann Mar 22 '15 at 22:25
14

For Swift 3.0: ```attachment.bounds = CGRect(x: 0.0, y: self.font.descender, width: attachment.image!.size.width, height: attachment.image!.size.height)``` – Andrew Oct 14 '16 at 16:21
1

Awesome, thanks! Didn't know about the `descender` property of UIFont! – Ben Dec 04 '17 at 09:31
How to rendering a label for use as the attachment image? – frank61003 Dec 11 '20 at 10:23

score 66 · Answer 3 · answered Dec 01 '15 at 18:17

66

I found a perfect solution to this, works like a charm for me though, however you have to try it out yourself (probably the constant depends on the resolution of the device and maybe whatever ;)

func textAttachment(fontSize: CGFloat) -> NSTextAttachment {
    let font = UIFont.systemFontOfSize(fontSize) //set accordingly to your font, you might pass it in the function
    let textAttachment = NSTextAttachment()
    let image = //some image
    textAttachment.image = image
    let mid = font.descender + font.capHeight
    textAttachment.bounds = CGRectIntegral(CGRect(x: 0, y: font.descender - image.size.height / 2 + mid + 2, width: image.size.width, height: image.size.height))
    return textAttachment
}

Should work and shouldn't be blurry in any way (thanks to CGRectIntegral)

answered Dec 01 '15 at 18:17

borchero

5,562
8
46
72

Thanks for posting this, it lead to me to a pretty good approach. I noticed that you are adding a somewhat magic 2 to your y coordinate calculation. – Ben Aug 09 '16 at 21:20
2

Here's what I used for my y-calculation: descender + (abs(descender) + capHeight)/2 - iconHeight/2 – Ben Aug 09 '16 at 21:22
Why the +2 for the Y origin? – William LeGate Sep 29 '16 at 20:20
@WilliamLeGate I really don't know, just tried it out and it worked for all the font sizes I tested for (the ones I needed) .. – borchero Sep 29 '16 at 20:22
Good damn... This answer is amazing. – GGirotto Apr 08 '18 at 00:11
Xcode 12.5, IOS 14.5 ```textAttachment.bounds = CGRect(x: 0, y: font.descender - image.size.height / 2 + mid + 2, width: image.size.height, height: image.size.height).integral``` – app4g Dec 04 '21 at 04:58

rob mayoff · Accepted Answer · 2014-12-02T21:46:34.707

65

You can change the rect by subclassing NSTextAttachment and overriding attachmentBoundsForTextContainer:proposedLineFragment:glyphPosition:characterIndex:. Example:

- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex {
    CGRect bounds;
    bounds.origin = CGPointMake(0, -5);
    bounds.size = self.image.size;
    return bounds;
}

It's not a perfect solution. You have to figure out the Y-origin “by eye” and if you change the font or the icon size, you'll probably want to change the Y-origin. But I couldn't find a better way, except by putting the icon in a separate image view (which has its own disadvantages).

edited Dec 02 '14 at 21:46

answered Sep 29 '14 at 19:32

rob mayoff

375,296
67
796
848

2

No idea why they down voted this, it helped me so +1 – Jasper Dec 16 '14 at 14:41
The Y-origin is the font descender. See my answer below. – phatmann Mar 22 '15 at 22:25
4

Travis's answer is a cleaner solution without subclassing. – SwampThingTom Dec 18 '15 at 16:43
For more details, check out @mg-han 's answer https://stackoverflow.com/a/45161058/280503 (In my opinion it should be the selected answer to the question.) – gardenofwine Sep 10 '17 at 08:36

Jakub Truhlář · Answer 5 · 2018-09-22T21:49:28.677

43

What about:

CGFloat offsetY = -10.0;

NSTextAttachment *attachment = [NSTextAttachment new];
attachment.image = image;
attachment.bounds = CGRectMake(0.0, 
                               offsetY, 
                               attachment.image.size.width, 
                               attachment.image.size.height);

No subclassing needed

edited Sep 22 '18 at 21:49

answered Apr 29 '15 at 21:11

Jakub Truhlář

20,070
9
74
84

2

Works better than using self.font.descender (which has a default value of ~4 on iPhone 4s simulator running iOS 8). -10 looks like a better approximation for the default font style/size. – Kedar Paranjape Jun 10 '15 at 13:18

score 15 · Answer 6 · answered Mar 22 '15 at 22:33

@Travis is correct that the offset is the font descender. If you also need to scale the image, you will need to use a subclass of NSTextAttachment. Below is the code, which was inspired by this article. I also posted it as a gist.

import UIKit

class ImageAttachment: NSTextAttachment {
    var verticalOffset: CGFloat = 0.0

    // To vertically center the image, pass in the font descender as the vertical offset.
    // We cannot get this info from the text container since it is sometimes nil when `attachmentBoundsForTextContainer`
    // is called.

    convenience init(_ image: UIImage, verticalOffset: CGFloat = 0.0) {
        self.init()
        self.image = image
        self.verticalOffset = verticalOffset
    }

    override func attachmentBoundsForTextContainer(textContainer: NSTextContainer, proposedLineFragment lineFrag: CGRect, glyphPosition position: CGPoint, characterIndex charIndex: Int) -> CGRect {
        let height = lineFrag.size.height
        var scale: CGFloat = 1.0;
        let imageSize = image!.size

        if (height < imageSize.height) {
            scale = height / imageSize.height
        }

        return CGRect(x: 0, y: verticalOffset, width: imageSize.width * scale, height: imageSize.height * scale)
    }
}

Use as follows:

var text = NSMutableAttributedString(string: "My Text")
let image = UIImage(named: "my-image")!
let imageAttachment = ImageAttachment(image, verticalOffset: myLabel.font.descender)
text.appendAttributedString(NSAttributedString(attachment: imageAttachment))
myLabel.attributedText = text

IndyZa · Answer 7 · 2017-04-03T19:40:43.220

If you have a very large ascendent and want to center the image (center of the cap height) like me try this

let attachment: NSTextAttachment = NSTextAttachment()
attachment.image = image
if let image = attachment.image{
    let y = -(font.ascender-font.capHeight/2-image.size.height/2)
    attachment.bounds = CGRect(x: 0, y: y, width: image.size.width, height: image.size.height).integral
}

The y calculation is as the picture below

Note that the y value is 0 because we want the image to shift down from the origin

If you want it to be in the middle of the whole label.Use this y value:

let y = -((font.ascender-font.descender)/2-image.size.height/2)

score 10 · Answer 8 · answered Jan 17 '18 at 12:28

We can make an extension in swift 4 that generates an attachment with a centered image like this one:

extension NSTextAttachment {
    static func getCenteredImageAttachment(with imageName: String, and 
    font: UIFont?) -> NSTextAttachment? {
        let imageAttachment = NSTextAttachment()
    guard let image = UIImage(named: imageName),
        let font = font else { return nil }

    imageAttachment.bounds = CGRect(x: 0, y: (font.capHeight - image.size.height).rounded() / 2, width: image.size.width, height: image.size.height)
    imageAttachment.image = image
    return imageAttachment
    }
}

Then you can make the call sending the name of the image and the font:

let imageAttachment = NSTextAttachment.getCenteredImageAttachment(with: imageName,
                                                                   and: youLabel?.font)

And then append the imageAttachment to the attributedString

score 2 · Answer 9 · answered Feb 11 '20 at 14:57

In my case calling sizeToFit() helped. In swift 5.1

Inside your custom label:

func updateUI(text: String?) {
    guard let text = text else {
        attributedText = nil
        return
    }

    let attributedString = NSMutableAttributedString(string:"")

    let textAttachment = NSTextAttachment ()
    textAttachment.image = image

    let sizeSide: CGFloat = 8
    let iconsSize = CGRect(x: CGFloat(0),
                           y: (font.capHeight - sizeSide) / 2,
                           width: sizeSide,
                           height: sizeSide)
    textAttachment.bounds = iconsSize

    attributedString.append(NSAttributedString(attachment: textAttachment))
    attributedString.append(NSMutableAttributedString(string: text))
    attributedText = attributedString

    sizeToFit()
}

score 0 · Answer 10 · answered Mar 16 '15 at 05:40

Please use -lineFrag.size.height/5.0 for the bounds height. This exactly centres the image and aligned with text for all the size of fonts

override func attachmentBoundsForTextContainer(textContainer: NSTextContainer, proposedLineFragment lineFrag: CGRect, glyphPosition position: CGPoint, characterIndex charIndex: Int) -> CGRect
{
    var bounds:CGRect = CGRectZero

    bounds.size = self.image?.size as CGSize!
    bounds.origin = CGPointMake(0, -lineFrag.size.height/5.0);

    return bounds;
}

`-lineFrag.size.height/5.0` is not correct. Instead it is the font descender. — phatmann, Mar 22 '15 at 22:26

score 0 · Answer 11 · answered Apr 06 '22 at 13:06

0

One can use NSAttributedString.Key.baselineOffset attribute for NSMutbleAttributedString to move NSTextAttachment vertically.

answered Apr 06 '22 at 13:06

malex

9,874
3
56
77

Center NSTextAttachment image next to single line UILabel

11 Answers11

Linked