RTL աջակցություն
1) Սկզբունքներ
1. RTL-ը ոչ թե տեքստի թարգմանությունն է, այլ մտածողության հացահատիկը։ Փոփոխվում են առանցքները, ընթերցանության կարգը, ֆոկուսի, ժեստերի և վերացման կարգը։
2. Տրամաբանական CSS հատկությունները left/right-ի փոխարեն։ Անցեք «margin-inae-start», «inset-inment-end», «border-start-start-radius» և այլն։
3. Գլոբալորեն միացնում ենք ուղղությունը, տեղայնորեն մեկուսացնում ենք LTR բեկորները։ Թվերը, URL, ռուսական, e-mail և IBAN միշտ կարդում են ձախ-աջ։
4. Զերկալալացրեք այն, ինչ կախված է ուղղությունից, ոչ թե իմաստից։ «Play», «Black» և ժամացույցի/գործընթացի իկոնները չեն կարող հայել։
5. Փորձարկեք կեղծ-RTL-ը։ Միացրեք 'dir = "rtl" '/' contion: 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 մեկուսացումը
Թեգի ' (մաքրում է ուղղությունը), (հարկադրաբար վերագրանցում է)։
Unicod-մարկերները
& u2000E 'LRM/> u200F' RLM - կարճ ներդիրների համար մեկ բայթ գծապատկերներ։
Հաշիվների և արժույթի հետ արտահայտության օրինակ
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Ռոտացիան, հիերարխիան և մակետները
Breadcrum.ru: Կարգը հայելային է. <
Վահանակներ/ընտրացանկեր, հիմնական նաբարը աջ կողմում է։ «առաջ» ցույց է տալիս ձախ (RTL տողի սկիզբը)։
Քարտեր/ցուցակներ 'հավասարեցրեք վերնագրերը inter-start; կարգավիճակի իկոնիկները 'inault-end-ին։
Կարուսելին և սվայպերը 'ուղղությունը դեպի inault-start (RTL-ի աջ)։ Էջերի ցուցիչները նույնպես հայելային են։
Պագինացիա '«հաջորդ» սլաքը գնում է inron-start, «նախորդը»' inter-end-ում։
5) Իկոնիկները և պատկերները
Բերքալացրեք ուղղակիորեն պիկտոգրամները 'սլաքներ, «առաջ/առաջ», նախկին գլուխ, «շրջել/պտտվել»։
Մի հացահատիկ, տեքստի, գրաֆիկայի, ժամացույցի պատկերակներ (եթե կա իրական ժամանակի սլաք), բրենդների լոգոն։
Տեխնիկապես
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }SVG-ի համար օգտագործեք «transform-box: 108-big;» որպեսզի «լողալ»։
Խուսափեք պատկերների ներսում եղած տեքստերից ՝ առանձին շերտերով։
6) Ձևերն ու շահագործումը
Բովանդակության հավասարեցումը 'տեքստային դաշտերը' «07-al.ru: 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 պետք է անցնի ձախ կողմում։
Դիմակներ ՝ մի «ընդհատեք» caret կոշտ; աջակցեք ներդիրին և հատկացրեք։
Ցանկը/ռադիո/չեքբոքսը 'ստորագրությունները վերահսկողություններից աջ, կլիկի գոտիները 44-44 px։
Սլայդերներ min max: RTL-ում առնվազն աջ եզրին, առավելագույնը ձախ (կամ ցույց տվեք սանդղակը առանց հակադարձման և LTR թվերի)։
7) Թվեր, ամսաթվեր, արժույթ
Լռելյայն արաբական լոկալներում օգտագործվում են արաբերեն-ինդոցիֆրերը (NOAH)։ Լուծումը բիզնես քաղաքականությունն է
Ֆինանսական 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. Relatium Directive Corpat "), որոնք ուղղված են բաժանողներին և տեղական կրճատումները/ամիս։
8) Տպագրություն և ընթերցանություն
Տառատեսակներ լավ արաբական/հրեական գրաֆիկով և լիգատուրներով (Arabic shaping)։
Միջտարածաշրջանային թիվ 1։ 4–1. 6; խուսափեք նեղ ճաքերից։
Արաբերենի համար, ենթադրաբար, kashida-ը (հարվածների վերացումը), երբ հավասարեցվում է լայնությամբ, միացրեք զգուշորեն («07-justify: inter-word; »/շարժիչի աջակցություն)։
Արգելեք լատիներենի դասընթացը արաբական տողի ներսում (փչացնում է ուղղահայաց ռիթմը)։
9) Գրաֆիկներ, մասշտաբներ և սեղաններ
X-ի առանցքները աջ ձախ են, լեգենդը հավասարվում է inault-end-ով։
Աղյուսակների սյուները '«առաջնային» սյունակը (անունը/խաղը) - աջ; / համարները կարող են մնալ LTR-ը և հավասարվել inter-end-ով։
«+/105» նշանները և տոկոսները թվից առաջ, LTR-ի թվերը մեկուսացված են
html
<bdi dir="ltr">+12. 5%</bdi>10) A1y և scrinriders
Համոզվեք, որ "lang =" ar ""/" lang =" he "-ը ցույց է տալիս, որ TMS շարժիչը կընտրի ճիշտ ձայնը։
Ուղղության դինամիկ փոփոխությունները մանրակրկիտ բարձրաձայնում են, մի անջատեք «dir» -ը բեկորների վրա առանց կարիքների։
Live-նորարարությունները ("aria-medica =" polite ") տեքստն է առանց ուղղությունների ծիծաղելու։
Իկոնիկները չեն փոխանցում իմաստը առանց տեքստային նշանների։ օգտագործեք «aria-label»։
11) iGaming հատկությունները
11. 1 Կտրոնը (betslip)
Դաշտերի կարգը 'ռուսական գործակիցը պոտենցիալ հաղթանակ է տալիս։ ստորագրություններ, LTR-ի աջ/կոոֆներ։
Գործակիցների նորարարությունը փափուկ է. պետք չէ հայել «վեր/ներքև» (գնի ուղղության իմաստը համընդհանուր է)։
11. 2 Խաղեր/շուկաներ
Լիգայի/իրադարձությունների ցանկը հավասարեցրեք inter-start-ով (RTL-ի աջ)։
Թայմերը և հաշիվը LTR 'dir = «ltr» -ը պլաստիկ թվերով («font-variant-numeric: tabular-nums;»)։
11. 3 Վճարումներ/KUS
IBAN/BIC/հեռախոսը միշտ LTR-ն է։
Բանկային անունները/հասցեն RTL-ն է։
Սխալները/վալիդատորները ցույց են տալիս աջ։
11. 4 Մրցույթներ/առաջնորդներ
Սյունակներ ՝ դիրք, նիկ, ակնոցներ - դիրք աջ կողմում։ միավորները հավասարեցրեք inault-end (LTR թվերը)։
12) Արտադրություն և փորձարկում
Կեղծ-RTL-ը կույս է
css html. debug-rtl { direction: rtl; }RTL-ի սրբապատկերները (միայն ուղղված)
css html:dir(rtl). icon-dir { transform: scaleX(-1); }Ավտոտեստներ (գաղափարների օրինակ)
Սարքավորումներ '«dir = rtl»։
«Left/right» -ի բացակայության ստուգումը CSS-ում (լինտ)։
E2E 'տաբատի կարգը, կարուսելի կույտերը, սլայդերի վարքագիծը։
Արաբական տեքստով տեսողական թեստեր + LTR ներդիրներ (e-mail, գումարը)։
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) Սնիպետներ
Ուղղության անցումը խմբագրության մեջ (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]);
}Ցուցակների/բրեդկրոմբների ներդաշնակեցումը
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) Անտիպատերնի
Կոշտ «left/right» -ը ոճերի մեջ կոտրվում է RTL-ը։
Թվերի մուտքագրումը/IBAN/URL առանց "dir =" ltr "" կոտրված "caret և կարգը։
Լոգոն/գրաֆիկներ/ժամ։
Պատկերների նույն շարքը միշտ հայելու մեջ է 'առանց բացառության։
Կարուսելին, աղվեսները և վարագույրները չեն փոխվում։
Առանց BiDi մեկուսացման խառը տողերը կոչվում են «պարող» խորհրդանիշներ։
16) Մետրիկի
RTL coverage-ը էկրանների մասն է, որոնք անցել են RTL-ռևով։
BiDi-թերությունները/թողարկումը 'խառը տեքստի ուղիների քանակը։
Հիմնական առաջադրանքների կատարման ժամանակը (LTR vs RTL), չպետք է տարբերվի> 5-10 տոկոսը։
Մուտքագրման սխալը թվերի ձևերով 'իրադարձությունների մասնաբաժինը սխալ caret/masa-ով։
CLS/perf: Առանց «dir 'peredence» կոճակի։
17) QA-chek-թերթ
Ուղղություն և մոդեթ
- <
> RTL-locals; <: dir (rtl) "պողպատ օգտագործվում են։ - Տրամաբանական հատկությունները «left/right» -ի փոխարեն։
- Լուծարումը/bredcrabs/caruseli/pagination հայելիները ճիշտ են։
Տեքստը և BiDi i
- Թվեր/արժույթ/URL/e-mail - "dir =" ltr "կամ" bdi> "։
- Ոչ «շրջված» խորհրդանիշներ խառը կառուցվածքներում։
- Տեղայնացված են ամսաթվերը/արժույթը «Intl.»։
Ձևեր
- Ստորագրություններ աջ կողմում. Կլիկի գոտին 44-44 px է։
- Հեռախոսը/IBAN/գումարը - LTR caret, ճիշտ դիմակներ։
- Սլայդերներ/նվազագույն/մաքսիմները ակնկալում են։
Իկոնկի/Պատկեր
- Հայելիները միայն ուղղված են. բացառությունները պահպանված են։
- Նկարներում տեքստեր չկան առանց տեղական տարբերակների։
A1u/Perforans
- «lang» ցուցադրվում է; SR ճիշտ կարդում է։
- Ավելորդ գծագրեր չկան, երբ փոխվում է «dir»։
- Հակադրություն/ֆոկուս օղակները համապատասխանում են AA-ին։
18) Մոսկվա դիզայնի համակարգում
Contion & BiDi-ի բաժինը 'հացահատիկի քաղաքականությունը, սրբապատկերների բացառությունների ցանկը։
RTL-tocens և linter-ը (արգելքը 'left/right ")։
Do/Don 't' t 'carusels, bredcrabs, թվերի ձևեր, սլայդերներ, գրաֆիկներ։
Կեղծ-RTL-ի ջութակները և չեկի թերթիկները խանդավառությամբ։
Live ռեզյումե
Ճիշտ RTL աջակցությունը տրամաբանական CSS հատկություններն են, գիտակցված հացահատիկը և խիստ BiDi մեկուսացումը։ Մաքրեք թվերը/URTR-ում, հայելեք նավարկություն և ուղղորդված սրբապատկերներ, պահեք կանխատեսելի ձևեր, իսկ գրաֆիկները 'ընթերցող։ Այսպիսով, արաբական, եբրայերեն, ֆարսի կամ ուրդու համար ինտերֆեյսը բնական և արագ կլինի 'տոկոսադրույքի կտրոնից և հիբրիդային ձևերից մինչև տրամագծերի սեղաններ և 108-108։