2026-06-03 · Baduno szerkesztőség · 6 blog.readMin · Blog és tudás
RTL-tervezés: Mi változik, ha az olvasási irány megfordul
Az arab és héber jobbról balra olvas – és ezzel felborítja a hallgatólagos tervezési feltételezéseket. Gyakorlati beszámoló a tervezési rendszerünkből.
Több mint tükrözés
A naiv megközelítés – „egyszerűen tükrözzünk mindent” – hamar kudarcot vall: A számok és a latin márkanevek balról jobbra maradnak, a médialejátszó ikonok megtartják irányukat, a telefonszámok eltörnek. Az RTL-tervezés azt jelenti, hogy minden elemnél eldöntjük, hogy logikai (az olvasási irányt követő) vagy fizikai (irányrögzített) legyen.
CSS: logikai tulajdonságok
A modern CSS-logika kezelhetővé teszi az RTL-t: margin-inline-start a margin-left helyett, inset-inline-end a right helyett, text-align:start a left helyett. Aki kezdettől fogva logikusan ír, szinte ajándékba kapja a második olvasási irányt – aki utólag építi be, százával küzd a kivételekkel. Ez a weboldal következetesen logikai tulajdonságokat használ; minden RTL-változat ugyanabból a stíluslapból jön létre, mint a német.
Tipográfia és sűrűség
Az arab írásnak nincsenek nagybetűi, eltérő felső/alsó hosszúságai vannak, és azonos betűméret mellett kisebbnek és sűrűbbnek tűnik. A jó RTL-tipográfiához saját, speciális betűtípusok kellenek, gyakran egy-két ponttal nagyobb fokozat és bővebb sormagasság. A latinban népszerű betűköz-effektek sem működnek az összekötött írásnál.
Tesztelés anyanyelvi beszélőkkel
Semmilyen automatizmus nem pótolja annak a személynek a szemét, aki az írásban él: Összetett szavakban a sortörések, számok a folyó szövegben, kevert irányok az űrlapokban – a hibák finomak. Ezért az ellenőrzési folyamatunk mindig tartalmaz egy vizuális RTL-áttekintést, nem csak szövegjavítást.
Navigáció: ahol a logika átfordul
RTL-környezetben a navigációs struktúrákat újra kell gondolni. A vízszintes menüsor jobbról indul, az első menüpont a bal szélső – a sorrend logikusan jobbról balra halad. A legördülő menük alapértelmezés szerint balra lent nyílnak a jobb alsó helyett, mivel a horgonypont a jobb oldalon található. A bal oldalsávok, amelyek LTR-elrendezésben balra vannak pozícionálva, RTL esetén jobbra kerülnek. Különös figyelmet igényelnek a hamburger menük: maga az ikon (három vízszintes vonal) iránysemleges, de elhelyezkedését (bal felső vs. jobb felső) fel kell cserélni. Gyakori hiba, hogy az almenük még LTR-irányt mutatnak, mert nem logikai CSS-tulajdonságokkal vannak vezérelve. Ezért tervezési rendszerünkben a navigációs komponenseket teljes egészében inset-inline-start/end segítségével definiáljuk, így automatikusan váltanak LTR és RTL között. Gyakorlati példa: A morzsalék navigáció (breadcrumb) RTL módban az aktuális oldalt balra, a kezdőlapot jobbra helyezi – az elválasztó nyilaknak szintén változtatniuk kell irányukat. Mi itt CSS-content beágyazott nyilakat használunk, amelyek a dir-értéktől függően más entitást alkalmaznak.
Vegyes irányok: számok és jelek
A számok, telefonszámok, e-mail címek és latin betűs márkanevek megtartják LTR-irányukat, még akkor is, ha a környező szöveg RTL. Ez úgynevezett kétirányú (bidirekcionális) szakaszokat hoz létre, ahol az olvasási irány a mondat közepén vált. A Unicode-kétirányú algoritmus (Bidi) alapértelmezés szerint kezeli ezeket a vegyes szövegeket, de gondoskodnia kell arról, hogy az irányváltás helyes legyen. Használja a dir-attribútumot a vegyes elem szintjén, vagy alkalmazzon olyan karaktereket, mint az LRM (balról jobbra jelölő) és az RLM (jobbról balra jelölő). Példa: egy héber mondatban: „Telefon: 01234 56789” a számsort balról jobbra kell olvasni. Helyes megjelölés nélkül a böngésző megtörheti vagy hibásan jelenítheti meg a karaktersort. Űrlapoknál elengedhetetlen, hogy a címke jobbra, a beviteli mező balra kerüljön, mivel a felhasználó jobbról kezdi az olvasást. Eljárásunk: minden latin anyagot tartalmazó szövegelemhez RTL-sablonban egy <span dir="ltr">-burkolót teszünk egy záró LRM-mel, hogy a következő RTL-karakter helyesen kerüljön a végére.
Az arab és héber jobbról balra olvas – és ezzel felborítja a hallgatólagos tervezési feltételezéseket. Gyakorlati beszámoló a tervezési rendszerünkből.
Szimbólumok: iránykötött vagy logikus?
Az ikonok és piktogramok gyakran implicit irányokat hordoznak: az előre mutató nyilak jobbra, a hátrafelé mutatók balra mutatnak. Ezeket RTL-felületeken tükrözni kell, különben a navigáció ellentmondásosnak tűnik. Ugyanakkor nem minden szimbólum irányfüggő: a lejátszás-háromszög mindig ugyanaz marad (mert fizikai cselekvést ábrázol), hasonlóan az e-mail vagy telefon ikonhoz. Az ökölszabály: a logikai irányt (időbeli sorrend, olvasási irány, navigációs irány) tükrözni kell; a fizikai vagy szimbolikus jelentést nem. Fejlesztés során CSS-transzformációkat használunk az ikonokhoz: scaleX(-1) minden iránylogikus SVG-hez, a [dir=rtl] .icon--directional osztállyal vezérelve. Így elkerüljük a duplikált fájlokat. Figyelem: a jobbra mutató körhintanyilaknak RTL módban balra kell mutatniuk, mivel a „következő” oldal most balra található. Ugyanez érvényes a folyamatjelző sávokra: a haladásnak jobbról balra kell növekednie. Tervezési rendszerünkben az ilyen komponensek logikai tulajdonságokkal (inline-size a width helyett) vannak implementálva, így a kitöltöttség automatikusan a folyamatjelző sáv elejéhez kötődik.
Képek: Mit tükrözni, mit újrarajzolni?
A grafikák és illusztrációk gyakran tartalmaznak kulturális vagy irányfüggő szimbólumokat: órákat, amelyek az óramutató járásával megegyezően járnak (RTL-kontextusban a tükrözött változat normálisnak tűnik), kézfogásokat, idővonalakat. Nem minden képet kell teljesen tükrözni – egy tükrözött óramutató mozgás hibásnak tűnhet, mivel a fizikai valóság megmarad. De egy balról jobbra haladó idővonalnak RTL-kontextusban jobbról balra kell haladnia. A logók és márkaképek általában változatlanok maradnak, mivel rögzített megjelenéshez kötődnek. A kihívás abban rejlik, hogy a megfelelő képeket automatikusan szolgáltassuk ki. Minden grafikához eltárolunk egy RTL-egyenértékűt külön eszközként, vagy egyszerű esetekben CSS-transzformációkat használunk. Összetett forgatókönyvekben (pl. szöveges infografikák) manuális újratervezés szükséges. A munkafolyamatunk: a grafikus a CMS-ben minden képet „irányfüggetlen”, „tükrözhető” vagy „egyedi” kategóriába sorol. A kiszolgálás egy feltétel alapján történik, amely a szülőelem dir-attribútumát olvassa. Példa: Egy latin betűs könyvekkel teli könyvespolc ábráját tükrözni kell, hogy a könyvgerincek jobb oldalon legyenek – ez első pillantásra meglepő lehet, de konzisztens.
SEO és hreflang: RTL-specifikus jelölés
A keresőmotorok számára elengedhetetlen a helyes nyelv- és irányjelölés. A nyelvi attribútum (lang) mellett minden oldalon be kell állítani a dir-attribútumot is, hogy a böngésző és a keresőmotor helyesen értelmezze az olvasási irányt. Többnyelvű RTL-oldalak esetében a hreflang-jelölés különösen kritikus: egy arab oldalnak (ar) helyesen kell hivatkoznia a német vagy angol megfelelőjére. A hibás hreflang-bejegyzések téves indexeléshez vezetnek, mivel a Google nem vezeti le automatikusan az olvasási irányt. Emellett érdemes külön szit térképeket készíteni az LTR és RTL verziókhoz, hogy erősítsük a jelzéseket. Gyakori hiba az általános címkék használata az írásirány figyelembevétele nélkül. Mi dinamikus hreflang-generálást alkalmazunk, amely a nyelvi adatbázisból mind a nyelvi, mind a régiókódokat levezeti. Az arab dialektusok esetében szükség van a regionális differenciálásra, mivel a felhasználók és az algoritmusok eltérő elvárásokkal rendelkeznek. Ezenkívül a canonical címkét használjuk a tükrözött és nem tükrözött tartalmak közötti inkonzisztenciák elkerülésére. Munkafolyamatunk automatikusan ellenőrzi, hogy a HTML-fejlécben lévő dir-attribútum összhangban van-e a hreflang-bejegyzésekkel. Mert egy dir="rtl" nélküli arab szöveget a böngészők hibásan jeleníthetnek meg, ami növeli a visszafordulási arányt. A SEO-teljesítményt tehát nemcsak a szövegek, hanem az olvasási irány helyes jelölése is befolyásolja.
Akadálymentesítés: RTL-kihívások az asszisztív technológiák számára
A képernyőolvasók és más asszisztív technológiák igényei az olvasási iránnyal együtt változnak. A képernyőolvasók, mint a JAWS vagy a VoiceOver, elvárják a dir-attribútumot a helyes felolvasási sorrend meghatározásához. Ennek hiányában a vegyes nyelvű tartalmakat esetleg rossz sorrendben olvassák fel. Az ARIA tereptárgyak ugyan változatlanok maradnak, de a DOM-beli elhelyezkedésük ideális esetben kövesse az olvasási irányt: a főmenü a forráskódban a fő tartalom előtt legyen – RTL esetében ez azt jelenti, hogy a jobb oldal legyen először. További szempont a fókusz sorrendje: a Tab-indexeknek RTL-oldalakon logikusan jobbról balra kell haladniuk. Használjon natív HTML-elemeket, amelyek automatikusan alkalmazkodnak a billentyűzetes navigációhoz. A képek alternatív szövegei legyenek nyelvspecifikusak, és tükrözzék a célkultúra perspektíváját. Például: egy kézfogást ábrázoló grafikát arab nyelven úgy kell leírni, mint „két egymást keresztező kéz”, mivel a kulturális konnotáció eltérő. Javasoljuk, hogy akadálymentességi auditokat végezzenek mind LTR, mind RTL nézetben. Ehhez hozzátartozik a kontrasztok ellenőrzése is, amelyek az RTL tipográfiában eltérőek lehetnek. Csapatunk automatizált eszközöket és anyanyelvi beszélők által végzett manuális teszteket kombinál, hogy biztosítsa az inkluzív felhasználói élményt.
blog.faqT
Tükröznöm kell az összes képet, ha RTL-verziót készítek?
Nem. Csak a világos olvasási irányú képeket, mint az idővonalak, nyilak vagy folyamatos diagramok kell tükrözni. A logók, portrék, fizikai tárgyakat (óra, földgömb) ábrázoló grafikák változatlanok maradnak, mert különben a jelentés torzul. Döntsön eseti alapon.
Hogyan teszteljem a leghatékonyabban az RTL-t a fejlesztés során?
Használja a böngésző fejlesztői eszközeit a dir attribútum "rtl"-re állításához a html elemen, és ellenőrizze minden komponens helyes elrendezését. Bővítse a kódellenőrzési folyamatot egy dedikált RTL-ellenőrzéssel anyanyelvi beszélőkkel, amely lefedi a vizuális zavarokat és a helytelen kétirányú szövegáramlásokat.
