RTL ja LTR paigutuse võrdlus teksti joondusega

Praktiline juhend

RTL-veebidisaini põhitõed araabia, pärsia ja heebrea keele jaoks

Paremalt vasakule (RTL) kirjasüsteemide, nagu araabia, pärsia ja heebrea, toetamine nõuab spetsiaalseid veebidisaini tehnikaid. See juhend selgitab olulisi põhitõdesid: dir-atribuuti, peegeldatud paigutusi, loogilisi CSS-omadusi, numbrite ja manustatud ladina keele käsitlemist ning õiget fondivalikut ja ikoonide peegeldamist. Eesmärk on luua ühtlane ja kasutajasõbralik kogemus RTL-keelte jaoks.

ar: Araabia RTL kiri
fa: Pärsia RTL paigutus
he: Heebrea RTL tekst

Põhiline dir-atribuut

Dir-atribuut väärtusega 'rtl' on iga RTL-veebidisaini alus. Seda kasutatakse tavaliselt <html>- või <body>-sildil ning see mõjutab teksti joondust, tabeli lahtrite vaikejärjestust ja CSS-omaduste (nt 'text-align') suunda. Ilma selle atribuudita jääb sisu vasakjoondatuks, mis tundub RTL-keelte puhul ebaloomulik. Lisaks peaksite 'dir' üle kirjutama konteineri tasandil, kui esineb segasuundi. Puuduv või vale dir-atribuut põhjustab raskesti loetavaid paigutusi ja seetõttu tuleks see prioriseerida.

Peegeldatud paigutus ja loogilised CSS-omadused

Selle asemel, et kasutada füüsilisi omadusi nagu 'left' ja 'right', kasutage loogilisi CSS-omadusi nagu 'margin-inline-start' ja 'padding-inline-end'. Need kohanduvad automaatselt kirjutussuunaga ja väldivad manuaalseid ülekirjutusi. Peegeldatud paigutus tähendab, et navigatsiooniriba algab paremalt ja sisu vasakult. Loogiliste väärtustega nagu 'float: inline-start' või 'text-align: start' saavutate selle ilma meediapäringuteta. Kaasaegsed CSS Grid ja Flexbox omadused nagu 'justify-content: flex-start' toimivad vastavalt dir-atribuudile õigesti. Testige alati reaalse sisuga, sest loogilisi omadusi ei tõlgenda kõik brauserid ühtemoodi.

CSS loogiliste omaduste näide inline-start ja end'iga

Numbrid ja sisseehitatud ladina kiri

RTL-tekstides jäävad numbrid ja sisseehitatud ladina tähed vasakult paremale joondatuks. See toob kaasa väljakutseid, kuna need võivad lugemissuunda segada. Kasutage selliste elementide jaoks atribuuti 'unicode-bidi' või 'direction: ltr', et tagada ühtlane kuvamine. Kuupäeva- või numbri formaatide puhul on soovitatav kohandada järjekord RTL-kultuuriga. Pöörake tähelepanu ka vormide paigutusele, kus numbri sisestusväljad peaksid jääma vasakjoondatuks. Selle segasuuna hoolikas käsitlemine väldib visuaalseid katkestusi ja parandab loetavust.

Fondid ja tüpograafia

Fondi valik on otsustav: araabia, pärsia ja heebrea keel vajavad vastava glüfitoega fonte. Populaarsed valikud on 'Noto Naskh Arabic', 'Vazir' pärsia keele jaoks ja 'Noto Sans Hebrew'. Määrake varufondid, nt 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Pöörake tähelepanu piisavale fondi suurusele ja reavahele, kuna RTL-fondid on sageli kitsamad või keerukamad. Vältige kursiivi, kuna seda paljudes araabia kirjades ei eksisteeri. Testige kuvamist erinevates seadmetes, et veenduda fontide õiges laadimises ja loetavuses.

Ikoonid ja peegeldamine

Ikoonid, mis näitavad suunda (nt nooled, edasi-/tagasi sümbolid), tuleb RTL-paigutustes peegeldada. Seda saab teha CSS-teisendustega nagu 'transform: scaleX(-1)' või kasutades ikoonikomplekte, mis toetavad RTL-i automaatselt (nt Font Awesome koos 'dir'-atribuudiga). Ilma suunata ikoonid (nt maja, seaded) jäävad muutmata. Veenduge, et peegeldus ei moonutaks semantikat. Testige kõiki ikoone RTL-vaates, kuna tahtmatud peegeldused võivad kasutatavust halvendada.

Kontrollnimekiri turule sisenemiseks

Määrake html-elemendil dir='rtl'.
Kasutage loogilisi CSS-omadusi füüsiliste asemel.
Käsitlege numbreid ja segatud suundi 'direction' abil.
Valige fondid, millel on ulatuslik glüüfitugi.
Peegeldage suunaga seotud ikoone scaleX abil.
Testige paigutust reaalse sisuga kõigis sihtkeeltes.

Ikoonide peegeldamine RTL-paigutuses nooltega

Korduma kippuvad küsimused

Miks ei piisa ainult dir='rtl' määramisest?

dir-atribuut määrab põhisuuna, kuid CSS-omadused nagu 'margin-left' jäävad vasakule. Ilma loogiliste omadusteta peate paljusid väärtusi käsitsi üle kirjutama, mis on vigadele kalduv ja halvendab hooldatavust.

Kuidas käsitleda numbreid RTL-paigutustes?

Numbrid on RTL-kontekstides vaikimisi LTR. Kasutage ülemisel elemendil 'unicode-bidi: embed' või määrake numbripiirkondadele 'direction: ltr', et tagada õige joondus.

Kas kõik ikoonid tuleb peegeldada?

Ei, peegeldada tuleb ainult kaudse suunaga ikoone, nagu nooled. Sümbolid nagu maja või hammasratas jäävad muutmata. Peegeldage ainult ikoone, mis kujutavad liikumis- või lugemissuunda.

Valmis selleks turuks?

Me lokaliseerime teie veebisaiti keeleliselt, tehniliselt ja kultuuriliselt – emakeelekontrolli ja fikseeritud hinnaga. Tellige mittesiduv pakkumine.

Taotle sidumata pakkumist