[SwiftUI] 글자가 밑으로 잘리는 현상 해결, 글자의 위치(높이) 조절하기 : baselineOffset

글자 잘리는 현상.. 개발하다 보니 은근히 자주 보였다.

이게 그냥 기본 폰트를 쓰면 거의 경험할 일이 없는데, 실제 앱을 만들며 다른 폰트를 쓰다 보니 자주 경험하게 되는 것 같다.

해결하면서 생각해보니 폰트마다 baseline 아래로 내려가는 양, 그러니까 descent값이 다른 문제로 인해 발생하는 것 같다.

결국 baseline이니 descent니 하는 것들은 또 깊게 파고들자니 css쪽 영역인 것 같은데,

뭐 간단하게만 사진으로 보자면

원래 내가 생각하던 baseline은 위 사진에 있는 descender(descent)였던 것이다.

그러니까 이제 영어 소문자 g, j, y 이런 애들 쓰다 보면 폰트마다 descent값이 다르니까 밑으로 짤리는 거지..

 

각설하고, 결국 이 문제에 대한 해결책이 궁금한 것인데, 해결하는 방법 자체는 그렇게 어려울 게 없었다.

근데 이제 대충 짤리는 것만 해결하면, g, j, y 이런 글자를 넣지 않는 경우에는 위 아래 간격이 안 맞아 보이면서 별로 안 예쁘단 말이야.

그래서 결국 baselineOffset과 padding을 이용해서 예쁘게 해결했다.

 

---

 

baselineOffset

우선 baselineOffset이 뭐냐?

글자의 위치를 올려준다고 생각하면 된다.

애플 공식 문서 의 코드와 적용 사진을 보면 대충 이해가 될 것이다.

HStack(alignment: .top) {
    Text("Hello")
        .baselineOffset(-10)
        .border(Color.red)
    Text("Hello")
        .border(Color.green)
    Text("Hello")
        .baselineOffset(10)
        .border(Color.blue)
}
.background(Color(white: 0.9))

HStack의 alignment를 top으로 주어 baselineOffset에 관계없이 일단 모두 위쪽 정렬된 것을 볼 수 있다.

 

결국 위에서 말한 baseline의 위치를 조정해주는 놈이다.

근데 얘만 써서는 예쁘게 위치가 조정되지 않는 경우가 왕왕 있다.

 

---

 

해결

내가 만드는 앱에서는 이런 경우였다.

HStack(alignment: .bottom){
	HStack(alignment: .bottom){
		Text("abcdefg")
			.font(.system(size: 30))
			.foregroundColor(Color.gray)
			.padding(.horizontal, 10)
			.background(Color.white.cornerRadius(15))
			.padding(2)
	}.padding(.vertical,10).background(Color.yellow)
}

 

당장 이 사진에서는 잘리지 않는데, 이게 이 View가 다른 View에 종속되어 안으로 들어가거나, 크기가 강제로 조정당하거나,

기기에 따라 글자 아래쪽이 잘리는 경우가 발생한다.

이 때 이제 padding 앞쪽에 가볍게 .baselineOffset(5) 를 넣어주면 해결이 되긴 된다!

근데 여기서 원래 잘리던 문자가 안 들어가면 어떻게 되냐 하면

이렇게 아래가 붕 뜨는 것처럼 보인다.

그래서 baselineOffset 에 넣어준 수치만큼 padding을 top에 주면 아래 사진처럼 깔끔하게 해결된다. (.padding(.top, 5))

 

최종 코드

import SwiftUI

struct ContentView: View {
	var body: some View {
		HStack(alignment: .bottom){
			HStack(alignment: .bottom){
				Text("abcdefg")
					.font(.system(size: 30))
					.foregroundColor(Color.gray)
        	.baselineOffset(5)
        	.padding(.top, 5)
					.padding(.horizontal, 10)
					.background(Color.white.cornerRadius(15))
					.padding(2)
			}.padding(.vertical,10).background(Color.yellow)
		}
	}
}