How do you adjust text kerning using Interface Builder in Xcode 7?

Question

There are a myriad of settings for NSAttributedParagraphStyle that I can see in Interface Builder:

But none of these are for text kerning. Is there a way to adjust the text kerning in Xcode 7's Interface Builder for attributed text?

_{(Please don't answer with how to do this in code - I already know how to do that!)}

Lactase

Did you ever find a way? That seems conspicuous in its absence. – Underside

@Underside nope ... indeed! – Lactase

Answer 1

You can actually do this without the use of a subclass through an extension.

import UIKit

@IBDesignable
extension UILabel {
    @IBInspectable
    public var kerning:CGFloat {
        set{
            if let currentAttibutedText = self.attributedText {
                let attribString = NSMutableAttributedString(attributedString: currentAttibutedText)
                attribString.addAttributes([NSKernAttributeName:newValue], range:NSMakeRange(0, currentAttibutedText.length))
                self.attributedText = attribString
            }
        } get {
            var kerning:CGFloat = 0
            if let attributedText = self.attributedText {
                attributedText.enumerateAttribute(NSKernAttributeName,
                                                  in: NSMakeRange(0, attributedText.length),
                                                  options: .init(rawValue: 0)) { (value, range, stop) in
                                                    kerning = value as? CGFloat ?? 0
                }
            }
            return kerning
        }
    }
}

While this won't actually show up in interface builder it will show up and work when you run your app.

Procurator

Answer 2

Create a subclass of UILabel call it KerningLabel have it be comprised of the following code:

import UIKit

@IBDesignable
class KerningLabel: UILabel {

    @IBInspectable var kerning: CGFloat = 0.0 {
        didSet {
            if attributedText?.length == nil { return }

            let attrStr = NSMutableAttributedString(attributedString: attributedText!)
            let range = NSMakeRange(0, attributedText!.length)
            attrStr.addAttributes([NSAttributedStringKey.kern: kerning], range: range)
            attributedText = attrStr
        }
    }
}

Drag out a label. Change it to your UILabel subclass. Adjust the kerning as desired.

In obj-c:

.h

IB_DESIGNABLE
@interface KerningLabel : UILabel

@property (nonatomic) IBInspectable CGFloat kerning;

@end

.m

@implementation KerningLabel

- (void)setKerning:(CGFloat)kerning
{
    _kerning = kerning;
    if(self.attributedText)
    {
        NSMutableAttributedString *attribString = [[NSMutableAttributedString alloc]initWithAttributedString:self.attributedText];
        [attribString addAttribute:NSKernAttributeName value:@(kerning) range:NSMakeRange(0, self.attributedText.length)];
        self.attributedText = attribString;
    }
}

@end

Lakin

Obviously not a native option, but a pretty slick solution! Nice. – Lactase

I'm looking for the Objective-C version of this same piece of code! I don't know how to convert this to ObjC – Cascarilla

@KasunRandika See here – Lakin

Oh Great, thanks! I've already tried something and didn't work, so put it [on SO here.][1] If you can please give an answer to that also. But I guess now I already know the answer to my question! [1]: #37827249 – Cascarilla

Answer 3

Swift 4 code:

@IBDesignable
extension UILabel {
@IBInspectable
public var kerning:CGFloat {
    set{
        if let currentAttibutedText = self.attributedText {
            let attribString = NSMutableAttributedString(attributedString: currentAttibutedText)
            attribString.addAttributes([NSAttributedStringKey.kern:newValue], range:NSMakeRange(0, currentAttibutedText.length))
            self.attributedText = attribString
        }
    } get {
        var kerning:CGFloat = 0
        if let attributedText = self.attributedText {
            attributedText.enumerateAttribute(NSAttributedStringKey.kern,
                                              in: NSMakeRange(0, attributedText.length),
                                              options: .init(rawValue: 0)) { (value, range, stop) in
                                                kerning = value as? CGFloat ?? 0
            }
        }
        return kerning
    }
}
}

Eanore

Answer 4

A shortened attempt:

@IBDesignable class KerningLabel: UILabel {


  @IBInspectable var kerning: CGFloat = 0.0 {
    didSet {
      let attrStr = NSMutableAttributedString(string: "Foobar")
      attrStr.addAttributes([NSKernAttributeName: kerning],
                            range: NSMakeRange(0, attrStr.string.characters.count))
      attributedText = attrStr
    }
  }
}

Didymium

Answer 5

Swift 5

UILabel Extension:

@IBDesignable
extension UILabel {
    @IBInspectable
      var letterSpace: CGFloat {
          set {
              let attributedString: NSMutableAttributedString!
              if let currentAttrString = attributedTitle(for: .normal) {
                  attributedString = NSMutableAttributedString(attributedString: currentAttrString)
              }
              else {
                  attributedString = NSMutableAttributedString(string: self.titleLabel?.text ?? "")
                  setTitle(.none, for: .normal)
              }

              attributedString.addAttribute(NSKernAttributeName,
                                             value: newValue,
                                             range: NSRange(location: 0, length: attributedString.length))

              setAttributedTitle(attributedString, for: .normal)
          }

          get {
              if let currentLetterSpace = attributedTitle(for: .normal)?.attribute(NSKernAttributeName, at: 0, effectiveRange: .none) as? CGFloat {
                  return currentLetterSpace
              }
              else {
                  return 0
              }
          }
      }
}

UIButton Extension

    extension UIButton{
          @IBInspectable
          var letterSpace: CGFloat {
              set {
                  let attributedString: NSMutableAttributedString!
                  if let currentAttrString = attributedTitle(for: .normal) {
                      attributedString = NSMutableAttributedString(attributedString: currentAttrString)
                  }
                  else {
                      attributedString = NSMutableAttributedString(string: self.titleLabel?.text ?? "")
                      setTitle(.none, for: .normal)
                  }
    
                attributedString.addAttribute(NSAttributedString.Key.kern,
                                                 value: newValue,
                                                 range: NSRange(location: 0, length: attributedString.length))
    
                  setAttributedTitle(attributedString, for: .normal)
              }
    
              get {
                if let currentLetterSpace = attributedTitle(for: .normal)?.attribute(NSAttributedString.Key.kern, at: 0, effectiveRange: .none) as? CGFloat {
                      return currentLetterSpace
                  }
                  else {
                      return 0
                  }
              }
          }
}

Voltmer