How to center image in attributed string?

2.7k Views Asked by At

I have an image that I want to center alongside a bunch of text but even when I set the NSMutableParagraphStyle alignment to center, the line with the image does not center

enter image description here

If anyone could please help me center the line with the image (i.e. first line) that would be great!

Code

let text = " text next to image is not centered \n\n centered text \n more centered text"
let iconAttachment = textAttachment(fontSize: 14, image: #imageLiteral(resourceName: "icon"))
        let iconString = NSAttributedString(attachment: iconAttachment)
let style = NSMutableParagraphStyle()
        style.alignment = .center
        style.minimumLineHeight = 20
        
        let attributedText = NSMutableAttributedString()
        attributedText.append(iconString)
        let fullText = NSAttributedString(string: text, attributes: [NSParagraphStyleAttributeName : style])
        attributedText.append(fullText)

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

There are 3 best solutions below

0
On BEST ANSWER

You just need to Alignment your lebel text to center and it will work :

 label.textAlignment = .center

enter image description here

0
On

You should use .baselineOffset. Depending on your font size, the offSet is varied.

let image = NSImage(imageLiteralResourceName: "snail")
let attachment = NSTextAttachment()
attachment.image = image
let mutableAttributedString = NSMutableAttributedString(attachment: attachment)
mutableAttributedString.addAttributes([.baselineOffset : -2], range: NSRange(location: 0, length: mutableAttributedString.length))
mutableAttributedString.append(NSAttributedString(string: " Hello World!"))

label.attributedStringValue = mutableAttributedString

Result:

enter image description here

2
On

Here is the code to achieve desire image in center.

    let text = "\ntext next to image is not centered \n\n centered text \n more centered text"
    let iconAttachment = textAttachment(fontSize: 5, image: #imageLiteral(resourceName: "eye"))
    let iconString = NSAttributedString(attachment: iconAttachment)
    let style = NSMutableParagraphStyle()
    style.alignment = .center
    style.minimumLineHeight = 20

    let attributedText = NSMutableAttributedString()
    attributedText.append(iconString)
    let fullText = NSAttributedString(string: text, attributes: [NSParagraphStyleAttributeName : style])
    attributedText.append(fullText)
    lbl.attributedText = attributedText;
    lbl.numberOfLines = 0
    lbl.lineBreakMode = .byWordWrapping
    lbl.textAlignment = .center

Output

Note : no change in function

enter image description here