Dysgu Amdanom Arwain mewn Dylunio Gwe

Mae dylunio gwe bob amser wedi benthyg egwyddorion a diffiniadau o fyd dylunio graffig ac argraffu. Mae hyn yn arbennig o wir o ran teipograffeg y we a'r ffordd yr ydym yn derbyn ffurflenni llythyrau ar ein tudalennau gwe. Nid yw'r cyffelybau hyn bob amser yn gyfieithiadau 1 i 1, ond gallwch weld yn sicr ble mae un disgyblaeth wedi dylanwadu ar y llall. Mae hyn yn arbennig o amlwg pan ystyriwch y berthynas rhwng y term teipograffeg traddodiadol "blaenllaw" a'r eiddo CSS a elwir yn "uchder llinell".

Pwrpas Arwain

Pan oedd pobl yn defnyddio llythrennau pren metel neu bren llaw er mwyn creu teipograffeg ar gyfer tudalen argraffedig, rhoddwyd darnau denau o linell rhwng llinellau testun llorweddol er mwyn creu gofod rhwng y llinellau hynny. Os ydych chi eisiau mwy o le, byddech yn mewnosod darnau mwy o plwm. Dyma sut y cynhyrchwyd y term "blaenllaw". Os edrychoch chi i fyny'r term "arwain" mewn llyfr am ddylunio typograffig a phrifathrawon, byddai'n darllen rhywbeth i effaith - "y pellter rhwng y llinell sylfaen o linellau olynol o fath."

Arwain yn y Dylunio Gwe

Mewn dylunio digidol, mae'r term sy'n arwain yn dal i gael ei ddefnyddio i gyfeirio at y gofod rhwng llinellau testun. Mae llawer o raglenni'n defnyddio'r union derm hon, er nad yw arweinydd gwirioneddol yn cael ei ddefnyddio yn y rhaglenni hynny yn amlwg. Mae hon yn enghraifft wych o ffurfiau newydd o syniadau benthyca dylunio gan rai traddodiadol, er bod union weithrediad yr egwyddor honno wedi newid.

O ran dylunio gwe, nid oes eiddo CSS ar gyfer "arwain." Yn lle hynny, gelwir yr eiddo CSS a fyddai'n delio â'r arddangosiad gweledol hwn o destun yn uchder llinell. Os ydych chi am i'ch gwefan gael lle ychwanegol rhwng llinellau testun llorweddol, byddech chi'n defnyddio'r eiddo hwn. Er enghraifft, dywedwch eich bod am gynyddu uchder y llinell ar gyfer pob paragraff o fewn yr elfen o'ch safle , gallech wneud hynny fel hyn:

prif p {llinell-uchder: 1.5; }

Byddai hyn bellach yn 1.5 gwaith yr uchder llinell arferol, yn seiliedig ar faint ffont diofyn y dudalen (sydd fel arfer 16px).

Pryd i Ddefnyddio Llinell-Uchder

Fel y manylir uchod, mae uchder y llinell yn briodol i'w ddefnyddio i ofalu'r llinellau testun mewn paragraffau neu flociau o destunau eraill. Os nad oes digon o le rhwng llinellau, gall y testun fod yn rhyfedd ac yn anodd ei ddarllen ar gyfer gwylwyr i'ch gwefan. Yn yr un modd, os yw'r llinellau yn rhy bell ar wahân ar y dudalen, bydd y llif darllen arferol yn cael ei amharu a bydd darllenwyr yn cael trafferth gyda'ch testun am y rheswm hwnnw. Dyna pam rydych chi am ddod o hyd i'r swm priodol o ofod uchder llinell i'w ddefnyddio. Gallwch hefyd brofi'ch dyluniad gyda defnyddwyr gwirioneddol i gael eu hadborth ar ddarllenadwyedd y dudalen .

Pryd Ddim i'w Ddefnyddio Llinell-Uchder

Peidiwch â drysu uchder y llinell gyda'r padliad neu'r ymylon y byddech chi'n eu defnyddio i ychwanegu gofod gwag i ddyluniad eich tudalen, gan gynnwys y pennawd isod neu'r paragraffau. Nid yw'r gofod hwnnw'n arwain, ac felly ni chaiff ei drin gan uchder llinell.

Os ydych chi eisiau ychwanegu lle o dan rai elfennau testun, byddech chi'n defnyddio ymylon neu bethau. Gan fynd yn ôl at yr enghraifft CSS flaenorol a ddefnyddiasom, gallem ychwanegu hyn:

prif p {llinell-uchder: 1.5; ymyl gwaelod: 24px; }

Byddai hyd yn oed yr uchder 1.5 llinell rhwng llinellau testun ar gyfer paragraffau ein tudalen (y rhai y tu mewn i'r elfen ). Byddai'r un paragraffau hynny hefyd â 24 picsel o le gwag o dan bob un ohonynt, gan ganiatáu i'r gwyliau gweledol sy'n caniatáu i ddarllenwyr adnabod un paragraff o un arall yn hawdd a gwneud gwefan yn haws i'w wneud. Gallech hefyd ddefnyddio'r eiddo padio yn lle'r ymylon yma:

prif p {llinell-uchder: 1.5; gwaelod padio: 24px; }

Ym mron pob achos, byddai hyn yn dangos yr un peth â'r CSS blaenorol.

Dywedwch eich bod am ychwanegu mantais o dan restr eitemau a oedd y tu mewn i restr gyda dosbarth o "wasanaethau-ddewislen", byddech chi'n defnyddio ymylon neu bethau i wneud hynny, NID uchder y llinell. Felly byddai hyn yn briodol.

.services-menu li { Dim ond os ydych chi eisiau gosod gofod y testun y tu mewn i'r eitemau rhestr eu hunain, dim ond os ydych chi eisiau gosod rhychwant hir o destun a allai redeg i linellau lluosog ar gyfer pob pwynt bwled.