Tqabbil tal-layout RTL u LTR b'allinjament tat-test

Gwida Prattika

Bażiċi tal-Webdisinn RTL għall-Għarbi, Persjan u Ebrajk

L-appoġġ għall-kitbiet mil-lemin għax-xellug (RTL) bħall-Għarbi, Persjan u Ebrajk jeħtieġ tekniki speċjali tal-webdisinn. Din il-gwida tispjega l-bażiċi essenzjali: l-attribut dir, layouts immaġġati, proprjetajiet CSS loġiċi, l-immaniġġjar tan-numri u l-Latin inkorporat, kif ukoll l-għażla t-tajba tal-font u l-immaġġar tal-ikoni. L-għan huwa li tinħoloq esperjenza konsistenti u faċli għall-utent għal-lingwi RTL.

ar: Kitba RTL Għarbi
fa: Layout RTL Persjan
he: Test RTL Ebrajk

Attribut dir Bażiku

Il-attribut dir bil-valur 'rtl' huwa l-bażi għal kull webdesign RTL. Normalment jitpoġġa fuq it-tag <html> jew <body> u jaffettwa l-allinjament tat-test, l-ordni standard taċ-ċelloli tat-tabella, u d-direzzjoni tal-proprjetajiet CSS bħal 'text-align'. Mingħajr dan l-attribut, il-kontenut jibqa' allinjat max-xellug, li jidher mhux naturali għal-lingwi RTL. Barra minn hekk, għandek tissostitwixxi 'dir' fuq livell ta' kontenitur meta jkun hemm direzzjonijiet imħallta. Attribut dir nieqes jew żbaljat iwassal għal layouts diffiċli biex jinqraw, u għalhekk għandu jingħata prijorità.

Layout immaġġjat u proprjetajiet CSS loġiċi

Minflok proprjetajiet fiżiċi bħal 'left' u 'right', uża proprjetajiet CSS loġiċi bħal 'margin-inline-start' u 'padding-inline-end'. Dawn jadattaw awtomatikament għad-direzzjoni tal-kitba u jevitaw iskrivan manwali. Layout immaġġjat ifisser li l-bar tan-navigazzjoni tibda fuq il-lemin u l-kontent fuq ix-xellug. B'valuri loġiċi bħal 'float: inline-start' jew 'text-align: start' inti tikseb dan mingħajr media queries. Proprjetajiet moderni tal-CSS Grid u Flexbox bħal 'justify-content: flex-start' jaħdmu b'mod korrett skont l-attribut dir. Dejjem ittestja b'kontenut reali, għax il-proprjetajiet loġiċi mhumiex interpretati bl-istess mod mill-browsers kollha.

Eżempju ta' proprjetajiet loġiċi CSS b'inline-start u end

Numri u Latin inkorporat

F'testi RTL, in-numri u l-ittri Latini inkorporati jibqgħu allinjati mix-xellug għal-lemin. Dan joħloq sfidi għax jistgħu jfixklu d-direzzjoni tal-qari. Uża l-attribut 'unicode-bidi' jew 'direction: ltr' għal dawn l-elementi biex tiżgura rappreżentazzjoni konsistenti. Għall-formati tad-data jew tan-numri, huwa rakkomandabbli li tadatta l-ordni għall-kultura RTL. Oqgħod attent ukoll għall-layout tal-formoli, fejn il-kaxxi tal-input għan-numri għandhom jibqgħu allinjati max-xellug. Trattament bir-reqqa ta' din it-taħlita ta' direzzjonijiet jipprevjeni qtugħ viżwali u jtejjeb il-leġibilità.

Fonts u Tipografija

L-għażla tal-font hija kruċjali: Għarbi, Persjan u Ebrajk jeħtieġu fonts b'appoġġ għall-glifi korrispondenti. Għażliet popolari huma 'Noto Naskh Arabic', 'Vazir' għall-Persjan u 'Noto Sans Hebrew'. Iddefinixxi fallbacks, eż. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Kun żgur li d-daqs tal-font u l-ispazjar tal-linji huma biżżejjed, għax il-fonts RTL spiss ikunu idjaq jew aktar kumplessi. Evita korsiv, għax ma jeżistix f'ħafna skripts Għarbi. Ittestja d-dehra fuq apparati differenti biex tiżgura li l-fonts jitgħabbew b'mod korrett u jinqraw.

Ikon u Immaġġjar

Ikon li jindikaw direzzjoni (eż. vleġeġ, simboli 'il quddiem/lura) għandhom jiġu mmaġġjati f'layouts RTL. Dan jinkiseb b'trasformazzjonijiet CSS bħal 'transform: scaleX(-1)' jew billi tuża settijiet ta' ikoni li jappoġġjaw RTL awtomatikament (eż. Font Awesome bl-attribut 'dir'). Simboli mingħajr referenza għad-direzzjoni (eż. dar, settings) jibqgħu mhux mibdula. Kun żgur li l-immaġġjar ma jbiddilx is-semantika. Ittestja l-ikoni kollha fil-veduta RTL, għax immaġġjar mhux intenzjonat jista' jaffettwa l-użabilità.

Lista ta' kontroll għad-dħul fis-suq

Poġġi dir='rtl' fuq l-element html.
Uża proprjetajiet CSS loġiċi minflok fiżiċi.
Immaniġġja n-numri u d-direzzjonijiet imħallta permezz ta' 'direction'.
Agħżel fonts b'appoġġ komprensiv għall-glifi.
Irrifletti l-ikoni relatati mad-direzzjoni billi tuża scaleX.
Itestja l-layout b'kontenut veru fil-lingwi kollha fil-mira.

Riflessjoni tal-ikoni f'layout RTL b'vleġeġ

Mistoqsijiet Frekwenti

Għaliex mhuwiex biżżejjed dir='rtl' waħdu?

L-attribut dir jistabbilixxi d-direzzjoni bażi, iżda proprjetajiet CSS bħal 'margin-left' jibqgħu xellug. Mingħajr proprjetajiet loġiċi, trid timmodifika ħafna valuri manwalment, li huwa suxxettibbli għal żbalji u jnaqqas il-manutenibbiltà.

Kif nittratta n-numri f'disinni RTL?

In-numri f'kuntesti RTL huma LTR b'mod awtomatiku. Uża fuq l-element ġenitur 'unicode-bidi: embed' jew issettja għal firxiet ta' numri 'direction: ltr' biex tiżgura allinjament korrett.

Għandhom jiġu mifhuma l-ikoni kollha?

Le, biss ikoni b'direzzjoni impliċita bħal vleġeġ għandhom jiġu mifhuma. Simboli bħal dar jew ger jibqgħu mhux mibdula. Ibdel biss ikoni li jirrappreżentaw direzzjoni ta' moviment jew qari.

Lest għal dan is-suq?

Aħna nillokalizzaw is-sit web tiegħek lingwistikament, teknikament u kulturalment – bi verifika minn kelliema nattivi u prezz fiss. Talba għal offerta mingħajr impenn.

Itlob offerta mhux vinkolanti