Բարև Ձեզ, հարգելի՛ ընթերցող։ Այս գրառման մեջ կխոսենք մի թեմայի մասին, որը վերաբերվում է աջից ձախ գրելաձևին։ Ինչպես հավանաբար տեղյակ եք, գոյություն ունեն բազմաթիվ երկրներ և ազգեր, որոնց գրելու ուղղությունը չի համընկնում մերի հետ։ Օրինակ՝ արաբական երկրներում գրքերը կամ փաստաթղթերը գրվում են ոչ թե ձախից աջ, ինչպես մեզ մոտ, այլ հակառակը՝ աջից ձախ։ Եվ հետևաբար այս հանգամանքը չի կարող չանդրադառնալ կայքի արտաքին տեսքի ձևավորման վրա։ Իհարկե, եթե Դուք համոզված եք, որ ձեր կառուցած կայքէջերը չեն ծառայելու այդպիսի երկրների համար, Դուք կարող եք բոլորովին չանհանգստանալ աջից ձախ գրելաձևի համար և հաշվի չառնել դրանց ձևավորումը։ Սակայն, եթե դուք պատրաստվում եք կառուցել այնպիսի պրոյեկտներ, որոնք ունիվերսալ են և պետք է աշխատեն բոլոր տեսակի լեզուների համար, ապա Դուք ուղղակի պարտավոր եք հոգալ նման խնդիրների մասին։ Այստեղ մենք միասին կքննարկենք մի օրինակ, որն ակնհայտորեն կցուցադրի բազմաթիվ խնդիրներ ու անհամապատասխանություններ ձախից աջ գրելաձևից աջից ձախ գրելաձևին անցնելու ժամանակ։ Ինչպես ծրագրավորման մեջ է ընդունված, ձախից աջ գրելաձևն անվանենք ltr (left to right), իսկ աջից ձախը՝ rtl (right to left):
Նախ պարզենք, թե ինչպես է իրականացվում անցումը rtl գրելաձևին։ HTML փաստաթղթի հենց սկզբնամասում՝ html տեգի մեջ գրվում է dir=”rtl” (direction – ուղղություն)
<html dir='rtl' lang='ary'>
արտահայտությունը, որից հետո եկող կոդն արդեն դիտարկչի կողմից ընդունվում է որպես rtl գրելաձև։ Իսկ այդ արտահայտության բացակայության դեպքում դիտարկիչը վերցնում է dir ատրիբուտի լռելյայն արժեքը՝ այսինքն ltr: Պրոյեկտներ կառուցելիս, բնականաբար, մենք ամեն ինչ սկսում ենք մեր լեզվին համապատասխան ltr գրելաձևով, հետո նոր արդեն ուշադրությունը սևեռում ենք rtl գրելաձևի ձևավորման վրա։ Մեր օրինակներում նույնպես մենք կառաջնորդվենք այդ սկզբունքով։ Այսպիսով, ենթադրենք ունենք բլոկի մեջ գտնվող նկար, նրա աջ կողմում մեկ այլ բլոկի մեջ գրված է ինչ-որ տեքստ։ Մկնիկը նկարի վրա պահելիս, ձախ կողմից նկարի վրա է գալիս նրա նկարագրությունը (նկարի մասին ինչ-որ մի արտահայտություն):
Այսքան մասի արդեն պատրաստի տարբերակը կարող եք տեսնել այստեղ։ Հենց այս կոդի վրա էլ միասին կփորձենք իրականացնել rtl ձևավորումը։ Նախ ասեմ, որ rtl գրելաձևը պահանջում է, որ այն լինի ltr-ի հայելային արտապատկերումը։ Իսկ վերջինս ստանալու համար մենք պետք է մեր ունեցած CSS կոդին ավելացնենք միայն rtl գրելաձևին վերաբերվող կոդ։ Այսինքն՝ կոդի այն մասը, որի արդյունքը երկու դեպքում էլ պետք է լինի նույնը, կաշխատի երկու դեպքում էլ և կիրականացնի իրեն հասանելիք գործը։ Իսկ փոփոխվող մասի համար կգրենք առանձին կոդ։ Այստեղից սկսած արդեն բոլոր կոդերի սկզբից կգրենք html[dir=’rtl’] (օրնակ՝ html[dir=’rtl’] .image) արտահայտությունը, որը կվերաբերվի միայն այն էլեմենտներին, որոնք գտնվում են rtl արժեքով dir ատրիբուտ ունեցող html-ի մեջ։ Մինչև CSS-ի մեջ ինչ-որ բան ավելացնելը, html տեգի մեջ ավելացնենք dir=’rtl’ արտահայտությունը։ Ինչպես արդեն ասացի, հենց սա է ավելանում աջից ձախ գրելաձև ունեցող երկրների կայքէջերի կոդի մեջ։ Այժմ անցնենք CSS մասին։
Եկեք միասին որոշենք, թե ինչ է պետք մեր այս օրինակի մեջ ստացած արդյունքը հայելային ձևով պտտելու համար։ Ակնհայտ է, որ հենց սկզբում մեզ անհրաժեշտ է նկարի բլոկը տանել աջ, իսկ տեքստը բերել ձախ կողմ։ Դրա համար բավական է այդ բլոկներին տալ դեպի աջ հոսք (float: right).
html[dir='rtl'] .image{
float: right;
}
Սակայն մենք տեսնում ենք, որ տեքստը դեռևս հավասարված է ձախ կողմից, ինչը նույնպես ենթակա է փոփոխության․
html[dir='rtl'] .text p {
text-align: right;
}
Տեքստի և նկարի միջև պետք է լինի որոշակի տարածություն, իսկ նկարի մյուս եզրի հեռավորությունը դիտարկչի եզրից պետք է լինի ավելի փոքր․
html[dir='rtl'] .image{
margin-left: 20px;
margin-right: 0;
}
Արդեն նման է հայելային արտապատկերման։ Սակայն մենք դեռ չենք փոխել նկարի կողքից դուրս եկող նկարագրությունը։ Ըստ հայելային արտապատկերման սկզբունքի՝ նկարագրության բլոկը պետք է նկարի վրա գա արդեն աջ կողմից։ Տրամաբանական կլինի, որ այն տանենք նկարի աջ կողմը․
html[dir='rtl'] .img-desc{
left: auto;
right: -30%;
}
html[dir='rtl'] .image:hover .img-desc {
left: auto;
right: 0;
}
Եվ այսպես, մենք ունեցանք ճիշտ հայելային արտապատկերումը, որն էլ հենց պահանջվում էր մեզանից։
Այս ամենը մենք կարող ենք ստանալ նաև հատուկ սերվիսների միջոցով, որոնց օգտագործումը շատ նպատակահարմար է մեծ պրոյեկտների դեպքում։ Այդպիսի սերվիսների աշխատանքի սկզբունքը կայանում է նրանում, որ դրանք Ձեր կոդի մեջ ինքնուրույն փոխում են կոդի այն հատվածը, որն իրականացնում է rtl ձևավորումը։ Ձեզ կներկայացնեմ մի այդպիսի սերվիս, որից ես նույնպես օգտվում եմ բավականին հաճախ։ Դա www.rtl-er.com կայքն է, որն ստանում է CSS կոդը և վերադարձնում ամբողջ կոդի միայն փոփոխված մասը։ Սակայն այս և մնացած այլ նմանատիպ սերվիսներից օգտվելուց մենք, այնուամենայնիվ, պետք է ինքներս նույնպես ստուգենք նրա վերադարձրած կոդը՝ ավելի վստահ լինելու համար։ Այնուհետև ավելացնենք մեզ արդեն ծանոթ html[dir=’rtl’] նախածանցը և տեղադրենք մեր կոդի մեջ։
Ահա հենց այսպես են իրականացվում պրոյեկտների արտաքին ձևավորման համապատասխանեցումները rtl գրելաձին։
Հույս ունեմ՝ այս գրառումը Ձեզ կօգնի՝ Ձեր պրոյեկտների կառուցման հարցում։ Իսկ եթե այս թեմայից Ձեզ մոտ կառաջանան հարցեր, կամ Ձեր պրոյեկտները rtl գրելաձևին համապատասխանեցման ժամանակ կունենաք խնդիրներ, ապա կարող եք գրել մեզ մեկնաբանությունների բաժնում։
Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով՝ IT-Blog.am թիմ։
