Mësoni rreth drejtimit në hartimin e uebit

Web design ka huazuar gjithmonë parimet dhe përkufizimet nga bota e dizajnit grafik dhe të shtypura. Kjo është veçanërisht e vërtetë kur bëhet fjalë për tipografinë e internetit dhe mënyrën në të cilën ne marrim forma letrash në faqet tona të internetit. Këto paralele nuk janë gjithmonë 1 deri në 1 përkthime, por sigurisht që mund të shihni se ku një disiplinë ka ndikuar në tjetrën. Kjo është veçanërisht e dukshme kur merret parasysh marrëdhënia midis termit tipografik tradicional "udhëheqës" dhe pronës së CSS të njohur si "lartësi e linjës".

Qëllimi i drejtimit

Kur njerëzit përdorën dorë me dorë metal ose letra prej druri për të krijuar tipografinë për një faqe të shtypur, pjesë të hollë të plumbit ishin vendosur mes linjave horizontale të tekstit në mënyrë që të krijonin ndarje midis atyre linjave. Nëse do të donit një hapësirë ​​më të madhe, do të futni pjesë më të mëdha të plumbit. Kështu u shpik termi "udhëheqës". Nëse do ta shihnit termin "udhëheqës" në një libër rreth dizajnit tipografik dhe drejtorëve, do të lexonte diçka për efektin e "distancës midis vijave fundore të linjave të njëpasnjëshme të tipit".

Kryerja në Web Design

Në dizajnin dixhital, termi kryesor është përdorur ende për t'iu referuar hapësirës midis rreshtave të tekstit. Shumë programe e përdorin këtë term të saktë, megjithëse plumbi aktual nuk është duke u përdorur në ato programe. Ky është një shembull i shkëlqyer i formave të reja të ideve të huamarrjes së dizajnit nga ato tradicionale, edhe pse zbatimi i saktë i këtij parimi ka ndryshuar.

Kur vjen puna te web design, nuk ka asnjë pronë CSS për "udhëheqëse". Në vend të kësaj, prona e CSS që do të trajtojë këtë shfaqje vizuale të tekstit quhet linja lartësi. Nëse doni që teksti të ketë hapësirë ​​shtesë midis linjave horizontale të tekstit, do ta përdorni këtë pronë. Për shembull, thonë se dëshironi të rritni lartësinë e linjës për të gjitha paragrafët brenda elementit kryesor të faqes tuaj , ju mund të bëni kështu si kjo:

p kryesore {line-height: 1.5; }

Kjo tani do të jetë 1,5 herë më e lartë se lartësia e linjës, bazuar në madhësinë e parazgjedhur të faqes (zakonisht 16px).

Kur përdoret lartësia e linjës

Siç është detajuar më sipër, lartësia e vijës është e përshtatshme për të përdorur hapësirat e teksteve në paragrafët ose blloqet e tjera të tekstit. Nëse ka shumë pak hapësirë ​​midis rreshtave, teksti mund të bëhet i ngatërruar dhe i vështirë për tu lexuar për shikuesit në faqen tuaj. Në mënyrë të ngjashme, nëse linjat janë të vendosura shumë larg në faqe, rrjedha normale e leximit do të ndërpritet dhe lexuesit do të kenë probleme me tekstin tuaj për këtë arsye. Kjo është arsyeja pse ju doni të gjeni shumën e duhur të hapësirës së vijës së lartësisë për t'u përdorur. Ju gjithashtu mund ta provoni dizajnin tuaj me përdoruesit aktual për të marrë komentet e tyre mbi lexueshmërinë e faqes .

Kur mos përdorni lartësinë e vijës

Mos ngatërroni lartësinë e vijës me mbushjen ose kufijtë që do t'i përdorni për të shtuar hapësirën e hapësirës në hartimin e faqes suaj, duke përfshirë nën kreun ose paragrafët. Kjo hapësira nuk po udhëheq, dhe për këtë arsye nuk trajtohet nga lartësia e vijës.

Nëse dëshironi të shtoni hapësirë ​​nën elemente të caktuara të tekstit, do të përdorni kufijtë ose mbushje. Duke iu kthyer shembullit të mëparshëm CSS që kemi përdorur, mund të shtojmë këtë:

p kryesore {line-height: 1.5; margjina-fund: 24px; }

Kjo ende do të ketë lartësinë 1.5 line midis linjave të tekstit për paragrafin e faqes sonë (ato brenda elementit ). Këto paragrafë të njëjtë do të kenë 24 piksele të hapësirës së bardhë nën secilën prej tyre, duke lejuar ndërprerjet vizuale që lejojnë lexuesit të identifikojnë lehtë një paragraf nga një tjetër dhe të bëjnë më të lehtë leximin e faqeve të internetit. Ju gjithashtu mund të përdorni pronën e mbushjes në vend të kufijve këtu:

p kryesore {line-height: 1.5; mbushje-fund: 24px; }

Në pothuajse të gjitha rastet, kjo do të shfaqet njësoj si CSS e mëparshme.

Thuaj që dëshironi të shtoni ndarje nën artikujt e listës që ishin brenda një liste me një klasë "menu shërbimesh", do të përdorni margjina ose mbushje për ta bërë këtë, NUK lartësinë e vijës. Pra, kjo do të ishte e përshtatshme.

.services-menu li { Ju do të përdorni vetëm lartësinë e linjës nëse dëshironi të vendosni ndarjen e tekstit brenda vetë artikujve të listës, duke supozuar se ato kanë gjurmë të gjata të tekstit që mund të konkurrojnë në linja të shumta për secilën pikë plumbash.