RTL მხარდაჭერა

1) პრინციპები

1. RTL არ არის ტექსტის თარგმნა, არამედ აზროვნების მარცვალი. ღერძი, კითხვის წესი, ფოკუსის რიგი, ჟესტები და ნავიგაცია იცვლება.
2. ლოგიკური CSS თვისებები left/right- ის ნაცვლად. გადადით 'margin-inline-start', 'inset-inline-end', 'border-start-radius' და ა.შ.
3. გლობალურად, ჩვენ მოიცავს მიმართულებას, რომელიც ადგილობრივად იზოლირებულია LTR ფრაგმენტებით. რიცხვები, URL, კოდები, ელექტრონული ფოსტა და IBAN ყოველთვის იკითხება მარცხნიდან მარჯვნივ.
4. იმოგზაურეთ ის, რაც დამოკიდებულია მიმართულებაზე და არა მნიშვნელობაზე. „პლეი“, „პლეი“, „პლეი“ და საათების/პროცესის ხატები შეიძლება არ იყოს სარკე.
5. შეამოწმეთ ფსევდო-RTL. ჩართეთ 'dir = „rtl „'/' direction: rtl 'და ფსევდო გადაცემები გამოსვლამდე.

2) მიმართულება: 'dir' და ლოგიკური თვისებები

გლობალურად დოკუმენტზე/ფესვზე:

html
<html lang="ar" dir="rtl"> … </html>

ლოგიკური თვისებები (ჩანაცვლება left/right):

css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }

სელექტორები მიმართულებით:

css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }

მომხმარებლის შინაარსის ადგილობრივი ორიენტაცია:

html
<p dir="auto">…</p>

3) BiDi და შერეული ტექსტის იზოლაცია

არაბული/ებრაული ლათინური/რიცხვების ნაზავი არღვევს სიმბოლოების წესრიგს. გამოიყენეთ BiDi იზოლაცია:

ჭდეები: '' (მიმართულების იზოლირება), ' '(იძულებით განსაზღვრავს).

უნიკოდის მარკერები:

'u2066' LRI/'\u2067 'RLI - LTR/RTL იზოლაციის დასაწყისი, '\u2069' PDI - დასასრული,
'\u200E 'LRM/'\u200F' RLM - ერთჯერადი მარკერები მოკლე ჩანართებისთვის.

ფრაზის მაგალითი ანგარიშის ნომრით და ვალუტით:

html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>

4) ნავიგაცია, იერარქია და განლაგება

Breadcrumbs: სარკის შეკვეთა: „Breadcrumbs“.
პანელები/მენიუ: მთავარი ნავსადგური - მარჯვნივ; „უკან“ მიუთითებს მარცხნივ (RTL ხაზის დასაწყისში).
ბარათები/სიები: გაათანაბრეთ სათაურები inline start- ზე; სტატუსის ხატები - inline-end.
კარუსელი და სვიპები: გადახტომა inline start- ზე (RTL- ში - მარჯვნივ). გვერდების ინდიკატორები ასევე სარკეა.
პაგინაცია: ისარი „შემდეგი“ მიდის inline-start, „წინა“ - inline-end- ზე.

5) ხატები და სურათები

მიზნობრივი პიქტოგრამების მარცვლეული: ისრები, „წინ/უკან“, პლეი-თავი, „განლაგება/შემცირება“.
ნუ მიგრირებთ: ტექსტის ხატები, გრაფიკები, საათები (თუ არსებობს ნამდვილი დროის ისარი), ბრენდების ლოგოები.

ტექნიკურად:

css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }

SVG- სთვის: გამოიყენეთ 'ტრანსფორმირების ყუთი: view-ყუთი;' ისე რომ არ „ბანაობა“.
თავიდან აიცილეთ ტექსტები სურათების შიგნით და ცალკეულ ფენებში ლოკალიზაცია მოახდინეთ.

6) ფორმები და შეყვანა

შინაარსის განლაგება: ტექსტური ველები 'ტექსტური ალიგის მიხედვით: start;', რიცხვითი/თანხები/URL/e-mail - LTR.

ატრიბუტები:

html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">

Placeholder/label ლოკალიზებულია, მაგრამ caret რიცხვებში/კოდებში უნდა წავიდეს მარცხნიდან მარჯვნივ.
ნიღბები: ნუ „დააკვირდებით“ კარეტს მკაცრად; შეინარჩუნეთ ჩანართი და მონიშნეთ.
სია/რადიო/ჩეკბოქსი: ხელმოწერები მაკონტროლებლების მარჯვნივ, დაწკაპუნების ზონები - 44 × 44 px.
min-max სლაიდერები: RTL- ში, მინიმალური მარჯვენა კიდეზე, მაქსიმუმი მარცხნივ (ან აჩვენეთ მასშტაბი ინვერსიის გარეშე და LTR ნომრები).

7) რიცხვები, თარიღები, ვალუტა

სტანდარტულად, არაბულ ლოკალებში გამოიყენება არაბულ-ინდოსიფორები (). გადაწყვეტილება ბიზნეს პოლიტიკაა:

ფინანსურ UI- ში, ლათინური ციფრები (0-9) უფრო ხშირად გვიჩვენებს ინტეროპერაციისთვის, მაგრამ ფორმატი (ხარვეზები/ნიშნები) - იდაყვის მიხედვით.

გამოიყენეთ 'Intl.' სამიზნე ადგილით:

js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());

შედარებით დრო ('Intl. RelativeTimeFormat '), რომელიც მიმართულია გამყოფი და ადგილობრივი დღის/თვის შემცირება.

8) სტამბა და კითხვა

შრიფტები კარგი არაბული/ებრაული გრაფემით და ლიგატებით.
ხაზოვანი ინტერვალი 1. 4–1. 6; მოერიდეთ ვიწრო ტრეკებს.
არაბულისთვის დასაშვებია kashida (შტრიხების გახანგრძლივება) სიგანეზე გასწორებისას - ფრთხილად ჩართეთ ('text-justify: inter-word; '/ძრავის მხარდაჭერა).
აკრძალეთ ლათინური ანბანი არაბული ხაზის შიგნით (გააფუჭეთ ვერტიკალური რიტმი).

9) გრაფიკა, მასშტაბები და ცხრილი

ღერძი X მიდის მარჯვნივ მარცხნივ; ლეგენდა ტოლია inline-end- ით.
ცხრილის სვეტები: „პირველადი“ სვეტი (სახელი/თამაში) - მარჯვნივ; ნომრები/თანხები შეიძლება დარჩეს LTR და გაათანაბროს inline end.

ნიშნები „+/-“ და პროცენტი - რიცხვამდე, LTR ნომრები იზოლირებულია:

html
<bdi dir="ltr">+12. 5%</bdi>

10) A11y და ეკრანები

დარწმუნდით, რომ 'lang = "ar" '/' lang = "he" "გამოიფინა: TTS ძრავა შეარჩევს სწორ ხმას.
მიმართულების დინამიური ცვლილებები ფრთხილად გამოთქვით - ფრაგმენტებზე არ გადართოთ „დირი“ საჭიროების გარეშე.
მსუბუქი განახლებები ('aria-live = „polite“') - ტექსტი მიმართულებების შერევის გარეშე.
ხატები არ გადმოსცემენ მნიშვნელობას ტექსტური ეტიკეტების გარეშე; გამოიყენეთ 'aria-label'.

11) iGaming სპეციფიკა

11. 1 კუპონი (betslip)

ველების შეკვეთა: ოდენობა - კოეფიციენტი - პოტენციური მოგება; ხელმოწერები მარჯვნივ, LTR ნომრები/კოეფიციენტები.
კოეფიციენტების განახლებები რბილად განათავსეთ; „ზემოთ/ქვევით“ ისრები არ არის საჭირო სარკე (ფასის მიმართულების მნიშვნელობა უნივერსალურია).

11. 2 მატჩები/ბაზრები

გაათანაბრეთ ლიგის/მოვლენების სია inline start- ით (RTL- ში - მარჯვნივ).
ტაიმერები და ქულა - LTR 'dir = "ltr" "ფირფიტის ნომრებით (' font-variant-numeric: tabular-nums; ').

11. 3 გადახდა/კუს

IBAN/BIC/ტელეფონის ველები ყოველთვის LTR.
საბანკო სახელები/მისამართი - RTL.
შეცდომები/შემსრულებლები აჩვენებს მარკერებს მარჯვნივ.

11. 4 ტურნირები/ლიდერები

სვეტები: პოზიცია, მეტსახელი, სათვალეები - პოზიცია მარჯვნივ; გაათანაბრეთ ქულები inline-end (LTR ნომრები).

12) წარმოება და ტესტირება

ფსევდო-RTL ქალწულში:

css html. debug-rtl { direction: rtl; }

ხატის ავტოზერკალი RTL- ში (მხოლოდ მიმართულია):

css html:dir(rtl). icon-dir { transform: scaleX(-1); }

Autostests (იდეების მაგალითი):

განლაგების დარტყმები 'dir = rtl'.
CSS (ლინტების) არარსებობის შემოწმება.
E2E: ტაბულაციის ბრძანება, კარუსელის სვიპები, სლაიდერების ქცევა.
ვიზუალური ტესტები არაბული ტექსტით + LTR ჩანართებით (ელექტრონული ფოსტა, თანხა).

13) დიზაინის სისტემის ნიშნები (მაგალითი)

json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}

14) Snippets

მიმართულების შეცვლა პროგრამაში (React):

tsx import { useEffect } from "react";

export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}

სიების/bredcrambs ჰარმონიზაცია:

css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }

რიცხვები და თანხები, როგორიცაა LTR ფრაგმენტები:

html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>

Slaider min - max RTL- სთვის:

css html:dir(rtl) input[type="range"] { direction: rtl; }

15) ანტიპატერები

RTL იშლება მკაცრი 'მარცხენა/მარჯვნივ "სტილში.
რიცხვების/IBAN/URL- ის შეყვანა 'dir = „ltr“' - ს გარეშე „გატეხილი“ კარეტი და წესრიგი.
ლოგოების/გრაფიკების/საათების მარცვალი.
იგივე ხატების ერთნაირი ნაკრები ყოველთვის სარკეა - მნიშვნელობის გამონაკლისის გარეშე.
კარუსელი, ფოთლები და პაგინაციები არ არის გადატრიალებული.
შერეული ხაზები BiDi- ს იზოლაციის გარეშე არის „ცეკვის“ სიმბოლოები.

16) მეტრიკი

RTL coverage: RTL- ის ეკრანების წილი.
BiDi დეფექტები/გამოშვება: შერეული ტექსტის შეცდომების რაოდენობა.
ძირითადი დავალებების შესრულების დრო (LTR vs RTL): არ უნდა განსხვავდებოდეს> 5-10%.
რიცხვების ფორმებში შეყვანის შეცდომა: არასწორი კარეტის/ნიღბის მქონე მოვლენების წილი.
CLS/perf: 'dir' -ში განლაგების გარეშე.

17) QA ჩეკის სია

მიმართულება და განლაგება

'' RTL ლოკალებისთვის; ': dir (rtl)' სტილები გამოიყენება.
ლოგიკური თვისებები „მარცხენა/გზის“ ნაცვლად.
ნავიგაცია/სისულელეები/კარუსელები/სარკეების პაგინაცია სწორად ხდება.

ტექსტი და BiDi

რიცხვები/ვალუტები/URL/e-mail - 'dir = „ltr“ „ან' “.
შერეულ სტრიქონებში არ არსებობს „ინვერსიული“ სიმბოლოები.
თარიღები/ვალუტები ლოკალიზებულია 'Intl.'

ფორმები

ხელმოწერები მარჯვნივ; დაწკაპუნების ზონები - 44 × 44 px.
ტელეფონი/IBAN/თანხა - LTR Caret, სწორი ნიღბები.
სლაიდერები/მინიმუმები/მაქსიმუმები, სავარაუდოდ, იქცევიან.

იკონები/სურათები

სარკეები მხოლოდ მიმართულია; გამონაკლისები დაცულია.

სურათებში ტექსტი არ არის ადგილობრივი ვერსიების გარეშე.

A11u/Performance

'lang' გამოიფინა; SR სწორად კითხულობს.
'dir- ის შეცვლისას ზედმეტი გადაკეთება არ არის.
კონტრასტი/ფოკუს რგოლები შეესაბამება AA- ს.

18) დოკუმენტაცია დიზაინის სისტემაში

Direction & BiDi განყოფილება: მარცვლეულის პოლიტიკა, გამონაკლისების სია ხატებისთვის.
RTL ნიშნების ნაკრები და სტილის ლინტერი (აკრძალვა „მარცხენა/მარჯვნივ“).
გალერეა Do/Don 't: carusels, bredcrambs, რიცხვების ფორმები, slyders, გრაფიკა.
ფსევდო-RTL სკრიპტები და ჩეკის ფურცლები შურისძიებით.

მოკლე რეზიუმე

რეგულარული RTL მხარდაჭერა არის ლოგიკური CSS თვისებები, ცნობიერი მარცვლეული და მკაცრი BiDi იზოლაცია. იზოლირებული ნომრები/URL LTR- ში, ნავიგაციის სარკე და მიმართული ხატები, შეინარჩუნეთ ფორმები პროგნოზირებადი, ხოლო გრაფიკები კითხვის ნიშანია. ასე რომ, ინტერფეისი არაბული, ებრაული, სპარსული ან ურდოს იქნება ბუნებრივი და სწრაფი - განაკვეთის კუპონიდან და გადახდის ფორმებიდან დაწყებული ტურნირებისა და ცოცხალი მატჩების ცხრილებამდე.

RTL მხარდაჭერა

ტექსტი და BiDi

ფორმები

იკონები/სურათები

A11u/Performance

მოკლე რეზიუმე

დაგვიკავშირდით

სწრაფი კავშირი

ვიდეო მალე განახლდება

ჩვენ ახლა ძალიან დაკავებული ვართ პროექტებით