How do I fix clipped ascenders and descenders in a custom font? - swift

Question

I have a custom font that I'm using in my app, Cassandra-Personal. It's a signature style font. Whenever I use it inside of a Text("someText") the font is clipped on the top and bottom due to ascenders and descenders present in the font. A couple of fixes that I've attempted are to change the .frame(), .baselineOffset(), and I also attempted to play around with the kerning/tracking to no avail. In short the text, regardless of the frame, is clipped. Whenever I .baselineOffset() it fixes the one side or the other, but not both sides. For obvious reasons I can't offset both sides simultaneously.
The View
struct GroupListHeaderView: View {
let headerTitle: String
var body: some View {
ZStack(alignment: .center) {
Rectangle().fill(Color(UIColor.yellow))
Text(headerTitle)
.font(Fonts.header)
.frame(height: 100)
}.frame(height: 100)
}
}
Addt'l Supplementary Code
struct Fonts {
// Other fonts removed, not relevant.
static let header = Font.custom(FontName.cassandra.rawValue, size: 30)
}
public enum FontName: String {
// Other cases removed, not relevant.
case cassandra = "CassandraPersonalUse-Regular"
}
Example #1
Baseline Offset of 30
Example #2
Baseline Offset of -30
Example #3
Frame height: 100

Answer 1

I faced with this problem today.
I have a workaround, but this is not the final solution. I add an invisible character '|' before and after the string.
func titleLabel(of title: String, fontName: String, fontSize: CGFloat, textColor: UIColor) -> AttributedString {
let result = NSMutableAttributedString()
var beginAttributes: [NSAttributedString.Key: Any] = [:]
beginAttributes[.font] = UIFont(name: fontName, size: fontSize)
beginAttributes[.foregroundColor] = UIColor.clear
beginAttributes[.baselineOffset] = -fontSize / 4
let beginAttributedString = NSAttributedString(string: "|", attributes: beginAttributes)
result.append(beginAttributedString)
var mainAttributes: [NSAttributedString.Key: Any] = [:]
mainAttributes[.font] = UIFont(name: fontName, size: fontSize)
mainAttributes[.foregroundColor] = textColor
let mainAttributedString = NSAttributedString(string: title, attributes: mainAttributes)
result.append(mainAttributedString)
var endAttributes: [NSAttributedString.Key: Any] = [:]
endAttributes[.font] = UIFont(name: fontName, size: fontSize)
endAttributes[.foregroundColor] = UIColor.clear
endAttributes[.baselineOffset] = fontSize / 4
let endAttributedString = NSAttributedString(string: "|", attributes: endAttributes)
result.append(endAttributedString)
let string = AttributedString(result)
return string
}
// useage:
Text(self.titleLabel(of: "Some Title", fontName: "CassandraPersonalUse-Regular", fontSize: 30, textColor: .black))

Answer 2

This down code should solve your issue:
Note: You can not give a fixed size to ZStack! because it would overridden the needed size for Text! it may get big or small size!
Also I think you would need use backgroundColor for Text instead of using Rectangle().
struct GroupListHeaderView: View {
let headerTitle: String
var body: some View {
Rectangle().fill(Color(UIColor.yellow))
.overlay(Text(headerTitle).font(Font.custom("CassandraPersonalUse-Regular", size: 30)))
}
}