कंप्यूटर साइंस की सबसे बड़ी पहेली: चीज़ों को center करना

• कई कंपनियों के applications में text, icon आदि UI elements ठीक से बीच में aligned नहीं होते
• जबकि CSS के flex और grid का उपयोग करके आसानी से center alignment किया जा सकता है

display: flex  
justify-content: center /* क्षैतिज centering */  
align-items: center /* ऊर्ध्वाधर centering */  

या

display: grid  
justify-items: center /* क्षैतिज centering */  
align-items: center /* ऊर्ध्वाधर centering */  

center alignment को कठिन बनाने वाले कारण

• font metrics महत्वपूर्ण भूमिका निभाते हैं। ज़्यादातर लोकप्रिय fonts के bounding box बिल्कुल fit नहीं होते और उनमें खाली जगह होती है, इसलिए center alignment मुश्किल हो जाता है
• line-height setting के असर से अलग-अलग containers में मौजूद दो elements को align करना लगभग असंभव हो जाता है
• text के बगल में icon को align करना भी बहुत कठिन काम है। CSS की vertical-align property से icon को अर्थपूर्ण तरीके से align नहीं किया जा सकता
• font file में icon डालकर इस्तेमाल किए जाने वाले icon fonts में size और padding को नियंत्रित नहीं किया जा सकता, इसलिए alignment और मुश्किल हो जाता है
• designers भी icon के आकार को ध्यान में रखे बिना मशीन की तरह center alignment कर देने की गलती करते हैं
• horizontal alignment भी बारीकी से ध्यान न दिया जाए तो गलत हो सकता है

समाधान

designers

• अगर font के bounding box को text पर बिल्कुल fit कर दिया जाए तो center alignment बहुत आसान हो जाता है
• Figma में यह सुविधा उपलब्ध है (default नहीं है)
  • Vertical Trim : Cap Height to baseline

font designers

• अगर font metrics ऐसे सेट किए जाएँ कि ascender और descender के बीच की जगह cap-height की 2 गुना हो, तो developers आसानी से center alignment कर सकते हैं
• असली ascender/descender को सीमा तक बढ़ाने की ज़रूरत नहीं है, सिर्फ संख्याएँ सही होनी चाहिए

web developers

• इस्तेमाल होने वाला font पहले से पता होना चाहिए (font fallback होने पर यह काम नहीं करेगा)
• font metrics से निकाली गई padding-bottom value जोड़कर vertical center alignment मिलाया जा सकता है
• icons के लिए भी vertical-align: baseline सेट करके, font metrics और icon size से निकाली गई value के अनुसार उन्हें नीचे खिसकाकर align किया जा सकता है

icon fonts

• icon fonts का इस्तेमाल कृपया बंद करें और सामान्य image formats का उपयोग करें
• चौड़ाई और ऊँचाई वाले दो rectangles को align करने से आसान कुछ नहीं है

visual correction

• developers गणितीय रूप से परफेक्ट rectangles ही align कर सकते हैं। जिन चीज़ों में manual correction चाहिए, उनमें icon को rectangle के भीतर visual balance के साथ रखना चाहिए

GN⁺ की राय

• यह दिखाता है कि छोटे details पर ध्यान देकर UI quality को बहुत बेहतर बनाया जा सकता है। center alignment जैसी बहुत छोटी लगने वाली चीज़ भी overall feel बदल देती है
• सिर्फ "designer design देखे और developer implementation" जैसी सोच के बजाय, एक-दूसरे के क्षेत्र को समझकर सहयोग करना ही अच्छा नतीजा देता है
• बेहतर होगा कि browser rendering differences से बचने और designer की मंशा के अनुसार implementation आसान बनाने के लिए, design stage से ही font metrics को मिलाकर mockup तैयार किया जाए
• Apple, MS, Google जैसी बड़ी कंपनियों के products में भी यह समस्या दिखती है, लेकिन लगता है कि ज़्यादातर लोग इसे नज़रअंदाज़ कर देते हैं। यही कारण है कि बारीक details पर अटककर काम करना महत्वपूर्ण है
• खासकर हाल में UI test automation tools के उपयोग से, इंसानी आँख से एक-एक चीज़ जाँचने की प्रक्रिया छूटती जा रही है, इसलिए ऐसी समस्याएँ और अधिक बार हो सकती हैं और सावधानी ज़रूरी है

[dormis]

यह भी सोचने वाली बात है कि क्या पूरी तरह से मैकेनिकल centering वाकई अच्छी होती है। जैसे माउस में बाएँ-दाएँ पूरी समरूपता होने के बजाय थोड़ा अलग ergonomic डिज़ाइन ज़्यादा आरामदायक लगता है, वैसे ही यह भी शायद ऐसा तत्व है जिसे overall usability देखकर तय करना चाहिए।

[jokuhus]

मेरा मानना है कि मुख्य बात यह है कि नतीजा इरादे से अलग आ सकता है। उदाहरण के लिए, ऐसी स्थिति जहाँ माउस क्लिक स्क्रीन पर तीर की नोक वाले हिस्से पर नहीं, बल्कि उसकी पूंछ वाले हिस्से पर होता हो।

[GN⁺]

Hacker News राय

सारांश:

• CSS layout में कई समस्याएँ हैं, और CAD प्रोग्राम, game engine, animation प्रोग्राम आदि जैसे 2D/3D tools के पास बेहतर layout engine और constraint system होते हैं
• alignment के लिए कोई एकमात्र सही जवाब नहीं है, और designers को शिकायत करने के लिए हमेशा कुछ न कुछ मिल ही जाता है
  • सटीक margin measurements इस्तेमाल करने पर भी यह visually asymmetric दिख सकता है
  • अक्षरों के आकार के हिसाब से adjust करने पर भी वे शिकायत कर सकते हैं कि यह baseline या x-height आदि से मेल नहीं खाता
• Font rendering operating system और browser के अनुसार अलग होता है, इसलिए जो चीज़ एक environment में perfectly aligned है, वह दूसरे environment में बिगड़ी हुई दिख सकती है
• गैर-पश्चिमी fonts के मामले में यह और भी मुश्किल है
• वास्तविक दुनिया में भी alignment एक कठिन समस्या है (NCAA basketball court drawing का उदाहरण)
• alignment का मानदंड देखने वाले व्यक्ति के अनुसार अलग हो सकता है
• CSS के justify और align को interactive तरीके से demo करने वाली एक साइट का परिचय
• टेक्स्ट के बगल में icon रखते समय, एक designer की सलाह थी कि सिर्फ font नहीं बल्कि टेक्स्ट के "type center" के अनुसार align करें, लेकिन व्यवहार में समझौता करना पड़ा
• यह दावा 10 साल से अधिक समय से किया जाता रहा है कि CSS ने tables की functionality को पकड़ लिया है, लेकिन यह अभी भी पूरी तरह वहाँ तक नहीं पहुँचा है