Panatilihin ang patayong ritmo gamit ang CSS at jQuery

Nilalaman

• Type ng pagtula
• Patayong ritmo
• Pagsasagawa ng ritmo
• Pakikitungo sa mga imahe
• Pagpapabuti ng jQuery
• Konklusyon

• Kailangan ng kaalaman: CSS, pangunahing jQuery
• Kinakailangan: jQuery, CSS, HTML
• Oras ng proyekto: 30 minuto
• Mag-download ng mga file ng mapagkukunan

Ipagpalagay na nagdisenyo ka mula sa nilalaman, ang unang desisyon na maipatupad ang iyong disenyo ay mayroon upang maging kaugnay ng uri. Kahit na sa pamamagitan ng hindi pagpili ng isang typeface nagawa mo ang isang bagay na nakakaapekto sa iyong site. Ang uri ay pangunahing i-print at disenyo ng web, at kumplikado ito; maraming naipong mga termino, kasanayan, panuntunan, at diskarte na ginagamit sa mahusay na paggamit nito. Ang artikulong ito ay nababahala sa isang pamamaraan para sa pamamahala ng isang aspeto ng uri, isa na mahirap gawin online ngunit nakagawiang naka-print: panatilihin ang isang pare-parehong patayong ritmo, na kung saan ay pinapayagan kaming makamit ang isang propesyonal na layout.

Type ng pagtula

Sa pag-print, para sa anumang item na may sukat na dami ng teksto, ang pundasyon ng disenyo ay malamang na isang baseline-grid. Ginagamit ito upang magdala ng istraktura sa pahina at gabayan ang patayong daloy ng nilalaman. Halos lahat ay inilagay na patungkol sa baseline grid. Huwag mag-alala kung hindi mo makilala ang mga term, walang sinuman ang pamilyar sa mga baseline o baseline grids; alam mo na ang tungkol sa kanila. Mag-isip pabalik sa paaralan, nang walang alinlangan na sumulat ka sa may linya na papel - habang nagsulat ka inilagay mo nang maayos ang ilalim ng iyong mga titik sa bawat linya sa papel. Ang baseline at baseline grid sa pagkilos. Ang baseline ay isang haka-haka na linya kung saan nakahanay ang ilalim ng mga titik.Kung titingnan mo ang artikulong ito ngayon, "makikita mo" ang isang baseline, kahit na wala talagang linya. Ang iyong utak ay naglalagay ng isa doon para sa iyo, kung bakit makakabasa ka ng mga pangungusap. Ang mga linya sa may linya na papel? Ang mga ito ay isang baseline grid. Straight upang ang iyong mga pangungusap ay tuwid, at itakda sa regular na agwat upang ang iyong teksto ay may isang regular na patayong ritmo.

Patayong ritmo

Ang vertikal na ritmo ay nagdidikta kung saan matatagpuan ang teksto ng pahina. Ito ay isang sangkap na nakakaapekto sa aming kakayahang mag-scan at magbasa ng mga bloke ng teksto, at nakakatulong itong maipaalam ang aming mga tugon sa emosyonal. Kapag ang teksto ay may isang malakas na patayong ritmo at mahusay na spacing sa palagay namin ito ay propesyonal, isinasaalang-alang, may kapangyarihan, at komportable na basahin. Kapag ang teksto ay may mahinang ritmo at spacing sa tingin namin hindi ito gaanong isinasaalang-alang, hindi gaanong propesyonal, at madalas na mas mahirap basahin. Ang patayong ritmo ay isang bahagi ng kakayahang magamit at isang bahagi na estetika.

Pagsasagawa ng ritmo

Sa kasamaang palad ang web ay ang mahirap pa ring pinsan ng pag-print sa mga tuntunin ng kakayahang gumawa ng ilang pangunahing mga kasanayan hinggil sa uri. Sa web hindi kami maaaring gumamit ng isang baseline grid sa parehong paraan ng isang taga-print (o bata sa paaralan), hindi namin mai-align ang baseline ng teksto sa baseline grid ng isang dokumento. Ang CSS ay walang konsepto ng isang baseline grid. Kaya, ang aming teksto ay hindi uupo nang eksakto sa mga linya ng isang baseline grid. Sa halip, ito ay itatayo nang patayo sa puwang sa pagitan ng mga linya. Ito ang pinakamahusay na magagawa ng web.

Maging praktikal tayo sa isang halimbawang dokumento. Una, itatakda namin ang beat sa pamamagitan ng paggawa ng isang nakikitang grid ng baseline. Upang magawa ito, gagamitin namin ang isang paulit-ulit na imaheng background upang gumuhit ng regular na mga pahalang na linya na 22px:

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

Hurray, mayroon kaming aming linya na papel!

Mapapansin mong walang pumila. Upang mai-line up ang lahat nais naming sa ilalim ng lahat ng mga elemento na ma-hit ang isa sa mga linya. Ang pinakamadaling paraan upang gawin iyon ay tiyakin na ang lahat ng mga elemento ay kukuha ng isang patayong taas (kasama ang mga margin) na isang maramihang 22. Narito ang ilang CSS na ganoon lang. Gumagamit ako ng unit ng REM, ngunit nagbibigay ng isang fallback ng EM para sa mga browser na hindi nauunawaan ang REM. Isinasama ko rin ang katumbas na unit ng PX sa mga komento. Kung hindi mo pa nauunawaan ang REM / EM pagkatapos ay maaari mo lamang gamitin ang mga halaga ng px - lahat sila ay katumbas:

1. html {/ * laki ng font: 16px, taas ng linya: 22px * /
2. font: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. background: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top at ibaba ay parehong 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. margin: 1.375rem 0; }
8. h1 {/ * laki ng font ay 32px, ang taas ng linya ay 44px * /
9. / * em fallback * / font-size: 2em;
10. laki ng font: 2rem; taas ng linya: 1.375; }
11. h2 {/ * laki ng font ay 26px, ang taas ng linya ay 44px * /
12. / * em fallback * / laki ng font: 1.75em;
13. laki ng font: 1.75rem; taas ng linya: 1.5714285714; }
14. h3, h4, h5, h6 {/ * laki ng font ay 22px, ang taas ng linya ay 22px * /
15. / * em fallback * / laki ng font: 1.375em;
16. laki ng font: 1.375rem; taas ng linya: 1; }
17. p, ul, blockquote {/ * ilalim ng margin ay 22px, ang linya-taas ay minana mula sa html (22px) * /
18. / * em fallback * / margin-top: 0; margin-ilalim: 1.375em;
19. tuktok ng margin: 0; margin-ilalim: 1.375rem; }

Tingnan natin kung ano ang ibinibigay sa atin. Pansinin kung paano ang lahat ng teksto ay umaayon nang maayos? Hindi ito umupo sa baseline, ngunit mayroon itong mahuhulaan na patayong ritmo. Maganda at malinis ito.

Pakikitungo sa mga imahe

Ang mga imahe ay ginagawang mas kumplikado ang mga bagay. Tingnan kung ano ang nangyayari sa aming ritmo kapag nagsama kami ng ilan. Ginagambala nila ito tulad ng isang laktawan sa isang talaan - ang tempo ay tama ngunit ang tiyempo ay naka-off. Ang pagkakahanay ay naging shifted. Ito ay dahil ang mga imahe ay malamang na hindi magkaroon ng taas na maramihang mga baseline, kaya ang ilalim na gilid ay hindi pumila sa aming baseline grid.

Upang ayusin ang lahat ng talagang kailangan nating gawin ay magdagdag ng isang margin sa bawat imahe, ginagawa ang ilalim ng linya ng margin sa aming grid. Alin ang sapat na simpleng upang i-automate gamit ang isang maliit na JavaScript. Narito ang aming pangunahing plano:

1. Alamin ang taas ng bawat imahe.
2. Tingnan kung gaano karaming beses ang halaga ng baseline ay nahahati sa patayong puwang na kasalukuyang kinukuha ng imahe, at kunin ang natitira.
3. Ibawas ang natitira mula sa baseline upang ibigay ang offset na kailangan nating ilapat sa imahe.
4. Ilapat ang offset bilang isang margin sa ilalim ng imahe.

Ang ilalim ng patayong puwang ng imahe ay magkakasundo ngayon nang tama sa baseline grid. Narito ang isang pangunahing pagpapaandar sa jQuery na ginagawa ito:

1. $ (window) .bind ('load', function () {
2. $ ("img"). bawat (pagpapaandar () {
3. / * variable * /
4. var this_img = $ (ito);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * gawin ang matematika * /
8. var mananatiling = parseFloat (img_height% baseline);
9. / * magkano ang kailangan nating idagdag? * /
10. var offset = parseFloat (baseline-mananatiling);
11. / * ilapat ang margin sa imaheng * /
12. this_img.css ("margin-ilalim", offset + "px");
13. });
14. });

Bakit ang bintana.bind linya? Dahil kailangan nating maghintay hanggang mai-load ang mga imahe bago namin mapagkakatiwalaan na makuha ang kanilang mga laki. Narito ang isang halimbawa sa pagpapatakbo ng pangunahing code na ito.

Pagpapabuti ng jQuery

Ang mundo ay bihirang tuwid, at sa gayon ito ay lumiliko dito - kailangan nating harapin ang ilang mga detalye sa pagpapatupad. Ano ang mali sa pagpapaandar na mayroon tayo? Marami:

• Gumagawa ito ng mga hindi magagandang resulta sa mga imaheng nakahanay sa halip na lumutang o i-block.
• Tila maraming surot sa ilang mga imahe, partikular ang mga nasa lalagyan.
• Hindi ito makitungo sa mga likidong layout.
• Hindi ito masyadong magagamit.

Hindi namin nais na ilapat ang pag-uugaling ito sa mga imaheng naka-linya, tulad ng nakangiting mukha sa halimbawa. Ang mga inline na imahe ay nakahanay kaya ang ibabang gilid ay nakaupo sa parehong baseline ng teksto (hindi ang baseline grid). Nangangahulugan iyon na ang imahe ay offset patayo. Ni CSS o JS ay hindi nagbibigay sa amin ng isang paraan upang malaman kung saan ang baseline para sa isang elemento ng teksto, kaya hindi namin alam ang offset. Dapat nating balewalain ang mga inline na imahe, at ilapat lamang ang aming pag-aayos sa mga imaheng itinakda ipakita: harangan (Sa kabutihang palad, ang anumang nakalutang na imahe ay awtomatikong itinakda upang ipakita ang block).

Kung ang isang imahe ay nasa isang lalagyan ang margin na inilapat sa imahe ay maaaring maitago dahil sa mga setting ng overflow sa lalagyan. Gayundin, maaaring hindi namin nais ang margin sa imahe, ngunit sa halip na ang sangkap ng lalagyan. Sa halimbawa, mas gugustuhin naming magkaroon ng mga margin sa puting kahon kaysa sa imahe sa loob ng kahon, upang maiwasan nating makakuha ng mga kakatwang puwang na lilitaw sa kahon.

Gumagawa lamang ang pagpapaandar nang isang beses, ngunit sa isang likidong disenyo ang imahe ay nagbabago ng taas kapag ang browser ay muling sukat (subukang baguhin ang laki ang halimbawa sa isang bagay na medyo makitid upang makita ito). Ang pagbabago ng sukat ay sumisira muli sa ritmo. Kailangan namin ang pagpapaandar upang tumakbo pagkatapos na baguhin ang laki ng browser pati na rin pagkatapos ng pag-load ng pahina. Ang mga layout ng likido ay nagpapakilala rin ng iba pang mga problema; ang mga imahe ay maaaring maging mataas na mga praksyonal na pixel, halimbawa 132.34px. Ito naman ay maaaring maging sanhi ng hindi inaasahang mga resulta, kahit na maglalapat kami ng isang praksyonal na margin (kung interesado ka, narito kung bakit: trac.webkit.org/wiki/LayoutUnit). Kaya, kakailanganin nating imasahe ang imahe sa isang buong taas ng pixel upang maiwasan ang mga layout bug na sanhi ng mga praksyonal na pixel.

Panghuli, dapat nating gawin ito sa isang mas magagamit muli na pagpapaandar. Sa katunayan, sa pagiging kumplikado ng isang praktikal na solusyon na kailangan sa teoretikal na solusyon, dapat kaming gumawa ng isang plug-in na maaaring magamit muli sa ibang mga proyekto.

Sa huling halimbawa makikita mo ang code na nakakamit sa lahat ng ito. Ang plug-in na JavaScript ay lubos na nagkomento upang maaari mong sundin ang kasama. Maaari mong gamitin ang plug-in sa pamamagitan ng pagtawag dito tulad ng sumusunod:

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

O, maaari mong sabihin sa plug-in na ilapat ang margin sa isang pinangalanang lalagyan, kung mayroon ang isang tao bilang magulang ng imahe:

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

Konklusyon

Ang pagpapanatiling isang mahusay na patayong ritmo ay isang banayad ngunit mabisang kasanayan sa disenyo na ginagamit nang regular sa pag-print. Alam mo na ngayon ang mga pangunahing prinsipyo, may gumaganang kaalaman sa mga baseline at baseline grid, at alam ang ilan sa mga limitasyon ng layout ng teksto ng CSS kumpara sa pag-print. Alam mo rin kung paano magtrabaho sa paligid ng mga limitasyong iyon, bumuo ng iyong mga dokumento sa anumang patayong ritmo na gusto mo, at mayroon kang isang tool upang makatulong na makitungo sa nakakagambalang nilalaman ng imahe.

Tulad ng pagkahinog ng CSS patuloy kaming nakakakuha ng maraming mga tampok na naka-linya sa aming mga pinsan sa pag-print, kaya ang isang mahusay na pag-unawa sa uri ay magiging mas mahalaga para sa paglikha ng mga kalidad ng mga website. Kung nais mong malaman ang higit pa tungkol sa uri sa pangkalahatan inirerekumenda ko ang www.thinkingwithtype.com (at pagbili ng aklat upang sumama dito). Kung sumunod ka sa mga artikulo sa CSS tungkol sa uri ng paggamot maraming mga artikulo kapwa dito at saanman sa web. Inirerekumenda ko ring abutin ang pinakabagong mula sa Mark Boulton at Elliot Jay Stocks, na kapwa pinag-uusapan nang madalas tungkol sa uri na kaugnay sa disenyo ng web na partikular.

Magsaya ka!