Pixel Ruler

किसी भी वेब पेज पर पिक्सेल मापने के लिए Pixel Ruler: एलिमेंट के आकार, स्पेसिंग और पैडिंग के लिए स्क्रीन रूलर।

Pixel Ruler स्क्रीन पर रूलर रख देता है और ब्राउज़र में कुछ भी नापने देता है। टूलबार के आइकन पर क्लिक कीजिए, लेआउट पर माउस खींचिए और सटीक दूरी CSS पिक्सेल में पढ़िए। किसी एलिमेंट पर पॉइंटर ले जाइए और उसकी चौड़ाई, ऊँचाई, पैडिंग और आसपास के ब्लॉक तक का फ़ासला सामने आ जाता है। नंबर DevTools से मेल खाते हैं, क्योंकि एक्सटेंशन वही CSS पिक्सेल पढ़ता है जिनसे ब्राउज़र पेज बनाता है। न कोई पैनल खोलना है, न स्क्रीनशॉट एक्सपोर्ट करना है, न हिसाब लगाना है। बस जिस साइट को आप पहले से देख रहे हैं, उसी के ऊपर एक पिक्सेल रूलर। एक ही ओवरले, बीच में कुछ बदलने की ज़रूरत नहीं: 📏 दबाकर खींचिए और पेज के किन्हीं दो बिंदुओं के बीच की दूरी नाप लीजिए। 📏 किसी एलिमेंट पर पॉइंटर रखिए और उसका आकार, पैडिंग और पड़ोसी ब्लॉक तक की दूरी देखिए। 📏 खड़ी और आड़ी गाइड लगाइए और उनके सहारे ब्लॉक अलाइन कीजिए। रेफ़रेंस के लिए रूलर हमेशा स्क्रीन पर रहता है, और एक ही बटन नतीजे को पॉइंटर के नीचे वाले एलिमेंट के CSS सिलेक्टर के साथ क्लिपबोर्ड पर कॉपी कर देता है। शुरू कैसे करें, तीन कदम में: 1. एक्सटेंशन इंस्टॉल कीजिए और उसे टूलबार पर पिन कर दीजिए। 2. जिस पेज पर काम कर रहे हैं उसे खोलिए और आइकन पर क्लिक कीजिए। 3. खींचिए, पॉइंटर ले जाइए, नापिए — काम पूरा होने पर दो बार Esc दबा दीजिए। फ़्रंट-एंड डेवलपर इससे लेआउट को मॉकअप के सामने रखकर जाँचते हैं। डिज़ाइनर इसे पेज रूलर की तरह इस्तेमाल करते हैं, जब हैंडऑफ़ फ़ाइल पुरानी पड़ चुकी होती है। QA इंजीनियर "बटन थोड़ा नीचे लग रहा है" की जगह असली नंबर के साथ बग दर्ज करते हैं। लाइव साइट पर जिसे भी फटाफट पिक्सेल नाप चाहिए, उसे दो क्लिक में मिल जाता है। यह वेब रूलर आपको क्या देता है: - किन्हीं दो बिंदुओं के बीच की दूरी, पिक्सेल में - पेज के किसी भी एलिमेंट की चौड़ाई और ऊँचाई - पैडिंग, मार्जिन और पड़ोसी एलिमेंट के बीच के फ़ासले - एक एलिमेंट से आसपास के ब्लॉक तक की दूरियाँ - विंडो के ऊपरी और बाएँ किनारे पर पैमाने - नापे गए एलिमेंट का टैग, क्लास और CSS सिलेक्टर - अलाइनमेंट जाँचने के लिए दोबारा इस्तेमाल होने वाली गाइड कीबोर्ड पॉइंटर को स्थिर रखता है: → Shift नाप को आड़े या खड़े अक्ष पर लॉक कर देता है → ऐरो की मौजूदा बिंदु को ठीक 1 px खिसकाती हैं → Esc मौजूदा नाप हटाता है, दूसरा Esc पेज वापस आपके हवाले कर देता है → एक शॉर्टकट नतीजा क्लिपबोर्ड पर कॉपी कर देता है एक बार इंस्टॉल कीजिए और आपके पास वही पिक्सेल रूलर होगा जो Windows, Linux और ChromeOS वाले चलाते हैं, और वही पिक्सेल रूलर जो Mac वाले चलाते हैं, क्योंकि यह टूल ब्राउज़र में रहता है, ऑपरेटिंग सिस्टम में नहीं। कोई डाउनलोड ढूँढ़ने की ज़रूरत नहीं, न इंस्टॉलर, न एडमिन अधिकार: एक्सटेंशन एक क्लिक में Chrome Web Store से आ जाता है। लॉन्च पर यह मुफ़्त पिक्सेल रूलर है और हर फ़ीचर सबके लिए खुला है। अलग विंडो में खुलने वाला स्क्रीन रूलर ऐप पेज स्क्रॉल होते ही गलत चीज़ नापने लगता है। यह पिक्सेल रूलर टैब के अंदर ही बनता है और कंटेंट के साथ स्क्रॉल होता है। यह ऑनलाइन पिक्सेल रूलर है: यह लाइव पेज पर चलता है, स्टेजिंग सर्वर पर, क्लाइंट की साइट पर, लॉगिन के पीछे भी। विंडो की जमी हुई तस्वीर नापने वाला डेस्कटॉप रूलर यह नहीं कर सकता। कोई इलस्ट्रेशन या लोगो जाँचना है? इसे इमेज नापने के लिए इस्तेमाल कीजिए — तस्वीर पर पॉइंटर ले जाइए और उसका रेंडर हुआ आकार पढ़िए, जो अक्सर सोर्स फ़ाइल के आकार से अलग होता है। सवाल और जवाब प्रश्न: DevTools खोले बिना स्क्रीन पर पिक्सेल कैसे नापें? उत्तर: आइकन पर क्लिक कीजिए और खींचिए। ओवरले पेज के ऊपर बैठता है, इसलिए आप वही नापते हैं जो सचमुच दिख रहा है — वे हॉवर स्टेट भी, जो किसी पैनल के फ़ोकस छीनते ही गायब हो जाते हैं। प्रश्न: स्क्रीन पिक्सेल रूलर, पिक्सेल नापने वाला रूलर, px रूलर, screen pixel ruler, pixelruler — इनमें से यह कौन-सा है? उत्तर: ये सब। टूल एक ही है, बस सर्च का शब्द बदल जाता है। प्रश्न: क्या यह सेंटीमीटर या इंच में नाप सकता है? उत्तर: नहीं। यह पिक्सेल रूलर टूल है और सिर्फ़ CSS पिक्सेल बताता है — वही यूनिट जो आप अपनी स्टाइलशीट में लिखते हैं। प्रश्न: क्या यह हर जगह काम करता है? उत्तर: आम वेबसाइटों पर, हाँ। Chrome के सिस्टम पेज, बिल्ट-इन PDF व्यूअर और दूसरे ऑरिजिन वाले iframe का अंदरूनी हिस्सा हर एक्सटेंशन के लिए बंद है, यह भी उसमें शामिल है। प्रश्न: यह कौन-सा डेटा इकट्ठा करता है? उत्तर: कोई नहीं। शून्य नेटवर्क रिक्वेस्ट, न अकाउंट, न साइन-अप। इंस्टॉल के वक्त कोई डरावनी अनुमति नहीं माँगता और पेज को तभी छूता है जब आप आइकन पर क्लिक करते हैं। पुरानी आदतें धीमी और कम सटीक हैं: कंप्यूटर स्क्रीन के काँच पर प्लास्टिक का स्केल टिकाना, या स्क्रीनशॉट में पिक्सेल गिनना। कंप्यूटर स्क्रीन के लिए बना रूलर ब्राउज़र के भीतर ही रहना चाहिए, लेआउट बदलते ही दोबारा बनना चाहिए और कोड जैसी ही यूनिट में बात करनी चाहिए। यही काम यह स्क्रीन ओवरले करता है, और इसीलिए वेबसाइट का पिक्सेल रूलर ग्राफ़िक्स एडिटर में चिपकाई गई इमेज पर रखे स्केल से बेहतर है। यह लिस्टिंग 52 भाषाओं में उपलब्ध है, इसलिए आपकी भाषा में वेब पिक्सेल रूलर सिर्फ़ एक सर्च दूर है। इसे इंस्टॉल कीजिए, अगला जो पेज खोलें उसी पर पिक्सेल नापिए, और बाकी पूरे दिन ऑन-स्क्रीन रूलर एक क्लिक की दूरी पर रखिए।