text-box-trim નામની એક નવી CSS પ્રોપર્ટી એવા બ્રાઉઝર્સમાં આવી ગઈ છે જે તેને પહેલેથી જ સપોર્ટ કરે છે, જે ડેવલપર્સને વર્ષોથી UI કામમાં વપરાતી line-height ની જટિલતાઓ દૂર કરવાની મંજૂરી આપે છે. ફોન્ટના cap height ની ઉપર અને baseline ની નીચે રહેલી અદ્રશ્ય પેડિંગને કાપીને, આ પ્રોપર્ટી વર્ટિકલ ટેક્સ્ટ એલાઈનમેન્ટને વ્હિડ્થ (width) અથવા કલર સેટ કરવા જેટલું જ અનુમાનિત બનાવે છે.

આ સમસ્યા શા માટે મહત્વની હતી

દરેક ટાઇપફેસમાં "ghost" સ્પેસ હોય છે: સૌથી ઊંચા કેપિટલ અક્ષરોની ઉપર થોડા પિક્સેલ્સ અને અક્ષરો જે લાઇન પર હોય છે તેની નીચે થોડા પિક્સેલ્સ. તે સ્પેસ અદ્રશ્ય હોય છે, પરંતુ તે બટનના લેબલને ઉપર કે નીચે ધકેલે છે, હેડિંગને આઇકોનની ધારથી દૂર કરે છે, અને ડિઝાઇનર્સને વળતર આપવા માટે "magic numbers" ઉમેરવા માટે મજબૂર કરે છે. ટીમોએ આ એડજસ્ટમેન્ટ્સની આસપાસ આખી સ્પેસિંગ સિસ્ટમ્સ—ડિઝાઇન ટોકન્સ, યુટિલિટી ક્લાસીસ અને કમ્પોનન્ટ લાઇબ્રેરી—બનાવી છે, કારણ કે બ્રાઉઝર પેડિંગને સીધી રીતે દૂર કરવાનો કોઈ રસ્તો આપતું નહોતું.

જૂના ઉપાયો

text-box-trim પહેલાં, ડેવલપર્સ સામાન્ય રીતે:

  • વધારાની જગ્યાને સંતુલિત કરવાનો પ્રયાસ કરતી કસ્ટમ line-height ની ગણતરી કરતા હતા.
  • ટેક્સ્ટને ઉપર કે નીચે ખેંચવા માટે નેગેટિવ માર્જિન (negative margins) લાગુ કરતા હતા.
  • ડિઝાઇન ફાઇલોમાંથી નંબરો કોપી કરીને તેને CSS માં હાર્ડ-કોડ કરતા હતા.

તે યુક્તિઓ કામ કરે છે, પરંતુ તે નાજુક (fragile) છે. ફોન્ટ, વજન (weight) અથવા ભાષા બદલો, અને નંબરો ખોરવાઈ જાય છે, જેનાથી UI એલિમેન્ટ્સ ખોટી રીતે એલાઈન થાય છે અને કોડબેઝમાં મેન્ટેનન્સનો બોજ વધે છે.

text-box-trim કેવી રીતે રમત બદલે છે

text-box-trim બ્રાઉઝરને ટેક્સ્ટ બોક્સને વાસ્તવિક ગ્લિફ બાઉન્ડ્સ (glyph bounds) સુધી ક્લિપ કરવાનું કહે છે. આ પ્રોપર્ટી એવી વેલ્યુઝ સ્વીકારે છે જે જણાવે છે કે કઈ ધાર (edges) ને ટ્રિમ કરવી છે, જ્યારે તેની સાથેની text-box-edge પ્રોપર્ટી કેપ હાઇટ માટે રેફરન્સ એજ વ્યાખ્યાયિત કરે છે. વ્યવહારમાં, આ સેટ કરવાથી:

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

બોક્સના ઉપરના ભાગને કેપ હાઇટ પર અને નીચેના ભાગને અલ્ફાબેટિક બેસલાઇન પર મર્યાદિત કરે છે, જેનાથી કાલ્પનિક (phantom) પેડિંગ દૂર થાય છે. પરિણામ એ છે કે લાઇન બોક્સ દૃશ્યમાન અક્ષરો સાથે બરાબર મેળ ખાય છે, જેથી વધારાની ગણતરી વગર વર્ટિકલ સેન્ટરિંગ કામ કરે છે અને આઇકોન્સ અક્ષરો સાથે સમાન રીતે ગોઠવાય છે.

બ્રાઉઝર સપોર્ટ – હજુ શરૂઆતના તબક્કે છે, પણ વધી રહ્યો છે

સપોર્ટ હાલમાં એવા ગણ્યાગાંઠ્યા બ્રાઉઝર્સ પૂરતો મર્યાદિત છે જેણે આ ફીચરને એક્સપેરિમેન્ટલ ફ્લેગ્સ અથવા તેમના લેટેસ્ટ રિલીઝમાં આપ્યું છે. મોટાભાગના પ્રોડક્શન એન્વાયરમેન્ટ્સ હજુ પણ પરંપરાગત રેન્ડરિંગ પાથનો ઉપયોગ કરશે, જેનો અર્થ છે કે ડેવલપર્સને ગ્રેસફુલ ડિગ્રેડેશન સ્ટ્રેટેજી (graceful degradation strategy) ની જરૂર પડશે. સારા સમાચાર એ છે કે જે બ્રાઉઝર્સ તેને સપોર્ટ કરે છે તેઓએ પહેલેથી જ સાબિત કર્યું છે કે તેનો અમલ સ્થિર છે, અને મુખ્ય પ્રવાહમાં ઉપયોગ માટે સ્પેસિફિકેશન મંજૂર કરવામાં આવ્યું છે, તેથી વ્યાપક રોલ-આઉટ હવે નજીક છે.

શું જોખમ/ફાયદો છે

જો કોઈ પ્રોજેક્ટ શક્ય હોય ત્યાં text-box-trim અપનાવે છે, તો તેનો તાત્કાલિક ફાયદો એક સ્વચ્છ સ્ટાઇલશીટ છે. હવે કોઈ ખાસ line-height ફોર્મ્યુલાની જરૂર નથી, કોઈ નેગેટિવ માર્જિનની જરૂર નથી, અને અદ્રશ્ય સ્પેસને કાઉન્ટર કરવા માટેના ડિઝાઇન-ટોકન એન્ટ્રીઝની જરૂર નથી. લાંબા ગાળે, ડિઝાઇન સિસ્ટમ્સને સરળ બનાવી શકાય છે: એક સિંગલ "text baseline" ટોકન "vertical-offset" વેલ્યુઝના સેટને બદલી શકે છે, અને UI કમ્પોનન્ટ્સ ફોન્ટના ફેરફારો સામે વધુ સ્થિતિસ્થાપક (resilient) બને છે.

જે ટીમોએ પહેલેથી જ જૂની પદ્ધતિઓ (legacy hacks) માં ઘણું રોકાણ કર્યું છે, તેમના માટે બદલવાનો ખર્ચ બહુ વધારે નથી. કારણ કે આ પ્રોપર્ટી બોક્સ-મોડલ લેવલ પર કામ કરે છે, તમે તેને સિંગલ કમ્પોનન્ટ પર સક્ષમ કરી શકો છો—ધારો કે, એક બટન લેબલ જે યોગ્ય દેખાતું નથી—અને બાકીના લેઆઉટને અડક્યા વગર ગેપ દૂર થતો જોઈ શકો છો. આ ઇન્ક્રીમેન્ટલ અભિગમ તમને સંપૂર્ણ માઇગ્રેશન કરતા પહેલા તેના ફાયદાનું મૂલ્યાંકન કરવાની મંજૂરી આપે છે.

બીજી બાજુ

સૌથી મોટો અવરોધ બ્રાઉઝર કવરેજનું અસમાન હોવું છે. જો યુઝરના બ્રાઉઝરમાં text-box-trim ન હોય, તો ટેક્સ્ટ ડિફોલ્ટ બોક્સ મોડલ પર પાછું જશે, જેનાથી ફરીથી "ghost padding" આવી જશે. તેથી ડેવલપર્સે ફોલબેક સ્ટ્રેટેજી (fallback strategy) આપવી જોઈએ, જેમ કે બ્રાઉઝર સપોર્ટ ન કરતા હોય ત્યાં હાલના line-height એડજસ્ટમેન્ટ્સ જાળવી રાખવા. ટૂલચેઇન્સ (બિલ્ડ પાઇપલાઇન્સ, CSS-in-JS લાઇબ્રેરીઓ, ડિઝાઇન-ટોકન જનરેટર્સ) એ પણ નવી પ્રોપર્ટીને ઓળખવી પડશે; જ્યાં સુધી તેઓ તેમ નહીં કરે, ત્યાં સુધી ઓટોમેટેડ સ્ટાઇલ ઓડિટમાં આ ફીચરને અવગણવામાં આવી શકે છે.

આગળ શું જોવું

  • બ્રાઉઝર રિલીઝ: મુખ્ય બ્રાઉઝર્સ ક્યારે ડિફોલ્ટ રીતે text-box-trim સક્ષમ કરશે તેના માટે તેમના રિલીઝ નોટ્સ પર નજર રાખો.
  • ડિઝાઇન-સિસ્ટમ અપડેટ્સ: જે ટીમો ટોકન લાઇબ્રેરીઓ જાળવે છે તેમણે "baseline" ટોકનની યોજના બનાવવાનું શરૂ કરવું જોઈએ જે વર્તમાન "vertical-offset" ટોકન્સનું સ્થાન લઈ શકે.
  • ટૂલિંગ: CSS પ્રીપ્રોસેસર્સ અને લિન્ટિંગ ટૂલ્સ આ પ્રોપર્ટી માટે સપોર્ટ ઉમેરવાનું શરૂ કરી રહ્યા છે; તે ડિપેન્ડન્સીઝને વહેલી અપડેટ કરવાથી ટ્રાન્ઝિશન સરળ બનશે.

નિષ્કર્ષ

text-box-trim આખરે વેબ પ્લેટફોર્મને ટેક્સ્ટને વર્ટિકલી (vertically) એલાઈન કરવા માટે એક નેટિવ રીત આપે છે, જેનાથી વર્ષોથી સ્ટાઇલશીટ્સમાં વપરાતા હેક-ભરેલા કામચલાઉ ઉપાયોની જરૂર રહેશે નહીં. વહેલા અપનાવનારાઓ (Early adopters) એક સિંગલ કમ્પોનન્ટને ક્લીન કરી શકે છે, વિઝ્યુઅલ સુધારો સાબિત કરી શકે છે, અને જેમ જેમ બ્રાઉઝર સપોર્ટ વધશે તેમ તેમ તેનો ઉપયોગ વધારી શકે છે. અત્યારે તેને અવગણવાનો અર્થ એ છે કે એવી સમસ્યા માટે નાજુક (brittle) કોડ લખવાનું અને જાળવવાનું ચાલુ રાખવું, જેનો ઉકેલ લાવવા માટે બ્રાઉઝર હવે તૈયાર છે.