LineHeight 에 대한 생각 (with ios)

📖 서문

zeplin을 보고 ios 개발을 하던 중, UILabel중에 Line Height가 있는 디자인이 있었다.

그리고 이 label의 text를 line height vertical center로 맞추는 과정중에 생긴 궁금증을 해결하면서 쓴 글이다.

 

해결을 했으나, 이유가 아직 이해가 안가는 상태임으로.. 그냥 결과만 필요하신 분은 3차시도에서 코드만 배껴서 쓰길 바란다.

zeplin 상에 line height

 

line height의 centerY 가운데로 맞춘 디자인

---

1️⃣ 1차 시도

처음에는 귀찮기도 하고 이게 뭐가 중요한가 싶어, 무지성으로 인터넷에 쳐서 맨위에 있는 코드 복붙해서 UILabel extension에 추가했다.

extension UILabel {
 	func setTextWithLineHeight(text: String?, lineHeight: CGFloat){
        if let text = text {
            let style = NSMutableParagraphStyle()
            style.maximumLineHeight = lineHeight
            style.minimumLineHeight = lineHeight

            let attributes: [NSAttributedString.Key: Any] = [
                .paragraphStyle: style,
            ]
            
            let attrString = NSAttributedString(string: text,
                                                attributes: attributes)
            self.attributedText = attrString
        }
    }
}

결과: 이런식으로 밑으로 붙는다.

line height는 세팅한 값으로 잘 되는데, 이제 vertical center로 붙여야 하는 문제가 남아있었다.

---

2️⃣ 2차 시도

어떻게 해야하나 한번 여러 글들을 찾아보았다.

 

1) font metrics를 보고

https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html

 

2) 밑과 같은 baseline에 대해 offset을 줄수 있는 친구 있어서 이걸 쓰면 될거 같았다.

찾은 친구

3) 그리고 ( 원하는 line height - font line height ) / 2 만큼 baseline offset을 + 설정하면 되지 않을까 했다.

생각한 방법 : baseline을 저만큼 올리면 되지 않을까?

4) 코드

extension UILabel {
 	func setTextWithLineHeight(text: String?, lineHeight: CGFloat){
        if let text = text {
            let style = NSMutableParagraphStyle()
            style.maximumLineHeight = lineHeight
            style.minimumLineHeight = lineHeight

            let attributes: [NSAttributedString.Key: Any] = [
                .paragraphStyle: style,
                .baselineOffset: (lineHeight - font.lineHeight) / 2
            ]
            
            let attrString = NSAttributedString(string: text,
                                                attributes: attributes)
            self.attributedText = attrString
        }
    }
}

5) 결과

 

내 생각과는 다르게 위에 붙는다..

왜 붙지??;;

솔직히 이해가 잘 안간다.. 내가 생각하는 식으로 baselineoffset이 동작을 안하나???..

---

3️⃣ 3차 시도

멘붕이라서 바로 인터넷을 뒤져봤다.

http://blog.eppz.eu/uilabel-line-height-letter-spacing-and-more-uilabel-typography-extensions/

UILabel line height, letter spacing and more UILabel typography extensions - eppz!

이 글에서는 /2를 했을때 위에 붙으니까 거기서 또 반으로 나눠봐라 라는 말을 하면서 /4를 하는데.. ( 대충 읽어서 다른곳에 설명이 있을수도 있겠지만, 필자는 못찾겠다.ㅠ ) 

 

Interestingly enough, the code above offsets the text to the top of the label (left image above). In order to layout the text to the actual vertical center, you need to half the baselineOffset again, thus set it to 10 (right image above). This results in a formula like below.

 

아무튼.. 일리 있는 말이니까  

( 원하는 line height - font line height ) / 4 값을 base line offset에 + 해줬다.

extension UILabel {
 	func setTextWithLineHeight(text: String?, lineHeight: CGFloat){
        if let text = text {
            let style = NSMutableParagraphStyle()
            style.maximumLineHeight = lineHeight
            style.minimumLineHeight = lineHeight

            let attributes: [NSAttributedString.Key: Any] = [
                .paragraphStyle: style,
                .baselineOffset: (lineHeight - font.lineHeight) / 4
            ]
            
            let attrString = NSAttributedString(string: text,
                                                attributes: attributes)
            self.attributedText = attrString
        }
    }
}

결과

되넴...? ㅋㅋㅋㅋㅋ 왜 /2가 아니라 /4일까?.. 

알게 되면 밑에 추가적으로 설명을 남기겠다.

---

📚 참고

http://blog.eppz.eu/uilabel-line-height-letter-spacing-and-more-uilabel-typography-extensions/

UILabel line height, letter spacing and more UILabel typography extensions - eppz!

https://sujinnaljin.medium.com/swift-label%EC%9D%98-line-height-%EC%84%A4%EC%A0%95-%EB%B0%8F-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC-962f7c6e7512

[Swift] label의 Line Height 설정 및 가운데 정렬