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

Gwida Prattika

Bażiċi ta' Disinn Web RTL għall-Għarbi u l-Ebrajk

L-appoġġ għal skritturi mil-lemin għax-xellug (RTL) bħall-Għarbi u l-Ebrajk jeħtieġ tekniki speċjali ta' disinn web. Din il-gwida tispjega l-punti bażiċi essenzjali: l-attribut dir, tqassim rifless, proprjetajiet loġiċi CSS, il-ġestjoni ta' numri u Latin inkorporat, l-għażla korretta tal-font u t-tixħim 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: Tqassim Rifless
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: il-Għarbi u l-Ebrajk jeħtieġu fonts b'appoġġ xieraq ta' glifi. Għażliet popolari huma 'Noto Naskh Arabic' għall-Għarbi u 'Noto Sans Hebrew' għall-Ebrajk. Iddefinixxi fallbacks, eż. 'font-family: "Noto Naskh Arabic", "Tahoma", sans-serif;'. Oqgħod attent għal daqsijiet biżżejjed u spazjar tal-linji, għax l-iskritturi RTL spiss ikunu irqaq jew aktar kumplessi. Evita italiku, peress li f'ħafna skritturi Għarbin mhux eżistenti. Ittestja l-wiri fuq apparati differenti biex tiżgura li l-fonts jitgħabbew sew u jkunu leġġibbli.

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