2026-06-03 · Baduno toimetus · 5 blog.readMin · Blogi ja teadmised
RTL-disain: Mis muutub, kui lugemissuund pöördub
Araabia ja heebrea keelt loetakse paremalt vasakule – see seab kahtluse alla vaikimisi disainieeldused. Praktiline aruanne meie disainisüsteemist.
Rohkem kui peegelpilt
Naiivne lähenemine – 'lihtsalt peegelda kõik' – ebaõnnestub kiiresti: numbrid ja ladinakeelsed kaubamärgid jäävad vasakult paremale, meediapleieri sümbolid säilitavad oma suuna, telefoninumbrid katkevad. RTL-disain tähendab iga elemendi puhul otsustamist, kas see on loogiline (järgib lugemissuunda) või füüsiline (suunakindel).
CSS: loogilised omadused
Kaasaegne CSS-loogika muudab RTLi juhitavaks: margin-inline-start margin-left asemel, inset-inline-end right asemel, text-align:start left asemel. Kes algusest peale loogiliselt kirjutab, saab teise lugemissuuna peaaegu tasuta – kes järelpaigaldab, võitleb sadade eranditega. See veebisait kasutab järjepidevalt loogilisi omadusi; iga RTL-versioon tekib samast stiililehest kui saksakeelne.
Trüki- ja tihedus
Araabia kirjas pole suurtähti, teistsugused üla- ja alajooned ning sama kirjasuuruse korral tundub see väiksem ja tihedam. Hea RTL-tüpograafia vajab spetsiaalseid, spetsialiseeritud fonte, sageli üks kuni kaks punkti suuremat suurust ja heldemat reavahet. Ka tähtede vahekauguse efektid, mis on ladina keeles populaarsed, ei tööta ühendatud kirjaga.
Testimine emakeelekõnelejatega
Ükski automatism ei asenda inimese pilku, kes elab kirjas: reavahetused liitsõnades, numbrid voolutekstis, segasuuad vormides – veaklassid on peened. Meie kontrolliprotsess hõlmab seetõttu alati visuaalset RTL-i ülevaatust, mitte ainult teksti parandust.
Navigatsioon: kus loogika ümber pöördub
RTL-keskkondades tuleb navigatsioonistruktuurid ümber mõelda. Horisontaalne menüüriba algab paremalt, esimene menüüpunkt on kõige vasakpoolsem – järjekord jääb loogiliseks paremalt vasakule. Ripamenüüd avanevad vaikimisi vasakule alla, mitte paremale alla, kuna ankrupunkt asub paremal küljel. Külgribad, mis LTR-paigutuses asuvad vasakul, nihkuvad RTL-i korral paremale. Erilist tähelepanu tuleb pöörata hamburgerimenüüdele: ikoon ise (kolm horisontaalset joont) on suunaneutraalne, kuid selle paigutus (üleval vasakul vs. üleval paremal) tuleb vahetada. Levinud viga on alammenüüd, mis näitavad endiselt LTR-suunda, kuna neid ei juhita loogiliste CSS-omaduste kaudu. Seetõttu määratleme oma disainisüsteemis navigatsioonikomponendid täielikult inset-inline-start/end abil, et need automaatselt LTR ja RTL vahel vahetuksid. Praktiline näide: Leivarejee näitab RTL-režiimis praegust lehte vasakul ja avalehte paremal – eraldusnooled peavad samuti suunda muutma. Siin kasutame CSS-contenti manustatud nooltega, mis kasutavad olenevalt dir-väärtusest erinevat entiteeti.
Segatud suunad: numbrid ja märgid
Numbrid, telefoninumbrid, e-posti aadressid ja ladinakeelsed kaubamärgid säilitavad oma LTR-suuna ka siis, kui ümbritsev tekst on RTL. See põhjustab nn kahesuunalisi lõike, kus lugemissuund lause keskel muutub. Vaikimisi käsitleb Unicode'i kahesuunaliste tekstide algoritm (Bidi) sellist segatud teksti, kuid peate tagama, et suunavahetus oleks korrektne. Kasutage dir-atribuuti segatud elemendi tasandil või kasutage märke nagu LRM (Left-to-Right Mark) ja RLM (Right-to-Left Mark). Näide: Heebreakeelses lauses „Telefon: 01234 56789“ tuleb numbrijada lugeda vasakult paremale. Ilma korrektse märgendita võib brauser järjestuse katkestada või valesti kuvada. Vormides on oluline, et silt oleks paremal ja sisestusväli vasakul, kuna kasutaja alustab lugemist paremalt. Meie lähenemine: Iga tekstelemendi puhul, mis sisaldab ladinakeelset materjali, määrame RTL-mallis <span dir="ltr">-ümbrise koos lõpu LRM-ga, et järgnev RTL-märk liiguks korrektselt lõppu.
Araabia ja heebrea keelt loetakse paremalt vasakule – see seab kahtluse alla vaikimisi disainieeldused. Praktiline aruanne meie disainisüsteemist.
Sümbolid: suunafikseeritud või loogilised?
Ikoonid ja piktogrammid kannavad sageli kaudseid suundi: edasinooled näitavad paremale, tagasinooled vasakule. Need tuleb RTL-liidestes peegeldada, muidu tundub navigatsioon vastuoluline. Kuid mitte kõik sümbolid pole suunast sõltuvad: mängimise kolmnurk jääb alati samaks (kuna see kujutab füüsilist tegevust), samuti e-posti või telefoni sümbol. Reeglina: loogiline suund (ajaline kulg, lugemissuund, navigatsioonisuund) tuleb peegeldada; füüsilist või sümboolset tähendust mitte. Arenduses kasutame ikoonide puhul CSS-transformatsioone: scaleX(-1) kõigi suunaloogiliste SVG-de jaoks, mida juhitakse klassi [dir=rtl] .icon--directional kaudu. Nii väldime dubleerivaid varasid. Ettevaatust: edasinooled karussellil peavad RTL-režiimis näitama vasakule, kuna „järgmine“ leht asub nüüd vasakul. Sama kehtib edenemisribade puhul: edenemine peaks suurenema paremalt vasakule. Meie disainisüsteemis on sellised komponendid rakendatud loogiliste omadustega (inline-size width asemel), nii et täitmise tase seondub automaatselt edenemisriba algusega.
Pildid: mida peegeldada, mida ümber kujundada?
Graafika ja illustratsioonid sisaldavad sageli kultuurilisi või suunast sõltuvaid sümboleid: kellad, mis liiguvad päripäeva (RTL-kontekstis tundub peegeldatud normaalne), käepigistused, ajajooned. Kõiki pilte ei pea täielikult peegeldama – peegeldatud kellaosuti liikumist võidakse pidada valeks, kuna füüsiline reaalsus säilib. Kuid vasakult paremale kulgev ajajoon peaks RTL-kontekstis kulgema paremalt vasakule. Logod ja kaubamärgipildid jäävad enamasti muutmata, kuna need alluvad kindlale visuaalsele identiteedile. Väljakutse seisneb õigete piltide automaatses esitamises. Salvestame iga graafiku jaoks RTL-ekvivalendi eraldi varana või kasutame lihtsate juhtumite puhul CSS-teisendusi. Keerukates stsenaariumites (nt teksti sisaldavad infograafikud) on vajalik käsitsi ümberkujundus. Meie töövoog: graafikadisainer märgistab iga pildi CMS-is kui „suunavaba", „peegeldatav" või „individuaalne". Esitamine toimub tingimuse alusel, mis loeb emaelemendi dir-atribuuti. Näide: ladina kirjas raamatutega raamaturiiuli kujutis tuleks peegeldada, et seljaosad paistaksid paremal – see võib esmapilgul üllatav olla, kuid on järjepidev.
SEO ja hreflang: RTL-spetsiifiline märgistus
Otsingumootorite jaoks on keele ja suuna õige märkimine hädavajalik. Lisaks keeleatribuudile (lang) tuleb igal lehel määrata dir-atribuut, et brauser ja otsingumootor saaksid lugemissuunda õigesti tõlgendada. Mitmekeelsete RTL-lehtede puhul on hreflang-märkimine eriti kriitiline: araabia leht (ar) peab õigesti viitama oma saksa- või ingliskeelsetele vastetele. Valed hreflang-sisestused põhjustavad vale indekseerimise, kuna Google ei tuleta lugemissuunda automaatselt. Samuti peaksite kaaluma eraldi saitkaarte LTR- ja RTL-versioonide jaoks, et signaale tugevdada. Levinud viga on üldiste siltide kasutamine kirjasuunda arvestamata. Me kasutame dünaamilist hreflang-genereerimist, mis tuletab keeleandmebaasist nii keele- kui ka piirkonnakoodid. Araabia murrete puhul on piirkondlik eristamine vajalik, kuna tarbijatel ja algoritmidel on erinevad ootused. Lisaks kasutame canonical-silti, et vältida ebakõlasid peegeldatud ja peegeldamata sisu vahel. Meie töövoog kontrollib automaatselt, kas HTML-päises olev dir-atribuut on hreflang-andmetega kooskõlas. Sest araabiakeelne tekst ilma dir="rtl"-ita võib brauserites valesti kuvuda, mis omakorda suurendab põrkemäära. Seega mõjutab SEO jõudlust mitte ainult tekst, vaid ka lugemissuuna õige märkimine.
Juurdepääsetavus: RTL-väljakutsed abitehnoloogiatele
Ekraanilugejate ja teiste abitehnoloogiate vajadused muutuvad koos lugemissuunaga. Ekraanilugejad nagu JAWS või VoiceOver eeldavad dir-atribuuti, et määrata õige ettelugemisjärjekord. Kui see puudub, võivad nad segakeelseid sisu lugeda vales järjekorras. Ka ARIA-maamärgid jäävad samaks, kuid asukoht DOM-is peaks ideaalis järgima lugemissuunda: põhimenüü peaks lähtekoodis olema enne põhisisu – RTL-i puhul tähendab see paremat poolt esimesena. Teine punkt on fookuse järjekorrad: vahekaardi indeksid peavad RTL-lehtedel loogiliselt kulgema paremalt vasakule. Kasutage natiivseid HTML-elemente, mis kohandavad klaviatuuriga navigeerimist automaatselt. Piltide Alt-tekstid peaksid olema keelepõhised ja kajastama sihtkultuuri perspektiivi. Näiteks pilt, mis kujutab käepigistust, tuleks araabia keeles kirjeldada kui "kaks ristuvat kätt", kuna kultuuriline konnotatsioon on erinev. Soovitame teostada juurdepääsetavuse auditeid nii LTR- kui ka RTL-vaates. See hõlmab kontrastide kontrollimist, mis võivad RTL-tüpograafia puhul erineda. Meie meeskond kasutab automatiseeritud tööriistu koos emakeelekõnelejate manuaalsete testidega, et tagada kasutajakogemuse kaasavus.
blog.faqT
Kas ma pean kõik pildid peegeldama, kui loon RTL-versiooni?
Ei. Peegeldada tuleks ainult selge lugemissuunaga pilte, nagu ajajooned, nooled või jätkuvad diagrammid. Logod, portreed, füüsiliste objektidega (kell, gloobus) graafikud jäävad muutmata, sest vastasel juhul moonutatakse tähendust. Otsustage juhtumipõhiselt.
Kuidas testida RTL-i kõige tõhusamalt arenduse käigus?
Kasutage brauseri arendustööriistu, et määrata html-elemendil atribuudiks dir väärtusega "rtl", ja kontrollige iga komponendi korrektset paigutust. Laiendage oma koodiülevaate protsessi spetsiaalse RTL-kontrolliga emakeelekõnelejate abil, mis hõlmab visuaalseid häiringuid ja valesid kahesuunalisi tekstivooge.
