Mobil tətbiq inkişafında trekinq — simvollararası məsafənin mahiyyəti və tənzimlənməsi

Tipoqrafiyada trekinq nədir

Tracking (trekinq, aralama) — mətn blokunun bütün simvollarına bərabər şəkildə tətbiq edilən simvollararası məsafənin dəyişdirilməsidir. Kerinqdən fərqli olaraq, burada hər bir simvol cütlü şriftin kerinq cədvəli əsasında fərdi düzəliş alır, trekinq isə bütün diapazon üçün vahid ədədi dəyərlə müəyyən edilir. Müsbət trekinq intervalı artırır (aralama), mənfi — azaldır (sıxlaşdırma).

Termin metal tipoqrafiyadan qaynaqlanır, burada simvollararası interval hərflər arasındakı fiziki məsafə ilə tənzimlənirdi. Rəqəmsal tipoqrafiyada trekinq kerinq cədvəlinin üzərinə tətbiq edilir: əvvəlcə şrift daxili kerinq cütlərini tətbiq edir, sonra sistem bütün simvollara bərabər trekinq əlavə edir. Yekun interval = kerinq + trekinq, bu aqressiv sıxlaşdırmada nəzərə alınmalıdır.

Ölçü vahidləri: trekinq mütləq vahidlərdə (punkt, piksel, millimetr) və nisbi vahidlərdə (em, şrift ölçüsünün faizi) təyin edilə bilər. Mobil inkişafda trekinq adətən mütləq dəyərlər kimi punktlarla (iOS) və ya sp (Android) ilə, vebdə isə nisbi olaraq em ilə təyin edilir. Nisbi vahidlər accessibility üçün üstünlük təşkil edir, çünki istifadəçi şrift ölçüsünü dəyişdirəndə miqyaslanır.

Trekinq və kerinq: əsas fərqlər

Trekinq və kerinq arasındakı qarışıqlıq başlanğıc dizayner və tərtibatçıların ən geniş yayılmış səhvlərindən biridir. Kerinq mikro səviyyədə işləyir — simvolların həndəsəsinə əsasən müəyyən cütlər (AV, Te, To) arasında intervalı düzəldir. Trekinq makro səviyyədə işləyir — fraqmentin bütün simvollarını bərabər şəkildə dəyişdirir, onların formasını nəzərə almadan.

Vizual effekt: kerinqdə müxtəlif cütlər arasında məsafələr fərqlənir — A və V arasında A və I arasındakından azdır, çünki hərflərin formaları bir-birini kompensasiya edir. Trekinqdə bütün məsafələr eynidir — A və V, A və I, T və o arasında — hər yerdə eyni sürüşdür. Bu, trekinqi qlobal tənzimləmə alətinə, kerinqi isə incə sazlama alətinə çevirir.

Birgə istifadə: interfeys tipoqrafiyasında trekinq və kerinq birlikdə tətbiq edilir. Şrift əsas optimallaşdırma üçün kerinq cədvəli ehtiva edir, tərtibatçı isə stilizasiya və ya accessibility üçün trekinq əlavə edir. Əvvəlcə kerinq cədvəli tətbiq edilir, sonra onun üzərinə trekinq əlavə olunur. Mənfi trekinqdə (sıxlaşdırmada) kerinq cütləri arzuolunmaz üst-üstə düşmələr yarada bilər — problemli birləşmələri yoxlayın.

Müsbət və mənfi trekinq: nə vaxt tətbiq etməli

Müsbət trekinq (aralama) simvollar arasında məsafəni artırır. Kiçik mətnin (10–13pt) oxunaqlılığını yaxşılaşdırmaq üçün tətbiq edilir, burada standart intervalda simvollar vizual olaraq birləşir. Həmçinin disleksiyası olan istifadəçilər üçün accessibility-də istifadə olunur — artırılmış simvollararası interval hərflərin tanınmasını asanlaşdırır. Tipik dəyərlər: iOS üçün 0.3–1pt, veb üçün 0.02–0.05em.

Mənfi trekinq (sıxlaşdırma) simvollar arasında məsafəni azaldır. Başlıqlarda (24pt-dən) və vurğulu mövqelərdə tətbiq edilir, burada sıx yığım bütöv və müasir görünür. Böyük şrift ölçüləri sıxlaşdırmanı yaxşı qəbul edir, çünki simvollararası məsafə vizual olaraq böyükdür. Tipik dəyərlər: -0.3-dən -1pt-dək. Məhdudiyyət: trekinq -1pt-dən az olduqda simvollar bir-birinin üzərinə düşə bilər, xüsusən çıxıntı elementləri olan cütlərdə (fi, fj, TT).

Empirik qayda: hər şrift ölçüsü üçün icazə verilən trekinq diapazonu mövcuddur. Şrift nə qədər böyükdürsə, optimal oxunaqlılıq üçün bir o qədər az trekinq tələb olunur. Formula: optimal trekinq ≈ font-weight * 0.01 – font-size * 0.001. Qalın şrift (weight 700) 16pt üçün: 700 * 0.01 – 16 * 0.001 = 6.84, bu da qarnitura üzrə düzəlişlə təxminən 0.5pt müsbət trekinq verir.

Müxtəlif mətn tipləri üçün trekinq

Body text (14–18pt): trekinq tələb olunmur və ya minimal müsbət 0.1–0.3pt. Peşəkar şriftlər artıq əsas mətn üçün optimal intervalları ehtiva edir. Body text trekinqinə hər hansı müdaxilə dizayn və ya accessibility tələbləri ilə əsaslandırılmalıdır. Başlıqlar (20–36pt): qarnitura və çəkiyə görə -0.3-dən -0.8pt-dək mənfi trekinq icazəlidir. Bütöv böyük hərflər (ALL CAPS): 0.5–2pt müsbət trekinq tövsiyə olunur, çünki böyük hərflər əlavə interval olmadan vizual olaraq birləşir.

Qarnituraların xüsusiyyətləri: qrotesk həndəsəli şriftlər (Helvetica, Inter, SF Pro) mənfi trekinqi antikva şriflərdən (Times, Georgia, PT Serif) daha yaxşı qəbul edir. Antikva şriftlərdə şeriflər hərflər arasında əlavə vizual əlaqə yaradır və sıxlaşdırma mətni oxunmaz edir. Antikva qarnituraları üçün yalnız müsbət trekinq tövsiyə olunur.

iOS və Android-də trekinqin tətbiqi

iOS-də trekinq NSAttributedString-də kerinqlə eyni .kern atributu ilə həyata keçirilir, lakin bir fərqlə: trekinq üçün nil-dən fərqli ədədi dəyər göstərilir. nil — defolt kerinq (şrift cədvəlindən), 0 — kerinqin söndürülməsi, hər hansı digər ədəd — kerinq cədvəlinin üzərinə trekinq. Bu o deməkdir ki, .kern = 2 təyin edildikdə, bütün simvollar daxili kerinq cütlərinin üzərinə +2pt simvollararası interval alır.

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

// Müsbət tracking +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel tracking ilə
label.attributedText = attributedString

SwiftUI Text üçün .tracking() modifikatorundan istifadə edir, o CGFloat qəbul edir. UIKit-dən fərqli olaraq, SwiftUI trekinqi modifikator daxilindəki bütün mətnə tətbiq edilir və bir neçə Text blokuna bölmədən qismən ola bilməz. SwiftUI avtomatik olaraq kerinq və trekinq kombinasiyasını idarə edir, trekinqi şriftin kerinq cədvəlinin üzərinə tətbiq edir.

Android TextView-də letterSpacing xassəsindən istifadə edir, o em ilə (şrift ölçüsünə nisbətən vuruq) təyin edilir. Dəyər 0 — defolt trekinq, 0.05 — em-in 5% artımı, -0.02 — azalma. Android-də letterSpacing trekinq kimi işləyir (bütün simvollar üçün bərabər), şriftin kerinq cədvəli isə Minikin render mühərrik səviyyəsində avtomatik tətbiq edilir.

// XML düzülüşündə
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Kotlin-də proqram vasitəsilə
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose Android-də TextStyle-də letterSpacing parametrindən istifadə edir, sp ilə təyin edilir. Məsələn, TextStyle(letterSpacing = 0.5.sp) 0.5 sp trekinq verir. XML yanaşmasından fərqli olaraq, Compose letterSpacing-i digər tipoqrafik parametrlərlə vahid TextStyle obyektində birləşdirməyə imkan verir, bu da dizayn sistemlərinin yaradılmasını asanlaşdırır.

Veb inkişafında letter-spacing-in qurulması

Vebdə trekinq CSS xassəsi letter-spacing vasitəsilə həyata keçirilir, o istənilən uzunluq vahidlərini və ya normal açar sözünü qəbul edir. Normal dəyəri 0-a uyğundur (əlavə simvollararası interval olmadan). Xassə ötürülür, mənfi dəyərləri dəstəkləyir və animasiya edilir. CSS Specification-a görə, letter-spacing şriftin kerinq cədvəlindən sonra tətbiq edilir.

/* 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-də letter-spacing font-size dəyişərkən miqyaslanır və accessibility üçün üstünlük təşkil edir. px miqyaslanmır və brauzer tərəfindən mətnin böyüdülməsi (Zoom) zamanı uyğunsuzluğa səbəb ola bilər. Tövsiyə: letter-spacing üçün həmişə em istifadə edin. İstisna — trekinq şrift ölçüsündən asılı olmayaraq sabit qalmalı olduqda, məsələn loqolarda.

letter-spacing animasiyası: xassə CSS transitions və animations-u dəstəkləyir, bu da mətnin hamar görünmə effektlərini yaratmağa imkan verir. Başlığın yüklənməsi zamanı letter-spacing: -0.05em-dən letter-spacing: 0.01em-ə animasiya müasir interfeyslərdə populyar bir texnikadır. Məhsuldarlıq: letter-spacing animasiyası reflow-a (layout-un yenidən hesablanmasına) səbəb olur, çünki mətnin eni dəyişir. Mümkün olduqda yüksək məhsuldar animasiyalar üçün transform və opacity-dən istifadə edin.

Mobil interfeyslərdə accessibility və trekinq

Trekinq görmə məhdudiyyəti və disleksiyası olan istifadəçilər üçün mətnin oxunaqlılığına birbaşa təsir edir. WCAG 2.2 Guideline 1.4.12 (Text Spacing) tələb edir ki, simvollararası, sətirlərarası və abzaslararası intervallar müəyyən dəyərlərə qədər artırıldıqda mətn məzmunu itirilməsin. letter-spacing 0.12em-dək artırılmağa dəzməli, məzmun kəsilməməli və elementlər üst-üstə düşməməlidir.

Disleksiya: British Dyslexia Association tərəfindən aparılan tədqiqatlar göstərir ki, letter-spacing-in 0.12em-dək artırılması disleksiyası olan istifadəçilərdə oxu sürətini 10–15% yaxşılaşdırır. Lakin bu fərdidir — bəzi istifadəçilər standart intervala üstünlük verir. iOS və Android simvollararası intervalı artırmaq üçün sistem accessibility parametrləri təqdim edir ki, tətbiq onlara hörmət etməlidir.

Tərtibatçı üçün qaydalar: letter-spacing artırıldıqda sına biləcək sabit en/hündürlüklərdən istifadə etməyin. Accessibility yoxlanılmadan mətn konteynerlərində overflow: hidden-dən çəkinin. Bütün ekranlarda 0.12em-dək artırılmış letter-spacing ilə interfeysi sınayın. Dizayn sınırsa — accessibility-i görməzlikdən gəlməyin, layout-u yenidən düşünün.

Platforma dəstəyi: iOS UIFont.preferredFont istifadə edildikdə ɛlçatanlıq parametrlərində Daha Böyük Mətn funksiyası aktiv edildikdə avtomatik olaraq letter-spacing-i artırır. Android FontScale vasitəsilə oxşar seçim təqdim edir. Tərtibatçı bu parametrləri söndürməməlidir. Sınaq ssenarisi: cihaz parametrlərində maksimum mətn ölçüsünü aktiv edin və trekinqin interfeys layout-unu pozmadığını yoxlayın.