Leading และระยะห่างระหว่างบรรทัด: คืออะไรและการตั้งค่าใน iOS และ Android

Leading และระยะห่างระหว่างบรรทัดคืออะไร

Leading (อ่านว่า “ลีดดิง”) — คือระยะห่างแนวตั้งระหว่างเส้นฐานของบรรทัดที่อยู่ติดกันในวิชาการพิมพ์ เส้นฐานคือเส้นที่มองไม่เห็นซึ่งตัวอักษรของข้อความวางอยู่ ยิ่ง leading มากเท่าไหร่ บรรทัดก็ยิ่งถูกจัดวางอย่างอิสระมากขึ้นเท่านั้น ในการพิมพ์ดิจิทัล leading มักเรียกระยะห่างระหว่างบรรทัดหรือความสูงของบรรทัด

ในอดีต คำนี้ปรากฏในยุคของการพิมพ์โลหะ: ผู้เรียงพิมพ์ใส่แถบตะกั่วบางๆ ระหว่างบรรทัดเพื่อเพิ่มระยะห่าง ในฟอนต์สมัยใหม่ leading ถูกกำหนดเป็นอัตราส่วนต่อขนาดฟอนต์ ค่าเริ่มต้นของระบบ — 1.2 (120% ของขนาดฟอนต์) แต่สำหรับข้อความยาวและอินเทอร์เฟซมือถือ แนะนำให้ใช้ค่าที่มากขึ้น ตาม Material Design Typography Guidelines ความสูงของบรรทัดที่เหมาะสมที่สุดสำหรับอินเทอร์เฟซเว็บและมือถือคือ 1.4-1.5 สำหรับข้อความหลัก

ความแตกต่างระหว่าง leading และระยะห่างระหว่างบรรทัด: leading คือระยะห่างทั้งหมดจากเส้นฐานถึงเส้นฐาน ส่วนระยะห่างระหว่างบรรทัดคือระยะห่างระหว่างขอบล่างของบรรทัดหนึ่งกับขอบบนของบรรทัดถัดไป ใน API มือถือส่วนใหญ่ (iOS NSParagraphStyle, Android TextView) ระยะห่างระหว่างบรรทัดถูกใช้เป็นพื้นที่เพิ่มเติมเหนือความสูงตามธรรมชาติของบรรทัด สิ่งนี้สำคัญที่ต้องพิจารณาเมื่อคำนวณระยะห่างระหว่างบรรทัดทั้งหมด

ค่า leading ที่เหมาะสมที่สุดสำหรับอินเทอร์เฟซมือถือ

การเลือก leading ที่เหมาะสมที่สุด ขึ้นอยู่กับหลายปัจจัย: ขนาดฟอนต์, ความยาวบรรทัด, บริบทการใช้งาน และกลุ่มผู้ชม สำหรับอินเทอร์เฟซมือถือที่มีความกว้างบรรทัดทั่วไป 40-60 ตัวอักษร แนะนำให้ใช้ leading 1.4 ถึง 1.6 ของขนาดฟอนต์ บรรทัดสั้น (ป้ายกำกับ, ปุ่ม) สามารถใช้ leading ที่เล็กกว่า — 1.0-1.2 ข้อความยาว (บทความ, คำอธิบาย) — leading ที่ใหญ่กว่า สูงถึง 1.8 เพื่อการอ่านสูงสุด

ข้อมูลการทดลอง: การวิจัยของ Wichita State University Software Usability Laboratory แสดงให้เห็นว่า leading 1.5 เพิ่มความเร็วในการอ่าน 7.5% เมื่อเทียบกับ leading 1.0 ที่ความกว้างบรรทัดเท่ากัน สำหรับผู้ใช้ที่มีภาวะดิสเล็กเซีย ค่า leading ที่เหมาะสมที่สุดสูงกว่านั้นอีก — สูงถึง 1.8 ข้อมูลนี้ได้รับการยืนยันโดยคำแนะนำ WCAG 2.2 ซึ่งกำหนดให้สามารถเพิ่มระยะห่างระหว่างบรรทัดเป็น 1.5 โดยไม่สูญเสียเนื้อหา

อิทธิพลของแบบอักษร: ฟอนต์ที่มี x-height สูง (ความสูงสัมพัทธ์ของตัวพิมพ์เล็ก) ต้องการ leading ที่มากกว่าฟอนต์ที่มี x-height ต่ำ ตัวอย่างเช่น Helvetica (x-height สูง) แนะนำ leading 1.5 สำหรับข้อความตัวหลัก ในขณะที่ Didot (x-height ต่ำ) — 1.3 ทั้งนี้เพราะเมื่อ x-height สูง บรรทัดจะรวมตัวกันทางสายตาเร็วขึ้นด้วยระยะห่างระหว่างบรรทัดเท่ากัน

การนำ leading ไปใช้บน iOS ผ่าน NSParagraphStyle

บน iOS ระยะห่างระหว่างบรรทัดถูกควบคุมผ่านคลาส NSMutableParagraphStyle ซึ่งมีคุณสมบัติหลักสองอย่าง: lineSpacing (พื้นที่เพิ่มเติมระหว่างบรรทัดเป็นจุด) และ lineHeightMultiple (ตัวคูณความสูงของบรรทัด) คุณสมบัติเหล่านี้ทำงานร่วมกัน: ความสูงสุดท้ายของบรรทัดถูกคำนวณเป็นความสูงตามธรรมชาติของฟอนต์คูณด้วย lineHeightMultiple บวก lineSpacing

let paragraphStyle = NSMutableParagraphStyle()

// วิธีที่ 1: ตัวคูณความสูงของบรรทัด
paragraphStyle.lineHeightMultiple = 1.5

// วิธีที่ 2: ระยะห่างพิเศษระหว่างบรรทัด
paragraphStyle.lineSpacing = 4.0

// ใช้ผ่าน NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — เป็นวิธีที่ต้องการ เนื่องจากปรับขนาดโดยอัตโนมัติเมื่อขนาดฟอนต์เปลี่ยนแปลง lineSpacing ถูกกำหนดเป็นจุดสัมบูรณ์และไม่ปรับขนาด ซึ่งอาจทำให้เกิดความไม่สอดคล้องกันเมื่อใช้ Dynamic Type ตาม Apple Text Programming Guide สำหรับอินเทอร์เฟซที่เข้ากันได้กับการเข้าถึง ให้ใช้ lineHeightMultiple ร่วมกับ UIFontMetrics

SwiftUI มีตัวปรับแต่ง .lineSpacing() สำหรับ Text และ VStack ต่างจาก UIKit ใน SwiftUI ระยะห่างระหว่างบรรทัดถูกกำหนดเป็นจุดและไม่มีตัวคูณในตัว ในการใช้ตัวคูณ นักพัฒนาต้องคำนวณระยะห่างระหว่างบรรทัดด้วยตนเองตามขนาดฟอนต์ ข้อจำกัด: SwiftUI ไม่รองรับ lineHeightMultiple โดยตรง — ใช้ .lineSpacing(CGFloat) ด้วยค่าที่คำนวณแล้ว

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% ของขนาดฟอนต์
    }

    var body: some View {
        Text("ระยะห่างระหว่างบรรทัด")
        Text("ตัวคูณ 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

การตั้งค่าระยะห่างระหว่างบรรทัดบน Android

บน Android ระยะห่างระหว่างบรรทัดถูกกำหนดผ่านสองแอตทริบิวต์ของ TextView: lineSpacingExtra (พื้นที่เพิ่มเติมเป็น px) และ lineSpacingMultiplier (ตัวคูณความสูงของบรรทัด, ค่าเริ่มต้น 1.0) คล้ายกับ iOS ตัวคูณจะปรับขนาดเมื่อขนาดฟอนต์เปลี่ยนแปลง ในขณะที่ extra เป็นค่าสัมบูรณ์ สำหรับอินเทอร์เฟซที่เข้ากันได้กับการเข้าถึง ควรใช้ตัวคูณ

// ในเลย์เอาต์ XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// เชิงโปรแกรมใน Kotlin
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — กรอบงาน UI ที่ทันสมัยของ Android — ใช้พารามิเตอร์ lineHeight ในตัวปรับแต่ง TextStyle ต่างจากวิธี XML ใน Compose lineHeight ถูกกำหนดเป็นความสูงทั้งหมดของบรรทัดในหน่วย sp (ค่าเริ่มต้น = fontSize * 1.2) ในการตั้งค่าตัวคูณ นักพัฒนาระบุ lineHeight เป็นเปอร์เซ็นต์ของ fontSize: ตัวอย่าง: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) ให้ตัวคูณ 1.5

ข้อจำกัด: บน Android จนถึง API 28 lineSpacingExtra และ lineSpacingMultiplier ทำงานไม่ถูกต้องกับฟอนต์บางตัว โดยเฉพาะฟอนต์ที่กำหนดเอง (TTF/OTF) แนะนำให้ทดสอบบนอุปกรณ์จริง และทราบว่า systemTextView ใช้ lineSpacingMultiplier 1.0 เป็นค่าเริ่มต้น — โดยไม่มีพื้นที่เพิ่มเติม สำหรับข้อความยาวใน ScrollView จำเป็นต้องตั้งค่าระยะห่างระหว่างบรรทัดอย่างชัดเจน

ระยะห่างระหว่างบรรทัดในการพัฒนาเว็บผ่าน CSS line-height

บนเว็บ ระยะห่างระหว่างบรรทัดถูกกำหนดโดยคุณสมบัติ CSS line-height ซึ่งสามารถเป็นตัวเลข (ตัวคูณ), ค่าเปอร์เซ็นต์, หน่วยความยาว (px, em) หรือคีย์เวิร์ด normal ตัวคูณตัวเลขเป็นวิธีที่ต้องการ เพราะมันสืบทอดและปรับขนาดตามขนาดฟอนต์ขององค์ประกอบย่อย ค่า normal สอดคล้องกับประมาณ 1.2 สำหรับฟอนต์ส่วนใหญ่

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

ตัวคูณตัวเลข vs em: line-height: 1.5 และ line-height: 1.5em เป็นสิ่งที่แตกต่างกัน ตัวคูณตัวเลขถูกสืบทอดเป็นค่าที่คำนวณแล้ว และถูกคำนวณใหม่สำหรับองค์ประกอบย่อยแต่ละรายการตาม font-size ของมัน em ถูกสืบทอดเป็นค่าที่คำนวณคงที่ตาม font-size ขององค์ประกอบหลัก นี่คือความแตกต่างที่สำคัญ: เมื่อ font-size: 20px อยู่ใน font-size: 16px line-height: 1.5 จะให้ 30px ในขณะที่ line-height: 1.5em จะให้ 24px (จากองค์ประกอบหลัก) คำแนะนำ: ใช้ตัวคูณตัวเลขเสมอ

การเปรียบเทียบการตั้งค่า leading บน iOS, Android และเว็บ

แม้จะมี API ที่แตกต่างกัน หลักการกำหนดค่าระยะห่างระหว่างบรรทัดจะเหมือนกันบนทุกแพลตฟอร์ม ตัวคูณ ปรับขนาดเมื่อขนาดฟอนต์เปลี่ยนแปลงและเป็นมิตรกับการเข้าถึง ค่าสัมบูรณ์ (ระยะห่าง) ไม่ปรับขนาดและอาจทำให้เกิดปัญหาเมื่อใช้ Dynamic Type หรือการตั้งค่าข้อความขนาดใหญ่

กลยุทธ์ข้ามแพลตฟอร์ม: กำหนด lineHeight ในระบบออกแบบเป็นตัวคูณของ fontSize ตัวอย่างเช่น ในโทเค็นการออกแบบ: line-height-body = 1.5, line-height-heading = 1.1 แต่ละแพลตฟอร์มใช้ตัวคูณนี้ผ่าน API ของตัวเอง: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5 สิ่งนี้รับประกันผลลัพธ์ทางสายตาเดียวกันบนทุกแพลตฟอร์ม

ประเด็นสำคัญ: บน iOS lineHeightMultiple ถูกนำไปใช้กับความสูงทั้งหมดของบรรทัด (รวมถึง ascender + descender ของฟอนต์) ในขณะที่บน Android lineSpacingMultiplier ถูกนำไปใช้กับความสูงของบรรทัดที่คำนวณโดยเอนจินการเรนเดอร์ Minikin ในทางปฏิบัติ สิ่งนี้นำไปสู่ความแตกต่างเล็กน้อยใน leading ที่มองเห็นด้วยค่าตัวคูณเดียวกัน สำหรับการตรงกันแบบพิกเซลสมบูรณ์ ให้ใช้ค่าสัมบูรณ์พร้อมการปรับตามแพลตฟอร์ม