2026-06-03 · Redazzjoni Baduno · 6 blog.readMin · Blog & Għarfien
Disinn RTL: X'jinbidel meta d-direzzjoni tal-qari tinbidel
L-Għarbi u l-Ebrajk jinqraw mil-lemin għax-xellug – u dan iwaqqa' l-assunzjonijiet moħbija tad-disinn. Rapport prattiku mis-sistema tad-disinn tagħna.
Aktar minn sempliċi mera
L-approċċ naiv – 'sempliċement irrifletti kollox' – malajr ifalli: Numri u ismijiet ta' marki Latini jibqgħu mix-xellug għal-lemin, simboli tal-media player iżommu d-direzzjoni tagħhom, numri tat-telefon jinkisru. Disinn RTL ifisser li tiddeċiedi għal kull element jekk huwiex loġiku (jsegwi d-direzzjoni tal-qari) jew fiżiku (fiss fid-direzzjoni).
CSS: Proprjetajiet loġiċi
Il-loġika moderna tal-CSS tagħmel l-RTL maniġġabbli: margin-inline-start minflok margin-left, inset-inline-end minflok right, text-align:start minflok left. Min jikteb loġikament mill-bidu jikseb it-tieni direzzjoni tal-qari kważi b'xejn – min jaġġorna aktar tard jiġġieled ma' mijiet ta' eċċezzjonijiet. Din il-websajt tuża proprjetajiet loġiċi kullimkien; kull verżjoni RTL toħloq mill-istess stylesheet bħal dik Ġermaniża.
Tipografija u densità
Il-kitba Għarbija m'għandhiex ittri kbar, għandha ascenders/descenders differenti u tidher iżgħar u aktar densa bl-istess daqs tat-tipa. Tipografija tajba RTL teħtieġ fonts speċjalizzati, ħafna drabi grad wieħed jew tnejn akbar u spazjar tar-ringieli aktar ġeneruż. Effetti ta' spazjar bejn l-ittri, popolari fil-Latin, ma jaħdmux ma' kitba mqabbda.
Ittestjar ma' kelliema nattivi
L-ebda awtomatizzazzjoni ma tissostitwixxi l-għajn ta' persuna li tgħix fl-iskrittura: qsim ta' linji f'komposti, numri f'test kontinwu, direzzjonijiet imħallta f'formoli – il-klassijiet ta' żbalji huma sottili. Il-proċess ta' verifika tagħna għalhekk dejjem jinkludi reviżjoni viżiva RTL, mhux biss korrezzjoni ta' test.
Navigazzjoni: Fejn il-loġika tinqaleb
F'ambjenti RTL, l-istrutturi tan-navigazzjoni għandhom jiġu maħsuba mill-ġdid. Bar tal-menu orizzontali jibda lejn il-lemin, l-ewwel punt tal-menu huwa l-aktar 'il fuq xellug – l-ordni tibqa' loġika mil-lemin għax-xellug. Menu dropdown jinfetaħ awtomatikament lejn ix-xellug 'l isfel minflok lejn il-lemin 'l isfel, minħabba li l-punt ta' ankra jinsab fuq in-naħa tal-lemin. Sidebars li fil-LTR huma pożizzjonati fuq ix-xellug, fl-RTL jimxu lejn il-lemin. Attenzjoni speċjali għall-menu tal-hamburger: L-ikona nnifisha (tliet linji orizzontali) hija newtrali għad-direzzjoni, iżda t-tqegħid tagħha (fuq ix-xellug vs fuq il-lemin) għandu jiġi skambjat. Żball komuni huma submenus li għadhom juru direzzjoni LTR għax mhumiex ikkontrollati permezz ta' proprjetajiet CSS loġiċi. Fis-sistema tad-disinn tagħna, għalhekk niddefinixxu komponenti tan-navigazzjoni kompletament b'inset-inline-start/end, sabiex jaqilbu awtomatikament bejn LTR u RTL. Eżempju prattiku: Navigazzjoni breadcrumb fil-modalità RTL turi l-paġna kurrenti fuq ix-xellug u l-paġna prinċipali fuq il-lemin – il-vleġeġ tas-separazzjoni għandhom ukoll ibiddlu d-direzzjoni tagħhom. Aħna nużaw CSS-content b'vleġeġ inkorporati li jimpjegaw entità differenti skont il-valur ta' dir.
Direzzjonijiet imħallta: Numri u simboli
Numri, numri tat-telefon, indirizzi elettroniċi u ismijiet ta' marki Latini jżommu d-direzzjoni LTR tagħhom, anki jekk it-test tal-madwar huwa RTL. Dan iwassal għal sezzjonijiet bidirezzjonali, fejn id-direzzjoni tal-qari tinbidel f'nofs is-sentenza. L-algoritmu tal-Bidirectional Unicode (Bidi) normalment jittratta test imħallat bħal dan, iżda għandek tiżgura li l-bidla fid-direzzjoni tkun korretta. Uża l-attribut dir fuq il-livell tal-element imħallat jew uża karattri bħall-LRM (Left-to-Right Mark) u RLM (Right-to-Left Mark). Eżempju: F'sentenza bl-Ebrajk “Telefon: 01234 56789” is-sekwenza tan-numri trid tinqara mix-xellug għal-lemin. Mingħajr markup korrett, il-browser jista' jkisser il-karattri jew jurihom ħażin. Fil-formoli, huwa essenzjali li t-tikketti jkunu fuq il-lemin u l-inputs fuq ix-xellug, għax l-utent jibda jaqra mil-lemin. L-approċċ tagħna: Għal kull element tat-test b'materjal Latin inkorporat, fil-template RTL inpoġġu wrapper <span dir="ltr"> b'LRM fl-aħħar, sabiex il-karattru RTL li jmiss imur korrettament fit-tarf.
L-Għarbi u l-Ebrajk jinqraw mil-lemin għax-xellug – u dan iwaqqa' l-assunzjonijiet moħbija tad-disinn. Rapport prattiku mis-sistema tad-disinn tagħna.
Simboli: Fissi fid-direzzjoni jew loġiċi?
L-ikoni u l-pittogrammi spiss iġorru direzzjonijiet impliċiti: Vleġeġ 'il quddiem juru lejn il-lemin, vleġeġ lura lejn ix-xellug. Dawn għandhom jiġu mappjati f'interfaċċi RTL, inkella n-navigazzjoni tidher kontraintuwittiva. Madankollu, mhux is-simboli kollha huma dipendenti fuq id-direzzjoni: Trijanglu tal-play jibqa' dejjem l-istess (għax jirrappreżenta azzjoni fiżika), hekk ukoll ikona tal-email jew tat-telefon. Ir-regola bażika: Direzzjoni loġika (kronoloġija, direzzjoni tal-qari, direzzjoni tan-navigazzjoni) trid tiġi mappjata; tifsira fiżika jew simbolika le. Fl-iżvilupp nużaw trasformazzjonijiet CSS għall-ikoni: scaleX(-1) għall-SVGs kollha direzzjonali, ikkontrollati minn klassi [dir=rtl] .icon--directional. B'hekk nevitaw assi doppji. Attenzjoni: Il-vleġeġ tal-karrużell li juru lejn il-lemin, fil-modalità RTL għandhom juru lejn ix-xellug, għax il-paġna "li jmiss" issa tinsab fuq ix-xellug. L-istess jgħodd għall-bars tal-progress: Il-progress għandu jiżdied mil-lemin għax-xellug. Fis-sistema tad-disinn tagħna, komponenti bħal dawn huma implimentati b'proprjetajiet loġiċi (inline-size minflok width), sabiex il-livell ta' mili jorbtu awtomatikament mal-bidu tal-bar tal-progress.
Stampi: Riflessjoni jew Tpinġija Ġdida?
Il-grafiċi u l-illustrazzjonijiet ħafna drabi fihom simboli kulturali jew dipendenti mid-direzzjoni: Arloġġi li jimxu fid-direzzjoni tal-arloġġ (fil-kuntest RTL, riflessjoni tidher normali), presses tal-idejn, linji tal-ħin. Mhux kull stampa trid tiġi riflessa kompletament – moviment ta' l-arloġġ rifless jista' jitqies bħala żbaljat għax ir-realtà fiżika tibqa' l-istess. Iżda linja tal-ħin minn xellug għal lemin fil-kuntest RTL għandha tmur minn lemin għal xellug. Il-logos u l-immaġini tal-marki ġeneralment ma jiġux riflessi, peress li għandhom dehra fissa. L-isfida hija li jitwasslu l-istampi t-tajba awtomatikament. Aħna naħżnu għal kull grafika ekwivalenti RTL bħala assett separat jew nużaw trasformazzjonijiet CSS għal każijiet sempliċi. F'xenarji kumplessi (eż. Infografiċi b' test) hija meħtieġa tfassil mill-ġdid manwali. Il-fluss tax-xogħol tagħna: Id-disinjatur grafiku jimmarka kull stampa bħala 'ħielsa mid-direzzjoni', 'riflessibbli' jew 'individwali' fil-CMS. It-twassil isir permezz ta' kundizzjoni li taqra l-attribut dir ta' l-element ġenitur. Eżempju: Stampa ta' librerija b'kotba b'kitba Latina għandha tiġi riflessa biex id-dahar tal-ktieb jidher fuq il-lemin – dan jista' jkun sorprendenti mal-ewwel daqqa t'għajn, iżda huwa konsistenti.
SEO u hreflang: Tikkettar speċifiku għall-RTL
Għall-magni tat-tiftix, it-tikkettjar korrett tal-lingwa u d-direzzjoni huwa essenzjali. Minbarra l-attribut tal-lingwa (lang), l-attribut dir irid ikun issettjat fuq kull paġna sabiex il-browser u l-magna tat-tiftix jinterpretaw id-direzzjoni tal-qari b'mod korrett. F'paġni RTL multilingwi, it-tikkettjar hreflang huwa partikolarment kritiku: paġna bl-Għarbi (ar) trid tirreferi b'mod korrett għall-kontropartijiet tagħha bil-Ġermaniż jew bl-Ingliż. Daħliet ħżiena ta' hreflang iwasslu għal indiċjar ħażin, peress li Google ma jiddedottix id-direzzjoni tal-qari awtomatikament. Barra minn hekk, għandek tikkunsidra sitemaps separati għall-verżjonijiet LTR u RTL biex issaħħaħ is-sinjali. Żball komuni huwa l-użu ta' tags ġeneriċi mingħajr ma titqies id-direzzjoni tal-kitba. Aħna nużaw ġenerazzjoni dinamika ta' hreflang li tiddedotti kemm il-kodiċi tal-lingwa kif ukoll dawk reġjonali mid-database tal-lingwi. Għad-djaletti Għarab, id-differenzjazzjoni reġjonali hija meħtieġa, peress li l-konsumaturi u l-algoritmi għandhom aspettattivi differenti. Barra minn hekk, nużaw it-tag kanoniku biex nevitaw inkonsistenzi bejn kontenut rifless u mhux rifless. Il-fluss tax-xogħol tagħna jiċċekkja awtomatikament jekk l-attribut dir fil-header HTML huwiex konsistenti mal-indikazzjonijiet hreflang. Għax test bl-Għarbi mingħajr dir="rtl" jista' jintwera ħażin mill-browsers, u b'hekk iżżid ir-rata ta' bounce. Għalhekk, il-prestazzjoni tas-SEO mhix influwenzata biss mit-testi, iżda wkoll mit-tikkettjar korrett tad-direzzjoni tal-qari.
Aċċessibbiltà: Sfidi RTL għal teknoloġiji assistivi
Il-ħtiġijiet tal-screenreaders u teknoloġiji assistivi oħra jinbidlu skont id-direzzjoni tal-qari. Screenreaders bħal JAWS jew VoiceOver jistennew l-attribut dir biex jiddeterminaw l-ordni korretta tal-qari. Jekk din l-indikazzjoni tkun nieqsa, huma jistgħu jaqraw kontenut b'lingwi mħallta fl-ordni ħażina. L-ARIA landmarks jibqgħu l-istess, iżda l-pożizzjoni fid-DOM idealment għandha ssegwi d-direzzjoni tal-qari: Il-menu prinċipali għandu jkun fil-kodiċi sors qabel il-kontenut ewlieni – għal RTL dan ifisser il-lemin l-ewwel. Punt ieħor huma l-ordnijiet tal-fokus: L-indiċijiet tat-tab f'paġni RTL għandhom jimxu loġikament mil-lemin għax-xellug. Uża elementi HTML nattivi li jaġġustaw awtomatikament in-navigazzjoni bit-tastiera. It-testi alternattivi tal-immaġini għandhom ikunu speċifiċi għall-lingwa u jirriflettu l-perspettiva tal-kultura fil-mira. Eżempju: Grafika li turi ħandshake għandha tiġi deskritta bl-Għarbi bħala "żewġ idejn li jaqsmu" minħabba li l-konnotazzjoni kulturali hija differenti. Nirrakkomandaw li jsiru awditi tal-aċċessibbiltà kemm fil-veduta LTR kif ukoll f'dik RTL. Dan jinkludi l-verifika tal-kuntrasti, li jistgħu jkunu differenti taħt it-tipografija RTL. It-tim tagħna juża għodod awtomatizzati flimkien ma' testijiet manwali minn kelliema nattivi biex jiżgura li l-esperjenza tal-utent tkun inklużiva.
blog.faqT
Għandi bżonn nirrifletti l-immaġini kollha meta noħloq verżjoni RTL?
Le. Għandhom jiġu riflessi biss immaġini b'direzzjoni ċara tal-qari bħal linji tal-ħin, vleġeġ, jew dijagrammi konsekuttivi. Logos, ritratti, grafiċi b'oġġetti fiżiċi (arloġġ, globu) jibqgħu mhux mibdula, inkella t-tifsira tiġi mfixkla. Iddeċiedi każ b'każ.
Kif nittestja l-RTL bl-aktar mod effiċjenti fl-iżvilupp?
Uża l-għodod tal-iżviluppatur tal-browser biex issettja l-attribut dir fuq l-element html għal "rtl", u vverifika kull komponent għal arranġament korrett. Estendi l-proċess tal-code review tiegħek b'kontroll RTL dedikat ma' kelliema nattivi, li jkopri irritazzjonijiet viżwali u flussi ta' test bidirezzjonali skorretti.
