Leading va qatorlar orasidagi masofa: bu nima va iOS va Android'da sozlash

Leading va qatorlararo masofa nima

Leading (talaffuzi „liding”) — tipografiyada qo'shni qatorlarning tayanch chiziqlari orasidagi vertikal masofa. Tayanch chizig'i — matn belgilari joylashgan ko'rinmas chiziq. Leading qanchalik katta bo'lsa, qatorlar bir-biriga nisbatan shunchalik erkin joylashadi. Raqamli tipografiyada leading ko'pincha qatorlararo masofa yoki qator balandligi deb ataladi.

Tarixan, bu atama metall tipografiya davrida paydo bo'lgan: teruvchilar qatorlar orasiga intervalni oshirish uchun yupqa qo'rg'oshin tasmalarini qo'yishgan. Zamonaviy shriftlarda leading shrift o'lchamiga nisbat sifatida belgilanadi. Tizimning standart qiymati 1.2 (shrift o'lchamining 120%) ni tashkil qiladi, ammo uzun matnlar va mobil interfeyslar uchun kattaroq qiymat tavsiya etiladi. Material Design Typography yo'riqnomasiga ko'ra, veb va mobil interfeyslar uchun optimal qator balandligi asosiy matn uchun 1.4-1.5 ni tashkil qiladi.

Leading va line spacing o'rtasidagi farq: leading — tayanch chizig'idan tayanch chizig'igacha bo'lgan to'liq masofa, line spacing — bir qatorning pastki chegarasi bilan keyingi qatorning yuqori chegarasi orasidagi masofa. Ko'pgina mobil API'larda (iOS NSParagraphStyle, Android TextView) aynan line spacing qatorning tabiiy balandligi ustiga qo'shimcha masofa sifatida ishlatiladi. Umumiy qatorlararo masofani hisoblashda buni hisobga olish muhim.

Mobil interfeyslar uchun optimal leading qiymatlari

Optimal leadingni tanlash bir necha omillarga bog'liq: shrift o'lchami, qator uzunligi, foydalanish konteksti va auditoriya. Qator uzunligi 40-60 belgi bo'lgan tipik mobil interfeyslar uchun shrift o'lchamidan 1.4 dan 1.6 gacha leading tavsiya etiladi. Qisqa qatorlar (yorliqlar, tugmalar) kichikroq leading — 1.0-1.2 ishlatishi mumkin. Uzun matnlar (maqolalar, tavsiflar) — maksimal o'qilish uchun 1.8 gacha kattaroq leading.

Eksperimental ma'lumotlar: Wichita State University Software Usability Laboratory tadqiqoti shuni ko'rsatdiki, leading 1.5 bir xil qator kengligida leading 1.0 bilan solishtirganda o'qish tezligini 7.5% ga oshiradi. Disleksiyasi bo'lgan foydalanuvchilar uchun optimal leading undan ham yuqori — 1.8 gacha. Ushbu ma'lumotlar WCAG 2.2 tavsiyalari bilan tasdiqlanadi, ular tarkibni yo'qotmasdan qatorlararo masofani 1.5 gacha oshirish imkoniyatini talab qiladi.

Shriftning ta'siri: yuqori x-height (kichik harflarning nisbiy balandligi) bo'lgan shriftlar past x-height bo'lgan shriftlardan kattaroq leading talab qiladi. Misol uchun, Helvetica (yuqori x-height) body text uchun leading 1.5, Didot (past x-height) esa 1.3 ni tavsiya qiladi. Buning sababi shundaki, yuqori x-height da bir xil qatorlararo masofada qatorlar vizual tarzda tezroq birlashadi.

iOS'da NSParagraphStyle orqali leadingni amalga oshirish

iOS'da qatorlararo masofa NSMutableParagraphStyle sinfi orqali boshqariladi, u ikkita asosiy xususiyatga ega: lineSpacing (nuqtalarda qatorlar orasidagi qo'shimcha masofa) va lineHeightMultiple (qator balandligi ko'paytiruvchisi). Bu xususiyatlar birgalikda ishlaydi: umumiy qator balandligi shriftning tabiiy balandligi lineHeightMultiple ga ko'paytirilgan va lineSpacing qo'shilgan holda hisoblanadi.

let paragraphStyle = NSMutableParagraphStyle()

// 1-usul: qator balandligi ko'paytiruvchisi
paragraphStyle.lineHeightMultiple = 1.5

// 2-usul: qatorlar orasidagi qo'shimcha masofa
paragraphStyle.lineSpacing = 4.0

// NSAttributedString orqali qo'llang
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — afzal qilingan usul, chunki shrift o'lchami o'zgarganda avtomatik ravishda masshtablanadi. lineSpacing mutlaq nuqtalarda belgilanadi va masshtablanmaydi, bu Dynamic Type ishlatilganda nomuvofiqlikka olib kelishi mumkin. Apple Text Programming Guide'ga ko'ra, accessibility bilan mos keladigan interfeyslar uchun lineHeightMultiple ni UIFontMetrics bilan birgalikda ishlating.

SwiftUI Text va VStack uchun .lineSpacing() modifikatorini taqdim etadi. UIKit'dan farqli o'laroq, SwiftUI'da qatorlararo masofa nuqtalarda belgilanadi va o'rnatilgan ko'paytiruvchiga ega emas. Ko'paytiruvchini amalga oshirish uchun dasturchi shrift o'lchamiga asoslanib qatorlararo masofani qo'lda hisoblashi kerak. Cheklov: SwiftUI to'g'ridan-to'g'ri lineHeightMultiple ni qo'llab-quvvatlamaydi — hisoblangan qiymat bilan .lineSpacing(CGFloat) dan foydalaning.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // Shrift o'lchamining 50%
    }

    var body: some View {
        Text("Qator oralig'i")
        Text("1.5 ko'paytiruvchisi")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Android'da qatorlararo masofani sozlash

Android'da qatorlararo masofa ikkita TextView atributi orqali belgilanadi: lineSpacingExtra (px da qo'shimcha masofa) va lineSpacingMultiplier (qator balandligi ko'paytiruvchisi, standart 1.0). iOS'ga o'xshab, ko'paytiruvchi shrift o'lchami o'zgarganda masshtablanadi, extra esa mutlaq qiymatdir. Accessibility bilan mos keladigan interfeyslar uchun ko'paytiruvchidan foydalanish afzalroq.

// XML tartibida
<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'da dasturiy
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — zamonaviy Android UI framework'i — TextStyle modifikatorida lineHeight parametridan foydalanadi. XML yondashuvidan farqli o'laroq, Compose'da lineHeight sp da to'liq qator balandligi sifatida belgilanadi (standart = fontSize * 1.2). Ko'paytiruvchini o'rnatish uchun dasturchi lineHeight ni fontSize foizi sifatida ko'rsatadi: Misol: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) 1.5 ko'paytiruvchini beradi.

Cheklov: Android'da API 28 dan oldin lineSpacingExtra va lineSpacingMultiplier ba'zi shriftlar bilan, ayniqsa maxsus (TTF/OTF) shriftlar bilan to'g'ri ishlamaydi. Haqiqiy qurilmalarda sinovdan o'tkazish va systemTextView standart ravishda qo'shimcha masofasiz lineSpacingMultiplier 1.0 ishlatishini hisobga olish tavsiya etiladi. ScrollView'dagi uzun matnlar uchun qatorlararo masofani aniq belgilash shart.

Veb ishlanmada CSS line-height orqali qatorlararo masofa

Vebda qatorlararo masofa line-height CSS xususiyati bilan belgilanadi, u son (ko'paytiruvchi), foiz qiymati, uzunlik birliklari (px, em) yoki normal kalit so'zi bo'lishi mumkin. Sonli ko'paytiruvchi — afzal qilingan usul, chunki u meros qilib olinadi va bola elementlarning shrift o'lchamiga nisbatan masshtablanadi. Normal qiymati ko'pchilik shriftlar uchun taxminan 1.2 ga to'g'ri keladi.

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

Sonli ko'paytiruvchi vs em: line-height: 1.5 va line-height: 1.5em turli narsalar. Sonli ko'paytiruvchi computed value sifatida meros qilib olinadi va har bir bola element uchun uning font-size asosida qayta hisoblanadi. Em ota-onaning font-size asosida qat'iy computed value sifatida meros qilib olinadi. Bu muhim farq: font-size: 20px font-size: 16px ichiga joylashtirilganda, line-height: 1.5 30px, line-height: 1.5em esa 24px (ota-onadan) beradi. Tavsiya: har doim sonli ko'paytiruvchidan foydalaning.

iOS, Android va vebda leading sozlamalarini taqqoslash

Turli API'larga qaramay, qatorlararo masofani sozlash printsipi barcha platformalarda bir xil. Ko'paytiruvchi (multiplier) shrift o'lchami o'zgarganda masshtablanadi va accessibility uchun qulay. Mutlaq qiymat (spacing) masshtablanmaydi va Dynamic Type yoki katta matn sozlamalaridan foydalanilganda muammolarga olib kelishi mumkin.

Cross-platform strategiya: dizayn tizimida lineHeight ni fontSize ko'paytiruvchisi sifatida belgilang. Masalan, dizayn tokenlarida: line-height-body = 1.5, line-height-heading = 1.1. Har bir platforma bu ko'paytiruvchini o'z API si bilan amalga oshiradi: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Bu barcha platformalarda bir xil vizual natijani kafolatlaydi.

Muhim nuance: iOS'da lineHeightMultiple qatorning to'liq balandligiga (shriftning ascender + descender ni o'z ichiga olgan holda) qo'llaniladi, Android'da esa lineSpacingMultiplier — Minikin render dvigateli tomonidan hisoblangan qator balandligiga. Amalda bu bir xil ko'paytiruvchi qiymatida vizual leadingda kichik farqlarga olib keladi. Pixel-perfect moslik uchun platformaga qarab tuzatilgan mutlaq qiymatlardan foydalaning.