Поддържайте вертикален ритъм с CSS и jQuery

Съдържание

• Тип на оформление
• Вертикален ритъм
• Провеждане на ритъма
• Справяне с изображения
• Подобряване на jQuery
• Заключение

• Необходими знания: CSS, основен jQuery
• Изисква: jQuery, CSS, HTML
• Време на проекта: 30 минути
• Изтеглете изходни файлове

Ако приемем, че проектирате от съдържанието навън, първото решение за изпълнение на вашия дизайн има да са свързани с типа. Дори от не избирайки шрифт, сте направили нещо, което влияе на вашия сайт. Типът е основно за печат и уеб дизайн и е сложен; има много натрупани термини, практики, правила и техники, които се използват добре. Тази статия се занимава с една техника за управление на един аспект от типа, този, който е трудно да се направи онлайн, но е рутинен в печат: поддържане на последователен вертикален ритъм, което от своя страна ни позволява да постигнем професионално оформление.

Тип на оформление

В печат, за всеки елемент с значително количество текст, основата на дизайна вероятно ще бъде базова решетка. Използва се за привеждане на структура към страницата и насочва вертикалния поток на съдържанието. Почти всичко е поставено по отношение на тази базова мрежа. Не се притеснявайте, ако не разпознаете условията, никой не е запознат с изходните линии или базовите решетки; вече знаете за тях. Помислете за училището, когато несъмнено сте писали на хартия с хартия - докато сте писали, сте поставили долната част на писмата си върху всеки от редовете на хартията. Базовата линия и решетката на базовите линии в действие. Базовата линия е въображаема линия, към която се подравнява долната част на буквите.Ако погледнете тази статия сега, ще „видите“ базова линия, въпреки че всъщност няма линия. Мозъкът ви поставя такъв за вас, затова можете да четете изречения. Редовете върху облицована хартия? Те са основна мрежа. Направо, така че изреченията ви да са прави и да са на равни интервали, така че текстът ви да има правилен вертикален ритъм.

Вертикален ритъм

Вертикалният ритъм диктува къде се намира текстът на страницата. Това е един компонент, който влияе върху способността ни да сканираме и четем блокове текст и помага да информираме емоционалните си реакции. Когато текстът има силен вертикален ритъм и добро разстояние, ние смятаме, че е професионален, внимателен, авторитетен и удобен за четене. Когато текстът има лош ритъм и разстояния, ние смятаме, че той е по-малко обмислен, по-малко професионален и често по-труден за четене. Вертикалният ритъм е една част използваемост и една част естетика.

Провеждане на ритъма

За съжаление мрежата все още е лош братовчед на печата от гледна точка на способността му да прилага някои основни практики по отношение на типа. В мрежата не можем да използваме решетка на базова линия по същия начин, както дизайнерът на печат (или дете в училище) - не можем да подравним базовата линия на текста към базовата решетка на документа. CSS няма концепция за базова мрежа. Така че, нашият текст няма да седи точно на линиите на базовата решетка. Вместо това той ще бъде центриран вертикално в процепа между редовете. Това е най-доброто, което мрежата може да направи.

Нека да бъдем практични с примерен документ. Първо, ще настроим ритъма, като направим видима базова решетка. За да направим това, ще използваме повтарящо се фоново изображение, за да нарисуваме правилни хоризонтални линии 22px един от друг:

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 (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * полето отгоре и отдолу са 22px * /
6. / * em резервен * / марж: 1.375em 0;
7. марж: 1.375rem 0; }
8. h1 {/ * размерът на шрифта е 32 пиксела, височината на линията е 44 пиксела * /
9. / * em резервен * / размер на шрифта: 2em;
10. размер на шрифта: 2rem; височина на линията: 1.375; }
11. h2 {/ * размерът на шрифта е 26px, височината на линията е 44px * /
12. / * em резервен * / размер на шрифта: 1,75em;
13. размер на шрифта: 1.75rem; височина на линията: 1.5714285714; }
14. h3, h4, h5, h6 {/ * размерът на шрифта е 22px, височината на линията е 22px * /
15. / * em резервен * / размер на шрифта: 1.375em;
16. размер на шрифта: 1.375rem; височина на линията: 1; }
17. p, ul, blockquote {/ * долният поле е 22px, височината на реда се наследява от html (22px) * /
18. / * em резервен * / margin-top: 0; margin-bottom: 1.375em;
19. margin-top: 0; margin-bottom: 1.375rem; }

Нека да разгледаме какво ни дава това. Забележете как целият текст се подравнява добре? Той не седи на базовата линия, но има предсказуем вертикален ритъм. Това е хубаво и подредено.

Справяне с изображения

Изображенията правят нещата по-сложни. Погледнете какво се случва с нашия ритъм, когато включим някои. Те го нарушават като пропускане на запис - темпото е правилно, но времето е изключено. Подравняването става изместено. Това е така, защото е малко вероятно изображенията да имат височина, кратна на базовата линия, така че долният ръб не се подрежда с нашата решетъчна базова линия.

За да го поправим, всичко, което наистина трябва да направим, е да добавим поле към всяко изображение, правейки долната част на полето да се изравнява с нашата мрежа. Което е достатъчно просто за автоматизиране с малко JavaScript. Ето основния ни план:

1. Разберете височината на всяко изображение.
2. Вижте колко пъти базовата стойност се разделя на вертикалното пространство, което изображението заема в момента, и вземете остатъка.
3. Извадете остатъка от базовата линия, за да получите изместването, което трябва да приложим върху изображението.
4. Приложете отместването като поле в долната част на изображението.

Дъното на вертикалното пространство на изображението вече ще се подравнява правилно с решетката на базовата линия. Ето основна функция в jQuery, която прави това:

1. $ (прозорец) .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,34px. Това от своя страна може да доведе до неочаквани резултати, дори ако приложим частичен марж (ако се интересувате, ето защо: trac.webkit.org/wiki/LayoutUnit). Така че, ще трябва да масажираме изображението на цяла височина на пиксела, за да избегнем грешки в оформлението, причинени от дробни пиксели.

И накрая, трябва да превърнем това в по-използваема функция. Всъщност, със сложността, от която практическото решение се нуждае спрямо теоретичното решение, трябва да направим приставка, която да може да се използва повторно в други проекти.

В последния пример ще намерите кода, който постига всичко това. Приставката JavaScript е силно коментирана, така че можете да продължите. Можете да използвате приставката, като я извикате по следния начин:

1. $ (прозорец) .bind (’load’, function () {
2. $ ("img"). baselineAlign ();
3. });

Или можете да кажете на приставката да приложи полето към посочен контейнер, ако такъв съществува като родител на изображението:

1. $ (прозорец) .bind (’load’, function () {
2. $ ("img"). baselineAlign ({контейнер: ’. изскачащ’});
3. });

Заключение

Поддържането на добър вертикален ритъм е фина, но ефективна дизайнерска практика, използвана редовно в печата. Вече знаете основните принципи, познавате добре базовите линии и решетката на базовите линии и знаете някои от ограниченията на CSS оформлението на текста спрямо печат. Освен това знаете как да заобиколите тези ограничения, да композирате документите си във всеки вертикален ритъм, който ви харесва, и имате инструмент, който да ви помогне да се справите с разрушителното съдържание на изображението.

С напредването на CSS ние продължаваме да получаваме повече функции в съответствие с нашите братовчеди, така че доброто разбиране на типа ще стане по-важно за създаването на качествени уебсайтове. Ако искате да научите повече за въвеждането като цяло, горещо препоръчвам www.thinkingwithtype.com (и да купите книгата, за да отидете с нея). Ако търсите CSS статии за обработка на типа, има много статии както тук, така и другаде в мрежата. Бих препоръчал също така да наваксаме най-новото от Mark Boulton и Elliot Jay Stocks, и двамата често говорят за типа във връзка с уеб дизайна.

Забавлявай се!