რა არის CSS ლოგიკური თვისებები და რატომ მნიშვნელოვანია ისინი ინტერნაციონალიზაციისთვის?

Question

Accepted Answer

**ლოგიკური თვისებები** აღწერს განლაგებას კონტენტის **ნაკადის მიმართულებით** (დასაწყისი/დასასრული, ხაზოვანი/ბლოკი) ფიზიკური მიმართულებების ნაცვლად (მარცხნივ/მარჯვნივ/ზევით/ქვევით). ეს კერძო სტილების ერთი ფურცელი ავტომატურად ადაპტირდება მარჯვნიდან მარცხნივ დაწერილი ენებისთვის (არაბული, ებრაული) ან ზემოდან ქვემოთ დაწერილი ენებისთვის. ## ფიზიკური vs ლოგიკური ```css /* ❌ physical — hard-codes "left", breaks in RTL languages */ .card { margin-left: 1rem; padding-right: 2rem; text-align: left; border-left: 2px solid; } /* ✅ logical — follows the writing direction */ .card { margin-inline-start: 1rem; /* "start" = left in LTR, RIGHT in RTL */ padding-inline-end: 2rem; text-align: start; border-inline-start: 2px solid; } ``` ## ორი ღერძი - **ხაზოვანი** — მიმართულება, რომელშიც ტექსტი მიედინება (ჰორიზონტალური ინგლისურში; "კითხვის" ღერძი). - **ბლოკი** — მიმართულება, რომელშიც ხაზები დაწყობილია (ვერტიკალური ინგლისურში; "პარაგრაფის" ღერძი). ```css margin-inline: 1rem; /* left + right in LTR (both inline sides) */ margin-block: 2rem; /* top + bottom */ margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */ padding-block-end: 1rem; /* bottom in horizontal writing */ inset-inline-start: 0; /* logical version of left/right for positioning */ ``` ## რატომ მნიშვნელოვანია ეს i18n-ისთვის ფიზიკური თვისებებით, არაბულის მხარდაჭერა ნიშნავს სრულ მეორე სიმრავლეს შებრუნებული სტილების დაწერას (`margin-left` → `margin-right` და ა.შ.) `[dir="rtl"]`-ის უკან. ლოგიკური თვისებებით, **იგივე CSS უბრალოდ მუშაობს** — დააყენეთ `dir="rtl"` html-ზე და `margin-inline-start` ავტომატურად გადატრიალდება მარჯვნივ: ```html ``` ## RTL-ის ფარგლებს გარეთ ლოგიკური თვისებები ასევე ხელმისაწვდომია ვერტიკალური ტექსტის რეჟიმებისთვის (მაგ. აღმოსავლეთ აზიის ზოგიერთი ტიპოგრაფია) და აკეთებს `margin-inline: auto`-ს깔끔한 გზას ცენტრირებისთვის მიმართულების მიუხედავად. ## რატომ მნიშვნელოვანია ნებისმიერი პროდუქტისთვის, რომელიც იყიდება მრავალ ენაზე, ლოგიკური თვისებები елиминირებს შებრუნებული RTL სტილების ფურცლების შენახვის აუცილებლობას — ერთი ნაკრები წესები ადაპტირდება დაწერის მიმართულებას. თუნდაც მხოლოდ LTR სამცხეებში, ისინი უფრო სუფთა გონებრივი მოდელი (დასაწყისი/დასასრული, ხაზოვანი/ბლოკი), და ისინი სულ უფრო მეტი რეკომენდირებული სტანდარტია თანამედროვე CSS-ში.