ടെക്സ്റ്റ് ഇന്ഡന്റ് പ്രോപ്പർട്ടി, തൊട്ടടുത്തുള്ള സിബിംഗ് സെലക്ടറുകളുപയോഗിച്ച്
നല്ല വെബ് ഡിസൈൻ നല്ല ടൈപ്പോഗ്രാഫി പലപ്പോഴും. ഒരു വെബ് പേജിന്റെ ഉള്ളടക്കത്തെ വളരെ വാചകമായി അവതരിപ്പിക്കുന്നതിനാൽ, ആ വാചകം ആകർഷകവും ഫലപ്രദവുമാകാൻ കഴിയുന്ന വിധത്തിൽ വെബ് ഡിസൈനറായ ഒരു സുപ്രധാന നൈപുണ്യമാണ്. നിർഭാഗ്യവശാൽ, നമുക്കീ അച്ചടിയിൽ ചെയ്യുന്ന ടൈപ്പോഗ്രാഫിക്ക് നിയന്ത്രണം ഓൺലൈനിലെ അതേ നില നമുക്കില്ല. ഇതിനർത്ഥം അച്ചടിച്ച കഷണത്തിൽ അങ്ങനെ ചെയ്യാൻ കഴിയുന്ന വിധത്തിൽ ഒരു വെബ്സൈറ്റിൽ ഞങ്ങൾ എപ്പോഴും വിശ്വസനീയമായ രീതിയിൽ ടെക്സ്റ്റ് ചെയ്യാൻ കഴിയില്ല എന്നാണ്.
നിങ്ങൾ അച്ചടിച്ച മിക്കപ്പോഴും കാണുന്ന ഒരു സാധാരണ ഖണ്ഡിക ശൈലി (അത് ഓൺലൈനിൽ പുനഃസൃഷ്ടിക്കാൻ കഴിയും) ആ ഖണ്ഡികയിലെ ആദ്യ വരി ഒരു ടാബ് സ്പെയ്സ് ഇൻഡന്റ് ചെയ്തിരിക്കുന്നതാണ്. ഒരു ഖണ്ഡിക ആരംഭിക്കുന്നതും മറ്റൊന്ന് അവസാനിക്കുന്നതുമായ വായനക്കാർക്ക് ഇത് അനുവദിക്കുന്നു.
ബ്രൗസറുകൾ സ്വതവേ, ഒരു അറ്റത്ത് മറ്റൊന്നും ആരംഭിക്കുന്നിടത്ത് കാണിക്കാൻ കഴിയുന്ന വിധത്തിൽ അവ ചുവടെയുള്ള സ്പെയ്സ് ഉപയോഗിച്ച് ഖണ്ഡികകൾ പ്രദർശിപ്പിക്കുമെന്നതിനാൽ വെബ് പേജുകളിൽ ഈ ദൃശ്യ ശൈലി നിങ്ങൾക്ക് കാണാനാകില്ല, എന്നാൽ ആ പേജ് പ്രിൻറുചെയ്യുന്നതിന് നിങ്ങൾക്ക് ഒരു ശൈലി വേണെങ്കിൽ, ഇന്ട്രന്റ് ഇന്ഡന്റ് ശൈലിയിലുള്ള ഖണ്ഡികകള്, ടെക്സ്റ്റ് ഇന്ഡെന്റ് ശൈലിയിലുള്ള സ്വത്ത് ഉപയോഗിച്ച് നിങ്ങള്ക്ക് അങ്ങനെ ചെയ്യാവുന്നതാണ്.
ഈ വസ്തുവിന്റെ സിന്റാക്സ് ലളിതമാണ്. ഒരു ഡോക്യുമെന്റിൽ എല്ലാ ഖണ്ഡികകളിലും ഒരു ടെക്സ്റ്റ് ഇൻഡന്റ് ചേർക്കേണ്ടത് എങ്ങനെ എന്ന് ഇവിടെ കാണാം.
p {ടെക്സ്റ്റ്-ഇൻഡന്റ്: 2 എമ; }ഇൻഡന്റുകൾ കസ്റ്റമൈസ് ചെയ്യുക
ഇൻഡന്റ് ചെയ്യുന്നതിനുള്ള കൃത്യമായ ഖണ്ഡികകൾ നിങ്ങൾക്ക് വ്യക്തമാക്കാൻ കഴിയുന്ന ഒരു മാർഗ്ഗം, നിങ്ങൾ ഇൻഡ്യക്ക് ആവശ്യമുള്ള ഖണ്ഡികകളിലേക്ക് ഒരു ക്ലാസ് ചേർക്കാൻ കഴിയും, എന്നാൽ ഓരോ ഖണ്ഡികയിലും അതിലേക്ക് ഒരു ക്ലാസ് കൂട്ടിച്ചേർക്കാൻ നിങ്ങൾ അത് ആവശ്യപ്പെടുന്നു. ഇത് കാര്യക്ഷമമല്ല, കൂടാതെ HTML കോഡിംഗ് മികച്ച കീഴ്വഴക്കങ്ങൾ പിന്തുടരുകയും ചെയ്യുന്നു.
പകരം, നിങ്ങൾ ഖണ്ഡികകൾ ഉൾപ്പെടുത്തുമ്പോൾ നിങ്ങൾ പരിഗണിക്കണം. നിങ്ങൾ മറ്റൊരു ഖണ്ഡികയെ നേരിട്ട് പിന്തുടരുന്ന ഖണ്ഡികകൾ ഉൾപ്പെടുത്തുക. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾക്ക് സമീപമുള്ള സാന്നിധ്യമുള്ള സെലക്ടർ ഉപയോഗിക്കാം. ഈ സെലക്ടറിനൊപ്പം, നിങ്ങൾ മറ്റൊരു ഖണ്ഡികയ്ക്ക് തൊട്ടുമുമ്പുള്ള ഓരോ ഖണ്ഡികകളും തിരഞ്ഞെടുക്കുന്നു.
p + p {text-indent: 2em; }നിങ്ങൾ ആദ്യത്തെ വരിയിൽ ഇൻഡെന്റ് ചെയ്യുന്നതിനാൽ, നിങ്ങളുടെ ഖണ്ഡികകൾ അവയ്ക്കിടയിൽ ഒരു അധിക ഇടമില്ല എന്ന് ഉറപ്പുവരുത്തുക (ബ്രൗസർ സ്വതവേയുള്ളത്). സ്റ്റൈലിസ്റ്റലില്, ഒന്നുകില് ഖണ്ഡികകള്ക്കിടയിലുള്ള സ്പെയ്സ് ഉണ്ടായിരിക്കണം അല്ലെങ്കില് ആദ്യത്തെ വരി ഇന്ഡെന്റ് ചെയ്യണം, പക്ഷെ രണ്ടും കൂടിയല്ല.
p {margin-bottom: 0; പാഡിംഗ്-അടി സ്ഥലം: 0; } p + p {margin-top: 0; പാഡിംഗ്-ടോപ്പ്: 0; }നെഗറ്റീവ് ഇൻഡന്റുകൾ
നിങ്ങൾക്ക് ഒരു ഇൻഡെന്റ് പോലെ വലതുവശത്ത് എതിരായി ഇടതുവശത്തേയ്ക്ക് പോകാൻ ഒരു വരിയുടെ തുടക്കത്തിന് കാരണമുണ്ടാക്കാൻ, ടെക്സ്റ്റ്-ഇൻഡന്റ് പ്രോപ്പർട്ടിയും നെഗറ്റീവ് മൂല്യവും ഉപയോഗിക്കാം. ഒരു വരി ഒരു ഉദ്ധരണി ചിഹ്നത്തിൽ ആരംഭിക്കുമ്പോൾ നിങ്ങൾക്ക് ഇത് ചെയ്യാം. അപ്പോൾ ഖണ്ഡിക അക്ഷരം ഇടതുവശത്തുള്ള ചെറിയ മാര്ജിനില് ദൃശ്യമാവുകയും അക്ഷരങ്ങള് ഇപ്പോഴും ഒരു നല്ല ഇടത് വിന്യാസം സൃഷ്ടിക്കുന്നു.
പറയുക, ഉദാഹരണത്തിന്, നിങ്ങൾ ഒരു ബ്ലോക്ക്ക്വോട്ട് ഒരു പാരമ്പര്യമുള്ള ഒരു ഖണ്ഡിക ഉണ്ടു എന്നു നിങ്ങൾ അതു മോശമായി ഇൻഡന്റ് ചെയ്യണമെന്ന് ആഗ്രഹിക്കുന്നു. നിങ്ങൾക്ക് ഈ CSS എഴുതാൻ കഴിയും:
blockquote p {text-indent: -5em; }ഇത് തുടക്കത്തിലെ ഉദ്ധരണി പ്രതീകം ഉൾക്കൊള്ളുന്ന, ഖണ്ഡികയുടെ ആരംഭം തരും, തൂക്കിക്കൊണ്ടിരിക്കുന്ന ചിഹ്നനം സൃഷ്ടിക്കാൻ ഇടതുവശത്തേക്ക് അല്പം നീങ്ങാൻ കഴിയും.
മാർജിനുകളും പാഡിംഗും സംബന്ധിച്ച്
മിക്കപ്പോഴും വെബ് ഡിസൈനിൽ, നിങ്ങൾ ഘടകങ്ങൾ നീക്കാൻ, വെളുത്ത സ്പേസ് സൃഷ്ടിക്കാൻ മാർജിൻ അല്ലെങ്കിൽ പാഡിംഗ് മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നു. എന്നിരുന്നാലും, ആന്തരികമായ ഖണ്ഡിക പ്രഭാവം നേടാൻ ആ വസ്തുക്കൾ പ്രവർത്തിക്കില്ല. നിങ്ങൾ ഈ മൂല്യങ്ങൾ ഏതെങ്കിലും ഖണ്ഡികയിലേക്ക് പ്രയോഗിച്ചാൽ, ഓരോ വരിയും ഉൾപ്പെടെ, ആ ഖണ്ഡത്തിന്റെ മുഴുവൻ വാചകവും ആദ്യ വരിയിലേക്ക് മാറ്റിയിരിക്കും.