Search code examples
iosautolayoutuilabelnsattributedstring

Line Spacing for UILabel with a single line of text

Is it expected that a multi-line UILabel with a custom lineSpacing attribute include that line spacing even when the label's text fits on one line?

Here is my label:

let label = UILabel()
label.numberOfLines = 4
var paragraph = NSMutableParagraphStyle()
paragraph.lineSpacing = 5
paragraph.lineBreakMode = .ByTruncatingTail
label.attributedText = NSAttributedString(string: "Some short text", attributes: [NSParagraphStyleAttributeName: paragraph])

And here is how it is laid out. Note the additional spacing below the text.

enter image description here

For comparison:

enter image description here

What's strange is the lack of consistency. When the label extends to a second line, the bottom line no longer includes this additional spacing:

enter image description here

Is there a way to remove this line spacing when there is a single line of text? Or some other way to enforce some consistency so I can at least account for it?

Update

The baseline calculation also seems broken. When attempting to align a view (here, the red box) with the label's baseline, multi-line labels are partially covered.

enter image description here enter image description here

Solution

  • Since you said you were using a custom font, my best guess based on prior experience is that the root cause of that issue that you seeing lies somewhere inside of the custom font itself. Whenever I am given a custom font by a client, 90% of the time, something is "wrong" with the actual font metrics (as interpreted by Apple's internal font rendering subsystem, even though it might render correctly somewhere else).

    The good news is that this is fixable, but it requires rebuilding the font with new metrics, which is usually a trial/error affair. You might also need to check to see if the license you have for the font will allow such a thing (if it even matters).

    That being said, these are some resources to questions that I keep around for this exact scenario whenever I start a new project:

    Here's a similar question to yours with the assumption that this is a custom font issue: "Custom UIFont baseline shifted". This question deals with this issue in a UIButton "UIButton custom font vertical alignment", but both of these questions end up at the answer to this question "Custom installed font not displayed correctly in UILabel".

    I have a personal testbed app for custom fonts now that I use whenever I am first given a custom font. This allows me to test the font in isolation for each rebuild iteration to make sure it's perfectly rendering. Make sure to test your changes in various font sizes and even in additional languages (yes, lots of permutations). I have had issues specifically with Thai and Chinese when using custom fonts as their ascenders extend very close to the edge of the bounding box for a UILabel. The testbed that I've created for myself includes the font rendered in basic UILabels in various sizes and various languages in various sizes (since like I said, I've had a bad experience in the past with custom fonts in certain languages that rendered fine in Roman characters).

    If someone has a better solution to this, I'd love to hear it as I run into this issue with custom fonts almost every time. This is my workflow for nipping the issue in the bud before we start compensating for the font's rendering issues during layout or using individual attributed string adjustments. I'm not font expert, I'm just a guy who likes fonts to render like the built-in fonts (especially when using auto layout).