Kələ-kötür kənarlar və pilləkən effekti: yaranma səbəbləri və CSS düzəliş metodları

Düzümdə kələ-kötür kənarlar nədir

Kələ-kötür kənarlar — mətn blokunun vizual qüsurudur, burada mətnin sağ və ya sol şaquli sərhəddi sətirlərin müxtəlif uzunluğu səbəbindən qeyri-bərabər görünür. Tipoqrafiyada bu effekt ragged edge, Azəri dilində isə kələ-kötür kənar və ya pilləkən adlanır.

Sola düzləşdirmə zamanı hər sətir içinə yerləşən sözlərin sayından asılı olaraq ixtiyari mövqedə bitir. Sətir uzunluqlarının fərqi böyükdürsə, mətnin sərhəddi səliqəsiz görünür.

Google Material Design (2023) tədqiqatına görə, hamar mətn blokları oxunaqlılığı sətir uzunluqlarında böyük fərq olan bloklarla müqayisədə 12% artırır. İstifadəçilər səliqəli mətni daha peşəkar və etibarlı qəbul edirlər.

Kənarların hamarlığına təsir edən əsas amillər: konteynerin eni, şrift ölçüsü, hərflərarası boşluq və mətndəki uzun sözlərin sayı.

Kələ-kötür kənar necə yaranır

Brauzer sətir bölgülərini CSS Display Module Level 3 spesifikasiyasında təsvir edilmiş Inline Layout alqoritminə uyğun yerləşdirir. Hər sətir konteynerin sərhəddinə çatana qədər sözlərlə doldurulur, qalan sözlər növbəti sətrə keçirilir. Bu proses line breaking adlanır.

Mətndə tam sığmayan uzun sözlər (10–12 simvoldan çox) varsa, brauzer onları tamamilə növbəti sətrə keçirir, cari sətri orta uzunluqdan daha qısa edir. Bu da kələ-kötür kənar yaradır.

Kənar hamarlığının ölçülməsi

Kənar hamarlığını qiymətləndirmək üçün Variation Range göstəricisi istifadə olunur — blokdakı ən qısa və ən uzun sətir arasındakı fərq. Keyfiyyətli tipoqrafiyada bu göstərici şrift ölçüsünün 1.5–2 qatından çox olmamalıdır. Daha böyük fərqdə mətn səliqəsiz görünür və düzəliş tələb edir.

Pilləkən effekti: səbəbləri və təzahürləri

Pilləkən effekti — kələ-kötür kənarların xüsusi halıdır, burada sətirlərin uzunluğu ardıcıl olaraq azalır və ya artır, pilləli profil yaradır. Vizual olaraq pilləkənə bənzəyir, adı da buradan gəlir.

Pilləkən effekti ən çox aşağıdakı ssenarilərdə yaranır: dar mətn sütunları (sətirdə 40 simvoldan az), təkrarlanan uzun terminlər olan mətn, çoxsətirli başlıqlarda mərkəzə düzləşdirmə.

W3C CSS Text Level 3-ə görə, ən nəzərəçarpan pilləkən effekti konteyner eni 200–400 piksel olduqda müşahidə olunur — məhz bu diapazonda sətirdəki söz sayı fərqi maksimaldır. Mobil cihazların dar ekranlarında problem daha da kəskinləşir.

Başlıqlarda pilləkən effekti

Çoxsətirli başlıqlar mərkəzə düzləşdirmə ilə pilləkən effektinə xüsusilə həssasdır. Başlıq 2–3 sətir tutduqda və yuxarı sətir aşağıdan xeyli qısa olduqda vizual balanssızlıq yaranır. Həll yolu — sola düzləşdirmə istifadə etmək və ya başlığın maksimum enini məhdudlaşdırmaq.

Naviqasiya menyularında pilləkən effekti

Mobil naviqasiya menyularında uzun adları olan bəndlər tez-tez ikinci sətrə keçərək pilləkən yaradır. Bu, naviqasiyanın qavranılmasını pisləşdirir və elementlərin kliklənmə qabiliyyətini azaldır. Menyu bəndlərinin uzunluğunu 2–3 sözlə məhdudlaşdırmaq tövsiyə olunur.

CSS vasitəsilə mətnin düzləşdirilməsi: text-align

CSS text-align xassəsi blok elementi daxilində mətnin üfüqi düzləşdirilməsini idarə edir. Bu, kələ-kötür kənarlarla mübarizədə əsas vasitədir.

/* Justify — removes ragged edge */
.text-block {
    text-align: justify;
}

/* Left align — may create ragged edge */
.text-block {
    text-align: left;
}

justify dəyəri mətni hər iki kənara düzləşdirir, sətirləri konteynerin bütün enini tutana qədər uzadır. Bu, sağ kələ-kötür kənarı aradan qaldırır, lakin qeyri-bərabər sözlərarası boşluqlar — rivers (çaylar) effekti yarada bilər.

text-justify xassəsi

Eninə düzləşdirmənin incə tənzimlənməsi üçün CSS text-justify xassəsi istifadə olunur. O, sözlər və simvollar arasında boş yerin paylanması alqoritmini müəyyən edir.

/* Enhanced justify with inter-character spacing */
.text-block {
    text-align: justify;
    text-justify: inter-character;
}

/* Browser auto-selection */
.text-block {
    text-align: justify;
    text-justify: auto;
}

text-justify dəyərləri: auto — brauzer alqoritmi seçir, inter-word — yeri sözlər arasında paylayır, inter-character — simvollar arasında paylayır (Çin və Yapon dilləri üçün faydalıdır), none — düzləşdirməni söndürür.

Hamar kənarlar üçün sözlərin bölünməsi

CSS hyphens xassəsi sözlərin avtomatik bölünməsini aktivləşdirir ki, bu da sözlərarası boşluqları uzatmadan kənarların hamarlığını əhəmiyyətli dərəcədə yaxşılaşdırır.

/* Auto hyphens with language dictionary */
.text-block {
    hyphens: auto;
    lang: "ru";
}

/* Manual hyphens via soft hyphen */
.text-block .long-word {
    hyphens: manual;
}

auto dəyəri lang atributuna əsasən brauzerin daxili söz bölgüsü lüğətindən istifadə edir. Azəri dili üçün lüğət bütün müasir brauzerlərdə mövcuddur, lakin bölgü keyfiyyəti fərqlənə bilər. manual dəyəri yalnız əl ilə qoyulmuş yumşaq defisləri (­) nəzərə alır.

CSS Text Module Level 3 (W3C, 2025)-ə görə, hyphens: auto istifadəsi uzun sözləri olan mətnlərdə sətir uzunluqlarının fərqini 40–60% azaldır. Lakin Azəri dilində mürəkkəb bölgü qaydaları səbəbindən söz bölgüsü qeyri-sabit işləyə bilər.

Azəri dilində söz bölgüsü problemləri

Azəri dilində söz bölgüsü qaydaları İngilis dilinə nisbətən daha mürəkkəbdir: morfemlər (prefikslər, köklər, suffikslər) nəzərə alınır, təkcə hecalar deyil. Chromium əsaslı brauzerlər Azəri dilini yaxşı idarə edən Hunspell lüğətindən istifadə edir, lakin Firefox daha sadə alqoritmə əsaslanır.

Kritik vacib mətnlər üçün uzun sözlərdə yumşaq defislərin əl ilə qoyulması tövsiyə olunur. Bu, bölgü yerinə tam nəzarət verir və bütün brauzerlərdə düzgün nəticəni təmin edir.

Konteynerin optimal eni

Mətn konteynerinin eni — kənarların hamarlığına təsir edən ən çox qiymətləndirilməyən amildir. Düzgün en olduqda, pilləkən effekti hətta eninə düzləşdirmə olmadan da praktiki olaraq yox olur.

Tipoqrafik standart optimal oxunaqlılıq üçün sətirdə 60–80 simvol tövsiyə edir. Bu diapazonda sətir uzunluqlarındakı fərq minimaldır, çünki hər sətir fərqləri hamarlaşdırmaq üçün kifayət qədər söz yerləşdirir.

Mobil cihazlarda ekran eni nadir hallarda 375–414 pikseli keçir, bu da avtomatik olaraq kələ-kötür kənarlar üçün şərait yaradır. Belə hallarda eninə düzləşdirmə və ya söz bölgüsü istifadə etmək xüsusilə vacibdir.

Brauzerlər arasında göstərmə fərqləri

Müxtəlif brauzerlər müxtəlif line breaking və söz bölgüsü alqoritmlərindən istifadə edir, bu da eyni mətndə kələ-kötürlük dərəcəsində fərqlərə səbəb olur. Bu, brauzerlərarası sınaqda kritik dərəcədə vacibdir.

Browser Engine Report (2025)-ə görə, Chrome (Blink) və Edge (Blink) sətir yerləşdirmədə eyni nəticələri göstərir. Safari (WebKit) daha aqressiv söz bölgüsü alqoritmindən istifadə edir, bu da daha hamar kənarlar verir, lakin bəzən boşluqların bərabərliyi hesabına.

Firefox (Gecko) Hunspell əsaslı öz söz bölgüsü lüğətini tətbiq edir. Azəri dili üçün Firefox tez-tez Chromium-dan fərqli nəticələr verir ki, bu da gözlənilməz pilləkən effektinə səbəb ola bilər.