2026-06-03 · Badunon toimitus · 5 blog.readMin · Blogi & Tieto
RTL-muotoilu: Mitä muuttuu, kun lukusuunta kääntyy
Arabiaa ja hepreaa luetaan oikealta vasemmalle – mikä kääntää hiljaiset suunnitteluolettamukset päälaelleen. Käytännön raportti suunnittelujärjestelmästämme.
Enemmän kuin peilattu
Naiivi lähestymistapa – 'peilaa kaikki' – epäonnistuu nopeasti: numerot ja latinalaiset tuotemerkit pysyvät vasemmalta oikealle, mediasoittimen symbolit säilyttävät suuntansa, puhelinnumerot katkeavat. RTL-muotoilu tarkoittaa, että jokaisen elementin kohdalla on päätettävä, onko se looginen (lukusuuntaa noudattava) vai fyysinen (suunnaltaan kiinteä).
CSS: loogiset ominaisuudet
Moderni CSS-logiikka tekee RTL:stä hallittavan: margin-inline-start margin-left:n sijaan, inset-inline-end right:n sijaan, text-align:start left:n sijaan. Se, joka kirjoittaa loogisesti alusta alkaen, saa toisen lukusuunnan melkein ilmaiseksi – jälkiasentaja taistelee satojen poikkeusten kanssa. Tämä verkkosivusto käyttää johdonmukaisesti loogisia ominaisuuksia; jokainen RTL-versio syntyy samasta tyylitiedostosta kuin saksankielinen.
Typografia ja tiheys
Arabialaisessa kirjoituksessa ei ole isoja kirjaimia, erilaiset ylä- ja alapidennokset, ja se näyttää samalla kirjasinkoolla pienemmältä ja tiheämmältä. Hyvä RTL-typografia vaatii omia erikoistuneita fontteja, usein yhden tai kahden pisteen suurempia kokoja ja väljempää riviväliä. Myös kirjainvälistystehosteet, jotka ovat suosittuja latinalaisessa kirjoituksessa, eivät toimi yhdistetyssä kirjoituksessa.
Testaus äidinkielisillä puhujilla
Mikään automaatio ei korvaa sellaisen henkilön silmää, joka elää kirjoituksessa: rivinvaihdot yhdyssanoissa, numerot juoksevassa tekstissä, sekoitetut suunnat lomakkeissa – virhetyypit ovat hienovaraisia. Siksi tarkastusprosessimme sisältää aina visuaalisen RTL-arvioinnin, ei pelkästään tekstinkorjausta.
Navigaatio: Logiikan kääntyminen
RTL-ympäristöissä navigaatiorakenteet on ajateltava uudelleen. Vaakasuuntainen valikkopalkki alkaa oikealta, ensimmäinen valikkokohta on vasemmanpuoleisin – järjestys pysyy loogisena oikealta vasemmalle. Pudotusvalikot avautuvat oletuksena vasemmalle alaviistoon oikean alaviiston sijaan, koska ankkuripiste on oikealla puolella. Sivupalkit, jotka LTR-asettelussa ovat vasemmalla, siirtyvät RTL-tapauksessa oikealle. Erityisen varovainen tulee olla hampurilaisvalikkojen kanssa: kuvake itse (kolme vaakasuuntaista viivaa) on suuntaneutraali, mutta sen sijoitus (ylhäällä vasemmalla vs. ylhäällä oikealla) on vaihdettava. Yleinen virhe ovat alavalikot, jotka näyttävät edelleen LTR-suuntaa, koska niitä ei ohjata loogisilla CSS-ominaisuuksilla. Tästä syystä määrittelemme navigaatiokomponentit suunnittelujärjestelmässämme kokonaan inset-inline-start/end-avulla, jotta ne vaihtavat automaattisesti LTR:n ja RTL:n välillä. Käytännön esimerkki: Leivänmurupolku (breadcrumb) näyttää RTL-tilassa nykyisen sivun vasemmalla ja etusivun oikealla – erotinpylväiden on muutettava suuntaansa vastaavasti. Käytämme tässä CSS-content-sisältöä upotetuilla nuolilla, jotka käyttävät eri entiteettiä dir-arvon mukaan.
Sekasuunnat: Numerot ja merkit
Numerot, puhelinnumerot, sähköpostiosoitteet ja latinalaiset tuotemerkit säilyttävät LTR-orientaationsa, vaikka ympäröivä teksti olisi RTL. Tämä johtaa niin sanottuihin kaksisuuntaisiin osiin, joissa lukusuunta vaihtuu keskellä lausetta. Unicode-kaksisuuntainen algoritmi (Bidi) käsittelee tällaisia sekatekstejä oletusarvoisesti, mutta on varmistettava, että suunnanvaihto on oikea. Käytä dir-attribuuttia sekaelementin tasolla tai hyödynnä merkkejä kuten LRM (Left-to-Right Mark) ja RLM (Right-to-Left Mark). Esimerkki: Hepreankielisessä lauseessa „Telefon: 01234 56789“ numerosarja on luettava vasemmalta oikealle. Ilman oikeaa merkintää selain saattaa katkaista merkkijonon tai näyttää sen väärin. Lomakkeissa on olennaista, että etiketti on oikealla ja syöte vasemmalla, koska käyttäjä alkaa lukea oikealta. Lähestymistapamme: Jokaiselle teksti elementille, jossa on upotettua latinalaista materiaalia, asetamme RTL-sabluunassa <span dir="ltr">-wrapperin, jossa on lopussa LRM, jotta seuraava RTL-merkki siirtyy oikein loppuun.
Arabiaa ja hepreaa luetaan oikealta vasemmalle – mikä kääntää hiljaiset suunnitteluolettamukset päälaelleen. Käytännön raportti suunnittelujärjestelmästämme.
Symbolit: Suuntariippuvaisia vai loogisia?
Kuvakkeet ja piktogrammit sisältävät usein implisiittisiä suuntia: Eteenpäin-nuolet osoittavat oikealle, taaksepäin-nuolet vasemmalle. Nämä on peilattava RTL-käyttöliittymissä, muuten navigointi tuntuu epäintuitiiviselta. Kaikki kuvakkeet eivät kuitenkaan ole suuntariippuvaisia: Toistokolmio (play-kolmio) pysyy aina samana (koska se edustaa fyysistä toimintaa), samoin sähköposti- tai puhelinkuvake. Nyrkkisääntö: Looginen suunta (aikajärjestys, lukusuunta, navigointisuunta) on peilattava; fyysinen tai symbolinen merkitys ei. Kehityksessä käytämme CSS-muunnoksia kuvakkeille: scaleX(-1) kaikille suuntaloogisille SVG-tiedostoille, joita ohjataan luokalla [dir=rtl] .icon--directional. Näin vältämme tuplamateriaalit. Huom: Karusellinuolet, jotka osoittavat oikealle, on näytettävä RTL-tilassa vasemmalle, koska "seuraava" sivu on nyt vasemmalla. Sama koskee edistymispalkkeja: edistymisen tulisi kasvaa oikealta vasemmalle. Suunnittelujärjestelmässämme tällaiset komponentit on toteutettu loogisilla ominaisuuksilla (inline-size width-sijasta), jotta täyttöaste sitoutuu automaattisesti edistymispalkin alkuun.
Kuvat: Mitä peilata, mitä uudelleen piirtää?
Grafiikka ja kuvitukset sisältävät usein kulttuurisia tai suunnasta riippuvia symboleja: kelloja, jotka liikkuvat myötäpäivään (RTL-kontekstissa peilattu vaikuttaa normaalilta), kätteleviä käsiä, aikajanat. Kaikkia kuvia ei tarvitse peilata kokonaan – peilattu kellon viisarin liike saattaisi tuntua virheelliseltä, koska fysikaalinen todellisuus säilyy. Mutta vasemmalta oikealle kulkevan aikajanan tulisi RTL-kontekstissa kulkea oikealta vasemmalle. Logot ja brändikuvat pysyvät yleensä muuttumattomina, koska ne noudattavat vakiintunutta ilmettä. Haasteena on toimittaa oikeat kuvat automaattisesti. Tallenamme jokaiselle grafiikalle RTL-vastineen erillisenä resurssina tai käytämme CSS-muunnoksia yksinkertaisissa tapauksissa. Monimutkaisissa skenaarioissa (esim. infografiikat tekstillä) tarvitaan manuaalista uudelleensuunnittelua. Työnkulkumme: Graafinen suunnittelija merkitsee CMS:ssä jokaisen kuvan joko "suunnasta riippumattomaksi", "peilattavaksi" tai "yksilölliseksi". Toimitus tapahtuu ehdon perusteella, joka lukee yläelementin dir-attribuutin. Esimerkki: Kuva kirjahyllystä, jossa on latinalaisella kirjoituksella varustettuja kirjoja, pitäisi peilata, jotta kirjanselkämykset näkyvät oikealla – tämä saattaa aluksi yllättää, mutta on johdonmukaista.
SEO ja hreflang: RTL-spesifinen merkintä
Hakukoneille oikea kieli- ja suuntamerkintä on välttämätöntä. Kieliattribuutin (lang) lisäksi dir-attribuutin on oltava asetettuna jokaisella sivulla, jotta selain ja hakukone tulkitsevat lukusuunnan oikein. Monikielisillä RTL-sivuilla hreflang-merkintä on erityisen kriittinen: arabiankielisen sivun (ar) tulee viitata oikein saksankielisiin tai englanninkielisiin vastineisiinsa. Virheelliset hreflang-merkinnät johtavat vääriin indeksointeihin, koska Google ei johda lukusuuntaa automaattisesti. Lisäksi tulisi harkita erillisiä sivukarttoja LTR- ja RTL-versioille signaalien vahvistamiseksi. Yleinen virhe on käyttää yleisiä tunnisteita ottamatta huomioon kirjoitussuuntaa. Käytämme dynaamista hreflang-generointia, joka johtaa kieli- ja aluetunnukset kielitietokannasta. Arabialaisten murteiden kohdalla alueellinen erottelu on tarpeen, koska kuluttajilla ja algoritmeilla on erilaisia odotuksia. Lisäksi käytämme canonical-tagia välttääksemme epäjohdonmukaisuuksia peilatun ja peilaamattoman sisällön välillä. Työnkulkumme tarkistaa automaattisesti, onko dir-attribuutti HTML-otsikossa yhdenmukainen hreflang-tietojen kanssa. Arabialainen teksti ilman dir="rtl" -attribuuttia voi näkyä selaimissa väärin, mikä puolestaan lisää poistumisprosenttia. SEO-suorituskykyyn vaikuttaa siis paitsi tekstit, myös lukusuunnan oikea merkintä.
Esteettömyys: RTL-haasteet avustaville teknologioille
Ruudunlukijoiden ja muiden avustavien teknologioiden tarpeet muuttuvat lukusuunnan mukaan. Ruudunlukijat, kuten JAWS tai VoiceOver, odottavat dir-attribuuttia määrittääkseen oikean luku järjestyksen. Jos tämä tieto puuttuu, ne saattavat lukea monikielistä sisältöä väärässä järjestyksessä. Vaikka ARIA-maamerkit pysyvät samoina, DOM-sijainnin tulisi mieluiten seurata lukusuuntaa: päävalikon tulisi olla lähdekoodissa ennen pääsisältöä – RTL:ssä tämä tarkoittaa oikeaa puolta ensin. Toinen seikka on fokusjärjestys: sarkainindeksien tulee RTL-sivuilla kulkea loogisesti oikealta vasemmalle. Käytä natiiveja HTML-elementtejä, jotka mukauttavat näppäimistönavigoinnin automaattisesti. Kuvien vaihtoehtoisten tekstien tulee olla kielikohtaisia ja kuvastaa kohdekulttuurin näkökulmaa. Esimerkki: Grafiikka, joka esittää kättelyä, tulisi arabiaksi kuvata 'kaksi ristissä olevaa kättä', koska kulttuurinen konnotaatio on erilainen. Suosittelemme suorittamaan esteettömyystarkastuksia sekä LTR- että RTL-näkymässä. Tähän sisältyy kontrastien tarkistus, jotka voivat poiketa RTL-typografiassa. Tiimimme käyttää automaattisia työkaluja yhdistettynä natiivipuhujien manuaalisiin testeihin varmistaakseen, että käyttökokemus on osallistava.
blog.faqT
Täytyykö minun peilata kaikki kuvat, kun luon RTL-versiota?
Ei. Vain kuvat, joilla on selkeä lukusuunta kuten aikajanat, nuolet tai jatkuvat kaaviot, tulisi peilata. Logot, muotokuvat, fyysisiä esineitä (kello, maapallo) sisältävät grafiikat pysyvät muuttumattomina, koska muuten merkitys vääristyy. Päätä tapauskohtaisesti.
Kuinka testaan RTL:n tehokkaimmin kehityksen aikana?
Käytä selaimen kehittäjätyökaluja asettaaksesi dir-attribuutin html-elementissä arvoon "rtl" ja tarkista jokainen komponentti oikean järjestyksen osalta. Laajenna koodikatselmointiprosessiisi omalla RTL-tarkistuksella äidinkielisten puhujien avulla, joka kattaa visuaaliset häiriöt ja virheelliset kaksisuuntaiset tekstivirrat.
