വെബ് ഡിസൈനില് ലീഡുചെയ്യുന്നതിനെക്കുറിച്ച് പഠിക്കുക

ഗ്രാഫിക്, പ്രിന്റ് ഡിസൈൻ എന്നിവയിൽ നിന്ന് വെബ് ഡിസൈൻ എല്ലായ്പ്പോഴും പ്രിൻസിപ്പലുകളും നിർവചനങ്ങളും കടം വാങ്ങിയിട്ടുണ്ട്. ഇത് വെബ് ടൈപ്പോഗ്രാഫിയിലേക്കും നമ്മുടെ വെബ്പേജുകളിൽ നമുക്ക് അക്ഷരമാലാക്രമത്തിൽ വരുന്നതുമായിരുന്നാലും ഇത് പ്രത്യേകിച്ചും സത്യമാണ്. ഈ സമാന്തരനങ്ങൾ എല്ലായ്പ്പോഴും 1 മുതൽ 1 വരെ വിവർത്തനങ്ങൾ ആയിരിക്കില്ല, എന്നാൽ ഒരു അച്ചടി മറ്റുള്ളവയിൽ സ്വാധീനിച്ചിട്ടുള്ളത് നിങ്ങൾ തീർച്ചയായും കാണാനാവും. പരമ്പരാഗത ടൈപ്പോഗ്രാഫിക്ക് പദം "മുൻനിര" എന്നതും "ലൈൻ-ഉയരം" എന്നറിയപ്പെടുന്ന CSS പ്രോപ്പർട്ടിയും തമ്മിലുള്ള ബന്ധം പരിഗണിക്കുമ്പോൾ ഇത് പ്രത്യേകിച്ചും വ്യക്തമാണ്.

നേതൃത്വത്തിൻറെ ഉദ്ദേശ്യം

ഒരു അച്ചടിച്ച പേജിനു വേണ്ടി ടൈപ്പോഗ്രാഫി നിർമ്മിക്കാൻ ജനങ്ങൾ കൈകൊണ്ട് മെറ്റൽ അല്ലെങ്കിൽ മരം അക്ഷരങ്ങൾ ഉപയോഗിക്കുമ്പോൾ, ആ വരികൾക്കിടയിലുള്ള സ്പേസിംഗ് സൃഷ്ടിക്കുന്നതിന് തിരശ്ചീനമായ വരികൾക്കിടയിലൂടെ നേർത്ത കഷണങ്ങൾ സ്ഥാപിച്ചു. നിങ്ങൾ കൂടുതൽ സ്ഥലം ആവശ്യമെങ്കിൽ, നിങ്ങൾ വലിയ ലീഡ് കഷണങ്ങൾ ചേർക്കും. ഇങ്ങനെയാണ് "മുൻനിര" എന്ന പദം ഉപയോഗിക്കപ്പെട്ടത്. ടൈപ്ഗ്രാഫിക് ഡിസൈൻ, പ്രിൻസിപ്പാൾ എന്നിവയെക്കുറിച്ചുള്ള ഒരു പുസ്തകത്തിൽ മുൻപത്തെ "മുൻകൂർത" എന്ന പദപ്രമുഖത്തിൽ നിങ്ങൾ വായിച്ചിരുന്നെങ്കിൽ, "തുടർച്ചയായി വരുന്ന തരം വരികളുടെ അടിവേരകൾ തമ്മിലുള്ള ദൂരം" അത് തീർച്ചയായും വായിക്കുമായിരുന്നു.

വെബ് ഡിസൈനിൽ മുൻപന്തിയിലാണ്

ഡിജിറ്റൽ രൂപകൽപ്പനയിൽ, മുൻനിര പദം ഇപ്പോഴും ടെക്സ്റ്റിന്റെ വരികൾക്കിടയിലുള്ള സ്പെയ്സിംഗ് സൂചിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു. പല പരിപാടികളും ഈ പരിപാടിയിൽ ഉപയോഗിക്കുന്നുണ്ട്, യഥാർത്ഥ പ്രോഗ്രാമുകൾ ആ പ്രോഗ്രാമുകളിൽ ഉപയോഗിക്കപ്പെടുന്നില്ലെങ്കിലും. പരമ്പരാഗതമായവയിൽ നിന്ന് രൂപകൽപന ചെയ്യുന്ന പുതിയ രൂപകൽപനകൾക്കുള്ള ഒരു മികച്ച ഉദാഹരണമാണ് ഈ രീതി.

വെബ് ഡിസൈൻ വരുമ്പോൾ, "മുൻനിര" എന്നതിന് സി.എസ്.എസ്. പകരം, ഈ വിഷ്വൽ ടെക്സ്റ്റ് എഴുതുവാനുള്ള സിഎസ്എസ് ആസ്തിയെ ലൈൻ-ഉയരം എന്നു പറയുന്നു. തിരശ്ചീനമായ വാചക വരികൾക്കിടയിൽ നിങ്ങളുടെ ടെക്സ്റ്റിന് കൂടുതൽ സ്ഥലം ആവശ്യമുണ്ടെങ്കിൽ, നിങ്ങൾ ഈ വസ്തു ഉപയോഗിക്കും. ഉദാഹരണത്തിന്, നിങ്ങളുടെ സൈറ്റിന്റെ

ഘടകത്തിനുള്ളിൽ എല്ലാ ഖണ്ഡികകൾക്കും വരി-ഉയരം കൂട്ടണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് അങ്ങനെ ചെയ്യാൻ കഴിയും:

പ്രധാന പി {വരി-ഉയരം: 1.5; }

ഇത് ഇപ്പോൾ സാധാരണ വരിയുടെ ഉയരം 1.5 ആയി തീരുന്നു, സാധാരണ ഫോണ്ട് സൈറ്റിന്റെ അടിസ്ഥാനത്തിൽ (സാധാരണയായി 16px ആണ്).

ലൈൻ-ഉയരം എപ്പോൾ ഉപയോഗിക്കണം

മുകളിൽ വിശദീകരിച്ചതുപോലെ, ഖണ്ഡികകളിലെ വാചക വരികൾ അല്ലെങ്കിൽ ടെക്സ്റ്റിന്റെ മറ്റ് ഭാഗങ്ങളിലേക്കുള്ള സ്പെയ്സിലേക്ക് ലൈൻ-ഉയരം അനുയോജ്യമാണ്. ലൈനുകൾക്കിടയിൽ വളരെ കുറച്ച് ഇടം ഉണ്ടെങ്കിൽ, നിങ്ങളുടെ സൈറ്റിലേക്ക് കാഴ്ചക്കാർക്ക് വായനക്കാരെ പാഠം പഠിക്കാൻ ബുദ്ധിമുട്ടാവും. സമാനമായി, പേജിൽ വളരെ അകലെയാണെങ്കിൽ വായനയുടെ സാധാരണ പ്രവാഹം തടസ്സപ്പെടും, കാരണം വായനക്കാർക്ക് നിങ്ങളുടെ വാചകത്തിൽ പ്രശ്നമുണ്ടാകും. അതിനാലാണ് ആവശ്യമുള്ള ലൈൻ-എക്സ്റ്റൻഷൻ സ്പെയ്സിംഗിന്റെ അനുയോജ്യമായ തുക നിങ്ങൾക്ക് കണ്ടെത്തേണ്ടത്. പേജിന്റെ വായനാക്ഷമതയെ കുറിച്ചുള്ള അവരുടെ ഫീഡ്ബാക്ക് നേടുന്നതിന് യഥാർത്ഥ ഉപയോക്താക്കളുമായി നിങ്ങളുടെ ഡിസൈൻ പരീക്ഷിക്കാവുന്നതാണ്.

ലൈൻ-ഉയരം ഉപയോഗിക്കേണ്ടതില്ല

നിങ്ങളുടെ പേജിന്റെ രൂപരേഖയിൽ തലക്കെട്ട് അല്ലെങ്കിൽ ഖണ്ഡികകൾ ഉൾപ്പെടെയുള്ള വൈറ്റ്സ്പെയ്സ് ചേർക്കുന്നതിന് ഉപയോഗിക്കുന്ന പാഡിംഗോ മാർജിനുകളോ ഉപയോഗിച്ച് വരി-ഉയരം ആശയക്കുഴപ്പത്തിലാക്കരുത്. ആ സ്പെയ്സിംഗ് നയിക്കുന്നില്ല, അതിനാൽ ഇത് ലൈൻ-ഉയരം കൊണ്ട് കൈകാര്യം ചെയ്യപ്പെടുന്നില്ല.

ചില ടെക്സ്റ്റ് കോമ്പോസിനു കീഴിൽ സ്ഥലം ചേർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ മാർജിനുകളും പാഡിംഗും ഉപയോഗിക്കും. ഞങ്ങൾ ഉപയോഗിച്ച മുൻ CSS ഉദാഹരണമായി മടങ്ങിപ്പോവുകയാണെങ്കിൽ ഞങ്ങൾ ഇത് ചേർക്കാൻ കഴിയും:

പ്രധാന പി {വരി-ഉയരം: 1.5; മാർജിൻ-അടിയിൽ: 24px; }

ഇത് ഇപ്പോഴും നമ്മുടെ പേജിന്റെ ഖണ്ഡികയ്ക്കായി (

element ൽ ഉള്ളവ) ടെക്സ്റ്റ് വരികൾക്കിടയിലുള്ള 1.5 വരി ഉയരവും. ഒരേ ഖണ്ഡികകൾക്കും ഓരോന്നിനും ഇടയിൽ വൈറ്റ്സ്പെയ്സ് 24 പിക്സലുകൾ ഉണ്ടാകും, ഇത് വായനക്കാർക്ക് ഒരു പാരഗ്രാഫ് എളുപ്പത്തിൽ തിരിച്ചറിയാനും വായനക്കാരെ എളുപ്പത്തിൽ വായിക്കാനും അനുവദിക്കുന്ന വിഷ്വൽ ബ്രേക്കുകൾ അനുവദിക്കും. ഇവിടെ മാർജിനുകളുടെ സ്ഥാനത്ത് പാഡിംഗ് പ്രോപ്പർട്ടി ഉപയോഗിക്കാം:

പ്രധാന പി {വരി-ഉയരം: 1.5; പാഡിംഗ്-അടിയിൽ: 24px; }

മിക്കവാറും എല്ലാ സാഹചര്യങ്ങളിലും, ഇത് മുൻ CSS പോലെയുള്ളവ പ്രദർശിപ്പിക്കും.

"Services-menu" ന്റെ ഒരു ക്ലാസ് ഉള്ള ലിസ്റ്റിലെ അഡ്രസ് സ്പെസിസിങ് അഡ്രസ് കൊടുക്കുവാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടെങ്കിൽ, ലൈൻ മാർക്കറ്റ് അല്ല, നിങ്ങൾ അങ്ങനെ ചെയ്യാൻ മാർജിനുകളും പാഡിംഗും ഉപയോഗിക്കും. അതിനാൽ ഇത് ഉചിതമായിരിക്കും.

.ervices-menu li { ലിസ്റ്റിലെ സ്പേസിംഗ് സ്വയം സജ്ജമാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നെങ്കിൽ ഇവിടെ വരി-ഉയരം മാത്രമേ ഉപയോഗിക്കുകയുള്ളൂ, ഓരോ ബുല്ലെറ്റ് പോയിന്റിനുമായി ഒന്നിലധികം ലൈനുകളിലേക്ക് പ്രവർത്തിക്കാൻ കഴിയുന്ന ദൈർഘ്യമേറിയ റണ്ണിന്റെ ദൈർഘ്യമുണ്ടെന്ന് കരുതുക.