Պահպանեք ուղղահայաց ռիթմը CSS- ի և jQuery- ի միջոցով

Բովանդակություն

• Հատակի դասավորում
• Ուղղահայաց ռիթմ
• Ռիթմի անցկացում
• Պատկերների հետ գործ ունենալը
• JQuery- ի կատարելագործում
• Եզրակացություն

• Գիտելիք է պետքCSS, հիմնական jQuery
• Պահանջում էjQuery, CSS, HTML
• Րագրի ժամանակը: 30 րոպե
• Ներբեռնեք աղբյուրի ֆայլերը

Ենթադրելով, որ դուք նախագծում եք բովանդակությունից դուրս, ձեր որոշումն իրականացնելու առաջին որոշումը ունի լինել տիպի հետ կապված: Նույնիսկ կողմից ոչ ընտրելով տառատեսակ, դուք ինչ-որ բան եք արել, որը ազդում է ձեր կայքի վրա: Տիպը հիմնականն է տպագրության և վեբ ձևավորման համար, և բարդ է. կան շատ կուտակված պայմաններ, պրակտիկա, կանոններ և տեխնիկա, որոնք անցնում են դրա լավ օգտագործման: Այս հոդվածը վերաբերում է տիպի մեկ ասպեկտի կառավարման մեկ տեխնիկային, որը դժվար է կատարել առցանց, բայց տպագիր առօրյան է. Պահպանել կայուն ուղղահայաց ռիթմը, որն իր հերթին թույլ է տալիս հասնել պրոֆեսիոնալ դասավորության:

Հատակի դասավորում

Տպագրության մեջ, զգալի քանակությամբ տեքստ ունեցող ցանկացած իրի համար, դիզայնի հիմքը, ամենայն հավանականությամբ, կլինի ելակետային ցանց: Այն օգտագործվում է էջը կառուցվածք բերելու և բովանդակության ուղղահայաց հոսքը ուղղորդելու համար: Գրեթե ամեն ինչ դրված է այդ ելակետային ցանցի նկատմամբ: Մի անհանգստացեք, եթե պայմանները չճանաչեք, ոչ ոք ծանոթ չէ բազային գծերի կամ ելակետային ցանցերի հետ. դուք արդեն գիտեք նրանց մասին: Մտածեք վերադառնալ դպրոց, երբ անկասկած գրել եք շարված թղթի վրա. Գրելիս ձեր նամակների ներքևը կոկիկորեն դրեցիք թղթի վրա դրված տողերից յուրաքանչյուրի վրա: Գործողությունների բազային և ելակետային ցանցը: Ելակետային պատկերը մի երեւակայական գիծ է, որի վրա հավասարվում են տառերի ստորին մասը:Եթե ​​հիմա նայեք այս հոդվածին, դուք «կտեսնեք» ելակետային բազա, չնայած տող իրականում չկա: Ձեր ուղեղը մեկը դնում է այնտեղ ձեզ համար, այդ պատճառով կարող եք նախադասություններ կարդալ: Տողերը շարված շարված թղթի վրա: Դրանք բազային ցանց են: Ուղղակի, որպեսզի ձեր նախադասություններն ուղիղ լինեն և սահմանվեն պարբերական պարբերականությամբ, որպեսզի ձեր տեքստը ունենա կանոնավոր ուղղահայաց ռիթմ:

Ուղղահայաց ռիթմ

Ուղղահայաց ռիթմը թելադրում է, թե որտեղ է գտնվում էջի տեքստը: Դա մի բաղադրիչ է, որն ազդում է տեքստի բլոկները սկանելու և կարդալու մեր ունակության վրա, և այն օգնում է տեղեկացնել մեր հուզական պատասխանները: Երբ տեքստը ունի ուժեղ ուղղահայաց ռիթմ և լավ հեռավորություն, մենք զգում ենք, որ այն արհեստավարժ է, համարվող, հեղինակավոր և հարմարավետ ընթերցելու համար: Երբ տեքստը վատ ռիթմ և տարածություն ունի, մենք զգում ենք, որ այն պակաս դիտարկված է, պակաս պրոֆեսիոնալ և հաճախ ավելի դժվար է ընթերցվում: Ուղղահայաց ռիթմը օգտագործման մի մասի և գեղագիտության մի մասի մասին է:

Ռիթմի անցկացում

Դժբախտաբար, ոստայնը տպագրության աղքատ զարմիկն է տեսակին վերաբերող որոշ հիմնարար պրակտիկաներ կիրառելու ունակության տեսանկյունից: Webանցում մենք չենք կարող օգտագործել բազային բազա այնպես, ինչպես տպագիր դիզայները (կամ երեխան դպրոցում) օգտագործում է. Մենք չենք կարող տեքստի հիմնական ելքը հավասարեցնել փաստաթղթի բազային ցանցին: CSS- ը չունի ելակետային ցանցի գաղափարը: Այսպիսով, մեր տեքստը չի նստելու հենց ելակետային ցանցի տողերի վրա: Փոխարենը, այն կենտրոնացված կլինի ուղղահայաց գծերի միջև եղած բացի մեջ: Դա ամենալավն է, ինչ կարող է անել համացանցը:

Եկեք գործնական դառնանք օրինակելի փաստաթղթով: Նախ, մենք կսահմանենք ռիթմը ՝ տեսանելի ելակետային ցանց պատրաստելով: Դա անելու համար մենք կօգտագործենք կրկնվող ֆոնային նկար `22 հորիզոնական հեռավորության վրա կանոնավոր հորիզոնական գծեր գծելու համար.

1. html {background: #fff url (baseline_22.png); }

Ուրայ, մենք ունենք մեր շարված թուղթը:

Դուք կնշեք, որ ոչինչ չի շարվում: Որպեսզի ամեն ինչ շարվի, մենք ուզում ենք, որ բոլոր տարրերի ստորին եզրը հարվածի այդ տողերից մեկին: Դա անելու ամենադյուրին ճանապարհն է համոզվել, որ բոլոր տարրերը վերցնում են ուղղահայաց բարձրություն (ներառյալ լուսանցքները), որը 22-ի բազմապատիկ է: Ահա մի քանի CSS, որոնք դա անում են հենց դա: Ես օգտագործում եմ REM միավորը, բայց տալիս եմ EM վերադարձ ՝ զննարկիչների համար, որոնք REM չեն հասկանում: Ես մեկնաբանություններում ներառում եմ նաև PX միավորի համարժեքը: Եթե ​​դեռ չեք հասկանում REM / EM, ապա փոխարենը կարող եք պարզապես օգտագործել px արժեքները. Դրանք բոլորը համարժեք են.

1. html {/ * տառատեսակի չափը ՝ 16px, տողի բարձրությունը ՝ 22px * /
2. տառատեսակ ՝ 100% / 1.375 «Helvetica Neue», Helvetica, Arial, sans-serif;
3. ֆոն ՝ #fff url (բազային_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * լուսանցքի վերևից և ներքևից երկուսն էլ 22 px * /
6. / * em backback * / margin: 1.375em 0;
7. մարժա ՝ 1,375rem 0; }
8. h1 {/ * տառատեսակի չափը 32 px է, գծի բարձրությունը ՝ 44 px * /
9. / * em վերադարձը * / տառատեսակի չափը `2em;
10. տառատեսակի չափը ՝ 2rem; գծի բարձրությունը `1,375; }
11. h2 {/ * տառատեսակի չափը 26px է, գծի բարձրությունը ՝ 44px * /
12. / * em backback * / font-size: 1.75em;
13. տառատեսակի չափը ՝ 1.75rem; գծի բարձրությունը `1.5714285714; }
14. h3, h4, h5, h6 {/ * տառատեսակի չափը 22px է, գծի բարձրությունը ՝ 22px * /
15. / * em backback * / font-size: 1.375em;
16. տառատեսակի չափը ՝ 1,375rem; գծի բարձրությունը `1; }
17. p, ul, blockquote {/ * ներքևի լուսանցքը 22px է, տողի բարձրությունը ժառանգվում է html- ից (22px) * /
18. / * em backback * / margin-top: 0; մարժա-ներքևում `1.375em;
19. margin-top: 0; մարժա-ներքևում `1,375rem; }

Եկեք նայենք, թե ինչն է մեզ տալիս: Ուշադրություն դարձրեք, թե ինչպես է ամբողջ տեքստը լավ դասավորված: Այն չի նստում բազային գծի վրա, բայց ունի կանխատեսելի ուղղահայաց ռիթմ: Դա գեղեցիկ է և կոկիկ:

Պատկերների հետ գործ ունենալը

Պատկերներն ամեն ինչ ավելի են բարդացնում: Նայեք, թե ինչ է տեղի ունենում մեր ռիթմի հետ, երբ դրանցից մի քանիսը ներառում ենք: Նրանք խափանում են դա, ինչպես ռեկորդը բաց թողնելն է. Տեմպը ճիշտ է, բայց ժամանակն անջատված է: Հավասարեցումը տեղափոխվում է: Դա պայմանավորված է նրանով, որ պատկերների դժվար թե ունենան ելակետի բազմապատիկ բարձրություն, ուստի ներքևի եզրը չի համընկնում մեր ելակետային ցանցի հետ:

Այն շտկելու համար այն ամենը, ինչ մենք իսկապես պետք է անենք, յուրաքանչյուր պատկերին մարժա ավելացնելն է ՝ մարժայի ներքևի մասը շարելով մեր ցանցի հետ: Ինչը բավական պարզ է ՝ մի փոքր JavaScript- ով ավտոմատացնելու համար: Ահա մեր հիմնական ծրագիրը.

1. Պարզեք յուրաքանչյուր պատկերի բարձրությունը:
2. Տեսեք, թե քանի անգամ է բազային արժեքը բաժանվում ուղղահայաց տարածության վրա, որը ներկայումս զբաղեցնում է պատկերը, և ստացեք մնացած մասը:
3. Մնացորդը հանեք բազային գծից `այն փոխհատուցումը տալու համար, որը մենք պետք է կիրառենք պատկերի վրա:
4. Օֆսեթը կիրառեք որպես լուսանցք նկարի ներքևում:

Պատկերի ուղղահայաց տարածքի ներքևում այժմ ճիշտ կհամապատասխանեն բազային ցանցին: Ահա jQuery- ի հիմնական գործառույթը, որը դա անում է.

1. $ (պատուհան). bind ('բեռ', ֆունկցիա () {
2. $ ("img"): յուրաքանչյուր (գործառույթ () {
3. / * փոփոխականներ * /
4. var this_img = $ (սա);
5. var բազային = 22;
6. var img_height = this_img.height ();
7. / * արա մաթեմատիկա * /
8. var մնացորդ = parseFloat (img_height% ելակետային);
9. / * ինչքա՞ն է պետք ավելացնել: * /
10. var օֆսեթ = parseFloat (ելակետային-մնացորդային);
11. / * կիրառել լուսանցքը պատկերի վրա * /
12. this_img.css ("մարժա-ներքև", օֆսեթ + "px");
13. });
14. });

Ինչու պատուհան. կապել տող Քանի որ մենք պետք է սպասենք, մինչ պատկերները կբեռնվեն, մինչ մենք հուսալիորեն կստանանք դրանց չափերը: Ահա այս հիմնական ծածկագրի գործարկման մի օրինակ:

JQuery- ի կատարելագործում

Աշխարհը հազվադեպ է ուղիղ դեպի առաջ, և ստացվում է այստեղ. Մենք պետք է գործ ունենանք իրականացման մի քանի մանրամասների հետ: Ի՞նչն է մեր գործառույթի սխալը: Առատություն:

• Այն տհաճ արդյունքներ է տալիս այն պատկերների հետ, որոնք գծային են, քան լողացող կամ բլոկավորված:
• Թվում է, որ այն սխալ է որոշ պատկերների, մասնավորապես տարաների մեջ:
• Այն չի զբաղվում հեղուկների դասավորությամբ:
• Դա շատ օգտագործելի չէ:

Մենք չենք ցանկանում այս վարքագիծը կիրառել ներքևում գտնվող պատկերների վրա, ինչպես օրինակ ՝ ժպտացող դեմքը: Ներքին պատկերները հավասարեցված են, այնպես որ ներքևի եզրը նստում է տեքստի նույն բազային գծի վրա (ոչ ելակետային ցանցը): Դա նշանակում է, որ պատկերը ուղղահայաց փոխհատուցվում է: Ոչ CSS- ը, ոչ JS- ը մեզ հնարավորություն չեն տալիս պարզելու, թե որտեղ է գտնվում տեքստի տարրերի ելակետը, ուստի մենք չգիտենք, թե ինչ փոխհատուցում է: Մենք պետք է անտեսենք ներքին պատկերները և մեր շտկումը կիրառենք միայն այն պատկերների վրա, որոնք դրված են ցուցադրում ՝ բլոկ (բարեբախտաբար, ցանկացած լողացող պատկեր ավտոմատ կերպով դրվում է բլոկ ցուցադրելու համար):

Եթե ​​պատկերը կոնտեյներով է, պատկերի վրա կիրառված մարժան կարող է թաքնված լինել տարայի վրա վարարման պարամետրերի պատճառով: Բացի այդ, մենք կարող է ոչ թե ցանկանանք լուսանկարի վրա, այլ փոխարենը տարայի տարրի: Օրինակով մենք նախընտրում ենք լուսանցքի վրա լուսանցքներ ունենալ, քան արկղի ներսում գտնվող պատկերի, այնպես որ կարող ենք խուսափել տուփի մեջ հայտնվող տարօրինակ բացերից:

Ֆունկցիան աշխատում է միայն մեկ անգամ, բայց հեղուկ դիզայնի վրա պատկերները փոխվում են բարձրության դեպքում, երբ զննարկիչը վերաչափվում է (փորձեք փոխել օրինակը բավականին նեղ բանի համար ՝ դա տեսնելու համար): Չափափոխելը կրկին խախտում է ռիթմը: Մեզ անհրաժեշտ է գործառույթը գործարկել զննարկչի չափափոխումից հետո, ինչպես նաև էջի բեռնումից հետո: Հեղուկ դասավորությունը նաև այլ խնդիրներ է ներմուծում. պատկերները կարող են լինել կոտորակային պիքսել բարձրության վրա, օրինակ `132.34 px: Դա իր հերթին կարող է անսպասելի արդյունքների հանգեցնել, նույնիսկ եթե մենք կոտորակային մարժա կիրառենք (եթե ձեզ հետաքրքրում է, ահա թե ինչու ՝ trac.webkit.org/wiki/LayoutUnit): Այսպիսով, մենք պետք է մերսենք պատկերը մի ամբողջ պիքսել բարձրության վրա ՝ կոտորակային պիքսելներով առաջացած դասավորության սխալներից խուսափելու համար:

Վերջապես, մենք պետք է սա դարձնենք ավելի օգտագործելի գործառույթ: Իրականում, տեսական լուծման համար գործնական լուծման կարիք ունեցող բարդության հետ մեկտեղ, մենք պետք է պատրաստենք լրացում, որը կարող է նորից օգտագործվել այլ նախագծերում:

Վերջին օրինակում դուք կգտնեք այն ծածկագիրը, որը հասնում է այս ամենին: Plug-in JavaScript- ը խիստ մեկնաբանվում է, այնպես որ կարող եք հետևել: Դուք կարող եք օգտագործել plug-in- ը `զանգահարելով այն հետևյալ կերպ.

1. $ (պատուհան). bind ('բեռ', ֆունկցիա () {
2. $ ("img"): baselineAlign ();
3. });

Կամ, կարող եք plug-in- ին ասել, որ մարժան կիրառի անվանված տարայի վրա, եթե մեկը գոյություն ունի որպես պատկերի ծնող:

1. $ (պատուհան) .bind ('բեռ', գործառույթ () {
2. $ («img»): baselineAlign ({կոնտեյներ ՝ ’. պատուհանը’});
3. });

Եզրակացություն

Լավ ուղղահայաց ռիթմի պահպանումը նուրբ, բայց արդյունավետ դիզայնի պրակտիկա է, որը պարբերաբար օգտագործվում է տպագրության մեջ: Այժմ դուք գիտեք հիմնական սկզբունքները, աշխատանքային գիտելիքներ ունեք ելակետային գծերի և բազային ցանցի վերաբերյալ, և գիտեք CSS տեքստի դասավորության որոշ սահմանափակումներ `ընդդեմ տպագրի: Դուք նաև գիտեք, թե ինչպես աշխատել այդ սահմանափակումների շուրջ, կազմել ձեր փաստաթղթերը ձեր նախընտրած ցանկացած ուղղահայաց ռիթմի հետ, և ունեք գործիք, որը կօգնի հաղթահարել խանգարող պատկերի պարունակությունը:

CSS- ի հասունացման հետ մեկտեղ մենք շարունակում ենք ավելի շատ գործառույթներ ստանալ մեր տպագիր զարմիկների հետ համահունչ, այնպես որ տեսակի լավ ընկալումը կդառնա ավելի կարևոր որակյալ կայքեր ստեղծելու համար: Եթե ​​ցանկանում եք ավելին իմանալ տիպի մասին ընդհանուր առմամբ, ես խորհուրդ եմ տալիս www.thinkingwithtype.com (և գնել գիրքը դրա հետ միասին): Եթե ​​դուք հետևում եք CSS- ի հոդվածներին տիպի բուժման մասին, ապա այստեղ կան բազմաթիվ հոդվածներ, ինչպես նաև համացանցում: Ես նաև խորհուրդ կտայի տեղեկանալ Mark Boulton- ի և Elliot Jay Stocks- ի վերջին տվյալների մասին, որոնք երկուսն էլ հաճախ խոսում են տիպի մասին `կապված հատուկ վեբ ձևավորման հետ:

Զվարճանալ!