CSS Logik Xossalari: Global Veb Dizayni Uchun Yozish Tartibi va Yo'nalishni Boshqarish

Bugungi global dunyoda veb-dizayn haqiqatan ham global auditoriyaga xizmat qilishi kerak. Bu turli tillar va madaniyatlar ma'lumotni qanday taqdim etishini tushunishni talab qiladi. An'anaviy ravishda, CSS margin-left, padding-top yoki text-align: left kabi jismoniy xossalarga tayanardi, ular sahifada kontentning jismoniy oqimiga bog'langan, odatda chapdan o'ngga va yuqoridan pastga qarab ketadi. Biroq, bu yondashuv vertikal, o'ngdan chapga o'qiladigan tillar yoki noyob matn yo'nalishlari bilan ishlashda muvaffaqiyatsizlikka uchraydi.

CSS Logik Xossalari mana shu yerda paydo bo'ladi. CSS xossalarining bu kuchli to'plami ishlab chiquvchilarga kontentning jismoniy namoyon etilishidan ko'ra, kontentning logik oqimiga asoslangan holda tartib va bo'shliqlarni belgilash imkonini beradi. Bu o'zgarish xalqaro (i18n) va foydalanuvchilar uchun ularning tilidan yoki mintaqasidan qat'i nazar tabiiy his etiladigan moslashuvchan, kuchli veb-tajribalarni yaratish uchun inqilobiy hisoblanadi.

Ushbu keng qamrovli qo'llanma bizni yozish yo'nalishi va oqimiga tegishli muhim logik xossalar: writing-mode va direction ga chuqur kirib boradi. Biz ularning moslashuvini, amaliy qo'llanilishini va sizga haqiqatan ham global veb-saytlarni yaratishda qanday kuch berishini o'rganamiz.

Asosni Tushunish: Jismoniy va Logik Xossalar

writing-mode va direction ga kirishdan oldin, jismoniy va logik CSS xossalari orasidagi asosiy farqni tushunish muhimdir.

• Jismoniy Xossalar: Bular biz eng ko'p tanish bo'lgan xossalardir. Ular ko'rish qismidagi aniq yo'nalishlarga ishora qiladi, masalan margin-top, margin-right, padding-bottom, border-left, text-align. Agar siz margin-left: 10px ni belgilasangiz, bu chekka har doim elementning chap tomonida bo'ladi, matnning o'qish yo'nalishidan qat'i nazar.
• Logik Xossalar: Ushbu xossalar kontentning ichki oqimiga mos keladi. Ular yozish tartibi va yo'nalish orqali belgilanadi. Masalan, margin-left o'rniga bizda margin-inline-start mavjud. Ushbu xossa inline o'qining boshlanishiga chekka qo'llaniladi, bu chapdan o'ngga o'qiydigan tilda chap tomonda, yoki o'ngdan chapga o'qiydigan tilda o'ng tomonda bo'lishi mumkin. Xuddi shunga o'xshash, margin-block-start blok o'qining boshlanishiga ishora qiladi.

Logik xossalar hujjatning belgilangan yozish tartibi va yo'nalishiga asoslanib avtomatik ravishda moslashish uchun mo'ljallangan, bu ularni moslashuvchan va inklyuziv dizaynlarni yaratish uchun ajralmas qismga aylantiradi.

CSSda `writing-mode`ning Roli

writing-mode xossasi kontent oqimi haqida gap ketganda, ehtimol eng ta'sirli hisoblanadi. U matn bloklarini sahifada qanday joylashtirilishini va ushbu bloklar ichidagi qatorlar qanday yig'ilishini belgilaydi.

writing-mode uchun asosiy qiymatlar quyidagilardir:

• horizontal-tb (standart): Matn chapdan o'ngga (ingliz, ispan, fransuz kabi) yoki o'ngdan chapga (arab, ibroniy kabi) gorizontal ravishda oqadi va bloklar yuqoridan pastga yig'iladi. Bu ko'plab G'arb tillari uchun eng keng tarqalgan yozish tartibidir.
• vertical-rl: Matn yuqoridan pastga vertikal ravishda oqadi va ustunlar o'ngdan chapga joylashtiriladi. Bu an'anaviy Sharqiy Osiyo tipografiyasida, masalan, yapon va xitoy tillarining ba'zi shakllarida keng tarqalgan.
• vertical-lr: Matn yuqoridan pastga vertikal ravishda oqadi va ustunlar chapdan o'ngga joylashtiriladi. Bu kamroq tarqalgan, ammo ba'zi ozchilik tillarida va maxsus uslubiy kontekstlarda ishlatiladi.

Keling, ularni misollar bilan ko'rib chiqaylik:

writing-mode: horizontal-tb

Bu ko'pgina lotin tiliga asoslangan tillar va boshqalar uchun standartdir. Kontent chapdan o'ngga oqadi va yangi qatorlar yuqoridan pastga qarab yig'ilgan yangi qatorlarni yaratadi.

Misol:

            
.container {
  writing-mode: horizontal-tb;
  /* Boshqa CSS xossalari */
}

            

              
                Copy
              
            
          

Ushbu rejimda margin-inline-start margin-left ga, margin-block-start esa margin-top ga mos keladi.

writing-mode: vertical-rl

Bu yerda ishlar vizual jihatdan farqlanadi. Matn qatorlari yuqoridan pastga qarab o'qiladi va keyingi qatorlar oldingi qatorning chap tomoniga joylashtiriladi. Bu ko'pincha belgilarning qanday aylanishi o'zgarishini o'z ichiga oladi.

Misol:

            
.traditional-asian {
  writing-mode: vertical-rl;
}

            

              
                Copy
              
            
          

writing-mode vertical-rl bo'lganda:

• Inline o'q vertikal (yuqoridan pastga).
• Blok o'qi gorizontal (o'ngdan chapga).
• margin-inline-start endi matn oqimining yuqorisidagi chekka ishora qiladi.
• margin-block-start endi matn oqimining o'ng tomonidagi chekka ishora qiladi (blok yo'nalishining boshlanishi).

Bu margin-inline-start va margin-block-start kabi logik xossalarning qanday ishlashiga bevosita ta'sir qiladi.

writing-mode: vertical-lr

Ushbu rejimda ham vertikal matn oqimi mavjud, lekin ustunlar chapdan o'ngga qarab joylashtiriladi.

Misol:

            
.alternative-vertical {
  writing-mode: vertical-lr;
}

            

              
                Copy
              
            
          

writing-mode: vertical-lr rejimida:

• Inline o'q vertikal (yuqoridan pastga).
• Blok o'qi gorizontal (chapdan o'ngga).
• margin-inline-start matn oqimining yuqorisidagi chekka ishora qiladi.
• margin-block-start blok oqimining chap tomonidagi chekka ishora qiladi.

`direction`ning Ta'siri

writing-mode blok ichidagi matnning yo'nalishini (gorizontal yoki vertikal) va bloklarning joylashishini belgilasa, direction xossasi aynan blok ichidagi inline oqimning yo'nalishini boshqaradi. Bu eng ko'p o'ngdan chapga (RTL) yoki chapdan o'ngga (LTR) o'qiydigan tillarda ko'riladi.

direction uchun asosiy qiymatlar quyidagilardir:

• ltr (standart): Chapdan o'ngga. Matn chapdan o'ngga qarab oqadi.
• rtl: O'ngdan chapga. Matn o'ngdan chapga qarab oqadi.

direction writing-mode horizontal-tb bo'lganda muhimdir, chunki u matn chapdan o'ngga yoki o'ngdan chapga oqishini aniqlaydi.

RTL tillari uchun misol:

            
.arabic-text {
  direction: rtl;
  writing-mode: horizontal-tb;
}

            

              
                Copy
              
            
          

direction: rtl qo'llanilganda:

• Inline oqimi o'ngdan chapga qarab oqadi.
• margin-inline-start endi elementning o'ng tomonidagi chekani ishora qiladi.
• margin-inline-end endi elementning chap tomonidagi chekani ishora qiladi.
• padding-inline-start va padding-inline-end ham mos ravishda moslashadi.
• text-align qiymatlari, masalan start va end ham o'zgaradi. text-align: start RTL kontekstida matnni o'ng tomonga tekislaydi.

Moslashuvning Qizig'i: Logik Xossalar Qanday Ishlaydi

Logik xossalarning haqiqiy kuchi ularning mavjud writing-mode va direction ga moslashish qobiliyatida. Keling, keng tarqalgan moslashuvlarni ko'rib chiqamiz:

Blok O'qi Xossalari

Ushbu xossalar hujjat ichidagi bloklar yoki qatorlar oqimiga tegishli.

• margin-block-start: Blok oqimining boshlanishidagi chekaga mos keladi.
• margin-block-end: Blok oqimining oxiridagi chekaga mos keladi.
• padding-block-start: Blok oqimining boshlanishidagi pachkaga mos keladi.
• padding-block-end: Blok oqimining oxiridagi pachkaga mos keladi.
• border-block-start: Blok oqimining boshlanishidagi chegaraga mos keladi.
• border-block-end: Blok oqimining oxiridagi chegaraga mos keladi.
• inset-block-start: Blok oqimining boshlanishidagi chekka (joylashtirish uchun) mos keladi.
• inset-block-end: Blok oqimining oxiridagi chekka (joylashtirish uchun) mos keladi.

Blok O'qi uchun Moslashuv Jadvali:

Inline O'qi Xossalari

Ushbu xossalar hujjat ichidagi matnning oqimi yoki elementning inline yo'nalishi bo'yicha joylashishiga tegishli.

• margin-inline-start: Inline oqimining boshlanishidagi chekaga mos keladi.
• margin-inline-end: Inline oqimining oxiridagi chekaga mos keladi.
• padding-inline-start: Inline oqimining boshlanishidagi pachkaga mos keladi.
• padding-inline-end: Inline oqimining oxiridagi pachkaga mos keladi.
• border-inline-start: Inline oqimining boshlanishidagi chegaraga mos keladi.
• border-inline-end: Inline oqimining oxiridagi chegaraga mos keladi.
• inset-inline-start: Inline oqimining boshlanishidagi chekka (joylashtirish uchun) mos keladi.
• inset-inline-end: Inline oqimining oxiridagi chekka (joylashtirish uchun) mos keladi.

Inline O'qi uchun Moslashuv Jadvali:

Vertikal yozish rejimlarida inline xossalari yuqori va pastki qismga, blok xossalari esa chap va o'ng qismlarga mos kelishini unutmang.

Amaliy Qo'llanishlar va Misollar

Keling, ushbu xossalar amaliy dizayn stsenariylariga qanday tarjima qilinishini ko'rib chiqaylik. Biz CSS o'zgaruvchilaridan (maxsus xossalardan) qiymatlarimizni boshqarish uchun foydalanamiz, bu xalqaro uslublar uchun keng tarqalgan va samarali uslubdir.

1-Misol: Global Qulay Navigatsiya Paneli

Ingliz (LTR) va Arab (RTL) tartiblarida, va hatto vertikal tartibda ham uzluksiz ishlashi kerak bo'lgan navigatsiya menyusini ko'rib chiqing.

A Ssenariy: Asosiy LTR Navigatsiyasi

            
<nav>
  <ul>
    <li><a href="#">Bosh sahifa</a></li>
    <li><a href="#">Biz haqimizda</a></li>
    <li><a href="#">Aloqa</a></li>
  </ul>
</nav>

            

              
                Copy
              
            
          

            
:root {
  --nav-link-margin-inline-start: 0;
  --nav-link-margin-inline-end: 15px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  /* Flexbox ishlatilsa, maxsus yo'nalishga bog'liq uslublar kerak emas */
}

nav a {
  text-decoration: none;
  color: #333;
  padding-inline: 10px; /* Logik pachka */
  margin-inline-start: var(--nav-link-margin-inline-start);
  margin-inline-end: var(--nav-link-margin-inline-end);
}

/* RTL tillari uchun */
.rtl nav a {
  margin-inline-start: var(--nav-link-margin-inline-end);
  margin-inline-end: var(--nav-link-margin-inline-start);
}

            

              
                Copy
              
            
          

Bu yerda biz margin-inline-start va margin-inline-end yordamida chekalarni belgilaymiz. Oddiy LTR navigatsiyasi uchun biz margin-inline-start ni 0 va margin-inline-end ni 15px ga o'rnatdik. RTL tartibi uchun (.rtl kabi sinf yordamida) biz bu qiymatlarni almashtiramiz.

B Ssenariy: Vertikal Tartib Uchun Moslashuv

Agar biz ushbu navigatsiyani vertikal ko'rinishda, masalan, yon paneldagi kabi ko'rsatmoqchi bo'lsak, biz writing-mode ni o'zgartirib, logik xossalarni moslashtirishimiz mumkin.

            
.vertical-nav nav ul {
  flex-direction: column; /* Elementlarni vertikal joylashtirish */
  writing-mode: vertical-rl; /* Yoki vertical-lr */
}

.vertical-nav nav a {
  /* Vertikal oqim uchun logik chekalarni moslashtirish */
  padding-block: 10px; /* Vertikal holatda yuqori/pastki uchun logik pachka */
  margin-block-start: var(--nav-link-margin-inline-start); /* margin-top ga mos keladi */
  margin-block-end: var(--nav-link-margin-inline-end);   /* margin-bottom ga mos keladi */
  margin-inline-start: 5px; /* vertical-rl uchun o'ng tomonga chekka */
  margin-inline-end: 0;
}

/* vertical-rl uchun, biz inline chekalarni almashtirishimiz kerak */
.vertical-nav.rtl nav a {
  margin-inline-start: 0;
  margin-inline-end: 5px;
}

            

              
                Copy
              
            
          

Ushbu misol logik xossalar qanday qilib moslashuvni soddalashtirishini ko'rsatadi. Har bir stsenariy uchun barcha margin-top, margin-bottom, margin-left va margin-right kodlarini qayta yozish o'rniga, biz logik hamkasblarni boshqaramiz va brauzerga yozish tartibiga asoslangan holda moslashuvni bajarishga imkon beramiz.

2-Misol: Turli Yozish Tartiblarida Elementlarni Uslublash

Keling, chegara va pachka bilan sodda qutini uslublashni ko'rib chiqaylik, u turli yo'nalishlarda bir xil ishlaydi.

            
.content-box {
  /* Standart LTR Gorizontal */
  writing-mode: horizontal-tb;
  direction: ltr;

  /* Bir xil bo'shliq uchun logik xossalar */
  padding: 20px;
  margin: 10px;
  border: 2px solid black;

  /* Maxsus ravishda logik xossalardan foydalanish */
  padding-inline: 30px;
  padding-block: 15px;
  margin-inline-start: 25px;
  margin-block-start: 5px;
}

.content-box.rtl {
  direction: rtl;
}

.content-box.vertical {
  writing-mode: vertical-rl;
  /* Vertikal oqim uchun moslashuvlar */
  padding-inline: 15px;
  padding-block: 30px;
  margin-inline-start: 5px;
  margin-block-start: 25px;
}

/* vertical-rl uchun, inline yuqori/pastki, blok esa chap/o'ng degan ma'noni anglatadi */
.content-box.vertical.rtl {
  /* Agar siz vertical-rl ichidagi inline yo'nalishni almashtirishga muhtoj bo'lsangiz, bu kamdan-kam uchraydi */
  /* Masalan, ba'zi yapon skriptlarida belgilar har xil aylantirilishi mumkin */
  /* Bu qism juda kontekstga bog'liq va ko'pincha text-orientation ni o'z ichiga oladi */
}

            

              
                Copy
              
            
          

Ushbu misolda:

• .content-box uchun padding va margin logik ravishda belgilangan. padding-inline LTR da chap/o'ng qismlarga, padding-block esa yuqori/pastki qismlarga qo'llaniladi.
• .rtl qo'shilganda, padding-inline endi o'ng/chap qismlarga qo'llaniladi.
• .vertical writing-mode: vertical-rl bilan qo'shilganda, padding-inline yuqori/pastki qismlarga, padding-block esa chap/o'ng qismlarga qo'llaniladi.

Qo'shimcha Tegishli Xossalar

writing-mode va direction markaziy bo'lsa-da, boshqa xossalar matn tartibi va yo'nalishi ustidan nazoratni yaxshilaydi:

• text-orientation: Ushbu xossa qator ichidagi belgilarning yo'nalishini belgilaydi. U asosan vertikal yozish rejimlarida ishlatiladi. Umumiy qiymatlar quyidagilarni o'z ichiga oladi:
• mixed: Belgilar o'z skriptining standartiga qarab yo'naltiriladi. Yaponcha uchun Kanji vertikal, Kana vertikal, va lotin belgilari 90 gradusga soat yo'nalishi bo'yicha (sideways) yoki aylantirilmagan (upright) bo'lishi mumkin.
• sideways: Belgilar 90 gradusga soat yo'nalishi bo'yicha aylantiriladi.
• upright: Belgilar aylantirilmaydi, ya'ni ular gorizontal yozish rejimida bo'lgandek ko'rinadi, lekin vertikal qator ichida. Bu ideografik skriptlar uchun kamroq tarqalgan, ammo ba'zi kontekstlarda lotin belgilari uchun ishlatilishi mumkin.
• text-align: Logik xossalar bilan ishlatilganda, text-align: start matnni inline o'qining boshlanishiga, text-align: end esa matnni oxiriga tekislaydi. Bu RTL tillari va vertikal yozish rejimlarida juda muhim.
• white-space: Yo'nalish bilan bevosita bog'liq bo'lmasa-da, u matnning qanday o'ralishi va bo'sh joy qoldirilishini ta'sir qiladi, bu vertikal yozish rejimlarida qator o'rash boshqacha ishlaydigan paytda ayniqsa muhimdir.

text-align`ni Moslashtirish