RTL ir LTR maketų palyginimas su teksto išlygiavimu

Praktinis vadovas

RTL žiniatinklio dizaino pagrindai arabų, persų ir hebrajų kalboms

Palaikant dešinės į kairę (RTL) rašto sistemas, tokias kaip arabų, persų ir hebrajų, reikalingi specialūs žiniatinklio dizaino metodai. Šiame vadove paaiškinami pagrindiniai principai: dir atributas, veidrodiniai maketai, loginės CSS savybės, darbas su skaičiais ir įterpta lotynų kalba, taip pat tinkamas šriftų pasirinkimas ir piktogramų veidrodinis atspindėjimas. Tikslas – sukurti nuoseklią ir patogią naudoti patirtį RTL kalboms.

ar: Arabų RTL raštas
fa: Persų RTL išdėstymas
he: Hebrajų RTL tekstas

Pagrindinis dir atributas

dir atributas su reikšme 'rtl' yra kiekvieno RTL žiniatinklio dizaino pagrindas. Paprastai jis nustatomas ant <html> arba <body> žymos ir veikia teksto lygiavimą, numatytąją lentelių langelių tvarką bei CSS savybių, tokių kaip 'text-align', kryptį. Be šio atributo turinys lieka lygiuotas į kairę, o tai RTL kalboms atrodo nenatūraliai. Be to, kai pasitaiko mišrių krypčių, 'dir' reikėtų perrašyti konteinerio lygmeniu. Trūkstamas arba neteisingas dir atributas sukelia sunkiai skaitomus maketus, todėl į jį reikėtų atsižvelgti pirmiausia.

Veidrodinis išdėstymas ir loginės CSS savybės

Vietoj fizinių savybių, tokių kaip 'left' ir 'right', naudokite logines CSS savybes, pvz., 'margin-inline-start' ir 'padding-inline-end'. Jos automatiškai prisitaiko prie rašymo krypties ir išvengia rankinių perrašymų. Veidrodinis išdėstymas reiškia, kad naršymo juosta yra dešinėje, o turinys prasideda kairėje. Naudodami logines reikšmes, tokias kaip 'float: inline-start' arba 'text-align: start', tai pasieksite be medijos užklausų. Šiuolaikinės CSS tinklelio ir Flexbox savybės, pvz., 'justify-content: flex-start', veikia teisingai pagal dir atributą. Visada išbandykite su tikru turiniu, nes loginės savybės nėra vienodai interpretuojamos visose naršyklėse.

CSS loginių savybių pavyzdys su inline-start ir end

Skaičiai ir įterptinė lotynų kalba

RTL tekstuose skaičiai ir įterptinės lotyniškos raidės išlieka išlygiuotos iš kairės į dešinę. Tai kelia iššūkių, nes gali trikdyti skaitymo kryptį. Naudokite 'unicode-bidi' atributą arba 'direction: ltr' tokiems elementams, kad užtikrintumėte nuoseklų atvaizdavimą. Datų ar skaičių formatuose patartina pritaikyti tvarką pagal RTL kultūrą. Taip pat atkreipkite dėmesį į formų išdėstymą, kur skaičių įvesties laukai turėtų likti kairėje pusėje. Kruopštus šios mišrios krypties tvarkymas užkerta kelią vizualiniams trūkiams ir pagerina skaitomumą.

Šriftai ir tipografija

Šrifto pasirinkimas yra esminis: arabų, persų ir hebrajų kalboms reikia šriftų su atitinkamu glifų palaikymu. Populiarios parinktys yra 'Noto Naskh Arabic', 'Vazir' persų kalbai ir 'Noto Sans Hebrew'. Nustatykite atsarginius variantus, pvz., 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Atkreipkite dėmesį į pakankamus šrifto dydžius ir eilučių tarpus, nes RTL šriftai dažnai yra siauresni ar sudėtingesni. Venkite kursyvo, nes daugelyje arabiškų šriftų jis neegzistuoja. Išbandykite atvaizdavimą skirtinguose įrenginiuose, kad įsitikintumėte, jog šriftai tinkamai įkeliami ir yra įskaitomi.

Piktogramos ir veidrodinis atspindys

Piktogramos, rodančios kryptį (pvz., rodyklės, pirmyn/atgal simboliai), RTL maketuose turi būti veidrodiniu būdu atspindėtos. Tai pasiekite naudodami CSS transformacijas, tokias kaip 'transform: scaleX(-1)', arba naudodami piktogramų rinkinius, kurie automatiškai palaiko RTL (pvz., Font Awesome su 'dir' atributu). Krypties neturinčios piktogramos (pvz., namas, nustatymai) lieka nepakeistos. Įsitikinkite, kad veidrodinis atspindys neiškreipia semantikos. Išbandykite visas piktogramas RTL rodinyje, nes netyčiniai atspindžiai gali pabloginti naudotojo patirtį.

Įėjimo į rinką kontrolinis sąrašas

Nustatykite dir='rtl' html elementui.
Naudokite logines CSS savybes vietoj fizinių.
Tvarkykite skaičius ir mišrias kryptis naudodami 'direction'.
Rinkitės šriftus su išsamia glifų palaikymu.
Veidrodyje atspindėkite krypties piktogramas naudodami scaleX.
Išbandykite išdėstymą su tikrais turiniais visose tikslinėse kalbose.

Piktogramų veidrodinis atspindys RTL makete su rodyklėmis

Dažniausiai užduodami klausimai

Kodėl vien dir='rtl' nėra pakankamas?

Dir atributas nustato bazinę kryptį, tačiau CSS savybės, pvz., 'margin-left', lieka kairėje. Be loginių savybių turėsite rankiniu būdu perrašyti daug reikšmių, o tai yra linkę į klaidas ir mažina priežiūros galimybes.

Kaip tvarkyti skaičius RTL maketuose?

Skaičiai RTL kontekstuose pagal nutylėjimą yra LTR. Naudokite ant pagrindinio elemento 'unicode-bidi: embed' arba nustatykite skaičių sritims 'direction: ltr', kad užtikrintumėte teisingą išlygiavimą.

Ar visos piktogramos turi būti veidrodinės?

Ne, tik piktogramos su numanoma kryptimi, pvz., rodyklės, turi būti veidrodinės. Simboliai, tokie kaip namas ar krumpliaratis, lieka nepakeisti. Veidrodykite tik piktogramas, vaizduojančias judėjimo ar skaitymo kryptį.

Pasiruošę šiai rinkai?

Mes lokalizuojame jūsų svetainę kalbiniu, techniniu ir kultūriniu požiūriu – su gimtakalbių patikrinimu ir fiksuota kaina. Užsakykite neįpareigojantį pasiūlymą.

Prašyti neįpareigojančio pasiūlymo