instacart/Nantes

When rendering text that gets truncated the text is offset vertically

gransell opened this issue · 0 comments

Describe the bug
When rendering text that gets truncated the text is offset vertically compared to when text is not truncated. The following code sample produces the screen shot below. The text on the left is offset a few pixels up. The difference becomes even more prominent if you change minimumLineHeight.

let label1 = NantesLabel()
label1.text = "Some long text that should be truncated"
label1.layer.borderColor = UIColor.red.cgColor
label1.layer.borderWidth = 1
let label2 = NantesLabel()
label2.text = "Some other long text"
label2.setContentCompressionResistancePriority(.required, for: .horizontal)
label2.layer.borderColor = UIColor.red.cgColor
label2.layer.borderWidth = 1

I investigated this a bit and found that in the drawAttributedString method the call to CTFrameGetLines for the truncated label returns one CTLine. This line then has multiple CTRuns. The non truncated label gets one CTLine with one CTRun.

CTLineGetTypographicBounds is then called to get the descent of the line and this is the value that differs for the two lines and what seems to caused the differently rendered text. I tried to instead get the first CTRun of the line and call CTRunGetTypographicBounds to get the descent. This results in a descent that is equal for both labels but this is a bit beyond my knowledge of CoreText to say if this is a fix or not.

Expected behavior
Truncated text should be rendered at the same yOffset as non truncated text.

Screenshots
testTruncation 1

Smartphone (please complete the following information):

  • Device: [iPhone 11 and iPhone8 simulator]
  • OS: iOS12, iOS14