폰트 ascender, descender

위 이미지에서 Ascent, Descent 의 합은 글자의 실제 높이이다.
Line height – Line gap = Ascent + Descent

그럼 이걸 어디에 사용할 수 있나?
다음과 같은 상황을 한번 살펴 보자. 체크 이미지와 3줄짜리 글이 모두 화면에 Vertical 가운데로 정렬이 된 상태이다.
일반적인 상황이고 아이폰 개발에서 스토리보드 또는 Xib을 이용하여 오토레이아웃을 적용하면 매우 쉽게 가능한다.

그런데 다음 이미지와 같이 체크이미지와 첫번째 라인의 Vertical Center를 같게 하고 싶은 경우도 있을것이다.

위/아래 이미지를 보면 아래 이미지가 조금 더 자연스럽다. 라인수가 길어지면 길어질 수록 체크이미지와 첫번째 라인의 Center가 같은 위치에 놓이게 하고 싶다. 두번째 이미지처럼 하려고 할 때 폰트의 Ascender 와 Descender를 이용하면 된다.

체크이미지 : CheckImage, 3줄 라인 : Label, 이렇게 정의하면
CheckImage.CenterY + (Ascender+Descender)/2 = Label.Top 이 되면 된다.

swift 코드로 표현해 보자면…

var checkImageCenterY: NSLayoutConstraint!
// checkImage.CenterY와 label.Top이 같다고 가정한다.

let font = UIFont.systemFont(ofSize: 16, weight: .regular)
checkImageCenterY.constant = (font.ascender + abs(font.descender)) / 2.0

폰트의 Ascender, Descender를 이용해서 좀 더 자연스럽게 체크 이미지의 Vertical 위치를 이동해 보았다.

답글 남기기

이메일 주소는 공개되지 않습니다.