CSS'da matnni o'rash: white-space, overflow-wrap, text-wrap va hyphens

Qisqacha: Brauzer qatorni faqat bo'sh joy va chiziqchadan keyin uzadi, shuning uchun bo'sh joysiz uzun URL yoki email qutidan chiqib ketadi. overflow-wrap: break-word (jadvalda — anywhere) bunday so'zni kerak joyda uzadi, white-space esa bo'sh joy va yangi qatorlar saqlanishini boshqaradi. Sarlavhani text-wrap: balance teng qatorlarga bo'ladi, pretty paragraf oxiridagi yolg'iz so'zni yo'qotadi; o'zbek tili uchun hyphens: auto ishlamaydi — ­ ishlating.

Bu darsda

• Brauzer qatorni qayerdan uzishini va uzun URL nega sahifani "sindirishini" tushuntirasiz.
• white-space ning olti qiymatidan kerakligini tanlaysiz.
• overflow-wrap va word-break farqini bilasiz, jadvalda anywhere ni ishlatasiz.
• Sarlavhani text-wrap: balance, paragrafni text-wrap: pretty bilan chiroyli o'raysiz.
• hyphens, ­, text-align va text-indent ni o'zbekcha matn uchun to'g'ri qo'llaysiz.

Oldin bilishingiz kerak: Bo'sh joylar va qator uzish qoidasi, Overflow, O'lcham birliklari, Qator balandligi va harf oralig'i.

1. Nega bu kerak?

Otabek telefonda «Bahor» saytining "Aloqa" bo'limini ochdi. Sahifa g'alati: barmoq bilan chapga sursa, butun sahifa yon tomonga siljiydi. Aybdor — bitta uzun havola. Unda bo'sh joy yo'q, brauzer uni uzolmaydi va qutidan chiqarib chizadi.

Yana bir kichik xunuklik: sarlavhaning ikkinchi qatorida bitta so'z yolg'iz osilib qolgan.

<style>
  .taom-karta {
    font-family: system-ui, sans-serif;
    width: 11.5rem;
    padding: 0.75rem;
    border: 2px solid #2f6b3a;
  }
  h2 {
    font-size: 1.375rem;
    line-height: 1.2;
    margin: 0 0 0.5rem;
  }
</style>
<article class="taom-karta">
  <h2>Bugun yangi taom: tandir go'sht</h2>
  <p>Batafsil:
  https://example.com/menyu/tandir-gosht</p>
</article>

Nimaga qarang: havola kartaning o'ng chegarasidan chiqib ketdi. Brauzer uni "tandir-" dan keyin uzdi, lekin birinchi bo'lak baribir sig'madi. Sarlavhada esa "go'sht" pastki qatorda yolg'iz qoldi. Ikkala muammo ham bitta CSS qatori bilan tuzaladi — shu darsda ko'ramiz.

Kitobxonadagi javonni tasavvur qiling. Kitoblarni qatorga terasiz, joy tugasa — keyingi javonga o'tasiz. Lekin bitta kitob javondan uzun bo'lsa, u chetdan chiqib turadi. Qisqa kitoblar muammo emas — muammo "bo'linmaydigan" uzun narsada.

2. Brauzer qatorni qayerdan uzadi

2.1 Uzilish nuqtalari

Brauzer qatorni istalgan joydan emas, faqat uzilish nuqtasi (soft wrap opportunity) dan uzadi. O'zbekcha matnda ular asosan ikkita:

• bo'sh joy — so'zlar orasi;
• chiziqcha (-) dan keyin — "issiq-taomlar" "issiq-" da uzilishi mumkin.

Nuqta, /, @ va _ — uzilish nuqtasi emas. Chrome'da tekshirdik: example.com/menyu/issiq bitta "so'z" hisoblanadi. URL va email'larda bo'sh joy yo'q, shuning uchun ular eng ko'p muammo qiladi.

2.2 HTML'dagi vositalarni eslang

Bo'sh joylar va qator uzish qoidasi darsida uchta HTML vositani ko'rgan edik:

Ular bitta aniq joy uchun yaxshi. Lekin saytda yuzlab havola va mehmonlar yozgan minglab so'z bo'lsa, har biriga <wbr> qo'yib chiqmaysiz. Umumiy qoidani CSS beradi.

Tekshirib ko'ring: bron-bolimi@example.com manzili tor ekranda qayerdan uzilishi mumkin?

3. white-space — bo'sh joy va yangi qatorlar

3.1 Uch savol, olti javob

Bo'sh joylar va qator uzish qoidasi darsidan eslang: brauzer HTML'dagi ketma-ket bo'sh joylar va yangi qatorlarni bitta bo'sh joyga yig'adi. pre tegi esa ularni saqlaydi. Aslida pre hech qanday sehr qilmaydi — brauzer uslublarida unga white-space: pre yozilgan. Chrome'da DevTools → Computed'da buni ko'rasiz.

white-space uchta savolga javob beradi:

1. Ketma-ket bo'sh joylar bittaga yig'iladimi?
2. HTML'dagi yangi qatorlar (Enter) saqlanadimi?
3. Qator qutiga sig'masa, avtomatik o'raladimi?

Bir xil matnni beshta qiymat bilan ko'ramiz. Matnda ikki joyda ketma-ket bo'sh joylar va bitta Enter bor:

<style>
  p {
    font-family: system-ui, sans-serif;
    width: 11rem;
    margin: 0 0 0.75rem;
    border: 1px dashed #5b6660;
  }
  b {
    display: block;
    color: #2f6b3a;
  }
</style>
<p style="white-space: normal"><b>normal</b>Osh     35 000 so'm,
lag'mon 28 000 so'm, manti 30 000 so'm</p>
<p style="white-space: nowrap"><b>nowrap</b>Osh     35 000 so'm,
lag'mon 28 000 so'm, manti 30 000 so'm</p>
<p style="white-space: pre"><b>pre</b>Osh     35 000 so'm,
lag'mon 28 000 so'm, manti 30 000 so'm</p>
<p style="white-space: pre-wrap"><b>pre-wrap</b>Osh     35 000 so'm,
lag'mon 28 000 so'm, manti 30 000 so'm</p>
<p style="white-space: pre-line"><b>pre-line</b>Osh     35 000 so'm,
lag'mon 28 000 so'm, manti 30 000 so'm</p>

Nimaga qarang:

• normal — bo'sh joylar bittaga yig'ildi, Enter yo'qoldi, matn qutiga sig'di.
• nowrap — hammasi bitta qatorda, qutidan chiqib ketdi.
• pre — "Osh" dan keyingi beshta bo'sh joy saqlandi, Enter ham. Lekin uzun ikkinchi qator o'ralmadi va qutidan chiqdi.
• pre-wrap — bo'sh joylar va Enter saqlandi, uzun qator esa o'raldi.
• pre-line — bo'sh joylar yig'ildi, faqat Enter saqlandi.

Natija blokida style="..." atributini ishlatdik — faqat beshta variantni ixcham ko'rsatish uchun. «Bahor» fayllarida doim asosiy.css (CSS nima darsidagi CSP sababi).

break-spaces — pre-wrap ning kam ishlatiladigan ukasi. Farqi — qator oxiridagi bo'sh joylar ham joy egallaydi va o'raladi. Bu kod muharrirlarida kerak bo'ladi, oddiy saytda deyarli uchramaydi.

3.2 Qaysi biri qachon kerak

• nowrap — bo'linmasligi kerak bo'lgan qisqa bo'lak. Narx, sana, telefon raqami. Overflow darsida uni text-overflow: ellipsis bilan birga ishlatgan edik.
• pre-line — foydalanuvchi yozgan matn. Mehmon fikr qoldirdi va Enter bilan uch qatorga yozdi. Saytda bu qatorlar saqlansin, ortiqcha bo'sh joylar esa yig'ilsin. HTML darsidagi "yangi qatorlarim yo'qolib qoldi" muammosining CSS yechimi — shu.
• pre-wrap — bo'sh joylar ham muhim bo'lgan matn. She'r, kod parchasi, tekislangan chek.
• pre — kod bloki. Qatorlar uzilmaydi, qutiga esa overflow-x: auto qo'yiladi (Overflow darsidagidek).

Overflow darsida chekni ko'rgan edik va "ikkinchi yo'l — pre-wrap" degan edik. Endi farqini aytamiz: pre-wrap chekni ramkaga sig'diradi, lekin uzun qator ikkiga bo'linadi va narxlar ustuni buziladi. Chek, jadval ko'rinishidagi matn va kod uchun skroll yaxshiroq. Oddiy matn uchun esa — o'rash.

3.3 Narx bo'linmasin: nowrap bilan

«Bahor» menyusida narx span.narx ichida turadi. Tor kartada "35 000 so'm" ikki qatorga bo'linib ketishi mumkin:

<style>
  .taom-karta {
    font-family: system-ui, sans-serif;
    font-size: 1.125rem;
    width: 9.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border: 2px solid #2f6b3a;
  }
  .narx { color: #b4461a; }
  .taom-karta + .taom-karta .narx {
    white-space: nowrap;
  }
</style>
<article class="taom-karta">
  <p>Tandir go'sht <span class="narx">45 000 so'm</span></p>
</article>
<article class="taom-karta">
  <p>Tandir go'sht <span class="narx">45 000 so'm</span></p>
</article>

Nimaga qarang: birinchi kartada narx ikkiga bo'lindi — "45" yuqorida, "000 so'm" pastda. Mehmon "45 so'm"mi deb o'ylab qolishi mumkin. Ikkinchisida narx butunicha keyingi qatorga o'tdi.   HTML'da har narxga yozilardi, .narx { white-space: nowrap; } esa bitta qoida — hamma narxga birdan.

Maslahat: nowrap ni faqat qisqa bo'lakka bering. Butun paragrafga berilsa, u telefonda ekrandan chiqib ketadi — sahifa yon tomonga suriladi.

white-space aslida ikki xususiyatning qisqa yozuvi: white-space-collapse (bo'sh joylar) va text-wrap-mode (o'rash). Ular yangi, hozircha white-space ning o'zi yetarli. Eski va yangi brauzerlarda bir xil ishlaydi.

Tekshirib ko'ring: Mehmonlar fikri sahifasida har fikr p ichida. Ba'zi mehmonlar Enter bilan yangi qatorga o'tib yozadi. Qaysi white-space qiymatini berasiz va nega pre emas?

4. Uzun so'z va URL: overflow-wrap va word-break

4.1 overflow-wrap: break-word

«Nega bu kerak?» bo'limidagi havolani endi qutiga sig'diramiz. overflow-wrap — "so'z qatorga umuman sig'masa, uni o'rtasidan uzishga ruxsat". Ruxsat faqat oxirgi chora: agar so'z bo'sh joydan keyin yangi qatorda sig'sa, brauzer uni uzmaydi.

Brauzer har bir bo'linmaydigan so'z uchun shunday qaror qiladi:

flowchart TD
  A["So'z shu qatorga sig'adimi?"] -->|ha| B["Shu qatorda qoladi"]
  A -->|yo'q| C["Yangi qatorda sig'adimi?"]
  C -->|ha| D["Yangi qatorga o'tadi"]
  C -->|yo'q| E["overflow-wrap ruxsat beradimi?"]
  E -->|"break-word / anywhere"| F["So'z o'rtasidan uziladi"]
  E -->|normal| G["Qutidan chiqib ketadi"]

Nimaga qarang: so'zni uzish — eng oxirgi qadam. Oddiy so'zlar hech qachon unga yetib bormaydi.

Uchta qiymat bor: normal (uzma — boshlang'ich qiymat), break-word va anywhere. Yana bir o'xshash xususiyat — word-break: break-all. To'rttasini yonma-yon ko'ramiz:

<style>
  p {
    font-family: system-ui, sans-serif;
    width: 12rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem;
    border: 2px solid #2f6b3a;
  }
  b { color: #b4461a; }
  .bw { overflow-wrap: break-word; }
  .aw { overflow-wrap: anywhere; }
  .ba { word-break: break-all; }
</style>
<p><b>❌ normal:</b> Batafsil:
https://example.com/menyu/issiq-taomlar/tandir-gosht</p>
<p class="bw"><b>break-word:</b> Batafsil:
https://example.com/menyu/issiq-taomlar/tandir-gosht</p>
<p class="aw"><b>anywhere:</b> Batafsil:
https://example.com/menyu/issiq-taomlar/tandir-gosht</p>
<p class="ba"><b>break-all:</b> Batafsil:
https://example.com/menyu/issiq-taomlar/tandir-gosht</p>

Nimaga qarang:

• normal — URL qutidan chiqdi.
• break-word va anywhere — URL qutida qoldi. Brauzer uni faqat sig'maydigan joyda uzdi, "Batafsil:" esa butun qoldi.
• break-all — boshqacha. U "sig'masa" deb kutmaydi: har qanday so'zni qator oxirida uzadi. URL qutiga sig'di, lekin chiroyli emas — oddiy so'zlar ham bo'linib ketishi mumkin.

overflow-wrap meros bo'lib o'tadi. Shuning uchun uni ko'pincha butun sahifaga bir marta beriladi:

body {
  overflow-wrap: break-word;
}

Bu xavfsiz qoida: oddiy so'zlarga tegmaydi, faqat qutiga umuman sig'maydiganini uzadi.

4.2 break-word va anywhere farqi — jadvalda

Oddiy blokda ikkalasi bir xil ko'rindi. Farq qutining eni mazmunga qarab hisoblanganda chiqadi. Jadval ustuni shunday: brauzer avval "eng uzun bo'linmaydigan bo'lak qancha?" deb so'raydi. O'lchamlar darsidagi min-content ni eslang — mazmun sig'adigan eng tor en.

• break-word bilan brauzer URL'ni butun so'z deb o'lchaydi. Ustun URL eniga kengayadi va jadval kattalashadi.
• anywhere bilan brauzer "bu so'zni istalgan joyda uzsa bo'ladi" deb o'lchaydi. Ustun torayadi, URL o'raladi.

<style>
  table {
    font-family: system-ui, sans-serif;
    width: 15rem;
    margin-bottom: 0.75rem;
    border: 2px solid #b4461a;
  }
  td {
    padding: 0.25rem;
    border: 1px solid #5b6660;
  }
  .bw td + td { overflow-wrap: break-word; }
  .aw td + td { overflow-wrap: anywhere; }
</style>
<table class="bw">
  <tr><td>Menyu</td>
    <td>https://example.com/menyu/issiq-taomlar</td></tr>
</table>
<table class="aw">
  <tr><td>Menyu</td>
    <td>https://example.com/menyu/issiq-taomlar</td></tr>
</table>

Nimaga qarang: ikkala jadvalga ham width: 15rem berilgan. Qizil ramka jadval chegarasi. Chrome'da o'lchadik: break-word li jadval 240 piksel o'rniga 322 pikselga kengaydi. anywhere li jadval 240 da qoldi, URL ikki qatorga bo'lindi. Qoida faqat ikkinchi katakka (td + td) berilgan: anywhere birinchi katakdagi qisqa "Menyu" so'zini ham "Men" va "yu" ga bo'lib yuborishi mumkin edi.

Qoida: oddiy matnga — break-word. Jadval katagi, tor ustun va keyinroq o'rganadigan flex elementlari uchun — anywhere. Flex elementlari bilan Flexbox darsidan keyin tanishasiz. overflow-wrap: anywhere hamma asosiy brauzerda bor (Baseline).

4.3 word-break: break-all va keep-all

word-break — so'zlar ichidagi uzilish qoidasi.

• normal — oddiy qoida.
• break-all — istalgan harf orasidan uz. O'zbekcha matnga yaramaydi: "tandir" qator oxirida "tan" va "dir" ga bo'linadi. Faqat uzun kod, hash yoki identifikator ustunida foydali.
• keep-all — xitoy, yapon va koreys matnida ierogliflar orasida uzmaydi. O'zbekcha matnda farqi yo'q.

Diqqat: Eski kodda word-break: break-word ni uchratasiz. U eskirgan (deprecated) qiymat va Baseline emas. O'rniga overflow-wrap: anywhere yozing.

Tekshirib ko'ring: Kartada uzun email bor. word-break: break-all va overflow-wrap: break-word dan qaysi birini tanlaysiz?

5. Bo'g'in ko'chirish: hyphens

5.1 Uch qiymat

Maktab daftarida uzun so'zni bo'g'in bilan keyingi qatorga ko'chirgansiz: "choy-xona". Brauzer ham buni qila oladi. hyphens shuni boshqaradi:

• manual — boshlang'ich qiymat. Faqat siz ­ qo'ygan joyda ko'chiradi.
• auto — brauzer so'zni o'zi bo'g'inlarga ajratadi.
• none — hech qachon ko'chirmaydi, hatto ­ bo'lsa ham.

auto uchun brauzer matn tilini bilishi kerak: bo'g'inlar har tilda boshqacha. Til lang atributidan olinadi (Hujjat skeleti darsidagi <html lang="uz">). HTML darsida "hyphens: auto bor, lekin u sahifa tilini bilishi kerak" degan edik. Endi to'liq haqiqatni aytamiz.

5.2 O'zbek tili: lug'at yo'q

Brauzer bo'g'inlarni qoidadan emas, shu tilning ko'chirish lug'ati dan oladi. Lug'at bo'lmasa, auto hech narsa qilmaydi — xato ham chiqarmaydi.

Chrome'da tekshirdik. Chrome lug'atlarni internetdan alohida yuklab oladi: kompyuterimizdagi Chrome'da 50 ga yaqin til lug'ati bor — rus, ingliz, nemis, turkman va boshqalar. O'zbekchasi yo'q. MDN'ning brauzer ma'lumotlar bazasida (browser-compat-data) ham o'zbek tili Chrome, Firefox va Safari'ning birortasida ko'rsatilmagan.

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 1.125rem;
    width: 8rem;
    margin: 0 0 0.75rem;
    padding: 0.25rem;
    border: 2px solid #2f6b3a;
    hyphens: auto;
  }
</style>
<p>Buyurtmangiz o'zgartirilmaganligini tekshiring</p>
<p>Buyurtmangiz o'zgar&shy;tiril&shy;maganligini
tekshiring</p>
<p lang="ru">Достопримечательности Ташкента</p>

Nimaga qarang:

• Birinchi paragrafda hyphens: auto bor, til o'zbekcha (sahifa lang="uz"). "o'zgartirilmaganligini" ramkadan chiqib turibdi — brauzer uni bo'lmadi.
• Ikkinchisida ikki joyga ­ qo'yilgan. Brauzer sig'adiganini tanladi: "o'zgartiril-" yuqorida, qolgani chiziqcha bilan pastga ko'chdi. auto bilan ham ­ ishlayveradi.
• Uchinchisi — lang="ru". Chrome'da tekshirdik: ruscha so'z bo'g'in bilan ko'chdi, chunki rus lug'ati bor. Brauzeringiz lug'atni hali yuklamagan bo'lsa, u sizda bo'linmasligi mumkin.

Demak, o'zbekcha saytda:

• hyphens: auto yozish zararsiz, lekin hozir foydasiz. Kelajakda brauzerlarga o'zbek lug'ati qo'shilsa, o'z-o'zidan ishlay boshlaydi.
• Haqiqatan uzun, tez-tez uchraydigan so'zlarga (sarlavhada, tugmada) — ­.
• URL va email uchun — overflow-wrap, bo'g'in emas.

Diqqat: lang atributi noto'g'ri bo'lsa, auto boshqa tilning qoidasi bilan bo'ladi. Masalan, o'zbekcha matnli sahifada lang="en" qolib ketsa, brauzer "o'zgartirilmaganligini" ni ingliz bo'g'inlari bo'yicha kesadi. lang — faqat ekran o'quvchi uchun emas.

Tekshirib ko'ring: Ruscha blog maqolasi o'zbekcha saytda turibdi. Unda hyphens: auto ishlashi uchun nima kerak?

6. text-wrap: sarlavha va paragrafni chiroyli o'rash

6.1 text-wrap: balance — sarlavha uchun

Oddiy o'rash "ochko'z": brauzer birinchi qatorga iloji boricha ko'p so'z sig'diradi, qolganini pastga tushiradi. Sarlavhada bu xunuk: uzun birinchi qator va bitta so'zli ikkinchi qator.

text-wrap: balance — qatorlarni taxminan teng enli qiladi:

<style>
  h2 {
    font-family: system-ui, sans-serif;
    font-size: 1.5rem;
    line-height: 1.2;
    width: 22rem;
    color: #2f6b3a;
    border: 1px dashed #5b6660;
  }
  h2 + h2 { text-wrap: balance; }
</style>
<h2>Rustam akaning osh sirlari: guruch, zira va sabr</h2>
<h2>Rustam akaning osh sirlari: guruch, zira va sabr</h2>

Nimaga qarang: ikkala sarlavhaning qutisi bir xil enli. Birinchisida yuqori qator deyarli to'la, pastkisi ancha qisqa. Ikkinchisida brauzer qatorlar uzunligini bir-biriga yaqinlashtirdi — sarlavha yaxlit blok bo'lib ko'rinadi. Aniq teng bo'lishi shart emas: brauzer so'zlarni faqat bo'sh joylardan ko'chiradi.

Ikki muhim fakt:

• balance faqat qisqa matnda ishlaydi. MDN yozadi: qatorlarni tenglash qimmat hisob, shuning uchun Chromium uni 6 qatorgacha, Firefox — 10 qatorgacha qiladi. Uzunroq matn oddiy o'raladi. Bu sarlavha, karta nomi, iqtibos uchun mo'ljallangan.
• Baseline ma'lumotlariga ko'ra, text-wrap: balance 2024-yil maydan beri to'rt asosiy brauzerning hammasida bor — bu yangi Baseline. Eski brauzer qoidani tashlab ketadi va sarlavhani oddiy o'raydi. Hech narsa buzilmaydi.

6.2 text-wrap: pretty — paragraf uchun

Paragrafdagi muammo boshqacha: oxirgi qatorda bitta so'z yolg'iz qoladi. Bunday so'z matbaachilar tilida "yetim" deyiladi.

text-wrap: pretty — brauzer paragraf oxiridagi bir necha qatorni qayta ko'rib chiqadi va yetim so'zni oldini oladi:

<style>
  p {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    width: 17.5rem;
    border: 1px dashed #5b6660;
  }
  p + p { text-wrap: pretty; }
</style>
<p>Rustam aka guruchni kechqurun tuzli suvga namlab qo'yadi
va ertalabgacha unga tegmaydi. Zira esa qo'lda eziladi,
shunda uning hidi qozonga to'liq chiqadi.</p>
<p>Rustam aka guruchni kechqurun tuzli suvga namlab qo'yadi
va ertalabgacha unga tegmaydi. Zira esa qo'lda eziladi,
shunda uning hidi qozonga to'liq chiqadi.</p>

Nimaga qarang: birinchi paragrafning oxirgi qatorida faqat "chiqadi." turibdi. Ikkinchisida "to'liq chiqadi." — ikki so'z. Chrome'da Windows'da tekshirdik. Boshqa shriftda yetim so'z boshqa enda paydo bo'ladi — "Tahrirlab ko'rish" da width ni o'zgartirib, uni qidirib ko'ring.

pretty sekinroq algoritm — MDN uni "tezlikdan ko'ra chiroyni afzal ko'radi" deydi. Lekin oddiy sayt matnida farq sezilmaydi.

Diqqat: text-wrap: pretty Baseline emas. Baseline ma'lumotiga ko'ra, u Chrome, Edge va Safari'da bor, Firefox'da hozircha yo'q. Firefox qoidani tashlab ketadi va paragrafni oddiy o'raydi — yetim so'z qoladi, xolos. Shuning uchun uni qo'rqmasdan yozing: bu progressive enhancement (Brauzer mosligi).

6.3 text-wrap ning boshqa qiymatlari

• wrap — oddiy o'rash (boshlang'ich).
• nowrap — o'rama. white-space: nowrap ning zamonaviy ukasi.
• stable — tahrirlanadigan matn uchun: siz yozayotganda oldingi qatorlar "sakramaydi".

Tekshirib ko'ring: Nega text-wrap: balance ni butun body ga bermaymiz?

7. Tekislash, chekinish va qator uzunligi

7.1 text-align

text-align qatorlarni qutining qaysi chetiga tekislashni aytadi: left, right, center, justify. Yana ikkita "aqlli" qiymat bor: start va end. Ular yozuv yo'nalishiga qaraydi: o'zbekcha matnda start — chap, arabcha matnda — o'ng. Buni Mantiqiy xususiyatlar darsida ochamiz. Boshlang'ich qiymat — start.

justify — kitobdagidek ikkala chetga tekislash. Brauzer so'zlar orasini kengaytirib, qatorni to'ldiradi. Keng gazeta ustunida chiroyli. Tor telefon ekranida esa xavfli:

<style>
  p {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    width: 12rem;
    padding: 0.5rem;
    border: 1px dashed #5b6660;
  }
  .ikki-chet { text-align: justify; }
</style>
<p class="ikki-chet">❌ Choyxonamiz 1998-yilda ochilgan.
Mehmonxonamizdagilarga o'zbekcha nonushta tayyorlanadi.</p>
<p>✅ Choyxonamiz 1998-yilda ochilgan.
Mehmonxonamizdagilarga o'zbekcha nonushta tayyorlanadi.</p>

Nimaga qarang: birinchi paragrafda so'zlar orasida katta "teshiklar" paydo bo'ldi. Uzun so'z keyingi qatorga o'tib ketdi, oldingi qator esa ikki-uch so'z bilan butun enga cho'zildi. Matbaachilar bunday oq yo'laklarni "daryo" deyishadi. Kitobda buni bo'g'in ko'chirish tuzatadi. O'zbekcha matnda esa hyphens: auto ishlamaydi (lug'at yo'q) — shuning uchun o'zbekcha saytda justify dan qoching.

Bundan tashqari, WCAG 1.4.8 (AAA darajasi) mezoni ikki chetga tekislanmagan matnni tavsiya qiladi: notekis bo'shliqlar disleksiyasi (harflarni o'qishda qiynalish) bor odamga o'qishni qiyinlashtiradi.

center — faqat qisqa matnga: sarlavha, e'lon, tugma. Uch qatordan uzun markazlangan matnni o'qish qiyin: ko'z har qator boshini qidiradi.

7.2 text-indent — birinchi qator chekinishi

Bo'sh joylar va qator uzish qoidasi darsida xatoni ko'rgan edik: paragraf boshidagi chekinish uchun     . "Tuzatish CSS'da, text-indent bilan" degan edik. Mana:

<style>
  article {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    max-width: 22rem;
  }
  article p { margin: 0; }
  article p + p { text-indent: 1.5em; }
</style>
<article>
  <p>Choyxonamiz 1998-yilda ochilgan. Birinchi kuni atigi
  uchta stol bor edi.</p>
  <p>Bugun ichkarida va hovlida qirqta stol turibdi. Har kuni
  ertalab Rustam aka yangi qozon osadi.</p>
  <p>Juma kuni esa hovlida katta qozonda to'y oshi damlanadi.</p>
</article>

Nimaga qarang: birinchi paragraf chekinishsiz boshlandi, keyingilari esa 1.5em ichkaridan. Paragraflar orasida bo'sh joy yo'q — kitobdagidek. Bu klassik qoida: yo chekinish, yo paragraflar orasi. Ikkalasi birga ortiqcha.

p + p — Asosiy selektorlar darsidagi qo'shni kombinatori: "oldida paragraf turgan paragraf". Sarlavhadan keyingi birinchi paragraf chekinishsiz qoladi — kitobda ham shunday.

text-indent faqat birinchi qatorga ta'sir qiladi va em da yozilgani ma'qul — shrift o'zgarsa, chekinish ham moslashadi. Manfiy qiymat (-1em) birinchi qatorni chapga chiqaradi — lug'at va manbalar ro'yxatida uchraydi.

7.3 Qator uzunligi: 65ch

O'lcham birliklari darsida portfolio matniga max-width: 65ch bergan edik. Qator juda uzun bo'lsa, ko'z qator oxiridan keyingi qator boshiga qaytishda adashadi. Juda qisqa bo'lsa — har bir-ikki so'zda ko'z sakraydi va justify "daryolar" beradi. Qulay uzunlik — taxminan 45–75 belgi. ch — "0" raqamining eni, shuning uchun 65ch taxminan 65 belgi.

Bu darsdagi hamma vosita shu chegara ichida yaxshi ishlaydi: pretty yetim so'zni, overflow-wrap uzun URL'ni tuzatadi, max-width esa qatorni o'qishga qulay qiladi.

Tekshirib ko'ring: Blog maqolasiga text-align: justify berilgan va telefonda so'zlar orasida katta bo'shliqlar bor. Dizayner "kitobdagidek bo'lsin" deb turib oldi. Nima deysiz?

8. Ko'p uchraydigan xatolar

8.1 Butun kartaga white-space: nowrap

"Nom bitta qatorda tursin" deb .taom-karta { white-space: nowrap; } yozilgan. white-space meros bo'ladi: tavsif ham, narx ham o'ralmay qoldi va telefonda kartadan chiqib ketdi. Tuzatish: nowrap ni faqat kerakli bo'lakka bering (.narx), yoki Overflow darsidagi uchlik bilan (overflow: hidden + text-overflow: ellipsis) faqat nomga.

8.2 Uzun URL uchun word-break: break-all

URL qutiga sig'di, lekin endi paragrafdagi hamma so'z qator oxirida kesiladi: "tan-dir" emas, "tand" va "ir". Tuzatish: overflow-wrap: break-word — faqat sig'maydigan so'zga tegadi.

8.3 Jadvalda break-word "ishlamayapti"

Katak ichidagi uzun URL jadvalni kengaytirib, telefonda sahifani surmoqda. overflow-wrap: break-word yozilgan, lekin foydasi yo'q. Sabab — «break-word va anywhere farqi» bo'limida ko'rdik: jadval ustuni enini mazmunga qarab hisoblaydi. Tuzatish: katakka overflow-wrap: anywhere.

8.4 hyphens: auto va o'zbekcha matn

"Yozdim, lekin bo'g'in ko'chmayapti". Xato sizda emas: o'zbek lug'ati brauzerlarda yo'q. Yana bir sabab — lang atributi yo'q yoki noto'g'ri. Tuzatish: muhim uzun so'zlarga ­, qolgani uchun overflow-wrap.

8.5 Chekinish uchun bo'sh joylar

    yoki white-space: pre bilan "chekinish". Telefonda qator g'alati boshlanadi, kod o'qilmaydi. Tuzatish: text-indent: 1.5em.

9. Mashqlar

1-mashq (oson): Qaysi white-space?

Har holatga white-space qiymatini tanlang va bir gap bilan asoslang:

1. Telefon raqami +998 90 000 00 00 hech qachon ikkiga bo'linmasin.
2. Mehmon fikri: Enter bilan yozilgan qatorlar saqlansin, uzun gap o'ralsin.
3. Oshpaz taxtasidagi retsept: ingredientlar bo'sh joylar bilan ustun qilib tekislangan, telefonda ham o'ralsin.
4. HTML kod namunasi — hech narsa o'zgarmasin va o'ralmasin.

Ishora: «Uch savol, olti javob» jadvali — bo'sh joylar, Enter, o'rash.

2-mashq (o'rta): "Aloqa" sahifasini telefonga moslang

«Bahor»ning "Aloqa" sahifasida shunday parcha bor. Telefonda (360 piksel) sahifa yon tomonga suriladi:

<address>
  <p>Bron: <a href="mailto:buyurtmalar.bolimi@example.com">
    buyurtmalar.bolimi@example.com</a></p>
  <p>Telefon: <a href="tel:+998900000000">+998 90 000 00 00</a></p>
</address>
<div class="jadval-orami" role="region"
     aria-labelledby="filiallar" tabindex="0">
  <table>
    <caption id="filiallar">Filiallar</caption>
    <tr>
      <th scope="row">Chilonzor</th>
      <td>https://example.com/filiallar/chilonzor-bahor</td>
    </tr>
  </table>
</div>

asosiy.css ga uchta qoida yozing:

1. Butun sahifada sig'maydigan so'zlar uzilsin.
2. Telefon raqami bo'linmasin.
3. Jadval kataklaridagi URL o'ralsin, jadval ekrandan kengaymasin.

Ishora: «overflow-wrap: break-word» va «break-word va anywhere farqi» bo'limlari. Telefon havolasini atribut selektori bilan toping — href qiymati tel: bilan boshlanadi (Atribut selektorlari).

<style>
  body {
    font-family: system-ui, sans-serif;
    overflow-wrap: break-word;
    max-width: 13.5rem;
  }
  a[href^="tel:"] {
    white-space: nowrap;
  }
  td {
    overflow-wrap: anywhere;
  }
  table { border: 1px solid #5b6660; }
</style>
<address>
  <p>Bron: <a href="mailto:buyurtmalar.bolimi@example.com">
    buyurtmalar.bolimi@example.com</a></p>
  <p>Telefon: <a href="tel:+998900000000">+998 90 000 00 00</a></p>
</address>
<div class="jadval-orami" role="region"
     aria-labelledby="filiallar" tabindex="0">
  <table>
    <caption id="filiallar">Filiallar</caption>
    <tr>
      <th scope="row">Chilonzor</th>
      <td>https://example.com/filiallar/chilonzor-bahor</td>
    </tr>
  </table>
</div>

3-mashq (qiyin): Blog maqolasini tuzating

Stajyor «Bahor» blogi uchun shunday CSS yozdi. Telefonda so'zlar orasida teshiklar, sarlavhada yolg'iz so'z, paragraf boshida g'alati bo'shliqlar bor:

article {
  text-align: justify;
  hyphens: auto;
}
article h2 {
  white-space: nowrap;
}
article p {
  white-space: pre;
}

HTML'da esa paragraflar      bilan boshlanadi. Har muammoning sababini ayting va kodni qayta yozing: chekinish CSS'da, sarlavha teng qatorli, paragraf oxirida yetim so'z yo'q, qator uzunligi o'qishga qulay.

Ishora: white-space jadvali, «O'zbek tili: lug'at yo'q», text-wrap va «Tekislash, chekinish va qator uzunligi» bo'limlari.

article {
  max-width: 65ch;
  line-height: 1.5;
  overflow-wrap: break-word;
}
article h2 {
  line-height: 1.2;
  text-wrap: balance;
}
article p {
  margin: 0;
  text-wrap: pretty;
}
article p + p {
  text-indent: 1.5em;
}

4-mashq: Portfolio qadami — chiroyli o'ralgan matn

Portfoliongiz telefonda qanday o'ralayotganini yaxshilang.

1. h1 va h2 qatorlari teng bo'lsin.
2. Paragraflar, ro'yxat bandlari va dd larda oxirgi qatorda yolg'iz so'z qolmasin.
3. Butun saytda sig'maydigan uzun so'z (email, havola) uzilsin.
4. DevTools telefon rejimida (360 piksel) bosh sahifa, "Men haqimda" va «Bahor» loyiha sahifasini oching. h1 qanday o'ralganini balance li va balance siz holatda solishtiring (Styles panelida qoidani belgidan olib tashlab ko'ring).

Ishora: «overflow-wrap: break-word», «text-wrap: balance» va «text-wrap: pretty» bo'limlari. pretty Firefox'da yo'q — bu normal, u erda oddiy o'raladi.

body {
  overflow-wrap: break-word;
}

h1,
h2 {
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

<style>
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: #1f2a24;
    background-color: #f7faf8;
    overflow-wrap: break-word;
  }
  main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  h1, h2 {
    color: #1f6f4a;
    line-height: 1.2;
    text-wrap: balance;
  }
  h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
  p, li, dd { text-wrap: pretty; }
</style>
<main id="asosiy">
  <h1>Salom, men Aziz — boshlovchi frontend dasturchiman</h1>
  <p>Veb-saytlarni noldan o'rganyapman. Hozir HTML'ni to'liq
  bilaman: semantika, formalar, accessibility va SEO.
  Keyingi qadam — CSS.</p>
</main>

10. Real ishda

• "Sahifa yon tomonga suriladi" — mobil saytlardagi eng ko'p shikoyatlardan biri. Uning katta qismi uzun URL, email yoki nowrap dan. Tajribali dasturchilar overflow-wrap: break-word ni reset faylga (CSS reset) birinchi kundanoq yozadi.
• Foydalanuvchi matni — izohlar, chatlar, Telegram bot xabarlari. Qatorlar yo'qolmasligi uchun white-space: pre-line yoki pre-wrap. Buni JavaScript bilan ma'lumot chiqarganingizda ko'p eslaysiz.
• Dizayn tizimlari sarlavhalarga text-wrap: balance, matnga pretty ni standart qilib qo'ymoqda.
• Ko'p tilli saytlar (o'zbek, rus, ingliz) — har bo'lakka to'g'ri lang. Shunda ruscha va inglizcha matnda hyphens: auto ishlaydi.
• Intervyuda so'raladi: "overflow-wrap va word-break farqi?", "white-space: pre-wrap va pre-line farqi?", "Uzun URL layoutni buzsa nima qilasiz?".

Xulosa

• Brauzer qatorni bo'sh joy va chiziqchadan keyin uzadi; URL va email'da bunday joy kam — ular qutidan chiqadi.
• white-space uch savolga javob beradi: bo'sh joylar, Enter va o'rash. nowrap — qisqa bo'lakka, pre-line — foydalanuvchi matniga, pre — kodga.
• overflow-wrap: break-word — faqat sig'maydigan so'zni uzadi; jadval va tor ustunda — anywhere. word-break: break-all hamma so'zni kesadi.
• hyphens: auto til lug'atiga bog'liq; o'zbek tili uchun lug'at hozircha yo'q — ­ ishlating.
• text-wrap: balance sarlavhani teng qatorlarga bo'ladi (yangi Baseline); pretty yetim so'zni yo'qotadi (Baseline emas, Firefox'da oddiy o'rash).
• O'zbekcha tor matnda justify dan qoching; chekinish — text-indent, qator uzunligi — 65ch atrofida.

Keyingi dars: Matn bezagi: chiziqlar, soya, registr va gradient matn — havola chizig'ini sozlash, katta harflar, matn soyasi va gradient matn.

Manbalar

• MDN: "white-space", "overflow-wrap", "word-break", "hyphens", "text-wrap", "text-wrap-style", "text-align", "text-indent" — developer.mozilla.org
• W3C: "CSS Text Module Level 3" va "Level 4" (uzilish nuqtalari, text-wrap) — w3.org/TR/css-text-4
• W3C: WCAG 2.2, "Understanding 1.4.8 Visual Presentation" — w3.org/WAI/WCAG22/Understanding/visual-presentation
• MDN browser-compat-data: css.properties.hyphens (tillar ro'yxati) — github.com/mdn/browser-compat-data
• web-features (Baseline ma'lumotlari): "text-wrap-balance", "text-wrap-pretty", "overflow-wrap", "hyphens" — github.com/web-platform-dx/web-features