পেজ রুলার যেকোনো ওয়েবপেজে ফটোশপ-স্টাইল রুলার এবং ড্র্যাগ করার যোগ্য গাইড লাইন যোগ করে। ভিউপোর্টের ওপরের এবং বাম দিকের প্রান্তে পিক্সেল-নিখুঁত রুলার থাকে এবং আপনি দূরত্ব পরিমাপ করতে, অ্যালাইনমেন্ট চেক করতে এবং স্পেসিং যাচাই করতে পেজে গাইড লাইন টেনে আনতে পারেন — এ সবই সরাসরি লাইভ পেজে করা সম্ভব।
ডিজাইনাররা যখন ফিগমা বা ফটোশপে কাজ করেন, তখন স্পেসিং এবং অ্যালাইনমেন্ট চেক করার জন্য তারা রুলার এবং গাইডের ওপর নির্ভর করেন। কিন্তু যখন সেই ডিজাইনগুলো HTML/CSS-এ ইমপ্লিমেন্ট করা হয়, তখন পিক্সেলের নির্ভুলতা যাচাই করার অর্থ সাধারণত DevTools ওপেন করা, একে একে এলিমেন্টগুলোর ওপর মাউস নেওয়া এবং মকআপের সাথে কম্পিউটেড ভ্যালুগুলোর তুলনা করা। পেজ রুলার সেই পরিচিত রুলার-এবং-গাইড ওয়ার্কফ্লো সরাসরি ব্রাউজারে নিয়ে আসে। ভিউপোর্টের ওপরে একটি অনুভূমিক (horizontal) রুলার এবং বাম পাশে একটি লম্ব (vertical) রুলার থাকে — উভয়ই পিক্সেল পজিশন দেখায়। পেজে একটি গাইড লাইন আনতে যেকোনো রুলার থেকে ক্লিক করে ড্র্যাগ করুন। গাইডগুলো কালার-কোডেড (অনুভূমিকের জন্য নীল, লম্বের জন্য লাল) এবং তাদের পিক্সেল পজিশন দেখায়। যেকোনো দুটি সমান্তরাল গাইডের মধ্যবর্তী দূরত্ব স্বয়ংক্রিয়ভাবে গণনা এবং প্রদর্শিত হয়। গাইডগুলো সরাতে ড্র্যাগ করুন অথবা মুছে ফেলতে ডাবল-ক্লিক করুন। সম্পূর্ণ ওভারলেটি নন-ইনট্রুসিভ — এটি লেআউট বা ইন্টারঅ্যাকশনে কোনো প্রভাব না ফেলেই পেজের ওপর অবস্থান করে।
ভিউপোর্টের ওপরে এবং বাম দিকের প্রান্তে প্রতি ৫০ পিক্সেল অন্তর টিক মার্ক সহ সুনির্দিষ্ট রুলার। রুলারগুলো পেজের সাথে স্ক্রল করে এবং পেজের অরিজিন (০,০)-এর সাপেক্ষে নির্ভুল পিক্সেল পজিশন দেখায়। প্রতি ১০px অন্তর টিক মার্ক এবং প্রতি ৫০px অন্তর লেবেল থাকে।
অনুভূমিক গাইড তৈরি করতে ওপরের রুলার থেকে এবং লম্ব গাইড তৈরি করতে বাম পাশের রুলার থেকে ক্লিক করে ড্র্যাগ করুন। গাইডগুলো কার্সার পজিশনের সাথে স্ন্যাপ করে এবং তাদের সঠিক পিক্সেল স্থানাঙ্ক (যেমন, y: 200px) দেখায়। পজিশন পরিবর্তন করতে ড্র্যাগ করুন, মুছে ফেলতে ডাবল-ক্লিক করুন।
যখন দুটি সমান্তরাল গাইড স্থাপন করা হয়, তখন তাদের মধ্যবর্তী পিক্সেল দূরত্ব স্বয়ংক্রিয়ভাবে গণনা করা হয় এবং একটি কানেক্টিং ব্র্যাকেট ও লেবেলের মাধ্যমে প্রদর্শিত হয়। দুটি অনুভূমিক গাইড ১২০px ব্যবধানে রাখুন এবং তাদের মাঝখানে "১২০px" লেবেলটি দেখুন।
অনুভূমিক গাইডগুলো নীল এবং লম্ব গাইডগুলো লাল — যা একাধিক গাইড থাকলে এক নজরে সেগুলোকে আলাদা করতে সাহায্য করে। প্রতিটি গাইড একটি ছোট লেবেল ব্যাজের মাধ্যমে তার পজিশন দেখায়।
রুলার এবং গাইডগুলো একটি স্বচ্ছ ওভারলে হিসেবে রেন্ডার করা হয় যা পেজের DOM, লেআউট বা জাভাস্ক্রিপ্টে কোনো প্রভাব ফেলে না। আপনি পেজ এলিমেন্টগুলোর সাথে ইন্টারঅ্যাক্ট করতে তাদের ওপর ক্লিক করতে পারেন। ওভারলেটি শুধুমাত্র রুলার এবং গাইড হ্যান্ডেলের ওপর ক্লিকগুলো শনাক্ত করে।
আপনার যত খুশি গাইড স্থাপন করতে পারেন — কোনো সীমাবদ্ধতা নেই। পেজের প্রতিটি গুরুত্বপূর্ণ অ্যালাইনমেন্ট পয়েন্ট চিহ্নিত করতে অনুভূমিক এবং লম্ব গাইডের সাহায্যে একটি সম্পূর্ণ পরিমাপ গ্রিড তৈরি করুন।
মকআপ অনুযায়ী হেডারটি ৮০px লম্বা এবং কন্টেন্ট ওপর থেকে ১২০px নিচে শুরু হয়েছে। সেই পজিশনগুলোতে অনুভূমিক গাইড রাখুন এবং তাৎক্ষণিকভাবে যাচাই করুন যে ইমপ্লিমেন্ট করা পেজটি ডিজাইন স্পেসিফিকেশনের সাথে মিলছে কিনা।
বারবার আসা এলিমেন্টগুলোর (কার্ড, লিস্ট আইটেম, সেকশন) ওপরে এবং নিচে গাইড স্থাপন করুন যাতে তারা সবাই অভিন্ন স্পেসিং বজায় রাখছে কিনা তা যাচাই করা যায়। আইটেমগুলোর মধ্যে অসামঞ্জস্যপূর্ণ গ্যাপগুলো সাথে সাথেই নজরে আসবে।
একটি হেডিংয়ের বাম প্রান্তে লম্ব গাইড স্থাপন করুন, তারপর চেক করুন যে নিচে থাকা প্যারাগ্রাফ টেক্সট, বাটন এবং ইমেজগুলো একই লাইনে অ্যালাইন করা আছে কিনা। মাত্র কয়েক পিক্সেলের অমিলও গাইডের সাপেক্ষে স্পষ্ট দেখা যাবে।
একটি এলিমেন্টের উইডথ পরিমাপ করতে তার বাম এবং ডান প্রান্তে দুটি লম্ব গাইড স্থাপন করুন। হাইট মাপতে দুটি অনুভূমিক গাইড স্থাপন করুন। স্বয়ংক্রিয়ভাবে গণনা করা দূরত্বটি আপনাকে সঠিক পিক্সেল ডাইমেনশন দিবে।
সাধারণ ব্রেকপয়েন্ট উইডথগুলোতে (৭৬৮px, ১০২৪px, ১২৮০px) লম্ব গাইড স্থাপন করুন এবং প্রতিটি ব্রেকপয়েন্টে এলিমেন্টগুলো সঠিকভাবে রিফ্লো (reflow) হচ্ছে কিনা তা পরীক্ষা করতে ব্রাউজারটি রিসাইজ করুন। গাইডগুলো ভিজ্যুয়াল রেফারেন্স পয়েন্ট হিসেবে স্থির থাকে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং পেজ রুলার আইকনে ক্লিক করুন। ভিউপোর্টের ওপরের and বাম দিকের প্রান্তে পিক্সেল-নিখুঁত রুলারগুলো দেখা যাবে।
একটি অনুভূমিক গাইড লাইন স্থাপন করতে ওপরের রুলার থেকে অথবা লম্ব গাইডের জন্য বাম পাশের রুলার থেকে ক্লিক করে ড্র্যাগ করুন। গাইডটি আপনার কার্সার অনুসরণ করবে এবং আপনি যেখানে এটি ছেড়ে দেবেন সেই পিক্সেল পজিশনে স্ন্যাপ করবে।
প্রতিটি গাইড তার পিক্সেল পজিশন (যেমন, y: 200px) দেখায়। যখন দুটি সমান্তরাল গাইড স্থাপন করা হয়, তখন তাদের মধ্যবর্তী দূরত্ব একটি লেবেলযুক্ত ব্র্যাকেটের মাধ্যমে স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়।
যেকোনো গাইডকে নতুন পজিশনে সরাতে ড্র্যাগ করুন — ডিস্ট্যান্স লেবেলগুলো রিয়েল-টাইমে আপডেট হবে। পেজ থেকে কোনো গাইড সরাতে সেটিতে ডাবল-ক্লিক করুন।
সব রুলার এবং গাইড লুকাতে পুনরায় পেজ রুলার আইকনে ক্লিক করুন। আপনি যদি একই সেশনের মধ্যে আবার সক্রিয় করেন তবে আপনার গাইডের পজিশনগুলো সংরক্ষিত থাকবে।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
