HTML বিউটিফিকেশন কীভাবে কাজ করে
বিউটিফায়ার আপনার মার্কআপ ট্যাগ বাই ট্যাগ পড়ে, প্রতিটি উপাদান কতটা গভীরে নেস্টেড তা ট্র্যাক করে, এবং সামঞ্জস্যপূর্ণ ইন্ডেন্টেশনের সাথে পুনরায় নির্গত করে। পেজ কী রেন্ডার করে তা কখনও পরিবর্তিত হয় না — কেবল সোর্স কীভাবে সাজানো আছে তা বদলায়।
- ট্যাগ পার্স করুন. লাইব্রেরি আপনার ইনপুটকে টোকেনের স্ট্রিমে স্ক্যান করে: ওপেনিং ট্যাগ, ক্লোজিং ট্যাগ, টেক্সট কন্টেন্ট, কমেন্ট, এবং স্ক্রিপ্ট ও স্টাইল ব্লকের বিষয়বস্তু। কোটেড অ্যাট্রিবিউট মান এবং pre ও textarea উপাদানের বডি একক ইউনিট হিসেবে বিবেচিত হয়, তাই তাদের ভেতরের হোয়াইটস্পেস অক্ষুণ্ণ থাকে।
- নেস্টিং ট্র্যাক করুন. টোকেন স্ট্রিমে চলার সময় বিউটিফায়ার একটি চলমান ইন্ডেন্ট লেভেল রাখে। প্রতিটি ওপেনিং ট্যাগ যা সেলফ-ক্লোজিং নয় লেভেল এক ধাপ গভীর করে; প্রতিটি মিলিত ক্লোজিং ট্যাগ তা ফিরিয়ে দেয়। সেই গভীরতা নির্ধারণ করে আপনি ফেরত পাওয়া প্রতিটি লাইনের সামনে কতটি ইন্ডেন্ট ইউনিট থাকবে।
- আপনার অপশন প্রয়োগ করুন. আপনার ইন্ডেন্ট পছন্দ — ২ স্পেস, ৪ স্পেস, বা ট্যাব — এক লেভেলের প্রস্থ নির্ধারণ করে। র্যাপ-অ্যাট-কলাম মান অ্যাট্রিবিউট বা টেক্সটের দীর্ঘ লাইন আপনার বেছে নেওয়া কলামের পরে ভেঙে দেয়। ব্ল্যাংক-লাইন ক্যাপ দীর্ঘ খালি লাইনগুলো আপনার নির্ধারিত সীমায় সংকুচিত করে।
- মার্কআপ পুনর্নির্গমন. অবশেষে ফরম্যাটার নির্ধারিত ইন্ডেন্টেশন ও লাইন ব্রেকের সাথে ট্যাগগুলো ফিরিয়ে প্রিন্ট করে। আপনি যদি ইনলাইন ফরম্যাটিং চালু করেন, তাহলে প্রতিটি স্টাইল ব্লকের বিষয়বস্তু CSS ফরম্যাটার এবং প্রতিটি স্ক্রিপ্ট ব্লকের বিষয়বস্তু JS ফরম্যাটারের মধ্য দিয়ে যায়, যাতে এম্বেডেড কোড আশপাশের মার্কআপের সাথে সারিবদ্ধ থাকে।
HTML বিউটিফাই কেন করবেন
- মিনিফাইড পেজ পড়ুন. প্রোডাকশন HTML বাইট বাঁচাতে লাইন ব্রেক ছাড়াই শিপ হয়। বিউটিফাই করলে কাঠামো ফিরে আসে যাতে আপনি কাঙ্ক্ষিত সেকশন খুঁজে পান, ভুল ক্লোজিং ট্যাগ দেখতে পান, এবং ডকুমেন্ট আসলে কীভাবে নেস্ট করা আছে তা অনুসরণ করতে পারেন।
- অসংগত টেমপ্লেট সুসংহত করুন. অনেকে সম্পাদনা করা মার্কআপ মিশ্র ইন্ডেন্টেশন ও ট্যাগ বসানোতে পরিণত হয়। বিউটিফায়ার থেকে একটি পাস পুরো ফাইলকে নরমালাইজ করে, তাই পরের কমিট রিফরম্যাটেড হোয়াইটস্পেসের দেয়ালের পরিবর্তে আপনার করা পরিবর্তন দেখায়।
- এটি আপনার পেজ ধীর করে না. বেশিরভাগ অনলাইন ফরম্যাটার পেজ খুলতেই তাদের পুরো লাইব্রেরি লোড করে। এই টুল js-beautify কেবল তখনই ফেচ করে যখন আপনি Beautify ক্লিক করেন বা লাইভ মোড চালু করেন, তাই প্রথম লোড কয়েক শ কিলোবাইটের পরিবর্তে কয়েক কিলোবাইটের হয় এবং পেজ দ্রুত থাকে।
- কিছুই আপনার ব্রাউজার ছাড়ে না. সম্পূর্ণ কাজ আপনার ডিভাইসে হয়। আপনার মার্কআপ কখনও সার্ভারে আপলোড হয় না, যা গুরুত্বপূর্ণ যখন পেজটি কোনো ক্লায়েন্টের, অভ্যন্তরীণ URL রয়েছে, বা আপনি কোনো গোপনীয়তা চুক্তিতে স্বাক্ষর করেছেন।
সাধারণ ব্যবহার
HTML বিউটিফাই করা তখন কাজে আসে যখন কাউকে এমন মার্কআপ পড়তে হয় যা পড়ার জন্য লেখা হয়নি।
- লাইভ পেজ পরীক্ষা: View Source থেকে মিনিফাইড সোর্স পেস্ট করুন যাতে স্থানীয়ভাবে পুনরুৎপাদন করতে না পারা লেআউট বাগের পেছনের মার্কআপ খুঁজে পান।
- CMS আউটপুট পরিষ্কার: পেজ বিল্ডার এক লাইনে রপ্তানি করা টেমপ্লেটটি রিপোজিটরিতে কমিট করার আগে রিফরম্যাট করুন।
- অ্যাক্সেসিবিলিটি ও SEO পর্যালোচনা: হেডিং অর্ডার, ল্যান্ডমার্ক স্ট্রাকচার ও alt অ্যাট্রিবিউট আসল DOM-এর বিপরীতে যাচাই করতে ডকুমেন্ট প্রসারিত করুন।
একটি কাজের উদাহরণ
একটি মিনিফাইড স্নিপেট নিন: <div><p>hi</p><span>x</span></div>। ২ স্পেস ইন্ডেন্টেশন দিয়ে উপরে পেস্ট করুন, তারপর Beautify ক্লিক করুন। আপনি একটি পাঠযোগ্য ব্লক ফিরে পান: <div> নিজের লাইনে, <p>hi</p> ও <span>x</span> প্রতিটি এক লেভেল ইন্ডেন্টেড, এবং মিলিত </div> নিচে সারিবদ্ধ। ইন্ডেন্টেশন Tabs-এ বদলান এবং প্রতিটি লেভেল দুই স্পেস থেকে ট্যাবে সরে যায়। একটি <style>a{color:red}</style> ব্লক যোগ করুন, "ইনলাইন CSS ও JS-ও ফরম্যাট করুন" চালু করুন, এবং রুলটি নিজের ইন্ডেন্টেড লাইনে প্রসারিত হয়।
FAQ
এটি কি আমার ব্রাউজারে চলে?
হ্যাঁ। js-beautify লাইব্রেরি প্রথমবার Beautify ক্লিক করলে বা লাইভ মোড সক্রিয় করলে ফেচ হয়, তারপর ক্যাশ হয়ে যায়। আপনার মার্কআপ পেজ ছেড়ে যায় না — কোনো সার্ভার রাউন্ড-ট্রিপ নেই, কোনো আপলোড নেই।
বিউটিফাই করলে কি আমার পেজ ভিন্নভাবে রেন্ডার হবে?
না। বিউটিফায়ার কেবল ট্যাগের মধ্যে হোয়াইটস্পেস ও লাইন ব্রেক যোগ ও বাদ দেয়। ব্রাউজার পেজ তৈরির সময় সেই হোয়াইটস্পেস উপেক্ষা করে, তাই রেন্ডার করা ফলাফল অভিন্ন। একমাত্র যা মনে রাখতে হবে তা হল pre, textarea, বা ইনলাইন উপাদানের ভেতরের হোয়াইটস্পেস-সংবেদনশীল কন্টেন্ট, যা ফরম্যাটার ইচ্ছাকৃতভাবে অপরিবর্তিত রাখে।
ইনলাইন CSS ও JS টগল কী করে?
বন্ধ থাকলে স্টাইল ও স্ক্রিপ্ট ব্লকের বিষয়বস্তু হুবহু পেস্ট করা অবস্থায় থাকে। চালু করলে প্রতিটি স্টাইল ব্লকের ভেতরে CSS ফরম্যাটার এবং প্রতিটি স্ক্রিপ্ট ব্লকের ভেতরে JS ফরম্যাটার চলে, যাতে এম্বেডেড কোড আশপাশের মার্কআপের সাথে মিলে ইন্ডেন্ট হয়।
"র্যাপ অ্যাট কলাম" কী করে?
এটি সেই লাইন দৈর্ঘ্য নির্ধারণ করে যেখানে অনেক অ্যাট্রিবিউট সহ ট্যাগ, বা দীর্ঘ টেক্সট রান, একাধিক লাইনে ভেঙে যায়। ০ রাখুন যাতে প্রতিটি উপাদান একটি লাইনেই থাকে যত লম্বাই হোক। ৮০ বা ১২০ সেট করুন এবং ফরম্যাটার সেই কলামের পরের সব কিছু র্যাপ করে, যা সংকীর্ণ এডিটরে প্রশস্ত উপাদান পাঠযোগ্য রাখে।
ব্রাউজার-সাইড HTML বিউটিফিকেশন বিল্ড স্টেপ বা আপলোড ছাড়াই পাঠযোগ্য মার্কআপ দেয়। একটি মিনিফাইড বা অগোছালো পেজ পেস্ট করুন, আপনার ইন্ডেন্টেশন ও র্যাপ প্রস্থ বেছে নিন, ইনলাইন CSS ও JS রিফরম্যাট করবেন কিনা ঠিক করুন, তারপর ফলাফল কপি বা ডাউনলোড করুন। কিছুই আপনার ডিভাইস ছাড়ে না, কোনো অ্যাকাউন্ট নেই, এবং লাইব্রেরি কেবল তখনই লোড হয় যখন আপনি চান — তাই এই পেজ খুলতে মেগাবাইট নয়, কয়েক কিলোবাইট লাগে।