Text Box Trim Is The Best CSS Feature In Years

text-box-trim എന്ന പുതിയ CSS പ്രോപ്പർട്ടി ഇപ്പോൾ ലഭ്യമാകുന്ന ബ്രൗസറുകളിൽ വന്നിരിക്കുകയാണ്. വർഷങ്ങളായി UI ഡിസൈനർമാർ നേരിടുന്ന line-height ക്രമീകരിക്കുന്നതിനായുള്ള സങ്കീർണ്ണമായ പ്രക്രിയകൾ ഒഴിവാക്കാൻ ഇത് സഹായിക്കുന്നു. ഒരു ഫോണ്ടിന്റെ cap height-ന് മുകളിലുമുള്ളതും baseline-ന് താഴെയുമുള്ളതുമായ അദൃശ്യമായ പാഡിംഗ് (padding) ഒഴിവാക്കുന്നതിലൂടെ, വെർട്ടിക്കൽ അലൈൻമെന്റ് (vertical alignment) ഒരു വീതിയോ നിറമോ നൽകുന്നതുപോലെ ലളിതമാക്കാൻ ഈ പ്രോപ്പർട്ടിക്ക് സാധിക്കുന്നു.

എന്തുകൊണ്ടാണ് ഈ പ്രശ്നം പ്രധാനപ്പെട്ടതായത്

ഓരോ ടൈപ്പ്‌ഫേസിലും (typeface) ചില "ghost" സ്പേസുകൾ ഉണ്ടാകാറുണ്ട്: ഏറ്റവും വലിയ അക്ഷരങ്ങൾക്ക് മുകളിലായി കുറച്ച് പിക്സലുകളും അക്ഷരങ്ങൾ ഇരിക്കുന്ന ലൈനിന് താഴെയായി കുറച്ച് പിക്സലുകളും. ഈ സ്ഥലം അദൃശ്യമാണെങ്കിലും, ഇത് ഒരു ബട്ടണിന്റെ ലേബലിനെ മുകളിലേക്കോ താഴേക്കോ നീക്കുകയും, ഒരു ഹെഡിംഗ് ഐക്കണിന്റെ അരികിൽ കൃത്യമായി വരാതിരിക്കാൻ കാരണമാവുകയും ചെയ്യുന്നു. ഇത് പരിഹരിക്കാൻ ഡിസൈനർമാർക്ക് "magic numbers" ഉപയോഗിക്കേണ്ടി വരുന്നു. ബ്രൗസറുകൾക്ക് ഈ പാഡിംഗ് നേരിട്ട് നീക്കം ചെയ്യാൻ കഴിയാത്തതിനാൽ, ടീമുകൾ ഇത്തരം ക്രമീകരണങ്ങളെ അടിസ്ഥാനമാക്കി ഡിസൈൻ ടോക്കണുകൾ (design tokens), യൂട്ടിലിറ്റി ക്ലാസുകൾ (utility classes), കമ്പോണന്റ് ലൈബ്രറികൾ (component libraries) എന്നിവയുൾപ്പെടെയുള്ള സ്പേസിംഗ് സിസ്റ്റങ്ങൾ തന്നെ നിർമ്മിക്കേണ്ടി വന്നു.

പഴയ പരിഹാര മാർഗങ്ങൾ

text-box-trim വരുന്നതിന് മുമ്പ് ഡെവലപ്പർമാർ സാധാരണയായി ഇവയാണ് ചെയ്തിരുന്നത്:

• അധിക സ്പേസ് ബാലൻസ് ചെയ്യാൻ കസ്റ്റം line-height കണക്കാക്കുക.
• ടെക്സ്റ്റ് മുകളിലേക്കോ താഴേക്കോ മാറ്റാൻ നെഗറ്റീവ് മാർജിനുകൾ (negative margins) ഉപയോഗിക്കുക.
• ഡിസൈൻ ഫയലുകളിൽ നിന്നുള്ള നമ്പറുകൾ കോപ്പി ചെയ്ത് CSS-ൽ ഹാർഡ്-കോഡ് ചെയ്യുക.

ഈ രീതികൾ പ്രവർത്തിക്കുമെങ്കിലും അവ സുരക്ഷിതമല്ല. ഫോണ്ടോ അതിന്റെ വണ്ണമോ (weight) ഭാഷയോ മാറ്റിയാൽ ഈ നമ്പറുകൾ തെറ്റുകയും, അത് UI എലമെന്റുകളുടെ അലൈൻമെന്റ് തെറ്റിക്കുന്നതിനും കോഡ് മെയിന്റനൻസ് ബുദ്ധിമുട്ടിക്കുന്നതിനും കാരണമാവുകയും ചെയ്യുന്നു.

text-box-trim എങ്ങനെ മാറ്റങ്ങൾ കൊണ്ടുവരുന്നു

ടെക്സ്റ്റ് ബോക്സിനെ അക്ഷരങ്ങളുടെ (glyph) കൃത്യമായ അതിരുകളിലേക്ക് പരിമിതപ്പെടുത്താൻ text-box-trim ബ്രൗസറിനോട് ആവശ്യപ്പെടുന്നു. ഏത് വശങ്ങളാണ് ട്രിം ചെയ്യേണ്ടതെന്ന് നിർദ്ദേശിക്കാൻ ഈ പ്രോപ്പർട്ടിക്ക് സാധിക്കും. ഇതിനോടൊപ്പം ഉപയോഗിക്കുന്ന text-box-edge എന്ന പ്രോപ്പർട്ടി cap height-നുള്ള റഫറൻസ് എഡ്ജ് നിർവചിക്കുന്നു. പ്രായോഗികമായി:

button { text-box-trim: both; text-box-edge: cap; }

ഇത് ബോക്സിന്റെ മുകൾഭാഗം cap height-ലും താഴെ ഭാഗം അക്ഷരങ്ങളുടെ baseline-ലും ക്രമീകരിച്ച് അനാവശ്യമായ പാഡിംഗ് ഒഴിവാക്കുന്നു. ഇതിന്റെ ഫലമായി, കാണുന്ന അക്ഷരങ്ങളുമായി കൃത്യമായി പൊരുത്തപ്പെടുന്ന ഒരു ലൈൻ ബോക്സ് ലഭിക്കുന്നു. അതിനാൽ അധിക കണക്കുകൂട്ടലുകൾ ഇല്ലാതെ തന്നെ വെർട്ടിക്കൽ സെന്ററിംഗ് സാധ്യമാവുകയും ഐക്കണുകൾ അക്ഷരങ്ങളോട് ചേർന്ന് കൃത്യമായി വരികയും ചെയ്യുന്നു.

ബ്രൗസർ സപ്പോർട്ട് – തുടക്ക ഘട്ടത്തിലാണെങ്കിലും വളർന്നുവരുന്നു

നിലവിൽ ചില ബ്രൗസറുകളിൽ മാത്രം (experimental flags വഴിയോ അല്ലെങ്കിൽ അവയുടെ ഏറ്റവും പുതിയ റിലീസുകളിലൂടെയോ) ഈ ഫീച്ചർ ലഭ്യമാണ്. ഭൂരിഭാഗം പ്രൊഡക്ഷൻ എൻവയോൺമെന്റുകളും ഇപ്പോഴും പഴയ രീതിയിലുള്ള റെൻഡറിംഗ് പാത തന്നെ ഉപയോഗിക്കേണ്ടി വരും, അതിനാൽ ഡെവലപ്പർമാർ ഒരു 'graceful degradation' സ്ട്രാറ്റജി പ്ലാൻ ചെയ്യേണ്ടതുണ്ട്. എന്നാൽ ഈ ഫീച്ചർ സപ്പോർട്ട് ചെയ്യുന്ന ബ്രൗസറുകളിൽ ഇത് മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നുണ്ടെന്നും, ഇതിന്റെ സ്പെസിഫിക്കേഷൻ അംഗീകരിക്കപ്പെട്ടതായും അറിയാം. അതിനാൽ ഉടൻ തന്നെ കൂടുതൽ ബ്രൗസറുകളിൽ ഇത് ലഭ്യമാകും.

ഇതിന്റെ ഗുണങ്ങൾ

ഒരു പ്രോജക്റ്റിൽ സാധ്യമാകുന്ന ഇടങ്ങളിൽ text-box-trim ഉപയോഗിച്ചാൽ, സ്റ്റൈൽഷീറ്റുകൾ കൂടുതൽ വൃത്തിയുള്ളതാകും. ഇനി മുതൽ പ്രത്യേക line-height ഫോർമുലകളോ, നെഗറ്റീവ് മാർജിനുകളോ, അദൃശ്യമായ സ്പേസ് പരിഹരിക്കാൻ മാത്രം ഉപയോഗിക്കുന്ന ഡിസൈൻ ടോക്കണുകളോ ആവശ്യമില്ല. ദീർഘകാലാടിസ്ഥാനത്തിൽ ഡിസൈൻ സിസ്റ്റങ്ങൾ ലളിതമാക്കാൻ ഇത് സഹായിക്കും: ഒരു സിംഗിൾ "text baseline" ടോക്കൺ ഉപയോഗിച്ച് പലതരം "vertical-offset" വാല്യൂകൾക്ക് പകരമായി ഉപയോഗിക്കാം, കൂടാതെ ഫോണ്ട് മാറ്റങ്ങൾ വരുത്തുമ്പോഴും UI കമ്പോണന്റുകൾക്ക് മാറ്റം സംഭവിക്കാതെ നിലനിൽക്കാൻ സാധിക്കും.

പഴയ രീതികൾ ഉപയോഗിച്ച് വലിയ രീതിയിൽ ഇൻവെസ്റ്റ് ചെയ്ത ടീമുകൾക്ക് ഇത് സ്വീകരിക്കാൻ പ്രയാസമില്ല. ഈ പ്രോപ്പർട്ടി ബോക്സ്-മോഡൽ (box-model) തലത്തിൽ പ്രവർത്തിക്കുന്നതിനാൽ, ഒരു കമ്പോണന്റിൽ മാത്രം (ഉദാഹരണത്തിന് ഒരു ബട്ടൺ ലേബൽ) ഇത് ഉപയോഗിച്ച് നോക്കാവുന്നതാണ്. ബാക്കിയുള്ള ലേഔട്ടിനെ ബാധിക്കാതെ തന്നെ മാറ്റം വരുത്താൻ ഇത് സഹായിക്കുന്നു. ഈ ക്രമാനുഗതമായ സമീപനം (incremental approach) പൂർണ്ണമായി മാറുന്നതിന് മുമ്പ് ഇതിന്റെ ഗുണങ്ങൾ വിലയിരുത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു.

വെല്ലുവിളികൾ

ബ്രൗസറുകൾക്കിടയിലുള്ള അസമമായ സപ്പോർട്ടാണ് ഏറ്റവും വലിയ തടസ്സം. ഒരു ഉപയോക്താവിന്റെ ബ്രൗസറിൽ text-box-trim ഇല്ലെങ്കിൽ, ടെക്സ്റ്റ് പഴയ ബോക്സ് മോഡലിലേക്ക് മാറുകയും വീണ്ടും "ghost padding" ഉണ്ടാവുകയും ചെയ്യും. അതിനാൽ, സപ്പോർട്ട് ഇല്ലാത്ത ബ്രൗസറുകൾക്കായി നിലവിലുള്ള line-height ക്രമീകരണങ്ങൾ നിലനിർത്തുന്നത് പോലുള്ള ഒരു ഫോളബാക്ക് സ്ട്രാറ്റജി (fallback strategy) ഡെവലപ്പർമാർ നൽകേണ്ടതുണ്ട്. ടൂൾചെയിനുകളും (build pipelines, CSS-in-JS libraries, design-token generators) ഈ പുതിയ പ്രോപ്പർട്ടി തിരിച്ചറിയേണ്ടതുണ്ട്; അതുവരെ ഓട്ടോമേറ്റഡ് സ്റ്റൈൽ ഓഡിറ്റുകളിൽ ഈ ഫീച്ചർ അവഗണിക്കപ്പെട്ടേക്കാം.

ശ്രദ്ധിക്കേണ്ട കാര്യങ്ങൾ

• ബ്രൗസർ റിലീസുകൾ: പ്രധാന ബ്രൗസറുകൾ text-box-trim ഡിഫോൾട്ട് ആയി ലഭ്യമാക്കുന്നത് സംബന്ധിച്ച അറിയിപ്പുകൾ ശ്രദ്ധിക്കുക.
• ഡിസൈൻ സിസ്റ്റം അപ്ഡേറ്റുകൾ: ടോക്കൺ ലൈബ്രറികൾ കൈകാര്യം ചെയ്യുന്ന ടീമുകൾ നിലവിലുള്ള "vertical-offset" ടോക്കണുകൾക്ക് പകരമായി ഒരു "baseline" ടോക്കൺ പ്ലാൻ ചെയ്യേണ്ടതുണ്ട്.
• ടൂളിംഗ്: CSS പ്രീപ്രോസസറുകളും ലിന്റിംഗ് ടൂളുകളും (linting tools) ഈ പ്രോപ്പർട്ടിക്ക് സപ്പോർട്ട് നൽകാൻ തുടങ്ങിയിട്ടുണ്ട്; അവ നേരത്തെ അപ്ഡേറ്റ് ചെയ്യുന്നത് മാറ്റങ്ങൾ എളുപ്പമാക്കും.

ചുരുക്കത്തിൽ

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