• Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
IT-Blog.am
Տեղեկատվական տեխնոլոգիաների պորտալ
  • Գլխավոր
  • Լուրեր
    • Առողջապահություն
    • Անվտանգություն
    • Արհեստական Ինտելեկտ
    • Էկոլոգիա
    • Մեքենաշինություն
    • Ռոբոտաշինություն
    • Համացանց
    • Համակարգիչ
    • Սմարթֆոն
    • Սոցցանց
    • Google
    • Microsoft
    • Hi-Tech
  • Վեբ
    • PHP
    • HTML
      • HTML5
    • CSS
      • CSS3
    • JavaScript
      • jQuery
    • WordPress
  • SQL
  • Թեստեր
    • PHP
    • MySQL
    • HTML
    • JavaScript
    • CSS
  • Ֆորում
  • Հետադարձ կապ
Գլխավոր  /  CSS • Web • Օգտակար Գործիքներ  /  rtl և ltr գրելաձևեր
12 Մարտի 2016

rtl և ltr գրելաձևեր

Հեղինակ Մկրտիչ
CSS, Web, Օգտակար Գործիքներ

Բարև Ձեզ, հարգելի՛ ընթերցող։ Այս գրառման մեջ կխոսենք մի թեմայի մասին, որը վերաբերվում է աջից ձախ գրելաձևին։ Ինչպես հավանաբար տեղյակ եք, գոյություն ունեն բազմաթիվ երկրներ և ազգեր, որոնց գրելու ուղղությունը չի համընկնում մերի հետ։ Օրինակ՝ արաբական երկրներում գրքերը կամ փաստաթղթերը գրվում են ոչ թե ձախից աջ, ինչպես մեզ մոտ, այլ հակառակը՝ աջից ձախ։ Եվ հետևաբար այս հանգամանքը չի կարող չանդրադառնալ կայքի արտաքին տեսքի ձևավորման վրա։ Իհարկե, եթե Դուք համոզված եք, որ ձեր կառուցած կայքէջերը չեն ծառայելու այդպիսի երկրների համար, Դուք կարող եք բոլորովին չանհանգստանալ աջից ձախ գրելաձևի համար և հաշվի չառնել դրանց ձևավորումը։ Սակայն, եթե դուք պատրաստվում եք կառուցել այնպիսի պրոյեկտներ, որոնք ունիվերսալ են և պետք է աշխատեն բոլոր տեսակի լեզուների համար, ապա Դուք ուղղակի պարտավոր եք հոգալ նման խնդիրների մասին։ Այստեղ մենք միասին կքննարկենք մի օրինակ, որն ակնհայտորեն կցուցադրի բազմաթիվ խնդիրներ ու անհամապատասխանություններ ձախից աջ գրելաձևից աջից ձախ գրելաձևին անցնելու ժամանակ։ Ինչպես ծրագրավորման մեջ է ընդունված,  ձախից աջ գրելաձևն անվանենք 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 թիմ։

Կապված գրառումներ

  • mysql transaction

    MySQL գործարքի(transaction) կառավարման օպերատորներ

    11/19/2016
  • Class

    Կլասների (classes) գրելաձևը (syntax)

    10/20/2016
  • MySQL Trigger

    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events)

    10/04/2016
Facebook
  • Շատ Դիտված Գրառումներ
  • Նոր գրառումներ
  • Calculator
    Հաշվիչի (calculator) պատրաստում 04/18/2016
  • Recursion
    Ռեկուրսիա (recursion) հասկացությունը 06/02/2016
  • Icon տառատեսակներ 02/21/2016
  • MySQL joins
    MySQL JOINS (MySQL միացումներ) 06/13/2016
  • Սուպերգլոբալ փոփոխականներ (superglobals) 03/24/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • Հետազոտողներն օգտագործում են էլեկտրական հոսանքներ`մարդու հյուսվածքներում քաղցկեղի հայտնաբերման համար 12/18/2017
  • Nvidia ընկերությունը ներկայացրել է երբևէ ստեղծված ամենահզոր գրաֆիկական պրոցեսորը 12/16/2017
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • Class
    Կլասների (classes) գրելաձևը (syntax) 10/20/2016
  • encapsulation
    Ինկապսուլացիա (Encapsulation) 08/17/2016
  • object oriented programming
    Օբյեկտ կողմնորոշված ծրագրավորում (OOP) 07/04/2016
  • Ի՞նչ է Pi Network-ը և ինչպե՞ս վաստակել Pi 03/27/2020
  • Honda-ն ներկայացրել է մոտոցիկլետ, որն օգտագործում է քամու էներգիա 12/23/2017
  • Նոր 3D-տպիչ սարքը ստեղծում է առարկաներ վայրկյանների ընթացքում 12/22/2017
  • mysql transaction
    MySQL գործարքի(transaction) կառավարման օպերատորներ 11/19/2016
  • MySQL Trigger
    MySQL տրիգերներ (Triggers) և իրադարձություններ(Events) 10/04/2016
  • Procedures and Functions
    MySQL ընթացակարգեր (procedures) և ֆունկցիաներ (functions) 08/31/2016
  • MYSQL View
    MySQL ներկայացումներ (VIEWS) 07/16/2016
  • WordPress -ի տեղադրումը .Net -ի վրա 03/16/2017
  • SEO խրվակներ WordPress-ի համար 04/25/2016
  • Ծանոթացում WordPress-ի կառավարակետի հետ (մաս 2) 02/24/2016
  • Ի՞նչ է CMS-ը 02/17/2016
© 2020 թ.  IT-Blog.am Բոլոր հեղինակային իրավունքները պաշտպանված են:

Սույն կայքում տեղադրված նյութերի հեղինակային իրավունքը պատկանում է բացառապես IT-Blog.am կայքի հեղինակներին և կայքում բոլոր հրապարակված նյութերն անհատական օգտագործման համար են։ Այս կայքում  հրապարակված նյութերի (մասնակի կամ ամբողջական) վերահրապարկումը տեղեկատվություն տարածող այլ միջոցներում (բացառությամբ սոցկայքերի) արգելված է։ Խախտում թույլ տված անձինք կենթարկվեն պատասխանատվության` օրենքով սահմանված կարգով։