UITextView lineHeightMultiple Clips Top, first line, of Text

Question

In iOS 8, I have a vanilla UITextView that clips the top of the 1st line when a lineHeightMultiple is applied to it's NSMutableParagraphStyle, see image below:

It appears as though lineHeightMultiple affects the 1st line of text in addition to subsequent lines.

Setting clipsToBounds = false on the UITextView will at least enable the clipped part to show, but you can see from the image below that now the top part of the text is obviously above it's frame:

I can fix this by just setting the top constraint on the offending UITextView to compensate for clipsToBounds = false but that feels like a hack to me.

I have also tried using a WKWebView for the offending text, and just setting the css line-height property, and that works just fine. There must simply be something I am missing when it comes to UITextView though.

Additionally, setting lineSpacing on the paragraph style to less than 0 has no affect, per the docs:

The distance in points between the bottom of one line fragment 
and the top of the next.

**This value is always nonnegative.**

This value is included in the line fragment heights in the 
layout manager.

I have also tried setting the contentInset of the UITextView as well as using a system font, both had not affect.

My sample code for this setup follows:

let text = "THIS IS A MULTILINE RUN OF TEXT"

let font = UIFont(name: "MyFontName", size: 31.0)!
// let font = UIFont.systemFontOfSize(31.0)

let paragraph = NSMutableParagraphStyle()
paragraph.lineHeightMultiple = 0.75
paragraph.alignment = NSTextAlignment.Center

let attributes = [
    NSParagraphStyleAttributeName: paragraph,
              NSFontAttributeName: font
]

titleView.attributedText = NSAttributedString(string: text, attributes: attributes)

// titleView.contentInset = UIEdgeInsets(top: 50.0, left: 0.0, bottom: 0.0, right: 0.0)
titleView.clipsToBounds = false

Has anyone encountered this and overcome or is the top constraint hack the only way to go?

Answer 1

Alternative approach - use a stack view with two labels, and set the stack view spacing to the top label's font's descender.

Answer 2

Cooliopas is right, but I ended up using this in a label extension and needed something more suited for the many different sizes of text throughout my app. I found that the baseline adjustment to keep the text vertically centered was 10% of the height of the text.

let attrString = NSMutableAttributedString(string: newText)

let style = NSMutableParagraphStyle()
style.alignment = self.textAlignment
style.lineSpacing = 1.0
style.lineHeightMultiple = 0.75

var baselineOffset : CGFloat = -5 //-5 is a default for this in case there is no attributedText size to reference
if let size = self.attributedText?.size(){
  baselineOffset = size.height * -0.1
} else {
  NSLog("attributedText = nil, setting lineHeightMultiple to -5 as a default for ", newText)
}

attrString.addAttribute(NSParagraphStyleAttributeName, value: style, range: NSMakeRange(0, attrString.length))
attrString.addAttribute(NSBaselineOffsetAttributeName, value: baselineOffset, range: NSMakeRange(0, attrString.length))
self.clipsToBounds = false

self.attributedText = attrString

Answer 3

I had the same issue.

I compensated it using NSBaselineOffsetAttributeName.

You should use:

let attributes = [
    NSParagraphStyleAttributeName: paragraph,
    NSFontAttributeName: font,
    NSBaselineOffsetAttributeName: -5
]

You will have to also set a lower paragraph.lineHeightMultiple.

A little tricky, but it works.