2026-06-03 · Redakcija Baduno · 6 blog.readMin · Blogs & Zināšanas
RTL dizains: Kas mainās, kad lasīšanas virziens apgriežas
Arābu un ivrits lasās no labās uz kreiso pusi – un tādējādi apgriež klusējošus dizaina pieņēmumus. Praktisks ziņojums no mūsu dizaina sistēmas.
Vairāk nekā atspoguļots
Naivā pieeja – 'vienkārši visu atspoguļot' – ātri vien cieš neveiksmi: skaitļi un latīņu zīmolu nosaukumi paliek no kreisās uz labo pusi, multivides atskaņotāju simboli saglabā savu virzienu, tālruņu numuri lūzt. RTL dizains nozīmē katram elementam izlemt, vai tas ir loģisks (seko lasīšanas virzienam) vai fizisks (fiksēts virziens).
CSS: loģiskās īpašības
Mūsdienu CSS loģika padara RTL pārvaldāmu: margin-inline-start margin-left vietā, inset-inline-end right vietā, text-align:start left vietā. Tie, kas no sākuma raksta loģiski, iegūst otro lasīšanas virzienu gandrīz bez maksas – tie, kas pielāgo, cīnās ar simtiem izņēmumu. Šī vietne konsekventi izmanto loģiskos rekvizītus; katra RTL versija tiek izveidota no tās pašas stila lapas kā vācu valodas versija.
Tipogrāfija un blīvums
Arābu rakstā nav lielo burtu, ir citādi augšējie/apakšējie garumi, un ar vienādu fonta izmēru tas izskatās mazāks un blīvāks. Laba RTL tipogrāfija prasa atsevišķus, specializētus fontus, bieži par vienu līdz diviem punktiem lielāku izmēru un lielāku rindu augstumu. Arī burtu atstarpju efekti, kas populāri latīņu valodā, nedarbojas ar savienoto rakstību.
Testēšana ar dzimtās valodas runātājiem
Nekāda automatizācija neaizstāj cilvēka skatienu, kurš dzīvo šajā rakstībā: rindu pārtraukumi salikteņos, skaitļi pamattekstā, jaukti virzieni veidlapās – kļūdu veidi ir smalki. Tāpēc mūsu pārbaudes process vienmēr ietver vizuālu RTL pārskatu, ne tikai teksta labojumus.
Navigācija: Kur loģika sagāžas
RTL vidē navigācijas struktūras ir jāpārdomā. Horizontālā izvēlņu josla sākas labajā pusē, pirmais izvēlnes punkts ir vistālāk kreisais – secība paliek loģiska no labās uz kreiso. Nolaižamās izvēlnes pēc noklusējuma atveras pa kreisi uz leju, nevis pa labi uz leju, jo enkurpunkts atrodas labajā pusē. Sānjoslas, kas LTR izkārtojumā atrodas kreisajā pusē, RTL gadījumā pārvietojas pa labi. Īpaša uzmanība jāpievērš hamburgera izvēlnēm: pati ikona (trīs horizontālas līnijas) ir virziena neitrāla, bet tās novietojums (augšējā kreisā vs. augšējā labā) ir jāmaina. Bieža kļūda ir apakšizvēlnes, kas joprojām rāda LTR virzienu, jo tās netiek kontrolētas ar loģiskiem CSS rekvizītiem. Mūsu dizaina sistēmā navigācijas komponentes tiek definētas pilnībā ar inset-inline-start/end, lai tās automātiski pārslēgtos starp LTR un RTL. Praktisks piemērs: RTL režīmā maizes drupatas navigācija rāda pašreizējo lapu kreisajā pusē un sākumlapu labajā pusē – atdalīšanas bultiņām arī jāmaina virziens. Mēs šeit izmantojam CSS-content ar iegultām bultiņām, kas atkarībā no dir vērtības izmanto citu simbolu.
Jaukti virzieni: cipari un simboli
Cipari, tālruņu numuri, e-pasta adreses un latīņu alfabēta zīmoli saglabā savu LTR orientāciju, pat ja apkārtējais teksts ir RTL. Tas rada tā saucamos divvirzienu posmus, kur lasīšanas virziens mainās teikuma vidū. Pēc noklusējuma Unicode divvirzienu algoritms (Bidi) apstrādā šādus jauktus tekstus, taču jums jānodrošina, ka virziena pārslēgšana ir pareiza. Izmantojiet dir atribūtu uz jauktā elementa līmeņa vai izmantojiet rakstzīmes, piemēram, LRM (kreisais-labi marķieris) un RLM (labais-kreisais marķieris). Piemērs: ebreju teikumā „Telefon: 01234 56789“ ciparu secība jālasa no kreisās uz labo pusi. Bez pareizas apzīmēšanas pārlūkprogramma var salauzt vai nepareizi attēlot rakstzīmju virkni. Veidlapās ir būtiski, lai etiķete būtu labajā pusē un ievades lauks kreisajā pusē, jo lietotājs sāk lasīt no labās puses. Mūsu pieeja: katram teksta elementam ar iestrādātu latīņu materiālu RTL veidnē ievietojam <span dir="ltr"> aptveri ar beigu LRM, lai nākamā RTL rakstzīme pareizi pārvietotos uz beigām.
Arābu un ivrits lasās no labās uz kreiso pusi – un tādējādi apgriež klusējošus dizaina pieņēmumus. Praktisks ziņojums no mūsu dizaina sistēmas.
Simboli: virziena fiksēti vai loģiski?
Ikonas un piktogrammas bieži vien satur netiešus virzienus: uz priekšu vērstas bultiņas rāda pa labi, atpakaļ vērstas – pa kreisi. Tās ir jāatspoguļo RTL saskarnēs, pretējā gadījumā navigācija šķitīs pretēja intuīcijai. Tomēr ne visi simboli ir atkarīgi no virziena: atskaņošanas trīsstūris vienmēr paliek nemainīgs (jo tas attēlo fizisku darbību), tāpat arī e-pasta vai tālruņa simbola. Pamatnoteikums: loģiskais virziens (laika gaita, lasīšanas virziens, navigācijas virziens) ir jāatspoguļo; fiziskā vai simboliskā nozīme – nē. Izstrādē ikonām izmantojam CSS transformācijas: scaleX(-1) visiem virziena loģiskiem SVG, ko kontrolē klase [dir=rtl] .icon--directional. Tādējādi izvairāmies no dublētiem resursiem. Uzmanību: karuseļa bultiņas, kas rāda pa labi, RTL režīmā jārāda pa kreisi, jo „nākamā“ lapa tagad atrodas kreisajā pusē. Tas pats attiecas uz progresa joslām: progresam jāpalielinās no labās uz kreiso pusi. Mūsu dizaina sistēmā šādas komponentes tiek ieviestas ar loģiskiem rekvizītiem (inline-size, nevis width), lai aizpildījums automātiski piesaistītos progresa joslas sākumam.
Attēli: ko atspoguļot, ko pārzīmēt?
Grafikas un ilustrācijas bieži satur kultūras vai virziena atkarīgus simbolus: pulksteņi, kas iet pulksteņrādītāja virzienā (RTL kontekstā atspoguļots izskatās normāli), rokasspiedieni, laika līnijas. Ne katrs attēls ir pilnībā jāatspoguļo – atspoguļota pulksteņa rādītāju kustība varētu tikt uztverta kā nepareiza, jo fiziskā realitāte paliek nemainīga. Bet laika līnijai no kreisās uz labo pusi RTL kontekstā vajadzētu būt no labās uz kreiso. Logotipi un zīmolu attēli parasti paliek nemainīgi, jo tie ir pakļauti noteiktam vizuālajam standartam. Izaicinājums ir automātiski piegādāt pareizos attēlus. Mēs katram attēlam glabājam RTL ekvivalentu kā atsevišķu resursu vai izmantojam CSS transformācijas vienkāršos gadījumos. Sarežģītās situācijās (piem., infografikas ar tekstu) ir nepieciešama manuāla pārveide. Mūsu darbplūsma: grafiskais dizaineris CMS atzīmē katru attēlu kā „virziena neatkarīgs”, „atspoguļojams” vai „individuāls”. Piegāde notiek, izmantojot nosacījumu, kas nolasa vecākelementa dir atribūtu. Piemērs: attēls ar grāmatplauktu, kurā ir grāmatas latīņu burtiem, būtu jāatspoguļo, lai grāmatu muguriņas būtu labajā pusē – tas sākumā var šķist pārsteidzoši, bet ir konsekventi.
SEO un hreflang: RTL specifisks marķējums
Meklētājprogrammām ir būtiski pareizi norādīt valodu un lasīšanas virzienu. Papildus valodas atribūtam (lang) katrā lapā jābūt iestatītam dir atribūtam, lai pārlūkprogramma un meklētājprogramma pareizi interpretētu lasīšanas virzienu. Daudzvalodu RTL lapās hreflang marķējums ir īpaši kritisks: arābu lapa (ar) ir pareizi jāatsauc uz tās vācu vai angļu variantiem. Nepareizi hreflang ieraksti izraisa nepareizu indeksēšanu, jo Google automātiski nenosaka lasīšanas virzienu. Turklāt ieteicams izveidot atsevišķas vietņu kartes LTR un RTL versijām, lai pastiprinātu signālus. Bieža kļūda ir vispārīgu tagu izmantošana, neņemot vērā rakstības virzienu. Mēs izmantojam dinamisku hreflang ģenerēšanu, kas no valodu datubāzes iegūst gan valodas, gan reģionu kodus. Arābu dialektiem nepieciešama reģionālā diferenciācija, jo patērētājiem un algoritmiem ir dažādas cerības. Papildus mēs izmantojam canonical tagu, lai izvairītos no neatbilstībām starp atspoguļoto un neatspoguļoto saturu. Mūsu darbplūsma automātiski pārbauda, vai dir atribūts HTML galvenē ir saskaņots ar hreflang norādēm. Jo arābu teksts bez dir="rtl" pārlūkprogrammās var tikt attēlots nepareizi, kas savukārt palielina atlēkšanas biežumu. Tādējādi SEO veiktspēju ietekmē ne tikai teksti, bet arī pareiza lasīšanas virziena marķēšana.
Pieejamība: RTL izaicinājumi palīgtehnoloģijām
Ekrāna lasītāju un citu palīgtehnoloģiju vajadzības mainās līdz ar lasīšanas virzienu. Ekrāna lasītāji, piemēram, JAWS vai VoiceOver, sagaida dir atribūtu, lai noteiktu pareizu nolasīšanas secību. Ja šī norāde trūkst, tie jauktas valodas saturu var nolasīt nepareizā secībā. ARIA orientieri paliek nemainīgi, taču to pozīcijai DOM vēlams sekot lasīšanas virzienam: galvenajai izvēlnei pirmkodā jābūt pirms galvenā satura – RTL gadījumā tas nozīmē labo pusi vispirms. Vēl viens aspekts ir fokusa secības: cilnes indeksiem RTL lapās loģiski jāvirzās no labās uz kreiso pusi. Izmantojiet vietējos HTML elementus, kas automātiski pielāgo tastatūras navigāciju. Attēlu alternatīvajiem tekstiem jābūt valodai specifiskiem un jāatspoguļo mērķa kultūras perspektīvu. Piemēram: grafika, kurā redzams rokasspiediens, arābu valodā jāapraksta kā 'divas rokas, kas krustojas', jo kultūras konotācija ir atšķirīga. Mēs iesakām veikt pieejamības auditus gan LTR, gan RTL skatā. Tas ietver kontrastu pārbaudi, kas RTL tipogrāfijā var atšķirties. Mūsu komanda izmanto automatizētus rīkus kopā ar manuāliem testiem, ko veic dzimtie runātāji, lai nodrošinātu iekļaujošu lietotāja pieredzi.
blog.faqT
Vai, veidojot RTL versiju, ir jāatspoguļo visi attēli?
Nē. Jāatspoguļo tikai attēli ar skaidru lasīšanas virzienu, piemēram, laika līnijas, bultiņas vai secīgas diagrammas. Logotipi, portreti, grafiki ar fiziskiem objektiem (pulkstenis, globuss) paliek nemainīgi, jo pretējā gadījumā tiktu izkropļota to nozīme. Izlemiet katrā gadījumā atsevišķi.
Kā visefektīvāk pārbaudīt RTL izstrādes laikā?
Izmantojiet pārlūkprogrammas izstrādes rīkus, lai html elementā iestatītu dir atribūtu uz "rtl", un pārbaudiet katru komponentu, vai tā ir pareizi izkārtota. Paplašiniet savu koda pārskatīšanas procesu, iekļaujot īpašu RTL pārbaudi ar dzimtās valodas runātājiem, kas aptver vizuālus traucējumus un nepareizas divvirzienu teksta plūsmas.
