스유에서 lineHeight과 letterSpacing 적용하기

👋 들어가기 전

swiftUI에서 font에서 제공하는 lineHeight을 조절하고 싶으면, 별도의 가공이 필요하다.

 

lineHeight 관련해서는 아래 포스팅을 보면 조금 도움이 될 것  같다.

[Text 시리즈 2] Font Metrics 와 Glyph metrics

 

우리는 이 조건을 만족하기위해, 약간의 속임수를 부릴 생각이다.

왜냐하면 SwiftUI에서는 lineHeight은 없고 lineSpacing만 있기 때문이다.

---

🏁 학습할 내용

• 목표
• lineSpacing이란
• 속임수

---

🎯 목표

먼저 문제 상황을 살펴보자.

 

먼저 lineHeight은 uifont에서 알아서 던져준다.

 

size 20기준으로는 lineHeight = 23.867188 , 즉 100%가 23.8 뭐시기다.

 

 

 

우리는 이걸 130%로 늘리고 싶다.

 

우리는 저 빨간 부분을 15% , 15%로 나눠서 넣으면될 것 같다.

 

앞서 말한 것 처럼 swiftUI에서는 lineHeight을 직접 조절할 수 없다.

 

그러면 2줄 이상이될 때는 어떨까??

 

우리가 원하는 비율이 되려면 줄 사이 간격도 조절이 필요하다.

---

📏 lineSpacing이란

먼저 SwiftUI에서 우리에게 제공해주는 lineSpacing이 무엇인지 알아보자.

 

lineSpacing은 결정적으로, 2줄 이상이 될 때 눈에 보인다.

 

lineSpacing = 윗줄의 bottom ~ 아랫줄의 top 사이의 간격

 

lineSpacing을 30으로 늘려보니 다음과 같은 결과를 볼 수 있다.

예상했던 것처람 줄 사이 간격이 늘었다.

---

🎴 속임수

우리는 lineHeight을 2개의 padding과 1개의 lineSpacing으로 속일 수 있다.

여기서 각 막대의 높이는 다음과같다.

 

즉, 더해질 높이 H = 2개의 padding과 1개의 lineSpacing으로 나눠가질 수 있다.

• paading 1개 = H/4, 위 아래 2개면, H/2
• linespacing은 남은 H/2

코드로 쓰면 다음과 같다.

public extension View {
  func font<T: TextStyleType>(_ style: T) -> some View {
    let ratio: CGFloat = style.lineHeightRatio - 1 // 1.3 - 1 = 30%
    let height = style.uiFont.lineHeight *  ratio // 추가로 더해질 높이
  	let harf = height / 2
    let padding = harf / 2
    let letterSpacing = style.size * style.letterSpacingRatio

    return self.font(style.font)
      .padding(.vertical, padding)
      .lineSpacing(harf)
      .kerning(letterSpacing)
  }
}

---

출처

https://rriver2.tistory.com/entry/SwiftUI-LineHeight-LineSpace

[SwiftUI] LineHeight, LineSpace

https://www.hackingwithswift.com/forums/swiftui/how-to-transfer-the-line-parameter-from-figma-to-swiftui-layout/23779

How to transfer the line parameter from figma to swiftUI layout? – SwiftUI – Hacking with Swift forums