CSS mantiqiy xususiyatlar: margin-inline, inset-inline va yozuv yo'nalishlari

Qisqacha: margin-left "chapda" deydi — ekranning chap tomonida. margin-inline-start esa "qator boshlanadigan tomonda" deydi: o'zbekcha sahifada bu chap, arabcha (dir="rtl") sahifada — o'ng. Bunday xususiyatlar mantiqiy xususiyatlar deyiladi: ular matn yo'nalishiga moslashadi. Ikki o'q bor — inline (qator bo'ylab) va block (qatorlar teriladigan tomonga). writing-mode: vertical-rl matnni tik qiladi va o'qlar ham u bilan birga buriladi. Yangi kodda chekinish, chegara va joylashuvni mantiqiy xususiyatlar bilan yozing.

Bu darsda

• Inline va block o'qlarini, start va end tomonlarni tushuntira olasiz.
• margin-inline, padding-block, border-inline-start, inset-inline-start, inline-size kabi mantiqiy xususiyatlarni yozasiz.
• dir="rtl" li arabcha sahifada kartani ko'zgudek to'g'ri aks ettirasiz.
• writing-mode bilan tik matn yozasiz va o'qlar qanday burilishini ko'rsatasiz.
• Mavjud CSS'ni mantiqiy xususiyatlarga o'tkazasiz va jismoniy xususiyat qachon to'g'ri ekanini bilasiz.

Oldin bilishingiz kerak: Box model, Normal oqim, position: relative va absolute, Ko'p tilli matn va yo'nalish, Holat pseudo-klasslari.

1. Nega bu kerak?

Samarqand va Buxoroga arab mamlakatlaridan sayyohlar ko'p keladi. Jasur aka «Bahor» menyusining arabcha sahifasini ochmoqchi. Ko'p tilli matn darsidan bilamiz: arab tilida matn o'ngdan chapga yoziladi va sahifaga dir="rtl" qo'yiladi. HTML tayyor. CSS-chi?

Oldingi darslarda yozgan CSS'imizda margin-left, padding-left, border-left, left: 0.5rem, text-align: left ko'p. Hammasi "chap" deydi. Arabcha sahifada esa matn o'ngdan boshlanadi. Kartaning urg'u chizig'i qator boshida emas, oxirida qoladi, chekinishlar teskari tomonda bo'ladi.

Bu darsda "chap" va "o'ng" o'rniga "boshi" va "oxiri" deb yozishni o'rganamiz. Oldingi darslarda uch marta shu yerga havola qilgan edik: padding-inline (Box model), margin-inline: auto (Margin sirlari) va border-inline (Chegara va burchak). position darsida esa skip link'ning left: -9999px varianti arabcha sahifada gorizontal skroll yaratganini ko'rgan edik.

2. Ikki o'q: inline va block

2.1 Qator o'qi va qatorlar o'qi

Normal oqim darsida daftar o'xshatishini ishlatgan edik: so'zlar qator bo'ylab ketadi, qatorlar esa bir-birining ostiga teriladi. Shu ikki yo'nalishning nomi bor:

• Inline o'q (inline axis) — qator bo'ylab, so'zlar ketadigan yo'nalish. O'zbekchada — chapdan o'ngga.
• Block o'q (block axis) — qatorlar va bloklar teriladigan yo'nalish. O'zbekchada — tepadan pastga.

Har o'qning ikki tomoni bor: start (boshi) va end (oxiri). Daftarda qalamni qo'yadigan joy — boshi, yozib boradigan tomon — oxiri. O'zbekcha sahifada inline-start — chap, inline-end — o'ng, block-start — tepa, block-end — past.

2.2 Jismoniy va mantiqiy

Jismoniy xususiyatlar (physical properties) — ekranga bog'langan: left, right, top, bottom. Ular doim bir joyni ko'rsatadi, matn qaysi tilda bo'lishidan qat'i nazar.

Mantiqiy xususiyatlar (logical properties) — matnga bog'langan: inline-start, inline-end, block-start, block-end. Kitobdagi "sahifa boshida" iborasi kabi: o'zbek kitobida bu chap yuqori burchak, arab kitobida — o'ng yuqori burchak. Ma'nosi bir xil, joyi yo'nalishga qarab.

2.3 Qaysi tomon qayerda

Nimaga qarang: rtl da faqat inline o'q ko'zgudek aylanadi — qatorlar baribir tepadan pastga teriladi. Tik yozuvda esa ikkala o'q ham buriladi. Tik yozuvni «writing-mode: tik matn» bo'limida ko'ramiz.

Jadvalni ko'z bilan ko'raylik. Uchta qutiga bir xil CSS berildi: yashil chiziq — border-inline-start, qizg'ish chiziq — border-block-start. Farq faqat HTML'dagi yo'nalishda:

<style>
  .quti {
    inline-size: 9rem;
    margin-block-end: 1rem;
    padding: 0.5rem;
    border-inline-start: 6px solid #2f6b3a;
    border-block-start: 6px solid #b4461a;
    background-color: #fffaf0;
  }
  .tik {
    writing-mode: vertical-rl;
  }
</style>
<p class="quti">Ko'k choy</p>
<p class="quti" lang="ar" dir="rtl">شاي أخضر</p>
<p class="quti tik">Ko'k choy</p>

Nimaga qarang: o'zbekcha qutida yashil chiziq chapda, qizg'ish — tepada. Arabcha qutida yashil chiziq o'ngga o'tdi, qizg'ish esa tepada qoldi. Tik qutida ikkalasi ham burildi: yashil — tepada, qizg'ish — o'ngda. .quti va .tik — shu namoyish uchun nomlar.

Tekshirib ko'ring: Arabcha (rtl) sahifada padding-block-start qaysi tomonga ta'sir qiladi? padding-inline-end-chi?

3. Mantiqiy xususiyatlar

3.1 Nomlar qanday tuziladi

Qoida oddiy: jismoniy nomdagi left/right o'rniga inline-start/inline-end, top/bottom o'rniga block-start/block-end qo'yiladi. Bitta o'qdagi ikkala tomon — -inline yoki -block bilan qisqa yozuv:

Ikki qiymatli qisqa yozuv avval start'ni, keyin end'ni oladi: margin-inline: 1rem 2rem — boshida 1rem, oxirida 2rem. Bitta qiymat — ikkala tomonga.

3.2 Qiymatlar ham mantiqiy

Ba'zi xususiyatlarda xususiyat nomi emas, qiymati mantiqiy:

• text-align: start va end — left va right o'rniga. Brauzerning odatiy qiymati allaqachon start: shuning uchun arabcha paragraf o'zi o'ngdan tekislanadi.
• float: inline-start va inline-end — Normal oqim darsidagi left/right o'rniga. clear: inline-start ham bor. Baseline ma'lumotiga ko'ra, bu qiymatlar 2023-yil oktyabridan hamma asosiy brauzerda bor va 2026-yil aprelidan keng tarqalgan.
• Burchaklar: border-start-start-radius — block-start va inline-start kesishgan burchak. O'zbekchada — chap yuqori, arabchada — o'ng yuqori. Nomdagi birinchi so'z — block o'q, ikkinchisi — inline o'q.

Baseline ma'lumotlariga ko'ra, mantiqiy xususiyatlar to'plami 2021-yil sentabridan hamma asosiy brauzerda bor va keng tarqalgan. Ularni bemalol ishlatish mumkin.

3.3 Karta — ikki yo'nalishda

«Bahor» menyusidagi ko'k choy kartasi, o'zbekcha va arabcha. Avval — jismoniy xususiyatlar bilan:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    width: 14rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 6px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
    text-align: left;
  }
  .narx {
    margin-left: 0.5rem;
    color: var(--rang-urgu);
  }
</style>
<article class="taom-karta" lang="uz">
  <h3>Ko'k choy <span class="narx">5 000</span></h3>
</article>
<article class="taom-karta" lang="ar" dir="rtl">
  <h3>شاي أخضر <span class="narx">5 000</span></h3>
</article>

Nimaga qarang: ikkinchi kartada arabcha nom — "شاي أخضر" ("ko'k choy", so'zma-so'z "yashil choy") — chap chetga tekislangan, yashil urg'u chizig'i ham chapda. Arab o'quvchisi qatorni o'ngdan boshlaydi, u yerda esa chiziq ham, chekinish ham yo'q. Narx va nom orasidagi bo'shliq ham noto'g'ri tomonda: margin-left narxning chapida, ya'ni qator oxiri tomonida.

Endi — mantiqiy xususiyatlar bilan:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    inline-size: 14rem;
    margin-block-end: 1rem;
    padding-inline-start: 1rem;
    border-inline-start: 6px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
    text-align: start;
  }
  .narx {
    margin-inline-start: 0.5rem;
    color: var(--rang-urgu);
  }
</style>
<article class="taom-karta" lang="uz">
  <h3>Ko'k choy <span class="narx">5 000</span></h3>
</article>
<article class="taom-karta" lang="ar" dir="rtl">
  <h3>شاي أخضر <span class="narx"><bdi>5 000</bdi></span></h3>
</article>

Nimaga qarang: o'zbekcha karta avvalgidek. Arabcha karta ko'zgudek aylandi: yashil chiziq o'ngda, matn o'ngdan boshlanadi, narx esa nomdan chapda, oradagi bo'shliq ham to'g'ri joyda. CSS bitta — yo'nalishni HTML'dagi dir hal qildi. Narx ichidagi bdi nega kerakligini «Bitta qatorda ikki yo'nalish» bo'limida ko'ramiz. Chrome'da o'lchadik: arabcha kartada narxning margin-right qiymati 8 piksel, margin-left esa 0; chegara ham o'ng tomonda, 6 piksel.

lang="ar" — Ko'p tilli matn darsidagi qoida: ekran o'quvchi arabcha matnni arabcha talaffuz bilan o'qiydi.

3.4 Aralash qiymat: margin'ning ikki o'qi

Qisqa yozuv margin: 0 0 1rem 1rem jismoniy — tepa, o'ng, past, chap. Uning mantiqiy juftligi ikki qator:

margin-block: 0 1rem;  /* tepa 0, past 1rem */
margin-inline: 1rem 0; /* boshi 1rem, oxiri 0 */

Ikki qator — bitta o'rniga. To'rt qiymatli mantiqiy qisqa yozuv hozircha yo'q, shuning uchun -block va -inline juftligi yoziladi.

Tekshirib ko'ring: .bron-havola { margin-left: auto; margin-right: auto; } ni mantiqiy xususiyat bilan bitta qatorda yozing.

4. dir va direction

4.1 Yo'nalish HTML'da

Yo'nalish HTML'dagi dir atributi bilan beriladi. Butun sahifa uchun — <html lang="ar" dir="rtl">, bitta bo'lak uchun — o'sha elementga. Ko'p tilli matn darsidagi uch qiymat: ltr, rtl va auto. Oxirgisida brauzer yo'nalishni matnning birinchi kuchli harfiga qarab o'zi aniqlaydi. Kuchli harf — yo'nalishi aniq harf: lotin harfi chapdan o'ngga, arab harfi o'ngdan chapga yoziladi. Raqam, bo'sh joy va tinish belgilari esa "betaraf" — o'z yo'nalishi yo'q. auto foydalanuvchi yozgan izoh va ismlar uchun qulay.

CSS'da ham direction: rtl xususiyati bor. Lekin MDN va spetsifikatsiya aniq aytadi: hujjat yo'nalishini CSS bilan emas, HTML'dagi dir bilan bering. Sabab — yo'nalish ko'rinish emas, ma'no. U CSS yuklanmasa ham, qidiruv tizimi, tarjimon va ekran o'quvchi uchun ham kerak. direction faqat maxsus holatlarda, masalan SVG ichida ishlatiladi.

4.2 :dir() — yo'nalishga qarab bezash

Ba'zi narsalar yo'nalishga qarab o'zgarishi kerak, lekin mantiqiy xususiyati yo'q. Masalan, "keyingi sahifa" strelkasi: o'zbekchada "→", arabchada "←". Holat pseudo-klasslari darsidagi :dir() shu uchun:

.keyingi::after {
  content: " →";
}
.keyingi:dir(rtl)::after {
  content: " ←";
}

:dir() meros va dir="auto" ni ham hisobga oladi, [dir="rtl"] atribut selektori esa faqat atribut yozilgan elementni topadi. Baseline ma'lumotiga ko'ra :dir() 2023-yil dekabridan hamma asosiy brauzerda bor va 2026-yil iyunidan keng tarqalgan. class="keyingi" — shu misol uchun nom.

4.3 Skip link va honeypot — yo'nalishdan mustaqil

position darsidagi ikki joyni endi to'g'ri yoza olamiz. Skip link:

.otish:focus {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
}

Arabcha sahifada tugma o'ng yuqori burchakda chiqadi — u yerda sahifa "boshlanadi". Honeypot:

.asal-idish {
  position: absolute;
  inset-inline-start: -100vw;
}

Chrome'da tekshirdik: dir="rtl" sahifada left: -9999px sahifa enini 800 dan 10 799 pikselga cho'zib, gorizontal skroll yaratgan edi. Mantiqiy variantda element o'ng tomonga chiqdi va sahifa eni 800 da qoldi. Nega? Brauzer sahifani faqat qator oxiri tomonga aylantiradi: o'zbekchada o'ngga, arabchada chapga. Qator boshi tomonga chiqib ketgan narsa skroll yaratmaydi. Shuning uchun yashiriladigan narsani doim qator boshi tomonga suramiz — inset-inline-start buni ikkala yo'nalishda ham to'g'ri qiladi.

4.4 Bitta qatorda ikki yo'nalish

Birinchi () natijaga qayting va arabcha kartadagi narxga qarang: "5 000" emas, "000 5" ko'rinadi. Ikki yo'nalishli matn algoritmi (bidi) — brauzerning bir qatorda ikki yo'nalishli matnni teradigan qoidalari. U raqamlarni chapdan o'ngga yozadi, lekin raqamlar orasidagi bo'sh joy "betaraf" belgi. Arabcha qatorda u raqamni ikki alohida bo'lakka ajratdi, bo'laklar esa o'ngdan chapga terildi. Chrome'da tekshirdik: margin ham, text-align ham bunga ta'sir qilmaydi — bu CSS ishi emas.

Yechim HTML'da: raqamni Ko'p tilli matn darsidagi bdi tegiga o'rash. bdi ichidagi matn atrofdan ajratiladi va yo'nalishini o'zi aniqlaydi: kuchli harf yo'q bo'lsa — chapdan o'ngga. Ikkinchi natijada narx to'g'ri — "5 000". bdi ni span ning ichiga qo'ydik: span o'zi arabcha yo'nalishda qoladi va uning margin-inline-start i nom tomonda ishlaydi. Agar span ning o'ziga dir="ltr" bersangiz, bo'shliq qarama-qarshi tomonga o'tib ketadi — mantiqiy xususiyat elementning o'z yo'nalishida o'qiladi.

Foydalanuvchi yozgan ism va izohlar uchun ham shu: bdi yoki dir="auto". Mantiqiy xususiyatlar bo'shliq va chegaralarni to'g'ri tomonga qo'yadi, dir va bdi esa matnning o'zini — ikkalasi birga ishlaydi.

Tekshirib ko'ring: Sayt o'zbekcha va arabcha. Dizayner "chat tugmasi pastda, qator oxiri tomonda bo'lsin" dedi. Qaysi ikki xususiyat kerak?

5. writing-mode: tik matn

5.1 Uch asosiy qiymat

writing-mode — qatorlar qaysi yo'nalishda yozilishini belgilaydigan xususiyat:

• horizontal-tb — odatiy: qatorlar gorizontal, tepadan pastga (tb — top to bottom).
• vertical-rl — qatorlar tik, o'ngdan chapga teriladi (rl — right to left). Yapon va xitoy kitoblari shunday yoziladi.
• vertical-lr — qatorlar tik, chapdan o'ngga teriladi. Mo'g'ul eski yozuvi shunday.

Lotin harfli matnda tik yozuv ko'pincha bezak: jadvalning tor ustun sarlavhalari, kartaning yon tomonidagi yorliq, kitob muqovasining qirrasi.

5.2 Karta yonidagi yorliq

«Bahor» menyusida yangi taom kartasining o'ng chetida tik "YANGI" yorlig'i:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .taom-karta {
    position: relative;
    inline-size: 16rem;
    padding-block: 0.25rem;
    padding-inline: 1rem 2.5rem;
    border: 2px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
  }
  .taom-karta.yangi::after {
    content: "YANGI";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    padding-block: 0.25rem;
    writing-mode: vertical-rl;
    text-align: center;
    background-color: var(--rang-urgu);
    color: var(--rang-fon);
    letter-spacing: 0.2em;
  }
</style>
<article class="taom-karta yangi">
  <h3>Tandir go'sht</h3>
  <p>Har juma kuni tushlikda. Qo'y go'shti tandirda uch
  soat pishadi.</p>
</article>

Nimaga qarang: kartaning o'ng chetida qizg'ish tik tasma, unda "YANGI" harflari 90 gradus burilgan holda tepadan pastga o'qiladi. Tasma kartaning butun bo'yiga cho'zilgan va so'z uning o'rtasida.

E'tibor bering: tasmaning hamma mantiqiy xususiyatlari uning o'z yozuv rejimida o'qiladi — vertical-rl da. Tik yozuvda o'qlar burilgan («Qaysi tomon qayerda» jadvalining oxirgi ustuni):

• Block o'q — gorizontal, block-start — o'ng. inset-block-start: 0 tasmani kartaning o'ng chetiga yopishtirdi. padding-block — tasmaning chap va o'ng ichki bo'shlig'i.
• Inline o'q — tik, tepadan pastga. inset-inline: 0 tasmani tepadan pastgacha cho'zdi. text-align: center so'zni shu o'q bo'yicha — tik o'rtaga qo'ydi.

Bu tuzoqqa tez tushiladi. Birinchi urinishda biz kartaning yo'nalishi bilan o'ylab inset-block: 0; inset-inline-end: 0 yozgan edik. Chrome'da tekshirdik: tasma kartaning pastki qismida butun eniga yoyilib ketdi — inset-block: 0 tik elementda "chapdan o'ngacha" degani bo'lib chiqdi. Qoida: yozuv rejimi yoki dir o'zgartirilgan elementda mantiqiy xususiyatlarni shu elementning o'qlari bilan o'ylang. Chalkash bo'lsa — joylashuv uchun jismoniy top, right, bottom ham xato emas.

letter-spacing — Qator balandligi va harf oralig'i darsidan: harflar orasida havo. padding-inline-end: 2.5rem esa kartaning o'z matni tasma ostiga kirmasligi uchun.

5.3 O'lcham ham buriladi

inline-size — inline o'q bo'yicha o'lcham. Gorizontal yozuvda u width, tik yozuvda — height. Chrome'da o'lchadik: writing-mode: vertical-rl; inline-size: 10rem; block-size: 3rem berilgan blok 48 piksel eni va 160 piksel bo'yida chiqdi.

Shuning uchun tik matn bilan ishlaganda width/height emas, inline-size/block-size yozing — "matn uzunligi" va "qatorlar qalinligi" ma'nosida o'qiladi.

5.4 text-orientation va yangi sideways

vertical-rl da lotin harflari 90 gradus burilib yotadi. Ularni bir-birining ostida tik turg'izish uchun — text-orientation: upright: har harf o'z holatida, ustun bo'lib. Qisqa so'zlarda ("OSH") chiroyli, uzun matnda o'qish qiyin.

Yana ikki yangi qiymat bor: writing-mode: sideways-rl va sideways-lr. Ular matnni butunlay buradi — kitob qirrasidagi yozuv kabi. sideways-lr pastdan tepaga o'qiladi. Baseline ma'lumotiga ko'ra, bu ikkalasi yangi Baseline (2025-yil mart) — eski brauzerlarda ishlamaydi va element odatiy gorizontal yozuvda qoladi.

Tekshirib ko'ring: writing-mode: vertical-rl berilgan tasmaga inline-size: 8rem yozildi. Tasma 8rem enimi yoki bo'yimi?

6. Qachon jismoniy xususiyat to'g'ri

Hamma narsa matn yo'nalishiga bog'liq emas. Ba'zi narsalar ekranga bog'langan:

• Soya va yorug'lik. box-shadow: 0 4px 12px — yorug'lik tepadan tushadi, arabcha sahifada ham. Soyalarning mantiqiy versiyasi yo'q va kerak ham emas (Chegara va soyalar).
• Fizik harakat. "Pastdan chiqib keladigan" bildirishnoma arabchada ham pastdan chiqadi.
• Rasmning ichki tarkibi. object-position: center bottom (Rasm va media) — rasmdagi obyekt joyi, matnga bog'liq emas.
• Ekran chetiga bog'langan panel — telefondagi pastki menyu arabcha ilovada ham pastda turadi.

Qoida: "bu narsa matn bilan birga aylanishi kerakmi?" Ha — mantiqiy. Yo'q — jismoniy. Chekinish, chegara, tekislash, belgi joyi — deyarli doim mantiqiy.

7. Ko'p uchraydigan xatolar

7.1 Aralash yozuv

Bir joyda margin-inline-start, boshqa joyda margin-left — ikkalasi bitta elementga tushsa, qaysi biri yutadi? Ular bitta haqiqiy xususiyatga (o'zbekchada — chap margin) tushadi va kaskad oddiy qoida bilan hal qiladi: kuchliroq yoki keyinroq yozilgani (Kaskad). Arabcha sahifada esa ular turli tomonlarga tushadi va ikkalasi ham ishlaydi. Tuzatish: bitta faylda bitta tizim — mantiqiy.

7.2 direction bilan sahifa yo'nalishi

body { direction: rtl; } yozildi, HTML'da dir yo'q. Ekran o'quvchi va tarjimon yo'nalishni bilmaydi, :dir() esa ishlamaydi. Tuzatish: <html lang="ar" dir="rtl">.

7.3 text-align: left

Arabcha matn chapga yopishib qoldi. Tuzatish: text-align: start — yoki umuman yozmang, odatiysi start.

7.4 Tik matnda width

Tik tasmaga width: 10rem berildi va u keng bo'lib qoldi. Tuzatish: inline-size (matn uzunligi) va block-size (qatorlar qalinligi).

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Tarjima qiling

Jismoniy xususiyatni mantiqiy juftiga almashtiring:

1. padding-left: 1rem →
2. border-bottom: 2px solid →
3. max-width: 70ch →
4. text-align: right (ltr sahifada) →

Ishora: «Nomlar qanday tuziladi» jadvali. ltr da right — inline o'qning oxiri.

2-mashq (o'rta): Arabcha menyu kartasi

Oldingi darslardagi «Bahor» kartasi jismoniy xususiyatlar bilan yozilgan:

.taom-karta {
  position: relative;
  width: 16rem;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  border-left: 4px solid #2f6b3a;
}
.taom-karta.yangi::before {
  content: "Yangi!";
  position: absolute;
  top: -0.8em;
  left: 12px;
}

1. Uni mantiqiy xususiyatlarga o'tkazing.
2. Kartani dir="rtl" li arabcha nom bilan sinab ko'ring: "Yangi!" belgisi qaysi burchakka o'tadi?

Ishora: padding ning to'rt qiymatini ikki qatorga ajrating («Aralash qiymat» bo'limidagidek). top — inset-block-start.

<style>
  .taom-karta {
    position: relative;
    inline-size: 16rem;
    margin-block-start: 1.5rem;
    padding-block: 0.5rem;
    padding-inline: 1.5rem 1rem;
    border-inline-start: 4px solid #2f6b3a;
    background-color: #fffaf0;
  }
  .taom-karta.yangi::before {
    content: "Yangi!";
    position: absolute;
    inset-block-start: -0.8em;
    inset-inline-start: 12px;
    padding-inline: 6px;
    background-color: #b4461a;
    color: #fffaf0;
  }
</style>
<article class="taom-karta yangi" lang="uz">
  <h3>Ko'k choy</h3>
</article>
<article class="taom-karta yangi" lang="ar" dir="rtl">
  <h3>شاي أخضر</h3>
</article>

3-mashq (qiyin): Jadvalning tik sarlavhalari

«Bahor»ning haftalik jadvalida ustunlar ko'p va tor: dushanbadan yakshanbagacha, har katakda "" yoki "—" (taom bormi). Ustun sarlavhalari ("Dushanba", "Seshanba"...) katakdan keng bo'lib, jadvalni kengaytiryapti.

1. Kun nomlarini tik yozing — pastdan tepaga o'qilsin (kitob qirrasidagi kabi).
2. Yangi qiymat ishlamaydigan brauzerda nima bo'lishini ayting va zaxira yo'l yozing.

Ishora: «text-orientation va yangi sideways» bo'limi — sideways-lr pastdan tepaga o'qiladi. Zaxira uchun CSS nima darsidagi qoida: brauzer tushunmagan qatorni tashlab ketadi, oldingi qator qoladi.

thead th + th {
  writing-mode: vertical-rl;
  writing-mode: sideways-lr;
  text-align: start;
}

4-mashq: Portfolio qadami — mantiqiy xususiyatlarga o'tish

Portfolio o'zbekcha va chapdan o'ngga. Lekin CSS'ni bugundan mantiqiy qilsak, ertaga inglizcha versiya ham, boshqa yo'nalishdagi til ham muammosiz qo'shiladi. Oxirgi darslarda qo'shilgan jismoniy qatorlarni almashtiring:

1. Bosh sahifa rasmi (Normal oqim): float: right va margin: 0 0 1rem 1rem.
2. Skip link (position): top va left.
3. asosiy.css da boshqa left, right, top, bottom, width, height qatorlarini qidiring (VS Code: Ctrl + F). Qaysi birini almashtirish kerak, qaysi biri joyida qoladi — qaror qiling.

Ishora: «Qiymatlar ham mantiqiy» bo'limidagi float: inline-end, «Skip link va honeypot» bo'limidagi kod va «Qachon jismoniy xususiyat to'g'ri» bo'limidagi qoida.

main > img {
  float: inline-end;
  inline-size: min(45%, 15rem);
  margin-block: 0 1rem;
  margin-inline: 1rem 0;
}

.otish:focus {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: var(--qatlam-otish);
  padding: 0.5rem 1rem;
  background-color: var(--rang-asosiy);
  color: var(--rang-fon);
}

9. Real ishda

• Ko'p tilli saytlar — arab, fors, ivrit, urdu tillari: yuzlab million foydalanuvchi. Katta kompaniyalar (Google, Meta, Airbnb) interfeysini RTL uchun alohida tekshiradi. Mantiqiy xususiyatlar bitta CSS bilan ikki yo'nalishni ta'minlaydi.
• Dizayn tizimlari va kutubxonalar yangi kodni mantiqiy xususiyatlar bilan yozishga o'tmoqda. Tailwind'da ms-4, pe-2 kabi sinflar bor — "margin-start", "padding-end" (kursda alohida o'rganamiz).
• Stylelint (CSS tekshiruvchi vosita) uchun jismoniy xususiyatlarni ogohlantiradigan qoidalar bor — ularni Stylelint va Prettier darsida sozlaysiz.
• Intervyuda so'raladi: "Logical properties nima va nega kerak?", "margin-inline nima?", "RTL sayt uchun CSS'ni qanday tayyorlaysiz?", "dir va direction farqi?".

Xulosa

• Ikki o'q: inline (qator bo'ylab) va block (qatorlar teriladigan tomon); har birida start va end.
• Mantiqiy xususiyat = jismoniy nomda left/right → inline-start/end, top/bottom → block-start/end; width/height → inline-size/block-size.
• text-align: start, float: inline-end, border-start-start-radius — qiymat va burchaklar ham mantiqiy.
• Yo'nalish — HTML'da dir, CSS'da emas; yo'nalishga bog'liq bezak — :dir().
• writing-mode: vertical-rl — tik matn; o'qlar buriladi va shu elementdagi hamma mantiqiy xususiyat uning o'z o'qlari bilan o'qiladi.
• Soya, fizik harakat va rasm ichidagi joy — jismoniy; chekinish, chegara, tekislash — mantiqiy.

Keyingi dars: Flexbox'ga kirish: konteyner, elementlar va ikki o'q — elementlarni qator yoki ustunga teradigan birinchi haqiqiy layout vositasi. Bugungi "o'q" tushunchasi u yerda markaziy bo'ladi.

Manbalar

• MDN: "CSS logical properties and values", "writing-mode", "text-orientation", "direction", ":dir()" — developer.mozilla.org
• W3C: "CSS Logical Properties and Values Level 1" — w3.org/TR/css-logical-1
• W3C: "CSS Writing Modes Level 4" — w3.org/TR/css-writing-modes-4
• W3C Internationalization: "Structural markup and right-to-left text in HTML" — w3.org/International/questions/qa-html-dir
• web-features (Baseline ma'lumotlari): "logical-properties", "writing-mode", "dir-pseudo" — github.com/web-platform-dx/web-features