Падтрымлівайце вертыкальны рытм з дапамогай CSS і jQuery

Задаволены

• Выкладка тыпу
• Вертыкальны рытм
• Правядзенне рытму
• Справа з выявамі
• Удасканаленне jQuery
• Выснова

• Патрэбныя веды: CSS, базавы jQuery
• Патрабуецца: jQuery, CSS, HTML
• Час праекта: 30 хвілін
• Загрузіце зыходныя файлы

Мяркуючы, што вы займаецеся дызайнам з кантэнту, першае рашэнне прыняць рашэнне мае быць звязаным з тыпам. Нават па не выбіраючы шрыфт, вы зрабілі тое, што ўплывае на ваш сайт. Тып - гэта аснова для друку і вэб-дызайну, і ён складаны; ёсць шмат назапашаных тэрмінаў, практык, правілаў і метадаў, якія добра выкарыстоўваюцца. У гэтым артыкуле гаворыцца пра адзін метад кіравання адным аспектам тыпу, той, які было цяжка зрабіць у Інтэрнэце, але звычайна ў друку: захаванне нязменнага вертыкальнага рытму, што, у сваю чаргу, дазваляе нам дасягнуць прафесійнай кампаноўкі.

Выкладка тыпу

У друку для любога элемента з вялікай колькасцю тэксту асновай дызайну, верагодна, будзе базавая сетка. Ён выкарыстоўваецца для прыцягнення структуры старонкі і накіроўвае вертыкальны паток зместу. Амаль усё размешчана адносна гэтай базавай сеткі. Не хвалюйцеся, калі вы не прызнаеце гэтыя тэрміны, ніхто не знаёмы з базавымі лініямі або базавымі сеткамі; вы пра іх ужо ведаеце. Успомніце пра школу, калі вы, несумненна, пісалі на падбітай паперы - калі пісалі, акуратна размяшчалі ніз лістоў на кожным з радкоў на паперы. Базавая і базавая сетка ў дзеянні. Базавая лінія - уяўная лінія, па якой выраўноўваецца ніз літар.Калі вы зараз паглядзіце гэты артыкул, вы "ўбачыце" зыходную лінію, хаця яе сапраўды няма. Ваш мозг ставіць там адзін для вас, таму вы можаце чытаць прапановы. Радкі на падбітай паперы? Яны ўяўляюць сабой базавую сетку. Прама, каб вашы сказы былі прамымі і размяшчаліся праз роўныя прамежкі часу, каб ваш тэкст меў звычайны вертыкальны рытм.

Вертыкальны рытм

Вертыкальны рытм дыктуе, дзе на старонцы знаходзіцца тэкст. Гэта адзін з кампанентаў, які ўплывае на нашу здольнасць сканаваць і чытаць блокі тэксту, і дапамагае інфармаваць нашы эмацыянальныя рэакцыі. Калі тэкст мае моцны вертыкальны рытм і добры інтэрвал, мы адчуваем яго прафесійным, прадуманым, аўтарытэтным і зручным для чытання. Калі тэкст мае дрэнны рытм і інтэрвал, мы адчуваем, што ён менш разважаны, менш прафесійны і часта цяжэй чытаецца. Вертыкальны рытм - гэта адначасова юзабіліці, а адна частка эстэтыка.

Правядзенне рытму

На жаль, Інтэрнэт па-ранейшаму дрэнны стрыечны брат з пункту гледжання яго здольнасці праводзіць некаторыя асноўныя практыкі адносна тыпу. У Інтэрнэце мы не можам выкарыстоўваць базавую сетку гэтак жа, як гэта робіць дызайнер друку (альбо дзіця ў школе) - мы не можам выраўнаваць базавую лінію тэксту да базавай сеткі дакумента. 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, без засечак;
3. фон: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * поле ўверсе і ўнізе - 22 пікселі * /
6. / * em рэзервовы * / маржа: 1.375em 0;
7. запас: 1,375рэм 0; }
8. h1 {/ * памер шрыфта 32px, вышыня радка 44px * /
9. / * em рэзервовы * / памер шрыфта: 2em;
10. памер шрыфта: 2rem; вышыня лініі: 1,375; }
11. h2 {/ * памер шрыфта 26px, вышыня радка 44px * /
12. / * em рэзервовы * / памер шрыфта: 1,75 эм;
13. памер шрыфта: 1,75 рэм; вышыня лініі: 1,5714285714; }
14. h3, h4, h5, h6 {/ * памер шрыфта 22px, вышыня радка 22px * /
15. / * em рэзервовы * / памер шрыфта: 1.375em;
16. памер шрыфта: 1.375рэм; вышыня лініі: 1; }
17. p, ul, blockquote {/ * ніжняе поле складае 22 пікселі, вышыня радка успадкоўваецца ад html (22 пікселяў) * /
18. / * em рэзервовы * / margin-top: 0; марж-дно: 1.375em;
19. margin-top: 0; поле ўнізе: 1.375рэм; }

Давайце паглядзім, што нам гэта дае. Заўважце, як увесь тэкст прыгожа выраўноўваецца? Ён не сядзіць на базавай лініі, але мае прадказальны вертыкальны рытм. Гэта прыемна і акуратна.

Справа з выявамі

Выявы робяць усё больш складаным. Паглядзіце, што адбываецца з нашым рытмам, калі мы ўключаем некаторыя. Яны парушаюць яго, як прапуск у запісе - тэмп правільны, але час адключаны. Выраўноўванне становіцца зрушаным. Гэта таму, што малюнкі наўрад ці будуць мець вышыню, кратную базавай лініі, таму ніжні край не супадае з нашай базавай сеткай.

Каб выправіць усё, што нам сапраўды трэба зрабіць, гэта дадаць поле да кожнага малюнка, робячы ніз поля ў адпаведнасці з нашай сеткай. Што досыць проста аўтаматызаваць з невялікай колькасцю JavaScript. Вось наш асноўны план:

1. Высветліце вышыню кожнага малюнка.
2. Паглядзіце, колькі разоў базавае значэнне дзеліцца на вертыкальную прастору, якую займае малюнак, і атрымайце астатнюю частку.
3. Адыміце астатнюю частку ад базавай лініі, каб атрымаць зрушэнне, якое нам трэба нанесці на малюнак.
4. Прымяніць зрушэнне ў якасці поля да ніжняй частцы малюнка.

Ніз вертыкальнай прасторы выявы цяпер будзе правільна выраўноўвацца з сеткай базавай лініі. Вось асноўная функцыя ў jQuery, якая робіць гэта:

1. $ (window) .bind ('load', function () {
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 offset = parseFloat (зыходны астатак);
11. / * прымяніць поле да выявы * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Чаму window.bind лінія? Таму што нам трэба пачакаць, пакуль выявы загрузяцца, перш чым мы зможам надзейна атрымаць іх памеры. Вось прыклад запуску гэтага асноўнага кода.

Удасканаленне jQuery

Свет рэдка бывае просталінейным, і вось тут атрымліваецца - нам даводзіцца мець справу з вялікай колькасцю дэталяў рэалізацыі. Што дрэннага ў нашай функцыі? Шмат:

• Гэта дае непрыемныя вынікі з выявамі, якія ўбудоўваюцца, а не плаваюць альбо блакуюцца.
• Здаецца, гэта памылка на некаторых выявах, у прыватнасці, у кантэйнерах.
• Ён не мае справу з вадкімі макетамі.
• Гэта не вельмі шматкроць.

Мы не хочам прымяняць гэта паводзіны да ўбудаваных малюнкаў, як, напрыклад, смайлік. Убудаваныя выявы выраўнаваны так, каб ніжні край размяшчаўся на той самай базавай лініі, што і тэкст (не базавая сетка). Гэта азначае, што малюнак зрушаны па вертыкалі. Ні CSS, ні JS не даюць нам магчымасці даведацца, дзе знаходзіцца базавая лінія для тэкставага элемента, таму мы не ведаем зрушэння. Мы павінны ігнараваць убудаваныя выявы і прымяняць выпраўленне толькі да выяваў, для якіх усталявана дысплей: блок (на шчасце, любое плавае малюнак аўтаматычна наладжваецца на адлюстраванне блока).

Калі выява знаходзіцца ў кантэйнеры, поле, прымененае да выявы, можа быць схавана з-за налад перапаўнення кантэйнера. Акрамя таго, мы можам не хацець поля на малюнку, а замест элемента-кантэйнера. У гэтым прыкладзе мы аддалі перавагу поля на белай скрынцы, чым на малюнку ўнутры скрынкі, таму мы можам пазбегнуць дзіўных прабелаў, якія з'яўляюцца ў полі.

Функцыя працуе толькі адзін раз, але на вадкім дызайне малюнкі змяняюць вышыню пры паўторным памеры браўзэра (паспрабуйце змяніць памер прыкладу на нешта даволі вузкае, каб убачыць гэта). Змена памеру зноў парушае рытм. Нам неабходна, каб функцыя запускалася пасля змены памеру браўзэра, а таксама пасля загрузкі старонкі. Макеты вадкасці таксама ствараюць іншыя праблемы; выявы могуць быць дробнымі пікселямі, напрыклад 132,34 пікс. Гэта, у сваю чаргу, можа прывесці да нечаканых вынікаў, нават калі мы ўжываем дробавы запас (калі вам цікава, вось чаму: trac.webkit.org/wiki/LayoutUnit). Такім чынам, нам трэба будзе масажаваць малюнак на цэлую вышыню пікселя, каб пазбегнуць памылак макета, выкліканых дробавымі пікселямі.

Нарэшце, мы павінны зрабіць гэта функцыяй, якая можа быць выкарыстана для паўторнага выкарыстання. На самай справе, са складанасцю практычнага рашэння ў параўнанні з тэарэтычным рашэннем, мы павінны зрабіць убудову, якая можа быць выкарыстана ў іншых праектах.

У апошнім прыкладзе вы знойдзеце код, які дасягае ўсяго гэтага. Убудова JavaScript моцна каментуецца, так што вы можаце сачыць за ім. Вы можаце выкарыстоўваць убудова, выклікаючы яго наступным чынам:

1. $ (window) .bind ('load', function () {
2. $ ("img"). baselineAlign ();
3. });

Ці вы можаце сказаць убудове, каб прымяніць поле да названага кантэйнера, калі ён існуе як бацька выявы:

1. $ (window) .bind ('load', function () {
2. $ ("img"). baselineAlign ({кантэйнер: ’. popup’});
3. });

Выснова

Захаванне добрага вертыкальнага рытму - тонкая, але эфектыўная практыка дызайну, якая рэгулярна выкарыстоўваецца ў друку. Цяпер вы ведаеце асноўныя прынцыпы, ведаеце базавыя звесткі і базавую сетку і ведаеце некаторыя абмежаванні размяшчэння тэксту CSS у параўнанні з друкам. Вы таксама ведаеце, як абыйсці гэтыя абмежаванні, скласці дакументы ў любым вертыкальным рытме, які вам падабаецца, і ў вас ёсць інструмент, які дапаможа справіцца са зместам, які разбурае малюнак.

Па меры сталення CSS мы працягваем атрымліваць больш магчымасцей у адпаведнасці з нашымі стрыечнымі братамі, таму добрае разуменне тыпу стане больш важным для стварэння якасных вэб-сайтаў. Калі вы хочаце даведацца больш пра шрыфт у цэлым, я настойліва рэкамендую www.thinkingwithtype.com (і набыць кнігу, каб пайсці з ёй). Калі вам патрэбныя артыкулы CSS пра лячэнне тыпу, у Інтэрнэце ёсць мноства артыкулаў. Я б таксама рэкамендаваў даганяць апошнія навіны Марка Боўлтана і Эліёта Джэя Стокса, абодва яны часта кажуць пра тып у дачыненні да вэб-дызайну.

Весяліцца!