HTML بیوٹیفیکیشن کیسے کام کرتی ہے؟
بیوٹیفائر آپ کے markup کو tag بہ tag پڑھتا ہے، ہر element کی nesting depth کو track کرتا ہے، اور اسے یکساں indentation کے ساتھ دوبارہ emit کرتا ہے۔ یہ کبھی نہیں بدلتا کہ صفحہ کیا render کرتا ہے — صرف source کا layout۔
- Tags کا تجزیہ. لائبریری آپ کے input کو tokens کی ایک stream میں scan کرتی ہے: opening tags، closing tags، text content، comments، اور script اور style blocks کے مندرجات۔ Quoted attribute values اور pre اور textarea elements کے body کو واحد اکائیوں کے طور پر پہچانا جاتا ہے، اس لیے ان کے اندر whitespace بالکل محفوظ رہتا ہے۔
- Nesting track کرنا. جیسے جیسے بیوٹیفائر token stream پر چلتا ہے، یہ ایک چلتا ہوا indent level رکھتا ہے۔ ہر opening tag جو self-closing نہیں وہ level کو گہرا کرتا ہے؛ ہر matching closing tag اسے واپس لاتا ہے۔ وہ depth طے کرتی ہے کہ آپ کو واپس ملنے والی ہر لائن کے سامنے کتنے indent units ہوں گے۔
- آپ کے options لاگو کرنا. آپ کا indent choice — 2 spaces، 4 spaces، یا ایک tab — ایک level کی چوڑائی طے کرتا ہے۔ wrap-at-column value لمبی attribute یا text لائنوں کو اس column سے گزرنے پر توڑتا ہے جو آپ منتخب کریں۔ blank-line cap خالی لائنوں کی لمبی قطاروں کو آپ کی مقررہ حد تک گھٹاتا ہے۔
- دوبارہ خارج کرنا. آخر میں formatter tags کو indentation اور line breaks کے ساتھ واپس print کرتا ہے جو اس نے calculate کیے ہیں۔ اگر آپ نے inline formatting آن کی ہے تو ہر style block کے مندرجات CSS formatter سے اور ہر script block کے مندرجات JS formatter سے گزرتے ہیں، تاکہ embedded code ارد گرد کے markup سے ہم آہنگ ہو۔
HTML کیوں بیوٹیفائی کریں؟
- منی فائڈ صفحات پڑھنا. Production HTML bytes بچانے کے لیے بغیر line breaks کے ship ہوتا ہے۔ بیوٹیفیکیشن structure واپس لاتی ہے تاکہ آپ وہ section تلاش کر سکیں جو چاہتے ہیں، کوئی غائب closing tag دیکھ سکیں، اور document کا actual nesting دیکھ سکیں۔
- بے ترتیب templates ٹھیک کرنا. جس markup کو کئی لوگوں نے edit کیا ہو وہ mixed indentation اور tag placement میں بدل جاتا ہے۔ بیوٹیفائر سے ایک بار گزارنے سے پوری فائل normalize ہو جاتی ہے، جس سے اگلا commit آپ کی اصل تبدیلی دکھاتا ہے نہ کہ reformat شدہ whitespace کی دیوار۔
- آپ کے صفحے پر بوجھ نہیں ڈالتا. زیادہ تر آن لائن formatters صفحہ کھلتے ہی اپنی پوری لائبریری لوڈ کرتے ہیں۔ یہ ٹول js-beautify کو صرف اسی وقت fetch کرتا ہے جب آپ Beautify کلک کریں یا Live mode آن کریں، اس لیے پہلا لوڈ چند kilobytes خرچ کرتا ہے نہ کہ چند سو، اور صفحہ تیز رہتا ہے۔
- کچھ بھی آپ کے براؤزر سے نہیں جاتا. پوری چیز آپ کے device پر چلتی ہے۔ آپ کا markup کبھی server پر upload نہیں ہوتا، جو اہم ہے جب صفحہ کسی client کا ہو، internal URLs رکھتا ہو، یا کوئی confidentiality agreement آپ نے sign کی ہو۔
عام استعمالات
HTML بیوٹیفائی کرنا اس وقت سامنے آتا ہے جب کسی کو ایسا markup پڑھنا ہو جو پڑھنے کے لیے نہیں لکھا گیا تھا۔
- Live صفحہ inspect کرنا: layout bug کے پیچھے markup ڈھونڈنے کے لیے View Source سے منی فائڈ source paste کریں جسے آپ locally reproduce نہیں کر سکتے۔
- CMS آؤٹ پٹ صاف کرنا: ایسے template کو reformat کریں جسے page builder نے ایک لائن میں export کیا تھا، repository میں واپس commit کرنے سے پہلے۔
- Accessibility اور SEO reviews: document کو پھیلائیں تاکہ heading order، landmark structure اور alt attributes کو real DOM کے مقابلے میں چیک کر سکیں۔
ایک عملی مثال
ایک منی فائڈ snippet لیں: <div><p>hi</p><span>x</span></div>۔ اسے اوپر indentation 2 spaces پر paste کریں، پھر Beautify کلک کریں۔ آپ کو ایک readable block ملتا ہے: <div> اپنی لائن پر، <p>hi</p> اور <span>x</span> ہر ایک اس سے ایک level گہرے indented، اور matching </div> نیچے صف بند۔ indentation کو Tabs میں بدلیں اور ہر level دو spaces سے tab character میں shift ہو جاتا ہے۔ ایک <style>a{color:red}</style> block شامل کریں، "Inline CSS اور JS بھی فارمیٹ کریں" آن کریں، اور rule ایک لائن پر رہنے کے بجائے اپنی indented لائنوں پر پھیل جاتا ہے۔
FAQ
کیا یہ میرے براؤزر میں چلتا ہے؟
جی ہاں۔ js-beautify لائبریری پہلی بار lazy-load ہوتی ہے جب آپ Beautify کلک کریں یا Live mode فعال کریں، پھر cached ہو جاتی ہے۔ آپ کا markup صفحہ کبھی نہیں چھوڑتا — کوئی server round-trip نہیں اور کوئی upload نہیں۔
کیا بیوٹیفائنگ میرے صفحے کا render بدل دے گی؟
نہیں۔ بیوٹیفائر صرف tags کے درمیان whitespace اور line breaks شامل اور ہٹاتا ہے۔ صفحہ بناتے وقت براؤزر اس whitespace کو نظرانداز کرتا ہے، اس لیے rendered نتیجہ یکساں ہے۔ جس چیز پر نظر رکھنی ہے وہ pre، textarea، یا inline elements کے اندر whitespace-sensitive مواد ہے، جسے formatter جان بوجھ کر چھوڑ دیتا ہے۔
Inline CSS اور JS toggle کیا کرتا ہے؟
بند ہونے پر style اور script blocks کے مندرجات بالکل ویسے چھوڑے جاتے ہیں جیسے آپ نے paste کیے۔ آن کریں تو ہر style block کے اندر CSS، CSS formatter سے، اور ہر script block کے اندر JavaScript، JS formatter سے گزرتا ہے، تاکہ embedded code ارد گرد کے markup سے ہم آہنگ indent ہو۔
"Column پر Wrap" کیا کرتا ہے؟
یہ وہ line length طے کرتا ہے جس پر بہت سی attributes والا tag، یا لمبا text، متعدد لائنوں پر ٹوٹ جاتا ہے۔ 0 پر چھوڑیں تاکہ ہر element چاہے کتنا بھی لمبا ہو ایک لائن پر رہے۔ 80 یا 120 سیٹ کریں اور formatter اس column سے آگے جو بھی ہو wrap کر دیتا ہے، جس سے چوڑے elements تنگ editor میں بھی پڑھنے کے قابل رہتے ہیں۔
Browser-side HTML بیوٹیفیکیشن آپ کو بغیر build step یا upload کے readable markup دیتا ہے۔ کوئی منی فائڈ یا بے ترتیب صفحہ paste کریں، اپنی indentation اور wrap width چنیں، فیصلہ کریں کہ inline CSS اور JS reformat کرنا ہے یا نہیں، پھر نتیجہ کاپی یا ڈاؤن لوڈ کریں۔ کچھ بھی آپ کے device سے نہیں جاتا، کوئی account نہیں، اور لائبریری صرف اسی وقت لوڈ ہوتی ہے جب آپ مانگیں — اس لیے یہ صفحہ کھولنے پر چند kilobytes خرچ ہوتے ہیں، megabyte نہیں۔