Зміст
- Потрібні знання: CSS, базовий jQuery
- Вимагає: jQuery, CSS, HTML
- Час проекту: 30 хвилин
- Завантажте вихідні файли
Якщо припустити, що ви розробляєте вміст, це перше рішення, яке вплине на ваш дизайн має бути пов'язаними з типом. Навіть мимо ні вибираючи шрифт, ви зробили щось, що впливає на ваш сайт. Тип є основним для друку та веб-дизайну, і він складний; є багато накопичених термінів, практик, правил та прийомів, які використовуються для його ефективного використання. Ця стаття стосується однієї техніки управління одним аспектом типу, одним, який важко було зробити в Інтернеті, але є звичним для друку: підтримка послідовного вертикального ритму, що, у свою чергу, дозволяє нам досягти професійного макету.
Викладний тип
У друкованому вигляді для будь-якого елемента зі значним обсягом тексту основою дизайну, швидше за все, буде базова сітка. Він використовується для приведення структури на сторінку та направляє вертикальний потік вмісту. Майже все розміщено щодо цієї базової сітки. Не хвилюйтеся, якщо ви не визнаєте терміни, ніхто не знайомий з базовими лініями або базовими сітками; ви вже знаєте про них. Згадайте школу, коли ви, безперечно, писали на підкладеному папері - коли ви писали, ви акуратно розміщували нижню частину своїх листів на кожному з рядків на папері. Базова лінія та сітка базової лінії в дії. Базова лінія - це уявна лінія, по якій вирівнюється нижня частина літер.Якщо ви зараз подивитесь на цю статтю, ви побачите базову лінію, хоча її насправді немає. Ваш мозок ставить вам туди одну, тому ви можете читати речення. Рядки на підкладеному папері? Вони є базовою сіткою. Прямі, щоб ваші речення були прямими та встановлювались через рівні проміжки часу, щоб ваш текст мав правильний вертикальний ритм.
Вертикальний ритм
Вертикальний ритм диктує, де на сторінці знаходиться текст. Це один із компонентів, який впливає на нашу здатність сканувати та читати блоки тексту, і допомагає інформувати наші емоційні реакції. Коли текст має сильний вертикальний ритм і хороший інтервал, ми вважаємо його професійним, продуманим, авторитетним та зручним для читання. Коли текст має поганий ритм та інтервал, ми вважаємо, що він менш продуманий, менш професійний і часто важчий для читання. Вертикальний ритм - це одна частина корисність, а одна частина естетика.
Проведення ритму
На жаль, Інтернет все ще є бідним двоюрідним братом з точки зору своєї здатності застосовувати деякі основні практики щодо типу. В Інтернеті ми не можемо використовувати базову сітку так само, як це робить дизайнер друку (або дитина в школі) - ми не можемо вирівняти базову лінію тексту до базової сітки документа. CSS не має поняття базової сітки. Отже, наш текст не буде сидіти точно на лініях базової сітки. Натомість він буде центрований вертикально у зазорі між рядками. Це найкраще, що може зробити Інтернет.
Давайте на практиці з прикладом документа. По-перше, ми встановимо такт, створивши видиму базову сітку. Для цього ми використаємо повторюване фонове зображення, щоб намалювати регулярні горизонтальні лінії на 22 пікселі:
- html {background: #fff url (baseline_22.png); }
Ура, у нас є наш викладений папір!
Ви зауважите, що нічого не шикується. Щоб все вишикувалось, ми хочемо, щоб нижній край усіх елементів потрапляв у один із цих рядків. Найпростіший спосіб зробити це - переконатися, що всі елементи займають вертикальну висоту (включаючи поля), кратну 22. Ось декілька CSS, що робить саме це. Я використовую модуль REM, але надаю запасний варіант ЕМ для браузерів, які не розуміють REM. Я також включаю еквівалент одиниці PX у коментарі. Якщо ви ще не розумієте REM / EM, тоді ви можете просто використати значення px - вони всі еквівалентні:
- html {/ * розмір шрифту: 16 пікселів, висота рядка: 22 пікселів * /
- шрифт: 100% / 1,375 "Helvetica Neue", Helvetica, Arial, без засечок;
- фон: #fff url (baseline_22.png); }
- h1, h2, h3, h4, h5, h6 {/ * поле зверху та знизу - 22 пікселі * /
- / * em запасний * / маржа: 1.375em 0;
- запас: 1,375rem 0; }
- h1 {/ * розмір шрифту - 32 пікселі, висота рядка - 44 пікселі * /
- / * em запасний * / розмір шрифту: 2em;
- розмір шрифту: 2rem; висота лінії: 1,375; }
- h2 {/ * розмір шрифту - 26 пікселів, висота рядка - 44 пікселів * /
- / * em запасний * / розмір шрифту: 1,75em;
- розмір шрифту: 1,75рэм; висота рядка: 1,5714285714; }
- h3, h4, h5, h6 {/ * розмір шрифту - 22 пікселі, висота рядка - 22 пікселі * /
- / * em запасний * / розмір шрифту: 1.375em;
- розмір шрифту: 1.375rem; висота рядка: 1; }
- p, ul, blockquote {/ * нижнє поле - 22 пікселі, висота рядка успадковується від html (22 пікселів) * /
- / * em запасний * / margin-top: 0; поле внизу: 1.375em;
- margin-top: 0; поле внизу: 1.375рем; }
Давайте подивимось, що це нам дає. Зверніть увагу, як весь текст добре вирівнюється? Він не сидить на базовій лінії, але має передбачуваний вертикальний ритм. Це приємно і охайно.
Робота із зображеннями
Зображення ускладнюють ситуацію. Погляньте, що відбувається з нашим ритмом, коли ми включаємо деякі. Вони порушують це, як пропуск запису - темп правильний, але час вимкнений. Вирівнювання стає зміщеним. Це тому, що зображення навряд чи мають висоту, кратну базовій лінії, тому нижній край не вирівнюється з нашою базовою сіткою.
Щоб це виправити, все, що нам дійсно потрібно зробити, - це додати поле до кожного зображення, зробивши нижню частину поля сумісною з нашою сіткою. Що досить просто автоматизувати за допомогою невеликої кількості JavaScript. Ось наш основний план:
- З’ясуйте висоту кожного зображення.
- Подивіться, скільки разів базове значення ділиться на вертикальний простір, який зараз займає зображення, і отримайте залишок.
- Відніміть залишок від базової лінії, щоб отримати зсув, який нам потрібно застосувати на зображенні.
- Застосувати зміщення як поле до нижньої частини зображення.
Низ вертикального простору зображення тепер буде правильно вирівнюватися до сітки базової лінії. Ось основна функція в jQuery, яка робить це:
- $ (window) .bind ('load', function () {
- $ ("img"). кожна (функція () {
- / * змінні * /
- var this_img = $ (this);
- var базовий рівень = 22;
- var img_height = this_img.height ();
- / * робити математику * /
- var залишок = parseFloat (img_height% базового рівня);
- / * скільки нам потрібно додати? * /
- var offset = parseFloat (базовий рівень-залишок);
- / * застосувати поле до зображення * /
- this_img.css ("margin-bottom", offset + "px");
- });
- });
Чому саме window.bind лінія? Оскільки нам потрібно почекати, поки зображення завантажаться, перш ніж ми зможемо надійно отримати їх розміри. Ось приклад роботи цього базового коду.
Покращення jQuery
Світ рідко буває прямолінійним, і, як виявляється, тут - нам доводиться мати справу з безліччю деталей реалізації. Що не так із нашою функцією? Багато:
- Це дає неприємні результати із зображеннями, які є вбудованими, а не плаваючими чи блокованими.
- На деяких зображеннях, особливо на контейнерах, здається помилкою.
- Це не стосується макетів рідини.
- Це не дуже багаторазове використання.
Ми не хочемо застосовувати цю поведінку до вбудованих зображень, як, наприклад, смайлик. Вбудовані зображення вирівняні так, щоб нижній край знаходився на тій самій базовій лінії, що і текст (ні сітка базової лінії). Це означає, що зображення зміщується вертикально. Ні CSS, ні JS не дають нам можливості з’ясувати, де знаходиться вихідна лінія для текстового елемента, тому ми не знаємо відстані. Ми повинні ігнорувати вбудовані зображення та застосовувати наше виправлення лише до зображень, для яких встановлено значення дисплей: блок (на щастя, будь-яке плаваюче зображення автоматично встановлюється для відображення блоку).
Якщо зображення знаходиться в контейнері, поле, застосоване до зображення, може бути приховане через настройки переповнення контейнера. Крім того, ми можемо не хотіти поля на зображенні, а натомість на елементі контейнера. У цьому прикладі ми воліли б поля на білому полі, аніж на зображенні всередині поля, щоб ми могли уникнути дивних прогалин, які з’являються у полі.
Функція працює лише один раз, але на рідкому дизайні зображення змінюють висоту, коли браузер змінюється за розміром (спробуйте змінити розмір прикладу на щось досить вузьке, щоб побачити це). Зміна розміру знову порушує ритм. Нам потрібна функція для запуску після зміни розміру браузера, а також після завантаження сторінки. Макети рідини також створюють інші проблеми; зображення можуть мати невеликий розмір пікселів, наприклад 132,34 пікселів. Це, в свою чергу, може спричинити несподівані результати, навіть якщо ми застосуємо дробове поле (якщо вам цікаво, ось чому: trac.webkit.org/wiki/LayoutUnit). Отже, нам потрібно буде зробити масаж зображення на всю піксельну висоту, щоб уникнути помилок у макеті, спричинених дробовими пікселями.
Нарешті, ми повинні зробити це функцією, яка може бути повторно використана. Насправді, зважаючи на складність практичного рішення над теоретичним рішенням, ми повинні зробити плагін, який можна буде використовувати повторно в інших проектах.
В останньому прикладі ви знайдете код, який досягає всього цього. Плагін JavaScript сильно коментується, щоб ви могли продовжувати. Ви можете використовувати плагін, викликавши його таким чином:
- $ (window) .bind ('load', function () {
- $ ("img"). baselineAlign ();
- });
Або ви можете сказати плагіну застосувати поле до іменованого контейнера, якщо такий існує як батьківський для образу:
- $ (window) .bind ('load', function () {
- $ ("img"). baselineAlign ({контейнер: ’. popup’});
- });
Висновок
Дотримання хорошого вертикального ритму - тонка, але ефективна практика дизайну, яка регулярно використовується в друці. Тепер ви знаєте основні принципи, добре знаєте базові лінії та базову сітку та знаєте деякі обмеження розміщення тексту CSS порівняно з друком. Ви також знаєте, як обійти ці обмеження, скласти свої документи до будь-якого вертикального ритму, який вам подобається, і у вас є інструмент, який допоможе впоратися із вмістом, що руйнує зображення.
У міру дозрівання CSS ми продовжуємо отримувати більше функцій, сумісних з нашими двоюрідними братами, тому хороше розуміння типу стане більш важливим для створення якісних веб-сайтів. Якщо ви хочете дізнатись більше про шрифт загалом, я настійно рекомендую www.thinkingwithtype.com (і придбати книгу, щоб піти з нею). Якщо вам потрібні статті CSS про обробку типу, є безліч статей як тут, так і в інших місцях Інтернету. Я б також рекомендував наздоганяти останні новини від Марка Боултона та Елліота Джея Стокса, які часто говорять про тип стосовно веб-дизайну.
Веселіться!
