Одржавајте вертикални ритам помоћу ЦСС-а и јКуери-а

Садржај

• Врста распореда
• Вертикални ритам
• Вођење ритма
• Суочавање са сликама
• Побољшање јКуери-ја
• Закључак

• Потребно знање: ЦСС, основни јКуери
• Захтева: јКуери, ЦСС, ХТМЛ
• Време пројекта: 30 минута
• Преузмите изворне датотеке

Под претпоставком да дизајнирате садржај, прва је одлука која ће утицати на ваш дизајн има бити сродан типу. Чак и до не одабиром слова, учинили сте нешто што утиче на вашу веб локацију. Тип је језгро штампе и веб дизајна и сложен је; постоји пуно нагомиланих појмова, пракси, правила и техника које се добро користе. Овај чланак се бави једном техником управљања једним аспектом типа, оним који је било тешко изводити на мрежи, али је рутински у штампи: одржавање доследног вертикалног ритма, што заузврат омогућава да постигнемо професионални изглед.

Врста распореда

У штампи, за било коју ставку са значајном количином текста основа дизајна ће вероватно бити основна мрежа. Користи се за доношење структуре на страницу и води вертикални ток садржаја. Готово све је постављено у односу на ту основну мрежу. Не брините ако не препознате термине, нико није упознат са основним линијама или основним мрежама; већ знате за њих. Сјетите се школе, када сте несумњиво писали на обложеном папиру - док сте писали, дно својих слова уредно сте постављали у сваку линију на папиру. Основна и основна мрежа у акцији. Основна линија је замишљена линија на коју се поравнава дно слова.Ако сада погледате овај чланак, видећете „основну линију“, иако линија заправо не постоји. Ваш мозак вам га ставља тамо, зато можете читати реченице. Линије на обложеном папиру? Они су основна мрежа. Равно, тако да су ваше реченице равне и постављене у правилним интервалима, тако да ваш текст има редован вертикални ритам.

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

Вертикални ритам диктира где се на страници налази текст. То је једна компонента која утиче на нашу способност скенирања и читања блокова текста и помаже у информисању наших емоционалних одговора. Када текст има снажан вертикални ритам и добар размак, сматрамо да је професионалан, пажљив, ауторитативан и угодан за читање. Када текст има лош ритам и размаке, осећамо да је мање пажљив, мање професионалан и често тежи за читање. Вертикални ритам је једним делом употребљивост, а једним делом естетика.

Вођење ритма

Нажалост, интернет је још увек лош рођак штампе у погледу његове способности да примењује неке основне праксе у вези с типовима. На мрежи не можемо користити основну мрежу на исти начин на који то користи дизајнер штампе (или дете у школи) - не можемо поравнати основну линију текста са основном мрежом документа. ЦСС нема концепт основне мреже. Дакле, наш текст неће тачно лежати на линијама основне мреже. Уместо тога, центрираће се вертикално у процепу између линија. То је најбоље што веб може да учини.

Идемо практично са примером документа. Прво, поставићемо ритам тако што ћемо направити видљиву основну мрежу. Да бисмо то урадили, користићемо понављајућу позадинску слику за цртање правилних хоризонталних линија раздвојених 22 пиксела:

1. хтмл {бацкгроунд: #ффф урл (баселине_22.пнг); }

Ура, имамо наш обложени папир!

Приметићете да се ништа не поравна. Да би се све поравнало, желимо да доња ивица свих елемената погоди једну од тих линија. Најлакши начин да то урадите је да сви елементи заузму вертикалну висину (укључујући маргине) која је вишеструка од 22. Ево неколико ЦСС-а који управо то раде. Користим РЕМ јединицу, али дајем резервни ЕМ за прегледаче који не разумеју РЕМ. Такође у коментаре уврштавам еквивалент ПКС јединице. Ако још увек не разумете РЕМ / ЕМ, уместо тога можете да користите вредности пк - све су еквивалентне:

1. хтмл {/ * величина фонта: 16пк, висина линије: 22пк * /
2. фонт: 100% / 1,375 "Хелветица Неуе", Хелветица, Ариал, санс-сериф;
3. позадина: #ффф урл (баселине_22.пнг); }
5. х1, х2, х3, х4, х5, х6 {/ * маргина-топ и боттом су по 22пк * /
6. / * ем резервно * / маргина: 1.375ем 0;
7. маржа: 1.375рем 0; }
8. х1 {/ * величина фонта је 32 пиксела, висина линије је 44 пиксела * /
9. / * ем резервни * / фонт-сизе: 2ем;
10. величина фонта: 2рем; висина линије: 1.375; }
11. х2 {/ * величина фонта је 26 пиксела, висина линије је 44 пиксела * /
12. / * ем резервни * / величина фонта: 1,75ем;
13. величина фонта: 1,75рем; линија-висина: 1.5714285714; }
14. х3, х4, х5, х6 {/ * величина фонта је 22пк, висина линије 22пк * /
15. / * ем резервни * / величина слова: 1.375ем;
16. величина фонта: 1,375рем; висина линије: 1; }
17. п, ул, блоцккуоте {/ * доња маргина је 22пк, висина линије наслеђена је из хтмл (22пк) * /
18. / * ем резервни * / маргин-топ: 0; маргин-боттом: 1.375ем;
19. маргин-топ: 0; маргин-боттом: 1.375рем; }

Погледајмо шта нам то даје. Приметите како се сав текст лепо поравна? Не седи на основној линији, али има предвидљив вертикални ритам. Лепо је и уредно.

Суочавање са сликама

Слике ствари чине сложенијим. Погледајте шта се дешава са нашим ритмом када укључимо неке. Ометају га као прескакање записа - темпо је исправан, али тајминг је искључен. Поравнање постаје померено. То је зато што је мало вероватно да ће слике имати висину која је вишекратник основне линије, па се доња ивица не поклапа са нашом мрежом основне линије.

Да бисмо то поправили, све што заиста треба да урадимо је да додамо маргину свакој слици, чинећи дно маргине линијом наше мреже. Што је довољно једноставно аутоматизовати са мало ЈаваСцрипт-а. Ево нашег основног плана:

1. Схватите висину сваке слике.
2. Погледајте колико се пута основна вредност дели на вертикални простор који слика тренутно заузима и добијемо остатак.
3. Одузмите остатак од основне линије да бисте добили одмак који морамо применити на слици.
4. Примените помак као маргину на дну слике.

Дно вертикалног простора слике сада би се правилно поравнало са мрежом основне линије. Ево основне функције у јКуери-у која ово ради:

1. $ (виндов) .бинд ('лоад', фунцтион () {
2. $ ("имг"). свака (функција () {
3. /* Променљиве */
4. вар тхис_имг = $ (ово);
5. вар основица = 22;
6. вар имг_хеигхт = тхис_имг.хеигхт ();
7. / * ради математику * /
8. вар остатак = парсеФлоат (имг_хеигхт% основне линије);
9. / * колико треба да додамо? * /
10. вар оффсет = парсеФлоат (основни-остатак);
11. / * применити маргину на слику * /
12. тхис_имг.цсс ("маргин-боттом", оффсет + "пк");
13. });
14. });

Зашто виндов.бинд линија? Јер морамо сачекати док се слике не учитају да бисмо могли поуздано да добијемо њихове величине. Ево примера покретања овог основног кода.

Побољшање јКуери-ја

Свијет је ријетко праволинијски, а тако се и овдје показало - морамо се позабавити са доста детаља о имплементацији. Шта није у реду са функцијом коју имамо? Доста:

• Даје гадне резултате са сликама које су у реду, а не лебдеће или блокиране.
• На неким сликама делује бугги, посебно онима у контејнерима.
• Не бави се течним распоредима.
• Није баш за поновну употребу.

Не желимо да применимо ово понашање на слике које су у линији, попут смајлића у примеру. Уметнуте слике су поравнате тако да доња ивица седи на истој основној линији као и текст (не основна мрежа). То значи да се слика помера вертикално. Ни ЦСС ни ЈС не дају нам начин да сазнамо где је основна линија за елемент текста, тако да не знамо одмак. Морамо занемарити уграђене слике и применити исправку само на слике које су подешене на дисплеј блок (срећом, било која плутајућа слика се аутоматски поставља на блок приказа).

Ако се слика налази у контејнеру, маргина примењена на слику може бити сакривена због подешавања преливања на контејнеру. Такође, можда не желимо маргину на слици, већ на елементу контејнера. У примеру, радије бисмо имали маргине на белом оквиру него на слици унутар оквира, тако да можемо избећи чудне празнине које се појављују у оквиру.

Функција се покреће само једном, али на течном дизајну слике мењају висину када се прегледач смањи (покушајте да промените величину примера на нешто прилично уско да бисте то видели). Промена величине поново руши ритам. Функција треба да се покреће након што је прегледачу промењена величина, као и након учитавања странице. Распоред течности такође доводи до других проблема; слике могу бити високе као делимични пиксели, на пример 132,34пк. То заузврат може довести до неочекиваних резултата, чак и ако применимо делимичну маргину (ако сте заинтересовани, ево зашто: трац.вебкит.орг/вики/ЛаиоутУнит). Дакле, мораћемо да умасирамо слику у целу висину пиксела да бисмо избегли грешке у распореду узроковане разломљеним пикселима.

На крају, требали бисмо ово претворити у функцију која се може више користити. У ствари, с обзиром на сложеност која је практичном решењу потребна у односу на теоријско решење, требали бисмо направити плуг-ин који се може поново користити у другим пројектима.

У последњем примеру ћете пронаћи код који све ово постиже. ЈаваСцрипт додатак је тешко коментарисан да бисте могли да га пратите. Додатак можете користити позивањем на следећи начин:

1. $ (виндов) .бинд ('лоад', фунцтион () {
2. $ ("имг"). баселинеАлигн ();
3. });

Или можете да кажете додатку да примени маргину на именовани контејнер, ако он постоји као родитељ слике:

1. $ (виндов) .бинд ('лоад', фунцтион () {
2. $ ("имг"). баселинеАлигн ({контејнер: ’. попуп’});
3. });

Закључак

Одржавање доброг вертикалног ритма суптилна је, али ефикасна дизајнерска пракса која се редовно користи у штампи. Сада знате основне принципе, имате добро знање о основним линијама и основној мрежи и знате нека ограничења распореда ЦСС текста у односу на штампу. Такође знате како заобићи та ограничења, саставити документе у било којем вертикалном ритму који желите и имате алат који вам помаже да се носите са ометајућим садржајем слике.

Како ЦСС сазрева, и даље добијамо све више функција у складу са нашим рођацима, тако да ће добро разумевање типа постати важније за стварање квалитетних веб локација. Ако желите да сазнате више о типу уопште, топло препоручујем ввв.тхинкингвитхтипе.цом (и да купите књигу да бисте пристали на њу). Ако се бавите ЦСС чланцима о лечењу типова, постоје бројни чланци и овде и негде на мрежи. Такође бих препоручио да стигнете најновије вести од Марка Боултона и Еллиота Јаиа Стоцкса, обојица често говоре о типу у вези са веб дизајном.

Забави се!