ลิเกเจอร์ในการพัฒนาแอปมือถือ — พื้นฐานและการประยุกต์ใช้การเชื่อมต่ออักขระ

ลิเกเจอร์ในงานตัวพิมพ์คืออะไร

ลิเกเจอร์ คือเทคนิคทางตัวพิมพ์ที่อักขระสองตัวขึ้นไปถูกแทนที่ด้วยเครื่องหมายที่ออกแบบมาโดยเฉพาะหนึ่งตัว จุดประสงค์หลักของลิเกเจอร์คือการขจัดความขัดแย้งทางสายตาระหว่างอักขระข้างเคียงและปรับปรุงการรับรู้ข้อความ ในคู่ fi เป็นต้น ส่วนที่ยื่นด้านบนของตัวอักษร f จะชนกับจุดของตัวอักษร i — ลิเกเจอร์จะรวมทั้งสองเข้าเป็นสัญลักษณ์ที่สง่างามตัวเดียว

ลิเกเจอร์แบ่งออกเป็นแบบบังคับ (มาตรฐาน) และแบบทางเลือก (ตกแต่ง) ลิเกเจอร์มาตรฐาน คือคู่ที่พบได้ในฟอนต์ส่วนใหญ่: fi, fl, ff, ffi, ffl ถือว่าจำเป็นสำหรับงานตัวพิมพ์คุณภาพสูงและถูกบรรจุในฟอนต์โดยค่าเริ่มต้น ตาม OpenType Specification ลิเกเจอร์มาตรฐานจะถูกเข้ารหัสด้วยแท็ก 'liga' และควรมีอยู่ในฟอนต์ระดับมืออาชีพทุกแบบ

ผลทางสายตา: หากไม่มีลิเกเจอร์ คู่ fi จะดูเหมือนอักขระสองตัวแยกกันที่สัมผัสกันอย่างไม่พึงประสงค์ แต่เมื่อมีลิเกเจอร์จะดูเหมือนสัญลักษณ์ที่กลมกลืนกันหนึ่งตัว ความแตกต่างเห็นได้ชัดโดยเฉพาะในขนาดตัวอักษรใหญ่ (หัวข้อ โลโก้) และในข้อความที่มีคู่ซ้ำกันจำนวนมาก (เช่น ในภาษาเยอรมันซึ่งมีการผสมอักขระที่พบบ่อย häufigen Buchstabenkombinationen)

ประเภทของลิเกเจอร์: มาตรฐาน, discretionary, แบบตามบริบท

ฟอนต์ OpenType รองรับลิเกเจอร์หลายประเภท แต่ละประเภทมีแท็กและวัตถุประสงค์ของตัวเอง แบบมาตรฐาน (แท็ก 'liga') — ลิเกเจอร์บังคับที่บรรจุในฟอนต์โดยค่าเริ่มต้น ช่วยปรับปรุงความสามารถในการอ่านและไม่ควรปิดโดยไม่มีเหตุผลอันควร ประกอบด้วยคู่ fi, fl, ff, ffi, ffl และอื่นๆ ที่จำเพาะต่อชุดฟอนต์

ลิเกเจอร์แบบ discretionary (แท็ก 'dlig') — ลิเกเจอร์ตกแต่งที่เปิดใช้งานตามดุลยพินิจของนักออกแบบ ไม่จำเป็นต่อการอ่านและใช้เพื่อตกแต่งข้อความ: ct, st, sp, Th, Qu และอื่นๆ ลิเกเจอร์แบบ discretionary มักพบในฟอนต์ที่มีลักษณะอิงประวัติศาสตร์หรือลายมือ เช่น Garamond หรือ Adobe Caslon คำเตือน: การใช้ลิเกเจอร์ discretionary มากเกินไปทำให้อ่านยากขึ้น โดยเฉพาะสำหรับผู้ใช้ที่มีภาวะดิสเล็กเซีย

ลิเกเจอร์แบบตามบริบท (แท็ก 'clig') — ลิเกเจอร์ที่ขึ้นอยู่กับสภาพแวดล้อมของอักขระ จะถูกใช้เฉพาะภายใต้เงื่อนไขบางประการ: หากอักขระอยู่ต้นหรือท้ายคำ ตามหลังเครื่องหมายวรรคตอนบางตัว และอื่นๆ ลิเกเจอร์แบบตามบริบทเป็นฟีเจอร์ OpenType ขั้นสูงที่ฟอนต์ไม่ทุกรองรับ ลิเกเจอร์แบบอิงประวัติศาสตร์ (แท็ก 'hlig') — ลิเกเจอร์โบราณที่เลียนแบบสไตล์ของหนังสือที่พิมพ์ในยุคแรก (long s, &) ใช้น้อยมาก เฉพาะในข้อความเชิงประวัติศาสตร์หรือเชิงสไตล์

ประเภทที่หายาก: ยังมีลิเกเจอร์สำหรับการเรียงพิมพ์คณิตศาสตร์ (แท็ก 'dlig' สำหรับสัญลักษณ์คณิตศาสตร์) และลิเกเจอร์ตัวอักษรเริ่มต้น (drop caps) แต่ไม่ได้ใช้ในงานตัวพิมพ์ของอินเทอร์เฟซและรองรับเฉพาะฟอนต์เฉพาะทางเท่านั้น

ประวัติของลิเกเจอร์: จากการเรียงพิมพ์โลหะสู่ฟอนต์ดิจิทัล

ลิเกเจอร์ปรากฏขึ้นนานก่อนงานตัวพิมพ์ดิจิทัล — ตั้งแต่ยุคการเรียงพิมพ์โลหะในศตวรรษที่ 15 นักพิมพ์ผู้บุกเบิก โยฮันเนส กูเทนแบร์ก ใช้ลิเกเจอร์เพื่อประหยัดพื้นที่ในบรรทัดของพระคัมภีร์ไบเบิล 42 บรรทัดของเขา ตัวพิมพ์แต่ละตัวเป็นบล็อกโลหะทางกายภาพ และการรวมอักขระสองตัวเป็นตัวพิมพ์เดียวช่วยประหยัดตะกั่วและทำให้การเรียงง่ายขึ้น ลิเกเจอร์มาตรฐาน fi, fl, ffi, ffl เป็นมรดกจากยุคนั้น

ในการเรียงพิมพ์ด้วยภาพถ่าย (ศตวรรษที่ 20) ลิเกเจอร์สูญเสียหน้าที่ในทางปฏิบัติแต่ยังคงอยู่เป็นองค์ประกอบเชิงสุนทรียะของงานตัวพิมพ์คุณภาพสูง นักออกแบบฟอนต์ยังคงใส่ลิเกเจอร์ในชุดฟอนต์ของตนต่อไป เพราะมันกลายเป็นเครื่องหมายของความเป็นมืออาชีพและความใส่ใจในรายละเอียด ในยุคฟอนต์ดิจิทัล (PostScript, TrueType) ลิเกเจอร์ถูกนำไปใช้เป็นกลไกอักขระแยกต่างหากพร้อมการแทนที่ด้วยโปรแกรม

OpenType (1996) ถือเป็นการปฏิวัติ: นำเสนอกลไก GSUB (Glyph Substitution Table) ที่ทำให้สามารถแทนที่ลำดับอักขระด้วยลิเกเจอร์โดยอัตโนมัติโดยไม่ต้องมีการแทรกแซงจากผู้ใช้ GSUB รองรับการแทนที่ตามบริบท เงื่อนไข และทางเลือกสำรอง ทำให้ฟอนต์สามารถมีลิเกเจอร์ได้หลายร้อยแบบซึ่งเปิด/ปิดผ่านแท็ก ฟอนต์สมัยใหม่ — SF Pro, Roboto, Inter — รองรับลิเกเจอร์ OpenType บนทุกแพลตฟอร์ม: iOS, Android, macOS, Windows, เว็บ

การใช้งานลิเกเจอร์บน iOS ผ่าน UIFontDescriptor

บน iOS สามารถควบคุมลิเกเจอร์ได้ผ่าน UIFontDescriptor โดยใช้แอตทริบิวต์ featureSettings แอตทริบิวต์นี้รับอาร์เรย์ของดิกชันนารี ซึ่งแต่ละตัวอธิบายฟีเจอร์ OpenType หนึ่งรายการ การควบคุมลิเกเจอร์ผ่านเดสคริปเตอร์เป็นวิธีเดียวที่จะควบคุมลิเกเจอร์แต่ละประเภทโดยไม่กระทบฟีเจอร์ OpenType อื่นๆ ของฟอนต์

let descriptor = UIFontDescriptor.preferredFontDescriptor(
    withTextStyle: .body
)

// เปิดใช้งานลิเกเจอร์แบบ discretionary
let ligatureDescriptor = descriptor.addingAttributes([
    .featureSettings: [
        [
            UIFontDescriptor.FeatureIdentifier: kLigaturesType,
            UIFontDescriptor.TypeIdentifier: kCommonLigaturesOnSelector
        ]
    ]
])

let font = UIFont(
    descriptor: ligatureDescriptor,
    size: 17
)

NSAttributedString ยังรองรับแอตทริบิวต์ ligature: NSNumber ค่า 0 — ปิดลิเกเจอร์ทั้งหมด, 1 — เปิดแบบมาตรฐาน (ค่าเริ่มต้น), 2 — เปิดทั้งหมด (รวมถึงแบบ discretionary) อย่างไรก็ตาม แอตทริบิวต์ ligature ใน NSAttributedString ไม่ให้การควบคุมลิเกเจอร์แต่ละประเภทอย่างละเอียด — มีเพียงการเปิด/ปิดโดยรวมเท่านั้น สำหรับการควบคุมแบบเลือกใช้ ให้ใช้ UIFontDescriptor กับ featureSettings

SwiftUI ไม่มีมอดิฟายเออร์โดยตรงสำหรับลิเกเจอร์ ในการควบคุมลิเกเจอร์ใน SwiftUI ให้สร้าง UIFont พร้อมการตั้งค่าที่ต้องการผ่าน UIFontDescriptor แล้วนำไปใช้ผ่าน Font(descriptor:size:) หรืออีกทางหนึ่ง ให้ใช้ AttributedString (iOS 15+) พร้อมแอตทริบิวต์ .ligature สำหรับ NSMutableAttributedString ในมุมมอง AppKit/UIKit

// SwiftUI พร้อมลิเกเจอร์แบบกำหนดเองผ่าน AttributedString
var attributedText: AttributedString {
    var text = AttributedString(
        "Effective typography with ligatures"
    )

    // เปิดใช้งานลิเกเจอร์ทั้งหมดสำหรับข้อความทั้งหมด
    text.ligature = .all

    return text
}

var body: some View {
    Text(attributedText)
}

การควบคุมลิเกเจอร์ใน CSS และบน Android

บนเว็บ ลิเกเจอร์ถูกควบคุมผ่านคุณสมบัติ CSS font-variant-ligatures ซึ่งรับคีย์เวิร์ด: common-ligatures (มาตรฐานเปิดใช้งาน), no-common-ligatures (มาตรฐานปิดใช้งาน), discretionary-ligatures, no-discretionary-ligatures, contextual, no-contextual คุณสมบัตินี้รองรับโดยเบราว์เซอร์สมัยใหม่ทุกตัวตั้งแต่ปี 2015 โดยค่าเริ่มต้น เบราว์เซอร์จะเปิดลิเกเจอร์มาตรฐานและแบบตามบริบท

/* Disable all ligatures for monospace */
code, pre {
    font-variant-ligatures: none;
}

/* Enable discretionary ligatures for headings */
.title-fancy {
    font-variant-ligatures:
        common-ligatures
        discretionary-ligatures
        contextual;
}

Android ไม่มี API โดยตรงสำหรับควบคุมลิเกเจอร์ บน Android ลิเกเจอร์ถูกควบคุมในระดับฟอนต์และเอนจินการเรนเดอร์ Minikin (Android 10+) หากฟอนต์มีตาราง OpenType GSUB ลิเกเจอร์จะถูกนำไปใช้โดยอัตโนมัติ ในการปิดลิเกเจอร์บน Android จะใช้ Typeface แบบกำหนดเองที่สร้างผ่าน Typeface.Builder หรือการประมวลผลข้อความล่วงหน้า (การแทนที่อักขระก่อนแสดงผล) ข้อจำกัด: บน Android ที่ต่ำกว่า 10 ลิเกเจอร์อาจทำงานไม่ถูกต้องกับฟอนต์ TTF บางแบบ

การควบคุมระดับต่ำ: บนทุกแพลตฟอร์มสามารถใช้ CSS @font-face พร้อมพารามิเตอร์ font-feature-settings สำหรับฟีเจอร์ OpenType วิธีนี้ให้เข้าถึงแท็ก OpenType ใดก็ได้ รวมถึงลิเกเจอร์ ตัวอย่าง: font-feature-settings: 'liga' 1, 'dlig' 1 อย่างไรก็ตาม font-feature-settings เป็นไวยากรณ์ระดับต่ำ และ MDN แนะนำให้ใช้ font-variant-ligatures เป็นทางเลือกระดับสูงกว่า

ลิเกเจอร์ในฟอนต์สำหรับเขียนโปรแกรม

ลิเกเจอร์ประเภทพิเศษ — ลิเกเจอร์สำหรับโปรแกรมเมอร์ ที่รวมตัวดำเนินการและอักขระของโค้ดให้เป็นเครื่องหมายที่อ่านง่ายขึ้น ฟอนต์สำหรับเขียนโปรแกรม เช่น Fira Code, JetBrains Mono, Cascadia Code มีลิเกเจอร์แบบ discretionary สำหรับตัวดำเนินการทั่วไป: != (กลายเป็น ≠), >= (กลายเป็น ≥), -> (กลายเป็นลูกศร), => (กลายเป็นลูกศรหนา), === (กลายเป็นเครื่องหมายเท่ากับสามตัว)

ลิเกเจอร์สำหรับโปรแกรมเมอร์เป็นหัวข้อที่ถกเถียงกันในชุมชนนักพัฒนา ฝ่ายสนับสนุนกล่าวว่าลิเกเจอร์เร่งการอ่านโค้ดเพราะตัวดำเนินการถูกรับรู้เป็นแนวคิดเดียว งานวิจัย (Kera et al., PLATEAU 2020) แสดงให้เห็นว่าลิเกเจอร์ไม่ส่งผลต่อความเร็วในการอ่านโค้ด แต่ 67% ของนักพัฒนาชอบมันตามความรู้สึกส่วนตัว ฝ่ายที่คัดค้านชี้ว่าลิเกเจอร์บิดเบือนโค้ด: อักขระ != แสดงผลเป็น ≠ ในเอดิเตอร์ แต่ในไฟล์ข้อความถูกจัดเก็บเป็นสองอักขระ ซึ่งอาจทำให้สับสนเมื่อทำงานร่วมกัน

การใช้งานเชิงเทคนิค: ลิเกเจอร์สำหรับโปรแกรมเมอร์คือลิเกเจอร์ OpenType แบบ discretionary (แท็ก 'dlig') ปิดใช้งานโดยค่าเริ่มต้นและเปิดในเอดิเตอร์โค้ดผ่านการตั้งค่าฟอนต์ นักพัฒนาที่ใช้ฟอนต์เหล่านี้ต้องตั้งค่าเอดิเตอร์ให้เปิดลิเกเจอร์แบบ discretionary ในเทอร์มินัล (iTerm2, Windows Terminal) ลิเกเจอร์ก็รองรับผ่านการตั้งค่าฟอนต์เช่นกัน ความเข้ากันได้: ไม่ใช่ทุกเอดิเตอร์และเทอร์มินัลที่รองรับลิเกเจอร์ OpenType ก่อนเลือกฟอนต์ โปรดตรวจสอบความเข้ากันได้กับเครื่องมือของคุณ

// ตัวอย่าง: ลิเกเจอร์ตัวดำเนินการใน JetBrains Mono
val isEqual = a != b  // != แสดงผลเป็น ≠
val arrow = x -> x + 1  // -> แสดงผลเป็น →
val range = 1 .. 10  // .. แสดงผลเป็น range

ฟอนต์ยอดนิยม พร้อมลิเกเจอร์สำหรับโปรแกรมเมอร์: Fira Code (ฟอนต์มวลชนตัวแรกที่มีลิเกเจอร์, 2015), JetBrains Mono (ปรับให้เหมาะกับการอ่านโค้ด, 2020), Cascadia Code (จาก Microsoft, 2019), Iosevka (ฟอนต์ที่ปรับแต่งได้พร้อมระบบลิเกเจอร์แบบโมดูลาร์) แต่ละฟอนต์มีชุดลิเกเจอร์ของตัวเอง — ตั้งแต่ 50 ถึง 150+ การแทนที่ คำแนะนำ: เริ่มจาก Fira Code หรือ JetBrains Mono — ทั้งสองมีการรองรับที่ดีที่สุดในเอดิเตอร์และ IDE