Perus dir-attribuutti
dir-attribuutti arvolla 'rtl' on jokaisen RTL-verkkosuunnittelun perusta. Se asetetaan yleensä <html>- tai <body>-tagille ja vaikuttaa tekstin suuntaukseen, taulukon solujen oletusjärjestykseen sekä CSS-ominaisuuksien, kuten 'text-align', suuntaan. Ilman tätä attribuuttia sisältö pysyy vasemmalle tasattuna, mikä on epäluonnollista RTL-kielille. Lisäksi 'dir' tulee ohittaa säiliötasolla, jos sekaantumia esiintyy. Puuttuva tai väärä dir-attribuutti aiheuttaa vaikeasti luettavia asetteluja, joten se tulisi priorisoida.
Peilattu asettelu ja loogiset CSS-ominaisuudet
Fyysisten ominaisuuksien, kuten 'left' ja 'right', sijaan käytä loogisia CSS-ominaisuuksia, kuten 'margin-inline-start' ja 'padding-inline-end'. Ne mukautuvat automaattisesti kirjoitussuuntaan ja välttävät manuaaliset ylikirjoitukset. Peilattu asettelu tarkoittaa, että navigointipalkki on oikealla ja sisältö alkaa vasemmalla. Loogisilla arvoilla, kuten 'float: inline-start' tai 'text-align: start', saavutat tämän ilman media queries -kyselyitä. Nykyaikaiset CSS Grid ja Flexbox -ominaisuudet, kuten 'justify-content: flex-start', toimivat oikein dir-attribuutin mukaan. Testaa aina oikealla sisällöllä, koska loogisia ominaisuuksia ei tulkita samalla tavalla kaikissa selaimissa.
Numerot ja upotettu latina
RTL-teksteissä numerot ja upotetut latinalaiset kirjaimet säilyvät vasemmalta oikealle -suuntaisina. Tämä aiheuttaa haasteita, koska ne voivat häiritä lukusuuntaa. Käytä 'unicode-bidi'-attribuuttia tai 'direction: ltr' -arvoa tällaisille elementeille varmistaaksesi yhtenäisen esityksen. Päivämäärä- tai numeromuodoissa on suositeltavaa mukauttaa järjestys RTL-kulttuuriin. Huomioi myös lomakkeiden asettelu, jossa numeroiden syöttökenttien tulee pysyä vasemmalle tasattuina. Sekasuunnan huolellinen käsittely estää visuaaliset katkokset ja parantaa luettavuutta.
Fontit ja typografia
Fontin valinta on ratkaisevaa: arabia, persia ja heprea tarvitsevat fontteja, joissa on asianmukainen glyyfituki. Suosittuja vaihtoehtoja ovat 'Noto Naskh Arabic', 'Vazir' persialle ja 'Noto Sans Hebrew'. Määritä varafontit, esim. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Varmista riittävät fonttikoot ja rivivälit, koska RTL-fontit ovat usein kapeampia tai monimutkaisempia. Vältä kursiivia, koska sitä ei ole monissa arabialaisissa fonteissa. Testaa esitys eri laitteilla varmistaaksesi, että fontit latautuvat oikein ja ovat luettavissa.
Ikonit ja peilaus
Suuntaa osoittavat ikonit (esim. nuolet, eteen-/taaksepäin-symbolit) täytyy peilata RTL-asetteluissa. Tämä onnistuu CSS-muunnoksilla, kuten 'transform: scaleX(-1)', tai käyttämällä ikonipaketteja, jotka tukevat RTL:ää automaattisesti (esim. Font Awesome 'dir'-attribuutilla). Suuntariippumattomat ikonit (esim. talo, asetukset) pysyvät ennallaan. Varmista, että peilaus ei vääristä semantiikkaa. Testaa kaikki ikonit RTL-näkymässä, sillä tahattomat peilaukset voivat heikentää käytettävyyttä.
