The line height of the 1st line of a SwiftUI Text view is different from what the HIG specifies:
For example (Content Size Category = .large , @2) :
(Please see code below)
The difference depends on Content Size Category and resolution of the device.
Behavior is the same in Xcode 11 (macOS 10.15.5) and Xcode-beta 12 (macOS 11.0 Beta (20A4299v))
Questions:
For example (Content Size Category = .large , @2) :
(Please see code below)
10 lines of Body - HIG = 220.00 pt
10 lines of Text with Body = 218.50 pt
10 x 1 lines of Text with Body = 205.00 pt
The difference depends on Content Size Category and resolution of the device.
Behavior is the same in Xcode 11 (macOS 10.15.5) and Xcode-beta 12 (macOS 11.0 Beta (20A4299v))
Questions:
Why is that?
What’s the benefit of that?
Is there an easy way to specify HIG line heights - so that the frame size of the Text is a clean multiple of HIG's line height?
Code Block import SwiftUI struct LineHeights: View { var body: some View { HStack(alignment: .top, spacing: 0) { // 1x10 lines in "L Body" - height = 218.50 pt - why? // ======================================================= Text("Hello, World! 0\nHello, World! 1\nHello, World! 2\nHello, World! 3\nHello, World! 4\nHello, World! 5\nHello, World! 6\nHello, World! 7\nHello, World! 8\nHello, World! 9") .frame(width:120) .overlay(Measurement(color: .green)) // reads: 218.50pt (@3: 218.33pt) // 10x1 lines in style "L Body" - height = 205.00 - why? // ======================================================= VStack(spacing: 0) { Text("Hello, World! 0") Text("Hello, World! 1") Text("Hello, World! 2") Text("Hello, World! 3") Text("Hello, World! 4") Text("Hello, World! 5") Text("Hello, World! 6") Text("Hello, World! 7") Text("Hello, World! 8") Text("Hello, World! 9") } .frame(width:120) .overlay(Measurement(color: .yellow)) // reads: 205.00pt (@3: 203.33pt) // Apple HIG: 10 lines in "L Body" - height = 220 pt // ===================================================== Text("Apple iOS HIG:\n10 x Body = 220 pt") .font(.caption) .frame(width:120, height: 220) .overlay(Measurement(color: .blue)) // reads: 220.00pt (@3: 220.00pt) } } } struct Measurement: View { let color: Color var body: some View { // measure GeometryReader { geometry in ZStack(alignment: .bottomTrailing) { // color self.color.opacity(0.8) // display measurement Text("\(geometry.size.height, specifier: "%.2f")") .font(.title2).fontWeight(.bold) .foregroundColor(.red) } } } } struct LineHeights_Previews: PreviewProvider { static var previews: some View { LineHeights() } }