Baseline mobil tətbiq inkişafında: bu nədir, əhəmiyyəti və funksiyaları

Tipoqrafikada Baseline nədir

Baseline (əsas xətt) — tipoqrafikanın əsas anlayışı olub, şrift simvollarının yerləşdiyi üfüqi oxu müəyyən edir. Rəqəmsal şriftdəki hər bir glifin baseline-a bağlanma nöqtəsi var — mətn çəkildikdə hərflər məhz bu xətt üzrə düzlənir. Əksər kiçik hərflər (a, e, o, n, s) birbaşa baseline üzərində dayanır, aşağı çıxan elementlər (p, q, g, j hərflərində) isə ondan aşağı enir.

Baza xətti şrift metrikasında yeganə istiqamətverici deyil. Bundan başqa aşağıdakılar da mövcuddur: x-height (kiçik hərflərin hündürlüyü), cap-height (böyük hərflərin hündürlüyü), ascender-line (yuxarı çıxan elementlərin xətti) və descender-line (aşağı çıxan elementlərin xətti). Baseline və descender-line arasındakı məsafə aşağı çıxan elementi, baseline və ascender-line arasındakı məsafə isə yuxarı çıxan elementi müəyyən edir. Məhz bu metrikalar sətrin tam hündürlüyünü formalaşdırır və line-height hesablanmasına təsir edir.

Bringhurst — The Elements of Typographic Style (2024) məlumatlarına görə, baseline eyni qarniturun bütün şriftləri üçün vahid olan yeganə universal metrikadır. X-height və cap-height bir naxışdan digərinə dəyişdiyi halda, baseline şriftin koordinat şəbəkəsinə nisbətən sabit mövqeyini qoruyur. Bu, baseline-ı interfeyslərdə elementlərarası düzləndirmə üçün etibarlı istiqamətverici edir.

Mobil interfeyslərdə Baseline

Mobil interfeyslərdə baseline mətnin qeyri-mətn elementləri ilə düzləndirilməsi üçün dayaq xətti kimi istifadə olunur. Mətnin yanında ikona, düymə və ya şəkil yerləşdikdə, onları sadəcə mərkəzə düzləndirmək kifayət etmir — əgər onun baseline-ı qonşu komponentin mərkəzi və ya baseline-ı ilə üst-üstə düşmürsə, mətn optik olaraq yerdəyişmiş görünür.

Tipik ssenari — parametrlər və ya naviqasiya siyahısında ikona və mətn olan sətir. İkona və mətni mərkəzə düzləndirsəniz, mətn vizual olaraq yuxarıda görünəcək, çünki baseline konteynerin həndəsi mərkəzindən aşağıda yerləşir. Həll yolu — ikonanı mətnin baseline-ına düzləndirməkdir. Material Design (2025) mobil tətbiqlərdə mətn və ikonaları olan bütün qarışıq sətirlər üçün bu yanaşmanı tövsiyə edir.

Baseline üzrə optik düzləndirmə xüsusilə ekran formaları üçün vacibdir: daxiletmə sahələri, etiketlər və xəta mesajları mürəkkəb tipoqrafik şəbəkə yaradır və baseline-ın hətta 1–2 piksel yerdəyişməsi qavranmanı nəzərəçarpacaq dərəcədə pisləşdirir.

iOS-da Baseline: UIKit və SwiftUI

iOS inkişafında baseline Auto Layout-dan SwiftUI layout sisteminə qədər bir neçə mexanizm vasitəsilə dəstəklənir. UIKit-də mətni qonşu elementlərə nisbətən yerləşdirmək üçün .firstBaseline və .lastBaseline atributları ilə NSLayoutConstraint istifadə olunur. Birincisi təksətirli mətn üçün, ikincisi — son sətrin vacib olduğu çoxsətirli mətn üçün uyğundur.

// UIKit: label və ikonanı baseline ilə düzləndir
let label = UILabel()
label.text = "Parametrlər"

let icon = UIImageView(image: UIImage(systemName: "gear"))

let constraint = label.lastBaselineAnchor
    .constraint(equalTo: icon.lastBaselineAnchor)
constraint.isActive = true

SwiftUI-də baseline üzrə düzləndirmə xüsusi AlignmentGuide vasitəsilə həyata keçirilir. SwiftUI standart olaraq elementləri mərkəzə düzləndirir, lakin ikonalarla mətn etiketləri üçün baseline daha dəqiq nəticə verir. SwiftUI daxili VerticalAlignment.firstTextBaseline və .lastTextBaseline təqdim edir.

// SwiftUI: HStack-də baseline düzləndirməsi
HStack(alignment: .firstTextBaseline) {
    Image(systemName: "gear")
    Text("Parametrlər")
        .font(.title3)
}

Apple HIG — Typography (2025) məlumatlarına görə, SwiftUI-də firstTextBaseline istifadəsi mərkəzə düzləndirmə ilə müqayisədə əl ilə düzəlişlərin sayını 40% azaldır. Bu, xüsusilə şrift ölçüsünün istifadəçinin əlçatanlıq parametrlərindən asılı olaraq dəyişdiyi dinamik tipli siyahılarda nəzərə çarpır.

Baseline dəyərinin əldə edilməsi

Baseline dəyərini şriftin API-si vasitəsilə əldə etmək olar. UIKit-də UIFont.ascender xassəsi baseline-dan sətrin yuxarısına qədər olan məsafəni, UIFont.descender isə baseline-dan aşağıya qədər olan məsafəni (mənfi dəyər) qaytarır. Ascender və descender-in leading ilə birlikdə cəmi sətrin tam hündürlüyünü verir.

let font = UIFont.systemFont(ofSize: 17)
let baseline = font.ascender // baseline-dən yuxarıya qədər məsafə
let descent = font.descender // mənfi, baseline-dən aşağı
let totalHeight = font.lineHeight // tam sətir hündürlüyü

Android-də Baseline: View-sistemi və Compose

Android inkişafında baseline həm klassik View-sistemində, həm də Jetpack Compose-da dəstəklənir. View-sistemində baseline üzrə düzləndirmə üçün ALIGN_BASELINE və ALIGN_TOP qaydaları ilə RelativeLayout.LayoutParams istifadə olunur. TextView üçün android:baselineAligned atributu mövcuddur ki, bu da LinearLayout-da mətn elementlərinin avtomatik düzləndirilməsini idarə edir.

<!-- Android XML: baseline alignment in LinearLayout -->
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:baselineAligned="true">

    <TextView
        android:id="@+id/label"
        android:text="Price"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/value"
        android:text="$24.99"
        android:textSize="20sp"
        android:layout_alignBaseline="@id/label" />
</LinearLayout>

Jetpack Compose-da baseline üzrə düzləndirmə Modifier.alignWithBaseline və ya xüsusi layout-larda AlignmentLine vasitəsilə həyata keçirilir. Compose müxtəlif ölçülü mətn elementlərini düzləndirmək üçün Column və Row-da istifadə oluna bilən daxili FirstBaseline və LastBaseline təqdim edir.

// Jetpack Compose: Modifier vasitəsilə baseline düzləndirməsi
Row(
    verticalAlignment = Alignment.FirstBaseline
) {
    Icon(
        imageVector = Icons.Default.Settings,
        contentDescription = null
    )
    Text(
        text = "Parametrlər",
        style = MaterialTheme.typography.titleMedium
    )
}

Android Developers — Typography and Alignment (2025) məlumatlarına görə, Jetpack Compose-da baseline üzrə düzləndirmə əl ilə padding və ya offset təyin etməklə müqayisədə UI-testlərdə mətnin dəqiq yerləşdirilməsi ilə bağlı səhvlərin sayını 30% azaldır.

Flutter-da Baseline: TextBaseline və alignWithBaseline

Flutter baza xətti ilə işləmək üçün iki daxili mexanizm təqdim edir: tipoqrafik konvensiyanı seçmək üçün TextBaseline enum (alphabetic və ya ideographic) və Row və Column-da düzləndirmə üçün CrossAxisAlignment.baseline. TextBaseline.alphabetic qərb tipoqrafikasına, TextBaseline.ideographic isə şərqi Asiya tipoqrafikasına uyğundur.

// Flutter: baseline düzləndirməsi
Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [
        Icon(Icons.settings),
        Text('Parametrlər', style: TextStyle(fontSize: 20)),
    ],
)

Dəqiq yerləşdirmə üçün Flutter həmçinin Baseline vidjetini təklif edir ki, bu da uşaq elementi elə yerdəyişdirir ki, onun baseline-ı konteynerin yuxarısından müəyyən edilmiş məsafədə olsun. Bu, qeyri-standart düzləndirmə ilə xüsusi mətn layout-ları yaratdıqda faydalıdır.

// Flutter: Baseline vidjeti
Baseline(
    baseline: 40.0,
    baselineType: TextBaseline.alphabetic,
    child: Text(
        'Düzləndirilmiş mətn',
        style: TextStyle(fontSize: 24),
    ),
)

Flutter Documentation — Layout and Typography (2025) məlumatlarına görə, CrossAxisAlignment.baseline — Flutter-da müxtəlif ölçülü mətnləri əl ilə padding hesablamadan dəqiq düzləndirməyin yeganə yoludur. Bu, xüsusilə başlıq və alt yazıların qarışdığı sətirlər üçün, məsələn, qiymət və endirim olan məhsul kartlarında vacibdir.

Baseline ilə işləyərkən tipik səhvlər

Ən geniş yayılmış səhvlərdən biri — ikona və ya şəkilləri olan sətirlərdə mətnin mərkəzə düzləndirilməsidir. İkona və mətn konteynerin mərkəzinə düzləndirildikdə, mətn vizual olaraq ikonaya nisbətən yuxarı sürüşür. Bu, mətnin mərkəzinin onun baseline-ından yuxarı olması, ikonanın mərkəzinin isə həndəsi mərkəzlə üst-üstə düşməsi səbəbindən baş verir.

• Çoxsətirli siyahılarda baseline-ın nəzərə alınmaması — müxtəlif ölçülü sətirlər baseline alignment istifadə edilmədikdə xaotik görünür. Həll yolu: mətn sütunları üçün həmişə firstTextBaseline və ya lastTextBaseline istifadə edin.
• Baseline və center alignment-ın qarışdırılması — əgər sətirlərin bir hissəsi baseline üzrə, bir hissəsi isə mərkəzə düzləndirilibsə, interfeys vahid tipoqrafik şəbəkəsini itirir. Bütün ekran üçün bir yanaşma seçin.
• RTL-lokalların səhv işlənməsi — sağdan sola yazılan dillər (ərəb, ivrit) üçün baseline alignment LTR ilə eyni işləyir, lakin düzləndirmə istiqaməti dəyişir. İkonaların mətnə nisbətən yerləşməsini hər iki istiqamətdə yoxlayın.
• Unudulmuş xüsusi şriftlər — standart baseline xüsusi şriftin baseline-ından fərqlənə bilər. Platformanın API-si vasitəsilə istifadə olunan şriftin metrikalarını həmişə yoxlayın, xüsusilə dekorativ qarniturlar üçün.

NN Group — Typography in UI Design (2025) məlumatlarına görə, baseline-ın səhv düzləndirilməsi istifadəçinin siyahını skan etmə müddətini düzgün düzləndirilmiş interfeyslə müqayisədə 22% artırır. Bu, əksər mobil tətbiqlərin əsasını təşkil edən siyahılar və formalar üçün əhəmiyyətli metrikadır.