2026-06-03 · Redakcija Baduno · 6 blog.readMin · Blogas ir žinios
RTL dizainas: kas pasikeičia, kai skaitymo kryptis apsiverčia
Arabų ir hebrajų kalbos skaitomos iš dešinės į kairę – ir taip apverčia tylinias dizaino prielaidas. Praktinė patirtis iš mūsų dizaino sistemos.
Daugiau nei veidrodis
Naivus požiūris – 'tiesiog viską atspindėti' – greitai žlunga: skaičiai ir lotyniški prekės ženklai lieka iš kairės į dešinę, medijos grotuvo simboliai išlaiko savo kryptį, telefono numeriai lūžta. RTL dizainas reiškia, kad kiekvienam elementui reikia nuspręsti, ar jis yra loginis (seka skaitymo kryptį), ar fizinis (fiksuotos krypties).
CSS: loginės savybės
Šiuolaikinė CSS logika daro RTL valdomą: margin-inline-start vietoj margin-left, inset-inline-end vietoj right, text-align:start vietoj left. Kas nuo pradžių rašo logiškai, antrą skaitymo kryptį gauna beveik dovanų – kas pritaiko vėliau, kovoja su šimtais išimčių. Ši svetainė nuosekliai naudoja logines savybes; kiekvienas RTL variantas sukuriamas iš to paties stiliaus lapo kaip ir vokiškas.
Tipografija ir tankis
Arabų raštas neturi didžiųjų raidžių, skiriasi viršutiniai / apatiniai elementai ir atrodo mažesnis bei tankesnis esant tam pačiam šrifto dydžiui. Gerai RTL tipografijai reikia specializuotų šriftų, dažnai vienu ar dviem punktais didesnio dydžio ir didesnio eilučių aukščio. Taip pat raidžių tarpų efektai, populiarūs lotynų kalboje, neveikia su vientisu raštu.
Testavimas su gimtakalbiais
Joks automatizmas nepakeičia žmogaus, gyvenančio raštu, žvilgsnio: eilučių lūžiai sudėtiniuose žodžiuose, skaičiai sklandžiame tekste, mišrios kryptys formose – klaidų tipai yra subtilūs. Todėl mūsų tikrinimo procesas visada apima vizualų RTL peržiūrą, o ne tik teksto taisymą.
Navigacija: kur logika apsiverčia
RTL aplinkose navigacijos struktūras reikia permąstyti. Horizontalus meniu juosta prasideda dešinėje, pirmasis meniu punktas yra kairiausias – tvarka išlieka logiška iš dešinės į kairę. Išskleidžiamieji meniu pagal nutylėjimą atsidaro į kairę apačią vietoj dešinės apačios, nes inkarinis taškas yra dešinėje pusėje. Šoninės juostos, kurios LTR makete yra kairėje, RTL atveju perkeliamos į dešinę. Ypatingas dėmesys skirtinas hamburger meniu: pati piktograma (trys horizontalios linijos) yra krypties požiūriu neutrali, tačiau jos vieta (viršuje kairėje vs. viršuje dešinėje) turi būti pakeista. Dažna klaida – submeniu, kurie vis dar rodo LTR kryptį, nes jie nėra valdomi loginėmis CSS savybėmis. Mūsų dizaino sistemoje navigacijos komponentus apibrėžiame visiškai naudodami inset-inline-start/end, kad jie automatiškai persijungtų tarp LTR ir RTL. Praktinis pavyzdys: „Breadcrumb“ navigacija RTL režimu rodo dabartinį puslapį kairėje, o pagrindinį puslapį dešinėje – skiriamosios rodyklės taip pat turi pakeisti kryptį. Čia naudojame CSS-content su įterptomis rodyklėmis, kurios pagal dir reikšmę naudoja skirtingą simbolį.
Mišrios kryptys: skaičiai ir simboliai
Skaičiai, telefono numeriai, el. pašto adresai ir lotyniški prekių ženklai išlaiko LTR kryptį, net jei aplinkinis tekstas yra RTL. Tai sukelia vadinamuosius dvikrypčius skyrius, kuriuose skaitymo kryptis keičiasi vidury sakinio. Pagal nutylėjimą „Unicode“ dvikryptis algoritmas (Bidi) tvarko tokius mišrius tekstus, tačiau turite įsitikinti, kad krypties perjungimas yra teisingas. Naudokite dir atributą mišraus elemento lygmenyje arba simbolius, tokius kaip LRM (Left-to-Right Mark) ir RLM (Right-to-Left Mark). Pavyzdys: hebrajiškame sakinyje „Telefon: 01234 56789“ skaičių seka turi būti skaitoma iš kairės į dešinę. Be teisingo žymėjimo naršyklė gali sulaužyti simbolių seką arba neteisingai atvaizduoti. Formose būtina, kad etiketės būtų dešinėje, o įvesties laukai kairėje, nes vartotojas pradeda skaityti iš dešinės. Mūsų metodas: kiekvienam teksto elementui su įterpta lotyniška medžiaga RTL šablone naudojame <span dir="ltr">-apvalkalą su baigiamuoju LRM, kad kitas RTL simbolis teisingai atsidurtų pabaigoje.
Arabų ir hebrajų kalbos skaitomos iš dešinės į kairę – ir taip apverčia tylinias dizaino prielaidas. Praktinė patirtis iš mūsų dizaino sistemos.
Simboliai: fiksuotos krypties ar loginiai?
Piktogramos dažnai turi numanomas kryptis: pirmyn rodomos rodyklės rodo į dešinę, atgal – į kairę. RTL sąsajose jos turi būti atspindėtos, kitaip navigacija atrodys priešinga logikai. Tačiau ne visi simboliai priklauso nuo krypties: grojimo trikampis visada išlieka toks pat (nes atspindi fizinį veiksmą), el. pašto ar telefono piktograma taip pat. Pagrindinė taisyklė: loginė kryptis (laiko eiga, skaitymo kryptis, navigacijos kryptis) turi būti atspindėta; fizinė ar simbolinė reikšmė – ne. Kūrimo metu piktogramoms naudojame CSS transformacijas: scaleX(-1) visiems kryptiniams SVG, valdomiems klasės [dir=rtl] .icon--directional. Taip išvengiame dvigubų išteklių. Dėmesio: karuselės rodyklės, rodančios į dešinę, RTL režimu turi rodyti į kairę, nes „kitas“ puslapis dabar yra kairėje. Tas pats galioja ir progreso juostoms: progresas turėtų didėti iš dešinės į kairę. Mūsų dizaino sistemoje tokie komponentai yra įgyvendinti su loginėmis savybėmis (inline-size vietoj width), kad užpildymo lygis automatiškai pririštų prie progreso juostos pradžios.
Vaizdai: ką atspindėti, ką piešti iš naujo?
Grafikos ir iliustracijos dažnai turi kultūrinius arba krypties simbolius: laikrodžiai, kurie juda pagal laikrodžio rodyklę (RTL kontekste atspindėtas vaizdas atrodo normalus), rankų paspaudimai, laiko juostos. Ne kiekvieną vaizdą reikia visiškai atspindėti – atspindėtas laikrodžio rodyklės judėjimas gali būti suvokiamas kaip neteisingas, nes fizinė realybė išlieka. Tačiau laiko juosta iš kairės į dešinę RTL kontekste turėtų eiti iš dešinės į kairę. Logotipai ir prekių ženklų atvaizdai dažniausiai lieka neatspindėti, nes jie turi fiksuotą išvaizdą. Iššūkis yra automatiškai pateikti tinkamus vaizdus. Kiekvienai grafikai saugome RTL atitikmenį kaip atskirą išteklių arba naudojame CSS transformacijas paprastais atvejais. Sudėtinguose scenarijuose (pvz., infografikuose su tekstu) būtina rankinė pertvarka. Mūsų darbo eiga: grafikos dizaineris kiekvieną vaizdą pažymi kaip „bekryptį“, „atspindimą“ arba „individualų“ turinio valdymo sistemoje. Pateikimas vykdomas pagal sąlygą, kuri nuskaito pagrindinio elemento dir atributą. Pavyzdys: knygų lentynos iliustracija su lotyniškais rašmenimis turėtų būti atspindėta, kad knygų nugarėlės atrodytų dešinėje – iš pradžių tai gali atrodyti netikėta, bet yra nuoseklu.
SEO ir hreflang: RTL specifinis žymėjimas
Paieškos sistemoms būtinas teisingas kalbos ir krypties žymėjimas. Be kalbos atributo (lang), kiekviename puslapyje turi būti nustatytas dir atributas, kad naršyklė ir paieškos sistema teisingai interpretuotų skaitymo kryptį. Daugiakalbėse RTL svetainėse hreflang žymėjimas yra ypač svarbus: arabiškas puslapis (ar) turi tinkamai nurodyti savo vokiškus ar angliškus atitikmenis. Klaidingi hreflang įrašai lemia neteisingą indeksavimą, nes „Google“ neautomatiškai nustato skaitymo krypties. Be to, turėtumėte apsvarstyti atskiras „sitemap“ LTR ir RTL versijoms, kad sustiprintumėte signalus. Dažna klaida – bendrinių žymų naudojimas neatsižvelgiant į rašymo kryptį. Mes naudojame dinaminį hreflang generavimą, kuris iš kalbos duomenų bazės išveda ir kalbos, ir regionų kodus. Arabų dialektams būtina regioninė diferenciacija, nes vartotojai ir algoritmai turi skirtingus lūkesčius. Be to, naudojame canonical žymą, kad išvengtume neatitikimų tarp veidrodinių ir neveidrodinių turinių. Mūsų darbo eiga automatiškai tikrina, ar dir atributas HTML antraštėje atitinka hreflang nuorodas. Juk arabiškas tekstas be dir="rtl" gali būti neteisingai atvaizduojamas naršyklėse, o tai padidina atmetimo rodiklį. Taigi SEO našumą lemia ne tik tekstai, bet ir teisingas skaitymo krypties žymėjimas.
Prieinamumas: RTL iššūkiai pagalbinėms technologijoms
Ekrano skaitytuvų ir kitų pagalbinių technologijų poreikiai keičiasi priklausomai nuo skaitymo krypties. Ekrano skaitytuvai, tokie kaip JAWS ar VoiceOver, tikisi dir atributo, kad nustatytų teisingą skaitymo tvarką. Jei šio atributo trūksta, jie gali skaityti mišrios kalbos turinį neteisinga tvarka. ARIA žymos lieka tos pačios, tačiau jų vieta DOM'e idealiu atveju turėtų atitikti skaitymo kryptį: pagrindinis meniu šaltinio kode turėtų būti prieš pagrindinį turinį – RTL atveju tai reiškia dešinę pusę pirmiau. Kitas aspektas – fokusavimo tvarka: RTL puslapiuose skirtukų indeksai turi logiškai eiti iš dešinės į kairę. Naudokite vietinius HTML elementus, kurie automatiškai pritaiko klaviatūros naršymą. Vaizdų alternatyvūs tekstai turėtų būti kalbai specifiniai ir atspindėti tikslinės kultūros perspektyvą. Pavyzdžiui, paveikslėlis, rodantis rankų paspaudimą, arabų kalboje turėtų būti aprašytas kaip „dvi rankos, susikertančios“, nes kultūrinė konotacija skiriasi. Rekomenduojame atlikti prieinamumo auditą tiek LTR, tiek RTL rodiniuose. Tai apima kontrasto tikrinimą, kuris gali skirtis naudojant RTL tipografiją. Mūsų komanda naudoja automatizuotus įrankius kartu su rankiniais testais, kuriuos atlieka gimtoji kalba kalbantys asmenys, kad užtikrintų įtraukią naudotojų patirtį.
blog.faqT
Ar būtina atspindėti visus paveikslėlius, kai kuriu RTL versiją?
Ne. Tik paveikslėliai su aiškia skaitymo kryptimi, tokie kaip laiko juostos, rodyklės ar nuoseklios diagramos, turėtų būti atspindėti. Logotipai, portretai, grafikos su fiziniais objektais (laikrodžiu, gaubliu) lieka nepakeisti, nes priešingu atveju iškraipoma prasmė. Sprendimą priimkite pagal konkretų atvejį.
Kaip efektyviausiai išbandyti RTL kūrimo metu?
Naudokite naršyklės kūrimo įrankius, kad nustatytumėte dir atributą html elemente kaip "rtl", ir patikrinkite kiekvieną komponentą dėl teisingo išdėstymo. Išplėskite savo kodo peržiūros procesą įtraukdami specialų RTL patikrinimą su gimtakalbiais, kuris apima vizualinius sutrikimus ir neteisingus dvikrypčius teksto srautus.
