Mobil ishlanmada treking — belgilararo masofaning mohiyati va sozlanishi

Tipografiyada treking nima

Tracking (treking, oralash) — bu matn blokining barcha belgilariga bir xilda qo'llaniladigan belgilararo masofaning o'zgarishidir. Kerningdan farqli o'laroq, bu yerda har bir belgi juftligi shriftning kerning jadvali asosida individual tuzatish oladi, treking esa butun diapazon uchun yagona son qiymati bilan belgilanadi. Ijobiy treking intervalni oshiradi (oralash), salbiy — kamaytiradi (zichlashtirish).

Termin metall tipografiyadan kelib chiqqan, bu erda belgilararo interval harflar orasidagi jismoniy masofa bilan tartibga solingan. Raqamli tipografiyada treking kerning jadvali ustiga qo'llaniladi: avval shrift o'rnatilgan kerning juftliklarini qo'llaydi, keyin tizim barcha belgilarga bir xil treking qo'shadi. Yakuniy interval = kerning + treking, bu agressiv zichlashtirishda hisobga olinishi kerak.

O'lchov birliklari: treking mutlaq birliklarda (punkt, piksel, millimetr) va nisbiy birliklarda (em, shrift o'lchamining foizi) belgilanishi mumkin. Mobil ishlanmada treking odatda mutlaq qiymatlar sifatida punktlarda (iOS) yoki sp (Android) da, vebda esa nisbiy ravishda em da belgilanadi. Nisbiy birliklar accessibility uchun afzal, chunki foydalanuvchi shrift o'lchamini o'zgartirganda masshtablanadi.

Treking va kerning: asosiy farqlar

Treking va kerning o'rtasidagi chalkashlik — boshlang'ich dizaynerlar va dasturchilarning eng keng tarqalgan xatolaridan biridir. Kerning mikro darajada ishlaydi — belgilarning geometriyasiga asoslangan holda ma'lum juftliklar (AV, Te, To) orasidagi intervalni to'g'rilaydi. Treking makro darajada ishlaydi — fragmentning barcha belgilarini bir xilda siljitadi, ularning shaklini hisobga olmagan holda.

Vizual effekt: kerningda turli juftliklar orasidagi masofalar farqlanadi — A va V orasida A va I orasidagidan kam, chunki harf shakllari bir-birini kompensatsiya qiladi. Trekingda barcha masofalar bir xil — A va V, A va I, T va o orasida — hamma joyda bir xil siljish. Bu trekingni global sozlash vositasiga, kerningni esa nozik sozlash vositasiga aylantiradi.

Birgalikda ishlatish: interfeys tipografiyasida treking va kerning birgalikda qo'llaniladi. Shrift asosiy optimallashtirish uchun kerning jadvalini o'z ichiga oladi, dasturchi esa stilizatsiya yoki accessibility uchun treking qo'shadi. Kerning jadvali avval qo'llaniladi, keyin uning ustiga treking qo'shiladi. Salbiy trekingda (zichlashtirishda) kerning juftliklari istalmagan ustma-ust tushishlarni yaratishi mumkin — muammoli kombinatsiyalarni tekshiring.

Ijobiy va salbiy treking: qachon qo'llash

Ijobiy treking (oralash) belgilar orasidagi masofani oshiradi. Kichik matnning (10–13pt) o'qiluvchanligini yaxshilash uchun qo'llaniladi, bu erda belgilar standart intervalda vizual ravishda qo'shilib ketadi. Shuningdek, disleksiyasi bo'lgan foydalanuvchilar uchun accessibility-da ishlatiladi — kattalashgan belgilararo interval harflarni tanib olishni osonlashtiradi. Tipik qiymatlar: iOS uchun 0.3–1pt, veb uchun 0.02–0.05em.

Salbiy treking (zichlashtirish) belgilar orasidagi masofani kamaytiradi. Sarlavhalarda (24pt dan) va urg'uli matnda qo'llaniladi, bu erda zich terim yaxlit va zamonaviy ko'rinadi. Katta shrift o'lchamlari zichlashtirishni yaxshi qabul qiladi, chunki belgilararo masofalar vizual ravishda katta. Tipik qiymatlar: -0.3 dan -1pt gacha. Cheklov: treking -1pt dan kam bo'lganda, belgilar bir-birining ustiga tushishi mumkin, ayniqsa chiqindi elementlari bo'lgan juftliklarda (fi, fj, TT).

Empirik qoida: har bir shrift o'lchami uchun ruxsat etilgan treking diapazoni mavjud. Shrift qanchalik katta bo'lsa, optimal o'qiluvchanlik uchun shunchalik kam treking talab qilinadi. Formula: optimal treking ≈ font-weight * 0.01 – font-size * 0.001. Qalin shrift (weight 700) 16pt uchun: 700 * 0.01 – 16 * 0.001 = 6.84, bu garnitura bo'yicha tuzatish bilan taxminan 0.5pt ijobiy treking beradi.

Turli matn turlari uchun treking

Body text (14–18pt): treking talab qilinmaydi yoki minimal ijobiy 0.1–0.3pt. Professional shriftlar allaqachon asosiy matn uchun optimal intervallarni o'z ichiga oladi. Body text trekingiga har qanday aralashuv dizayn yoki accessibility talablari bilan asoslanishi kerak. Sarlavhalar (20–36pt): garnitura va og'irlikka qarab -0.3 dan -0.8pt gacha salbiy treking ruxsat etiladi. Katta harflar (ALL CAPS): 0.5–2pt ijobiy treking tavsiya etiladi, chunki katta harflar kapsda qo'shimcha intervalsiz vizual ravishda qo'shilib ketadi.

Garnituralarning xususiyatlari: grotesk geometriyali shriftlar (Helvetica, Inter, SF Pro) salbiy trekingni antikva shriftlardan (Times, Georgia, PT Serif) yaxshiroq qabul qiladi. Antikva shriftlarda seriflar harflar orasida qo'shimcha vizual bog'lanish yaratadi va zichlashtirish matnni o'qib bo'lmaydigan qiladi. Antikva garnituralar uchun faqat ijobiy treking tavsiya etiladi.

iOS va Android-da trekingni amalga oshirish

iOS-da treking NSAttributedString-da kerning bilan bir xil .kern atributi orqali amalga oshiriladi, lekin bitta farq bilan: treking uchun nil dan farqli son qiymati ko'rsatiladi. nil — standart kerning (shrift jadvalidan), 0 — kerningni o'chirish, istalgan boshqa son — kerning jadvali ustiga treking. Bu shuni anglatadiki, .kern = 2 o'rnatilganda, barcha belgilar o'rnatilgan kerning juftliklari ustiga +2pt belgilararo interval oladi.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// Ijobiy treking +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Tracking bilan UILabel
label.attributedText = attributedString

SwiftUI Text uchun .tracking() modifikatoridan foydalanadi, u CGFloat qabul qiladi. UIKit-dan farqli o'laroq, SwiftUI trekingi modifikator ichidagi butun matnga qo'llaniladi va bir nechta Text bloklariga bo'lmasdan qisman bo'lishi mumkin emas. SwiftUI avtomatik ravishda kerning va treking kombinatsiyasini boshqaradi, trekingni shriftning kerning jadvali ustiga qo'llaydi.

Android TextView-da letterSpacing xususiyatidan foydalanadi, u em (shrift o'lchamiga nisbatan ko'paytiruvchi) da o'rnatiladi. Qiymat 0 — standart treking, 0.05 — em dan 5% ga oshirish, -0.02 — kamaytirish. Android-da letterSpacing treking kabi ishlaydi (barcha belgilar uchun bir xilda), shriftning kerning jadvali esa Minikin render dvigateli darajasida avtomatik qo'llaniladi.

// XML layoutda
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Kotlin dasturiy
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose Android-da TextStyle-dagi letterSpacing parametridan foydalanadi, u sp da o'rnatiladi. Masalan, TextStyle(letterSpacing = 0.5.sp) 0.5 sp treking beradi. XML yondashuvidan farqli o'laroq, Compose letterSpacing-ni boshqa tipografik parametrlar bilan yagona TextStyle obyektida birlashtirishga imkon beradi, bu dizayn tizimlarini yaratishni soddalashtiradi.

Veb-ishlanmada letter-spacing sozlash

Vebda treking CSS xususiyati letter-spacing orqali amalga oshiriladi, u istalgan uzunlik birliklarini yoki normal kalit so'zini qabul qiladi. Normal qiymati 0 ga to'g'ri keladi (qo'shimcha belgilararo intervalsiz). Xususiyat voris bo'ladi, salbiy qiymatlarni qo'llab-quvvatlaydi va animatsiya qilinishi mumkin. CSS Specification ga ko'ra, letter-spacing shriftning kerning jadvalidan keyin qo'llaniladi.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em vs px: em dagi letter-spacing font-size o'zgarganda masshtablanadi va accessibility uchun afzal. px masshtablanmaydi va brauzer tomonidan matnni kattalashtirishda (Zoom) nomuvofiqlikka olib kelishi mumkin. Tavsiya: letter-spacing uchun doimo em dan foydalaning. Istisno — treking shrift o'lchamidan qat'iy nazar barqaror qolishi kerak bo'lgan hollar, masalan, logotiplarda.

letter-spacing animatsiyasi: xususiyat CSS transitions va animations-ni qo'llab-quvvatlaydi, bu matnning silliq paydo bo'lish effektlarini yaratishga imkon beradi. Sarlavha yuklanayotganda letter-spacing: -0.05em dan letter-spacing: 0.01em gacha animatsiya — zamonaviy interfeyslarda mashhur texnika. Samaradorlik: letter-spacing animatsiyasi reflow-ga (layout-ni qayta hisoblash) sabab bo'ladi, chunki matn blokining kengligi o'zgaradi. Yuqori samaradorlik animatsiyalari uchun imkon qadar transform va opacity dan foydalaning.

Mobil interfeyslarda accessibility va treking

Treking ko'rish cheklovlari va disleksiyasi bo'lgan foydalanuvchilar uchun matnning o'qiluvchanligiga bevosita ta'sir qiladi. WCAG 2.2 Guideline 1.4.12 (Text Spacing) belgilararo, qatorlararo va abzatslararo intervallar ma'lum qiymatlargacha oshirilganda matn tarkibini yo'qotmaslikni talab qiladi. letter-spacing 0.12em gacha oshirishga tarkibni kesmasdan va elementlarni ustma-ust tushirmasdan chidashi kerak.

Disleksiya: British Dyslexia Association tadqiqotlari shuni ko'rsatadiki, letter-spacing ni 0.12em gacha oshirish disleksiyasi bo'lgan foydalanuvchilarda o'qish tezligini 10–15% yaxshilaydi. Biroq bu individual — ba'zi foydalanuvchilar standart intervalni afzal ko'radi. iOS va Android belgilararo intervalni oshirish uchun tizimli accessibility sozlamalarini taqdim etadi, ilova ularni hurmat qilishi kerak.

Dasturchi uchun qoidalar: letter-spacing oshirilganda sinishi mumkin bo'lgan qattiq en/balandliklardan foydalanmang. Accessibility tekshirilmasdan matn konteynerlarida overflow: hidden dan saqlaning. Barcha ekranlarda 0.12em gacha oshirilgan letter-spacing bilan interfeysni sinab ko'ring. Agar dizayn sinadi — layout-ni qayta ko'rib chiqing, accessibility-ni e'tiborsiz qoldirmang.

Platforma qo'llab-quvvatlashi: iOS UIFont.preferredFont ishlatilganda, mavjudlik sozlamalarida Kattaroq Matn funktsiyasi yoqilganda letter-spacing ni avtomatik ravishda oshiradi. Android FontScale orqali shunga o'xshash variantni taqdim etadi. Dasturchi bu sozlamalarni o'chirib qo'ymasligi kerak. Test stsenariysi: qurilma sozlamalarida maksimal matn o'lchamini yoqing va treking interfeys layout-ni buzmasligini tekshiring.