Alapvető dir-attribútum
A 'rtl' értékű dir-attribútum az alapja minden RTL webdesignnak. Leggyakrabban a <html> vagy <body> elemre kerül, és befolyásolja a szöveg igazítását, a táblázat cellák alapértelmezett sorrendjét, valamint a CSS tulajdonságok (pl. 'text-align') irányát. Ezen attribútum nélkül a tartalom balra igazodik, ami természetellenes az RTL nyelvek számára. Emellett érdemes a 'dir' értékét felülírni konténer szinten, ha vegyes irányok fordulnak elő. A hiányzó vagy hibás dir-attribútum nehezen olvasható elrendezésekhez vezet, ezért priorizálni kell.
Tükrözött elrendezés és logikai CSS-tulajdonságok
A fizikai tulajdonságok, mint a 'left' és 'right' helyett használjon logikai CSS-tulajdonságokat, például 'margin-inline-start' és 'padding-inline-end'. Ezek automatikusan alkalmazkodnak az írásirányhoz, és elkerülik a kézi felülírásokat. A tükrözött elrendezés azt jelenti, hogy a navigációs sáv jobbra, a tartalom pedig balra kerül. Logikai értékekkel, mint a 'float: inline-start' vagy 'text-align: start', ezt médialekérdezések nélkül is elérheti. A modern CSS Grid és Flexbox tulajdonságok, mint a 'justify-content: flex-start', a dir attribútumnak megfelelően működnek. Mindig tesztelje valós tartalommal, mivel a logikai tulajdonságok nem minden böngészőben értelmeződnek azonos módon.
Számok és beágyazott latin betűk
Az RTL szövegekben a számok és a beágyazott latin betűk balról jobbra igazodnak. Ez kihívást jelenthet, mivel megzavarhatják az olvasási irányt. Használja az 'unicode-bidi' attribútumot vagy a 'direction: ltr' értéket az ilyen elemeknél a konzisztens megjelenítés érdekében. Dátum- és számformátumok esetén érdemes a sorrendet az RTL kultúrához igazítani. Ügyeljen az űrlapok elrendezésére is, ahol a számok beviteli mezői maradjanak balra igazítva. A kevert irány gondos kezelése megelőzi a vizuális töréseket és javítja az olvashatóságot.
Betűtípusok és tipográfia
A betűtípus kiválasztása kritikus: az arab, perzsa és héber nyelvekhez megfelelő glifákkal rendelkező betűtípusok szükségesek. Népszerű lehetőségek a 'Noto Naskh Arabic', a 'Vazir' perzsához és a 'Noto Sans Hebrew'. Határozzon meg tartalék betűtípusokat, pl. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Ügyeljen a megfelelő betűméretre és sorközre, mivel az RTL betűtípusok gyakran keskenyebbek vagy összetettebbek. Kerülje a dőlt betűt, mivel az sok arab betűtípusban nem létezik. Tesztelje a megjelenítést különböző eszközökön, hogy a betűtípusok helyesen töltődjenek be és olvashatóak legyenek.
Ikonok és tükrözés
Az irányt jelző ikonokat (pl. nyilak, előre/hátra szimbólumok) az RTL elrendezésekben tükrözni kell. Ezt CSS transzformációkkal, például 'transform: scaleX(-1)' vagy olyan ikonkészletekkel érheti el, amelyek automatikusan támogatják az RTL-t (pl. Font Awesome a 'dir' attribútummal). Az irányfüggetlen ikonok (pl. ház, beállítások) változatlanok maradnak. Győződjön meg arról, hogy a tükrözés nem torzítja a szemantikát. Tesztelje az összes ikont az RTL nézetben, mert a nem szándékos tükrözések ronthatják a felhasználói élményt.
