Leading at Line Spacing: ano ito at configuration sa iOS at Android

Ano ang leading at line spacing

Leading (binibigkas na „lending”) — ay ang vertical na distansya sa pagitan ng mga baseline ng magkakatabing linya sa typography. Ang baseline — ang hindi nakikitang linya kung saan inilalagay ang mga character ng teksto. Kung mas malaki ang leading, mas malaya ang pagkakalagay ng mga linya sa isa't isa. Sa digital typography, ang leading ay madalas na tinatawag na line spacing o line height.

Sa kasaysayan, ang termino ay lumitaw sa panahon ng metal typography: ang mga typesetter ay naglalagay ng manipis na lead strips sa pagitan ng mga linya upang dagdagan ang agwat. Sa modernong mga font, ang leading ay tinutukoy bilang ratio sa laki ng font. Ang default na halaga ng system ay 1.2 (120% ng laki ng font), ngunit para sa mahabang teksto at mobile interfaces ay inirerekomenda ang mas malaking halaga. Ayon sa Material Design Typography Guidelines, ang optimal na line height para sa web at mobile interfaces ay 1.4-1.5 para sa pangunahing teksto.

Pagkakaiba sa pagitan ng leading at line spacing: leading — buong distansya mula sa baseline hanggang baseline, line spacing — distansya sa pagitan ng ibabang hangganan ng isang linya at itaas na hangganan ng susunod na linya. Sa karamihan ng mobile API (iOS NSParagraphStyle, Android TextView) ang ginagamit ay line spacing bilang karagdagang espasyo sa ibabaw ng natural na taas ng linya. Ito ay mahalagang isaalang-alang kapag kinakalkula ang kabuuang line spacing.

Optimal na halaga ng leading para sa mobile interfaces

Ang pagpili ng optimal na leading ay nakadepende sa ilang mga salik: laki ng font, haba ng linya, konteksto ng paggamit at audience. Para sa mobile interfaces na may tipikal na haba ng linya na 40-60 character, inirerekomenda ang leading mula 1.4 hanggang 1.6 ng laki ng font. Ang mga maikling linya (label, button) ay maaaring gumamit ng mas maliit na leading — 1.0-1.2. Ang mahabang teksto (artikulo, paglalarawan) — mas malaking leading, hanggang 1.8 para sa maximum na pagiging nababasa.

Eksperimental na datos: ang pananaliksik ng Wichita State University Software Usability Laboratory ay nagpakita na ang leading 1.5 ay nagpapataas ng bilis ng pagbasa ng 7.5% kumpara sa leading 1.0 sa parehong lapad ng linya. Para sa mga gumagamit na may dyslexia, ang optimal na leading ay mas mataas pa — hanggang 1.8. Ang datos na ito ay kinumpirma ng mga rekomendasyon ng WCAG 2.2, na nangangailangan ng posibilidad na dagdagan ang line spacing hanggang 1.5 nang walang pagkawala ng nilalaman.

Epekto ng typeface: ang mga font na may mataas na x-height (relative na taas ng maliliit na letra) ay nangangailangan ng mas malaking leading kaysa sa mga font na may mababang x-height. Halimbawa, ang Helvetica (mataas na x-height) ay nagrerekomenda ng leading 1.5 para sa body text, habang ang Didot (mababang x-height) — 1.3. Ito ay dahil sa mataas na x-height, ang mga linya ay mas mabilis na naghahalo sa paningin sa parehong line spacing.

Pagpapatupad ng leading sa iOS sa pamamagitan ng NSParagraphStyle

Sa iOS, ang line spacing ay pinamamahalaan sa pamamagitan ng klase na NSMutableParagraphStyle, na naglalaman ng dalawang pangunahing pag-aari: lineSpacing (karagdagang espasyo sa pagitan ng mga linya sa puntos) at lineHeightMultiple (multiplier ng taas ng linya). Ang mga pag-aari na ito ay nagtutulungan: ang kabuuang taas ng linya ay kinakalkula bilang natural na taas ng font na pinarami ng lineHeightMultiple kasama ang lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Paraan 1: multiplier ng taas ng linya
paragraphStyle.lineHeightMultiple = 1.5

// Paraan 2: karagdagang espasyo sa pagitan ng mga linya
paragraphStyle.lineSpacing = 4.0

// Ilapat sa pamamagitan ng NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — ang ginustong paraan, dahil ito ay awtomatikong nags-scale kapag nagbago ang laki ng font. Ang lineSpacing ay itinatakda sa absolute na puntos at hindi nags-scale, na maaaring humantong sa hindi pagkakatugma kapag gumagamit ng Dynamic Type. Ayon sa Apple Text Programming Guide, para sa mga interface na katugma sa accessibility, gamitin ang lineHeightMultiple sa kombinasyon sa UIFontMetrics.

SwiftUI ay nagbibigay ng modifier na .lineSpacing() para sa Text at VStack. Hindi tulad ng UIKit, sa SwiftUI ang line spacing ay itinatakda sa mga puntos at walang built-in na multiplier. Upang ipatupad ang multiplier, kailangan ng developer na manual na kalkulahin ang line spacing batay sa laki ng font. Limitasyon: Hindi direktang sinusuportahan ng SwiftUI ang lineHeightMultiple — gamitin ang .lineSpacing(CGFloat) na may kalkuladong halaga.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% ng laki ng font
    }

    var body: some View {
        Text("Line spacing")
        Text("Multiplier 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Configuration ng line spacing sa Android

Sa Android, ang line spacing ay itinatakda sa pamamagitan ng dalawang attribute ng TextView: lineSpacingExtra (karagdagang espasyo sa px) at lineSpacingMultiplier (multiplier ng taas ng linya, default 1.0). Katulad ng iOS, ang multiplier ay nags-scale kapag nagbago ang laki ng font, habang ang extra ay absolute na halaga. Para sa mga interface na katugma sa accessibility, ang paggamit ng multiplier ay mas gusto.

// Sa XML layout
<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" />

// Programmatically sa Kotlin
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — modernong Android UI framework — ay gumagamit ng parameter na lineHeight sa modifier na TextStyle. Hindi tulad ng XML approach, sa Compose ang lineHeight ay itinatakda bilang buong taas ng linya sa sp (default = fontSize * 1.2). Upang itakda ang multiplier, tinutukoy ng developer ang lineHeight bilang porsyento ng fontSize: Halimbawa: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) ay nagbibigay ng multiplier na 1.5.

Limitasyon: sa Android bago ang API 28, ang lineSpacingExtra at lineSpacingMultiplier ay hindi gumagana nang tama sa ilang mga font, lalo na sa mga custom na font (TTF/OTF). Inirerekomenda ang pagsubok sa mga tunay na device at isaalang-alang na ang systemTextView ay gumagamit ng default na lineSpacingMultiplier 1.0 — walang karagdagang espasyo. Para sa mahabang teksto sa ScrollView, tiyaking itakda nang tahasan ang line spacing.

Line spacing sa web development sa pamamagitan ng CSS line-height

Sa web, ang line spacing ay itinatakda ng CSS property na line-height, na maaaring isang numero (multiplier), porsyento na halaga, yunit ng haba (px, em) o keyword na normal. Ang numeric multiplier — ang ginustong paraan, dahil ito ay minamana at nags-scale relative sa laki ng font ng mga anak na elemento. Ang halaga na normal ay tumutugma sa humigit-kumulang 1.2 para sa karamihan ng mga font.

/* 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;
}

Numeric multiplier vs em: ang line-height: 1.5 at line-height: 1.5em ay magkaibang bagay. Ang numeric multiplier ay minamana bilang computed value at kinakalkula muli para sa bawat anak na elemento batay sa font-size nito. Ang em ay minamana bilang fixed computed value batay sa font-size ng magulang. Ito ay isang kritikal na pagkakaiba: kapag ang font-size: 20px ay nasa loob ng font-size: 16px, ang line-height: 1.5 ay magbibigay ng 30px, habang ang line-height: 1.5em — 24px (mula sa magulang). Rekomendasyon: palaging gumamit ng numeric multiplier.

Paghahambing ng mga setting ng leading sa iOS, Android at web

Sa kabila ng magkakaibang API, ang prinsipyo ng configuration ng line spacing ay pareho sa lahat ng platform. Ang multiplier ay nags-scale kapag nagbago ang laki ng font at ito ay accessibility-friendly. Ang absolute na halaga (spacing) ay hindi nags-scale at maaaring humantong sa mga problema kapag gumagamit ng Dynamic Type o malalaking setting ng teksto.

Cross-platform na stratehiya: itakda ang lineHeight sa design system bilang multiplier ng fontSize. Halimbawa, sa design tokens: line-height-body = 1.5, line-height-heading = 1.1. Bawat platform ay nagpapatupad ng multiplier na ito sa pamamagitan ng sarili nitong API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Ito ay ginagarantiyahan ang parehong visual na resulta sa lahat ng platform.

Mahalagang nuance: sa iOS, ang lineHeightMultiple ay inilalapat sa buong taas ng linya (kabilang ang ascender + descender ng font), habang sa Android, ang lineSpacingMultiplier — sa taas ng linya na kinakalkula ng render engine na Minikin. Sa praktika, ito ay humahantong sa maliliit na pagkakaiba sa visual na leading sa parehong halaga ng multiplier. Para sa pixel-perfect na pagkakatugma, gumamit ng absolute na halaga na may platform adjustment.