أداة مُنسق ومُصغر HTML صُمّمت لتمنحك كل ما تحتاجه للعمل على شيفرات HTML بسرعة ومرونة داخل المتصفح، وبدون رفع أي ملفات إلى خوادم خارجية. جوهر الفكرة بسيط: لديك نافذة إدخال تضع فيها الكود، تختار العملية المطلوبة (تنسيق Beautify، تصغير Minify، تهيئة Format، ضغط Compress) ثم تضغط “تشغيل وعرض” لترى المعاينة الحيّة للناتج عند الطلب في النافذة اليمنى. بعد ذلك تستطيع نسخ الناتج، تنزيله كملف، أو فتحه في تبويب بملء الصفحة.

الواجهة عربية وبتصميم متجاوب، وخيارات الإنتاجية موجودة في المكان الصحيح: شريط أيقونات أعلى صندوق الإدخال يتيح استرجاع آخر نسخة من التخزين المحلي (LocalStorage)، فتح ملف من جهازك، مسح سريع، نسخ، وملء الشاشة. أسفل المحرّر سترى عدد الأسطر وموقع المؤشر (العمود) إلى جانب متحكّم حجم الخط (Aa± + قيمة رقمية) لراحة القراءة. في جهة الناتج، تجد أزرار التشغيل والمعاينة وأدوات المشاركة والتنزيل، إضافة إلى معاينة مضمّنة تضبط ارتفاعها تلقائيًا وتعرض عدد العناصر في الصفحة النهائية لمساعدتك على التحقق بسرعة.

لماذا هذه الأداة؟

1. تحكم كامل ونتيجة موثوقة: أنت من يختار متى وكيف تُطبَّق المعالجة—الأمر ليس “حيًا” لكي لا تتفاجأ بتغيّر الكود أثناء الكتابة.

2. خصوصية وأمان: كل العمليات تتم محليًا داخل متصفحك. لا يتم رفع الكود إلى أي خادم.

3. سير عمل عملي: حمِّل آخر نسخة من LocalStorage، افتح ملفًا، عدّل، نفّذ العملية، راجع الناتج، ثم نزّل أو انسخ—كل ذلك في نفس الشاشة.

4. حماية للمحتوى الحساس داخل الوسوم: أثناء التنسيق/التصغير، يتم حفظ محتوى الوسوم الحساسة مثل <pre>, <code>, <textarea>, <script>, <style> كما هو، حتى لا تتلف المسافات/الأكواد داخلها.

5. خيارات متعددة للنتيجة: Beautify يجعل الكود مقروءًا بهوامش وقواعد اصطاف واضحة، Format يقدّم تنسيقًا مشابهًا لكن بهوامش أوسع، Minify يقلّل الحجم مع الحفاظ على البنية، وCompress يذهب خطوة أبعد في تقليص الفراغات والسطور.

ماذا تفعل كل عملية بالضبط؟

• Beautify (تنسيق): يعيد ترتيب الكود ويضيف أسطرًا ومسافات بادئة (Indentation) متناسقة (افتراضيًا 2 مسافة)، ما يسهّل المراجعة والتعليم والمساهمة الجماعية.

• Format (تهيئة): يشبه Beautify، لكن باستخدام مسافة بادئة أكبر (4 مسافات افتراضيًا) ليكون الكود أكثر اتساعًا ووضوحًا في المشاريع الكبيرة.

• Minify (تصغير): يزيل التعليقات العادية ويقلّص المسافات بين الوسوم (مثل > < → ><) ويحدّ من التكرار في الفراغات، مع الحفاظ على بنية HTML الأصلية. كما تُترك الوسوم الحساسة كما هي. يتم استثناء التعليقات الشرطية (مثل <!--[if ...]>) من الحذف حفاظًا على التوافق.

• Compress (ضغط): نسخة أكثر شراسة من Minify؛ تُزيل الأسطر الفارغة وتضغط النص إلى أقصى حد ممكن دون المساس بالمحتوى داخل الوسوم الحساسة. مفيد قبل النشر إذا كنت تريد أصغر حجم ممكن.

ملاحظة: بعض الصفحات تعتمد على فراغات معيّنة بين العناصر (على سبيل المثال سلوك inline-block). في حالات نادرة، قد يؤثّر التصغير الشديد على هذه التفاصيل. لذلك ننصح دائمًا بضغط “تشغيل وعرض” لمراجعة النتيجة بصريًا قبل الاعتماد النهائي.

كيف أستعمل الأداة خطوةً بخطوة؟

1. جهّز الإدخال:

   • الصق كودك داخل “مدخل HTML”، أو

   • انقر “فتح ملف” لاستيراد .html من جهازك، أو

   • استخدم “استرجاع من التخزين” لاستعادة آخر نسخة حفظها المتصفح لك تلقائيًا.

2. اضبط القراءة:
   راقب عدد الأسطر والعمود الحالي أسفل المحرّر، واستخدم Aa−/Aa+ أو الحقل الرقمي لضبط حجم الخط بما يناسبك.

3. اختر العملية:

   • تنسيق Beautify لقراءة أسهل.

   • تهيئة Format لهوامش أوسع (مشاريع كبيرة/مراجعات جماعية).

   • تصغير Minify لتقليل الحجم مع الحفاظ على القابلية للتصيير.

   • ضغط Compress لتحقيق أصغر حجم ممكن.
     بعد اختيار العملية، سيظهر الناتج في صندوق الإخراج على اليمين.

4. شغّل وشاهد النتيجة:
   اضغط “تشغيل وعرض” لعرض التصيير في معاينة مضمّنة. سيُضبط ارتفاع المعاينة تلقائيًا، ويُعرَض عدد العناصر داخل الصفحة الناتجة.

5. شارك واحفظ:

   • فتح بملء الصفحة: لاستعراض الناتج في تبويب مستقل.

   • تنزيل الناتج: لحفظ ملف HTML النهائي.

   • نسخ الناتج: للصق فوري في أي محرّر أو CMS.

6. إنتاجية أعلى:

   • مسح لإعادة البداية بسرعة.

   • نسخ (للمدخل) لحفظ نسخة قبل التحويل.

   • ملء الشاشة لزيادة مساحة التحرير دون تشويش بصري.

أفضل الممارسات

• اختبر تدريجيًا: جرّب Beautify أولًا للتأكّد من بنية سليمة، ثم Minify/Compress للحجم النهائي.

• راجع الصفحات الحساسة: إذا كانت الصفحة تعتمد على فراغات بين عناصر inline/inline-block، افحص النتيجة بصريًا بعد التصغير الشديد.

• حافظ على نسخة أصلية: قبل أي ضغط عدواني، انسخ الكود الأصلي—زر نسخ في الإدخال يجعل ذلك سهلًا.

• عند التعليم/المراجعة: استخدم Format (4 مسافات) لمراجعة مريحة في الفرق، خصوصًا عند عرض الشيفرة على شاشة كبيرة.

• تذكّر الخصوصية: كل شيء محلي. لو كنت في وضع التصفّح المتخفّي، قد لا يعمل التخزين المحلي كما تتوقع—اختبر زر “استرجاع من التخزين” للتأكد.

ماذا عن السكربتات والأنماط داخل الصفحة؟

الأداة تحمي محتوى الوسوم: <pre>, <code>, <textarea>, <script>, <style>—أي لا تعيد صياغتها داخليًا كي لا تتلف المسافات/الأكواد. هذا يُحافظ على سلامة الجافاسكربت وCSS والنصوص الحسّاسة. إن أردت تصغير CSS/JS بحد ذاتهما، استخدم أدوات متخصصة منفصلة، ثم أعد دمج النتائج داخل HTML قبل تشغيل عملية التصغير الشاملة.

الأسئلة الشائعة

س: هل تُرسل الأداة ملفاتي إلى الخادم؟
ج: لا. كل العمليات تتم محليًا داخل المتصفح، ولا نرفع أي بيانات إلى خوادم خارجية.

س: ما الفرق بين Beautify وFormat؟
ج: كلاهما يُحسّن القراءة ويضيف مسافات بادئة منظمة. Beautify يستخدم عادةً 2 مسافة، بينما Format يعتمد 4 مسافات ليمنحك فراغًا بصريًا أكبر في المشاريع الكبيرة.

س: هل يغيّر Minify/Compress محتوى <script> أو <style>؟
ج: لا. يتم حفظ محتوى هذه الوسوم كما هو. تُزال التعليقات العادية خارجها، وتُضغط الفراغات بين الوسوم HTML فقط.

س: ماذا عن التعليقات الشرطية في HTML؟
ج: يتم الاحتفاظ بالتعليقات الشرطية (مثل <!--[if ...]>) لضمان التوافق، بينما تُحذف التعليقات العادية.

س: بعد الضغط صار الشكل على سطر واحد—هل هذا طبيعي؟
ج: نعم في وضع Compress، إذ يهدف لأصغر حجم ممكن. إذا أردت توازنًا بين الحجم والقراءة، اختر Minify بدلًا من Compress.

س: لماذا تختلف المعاينة عن النتيجة في بعض الصفحات؟
ج: إذا كانت الصفحة تعتمد موارد خارجية (خطوط/صور/CSS)، فقد تتأثر بالمتصفح أو القيود الأمنية. الكود نفسه صحيح، لكن الموارد قد لا تُحمّل في بيئة محلية.

س: كيف أستعيد عملي لاحقًا؟
ج: نحفظ المدخل تلقائيًا في LocalStorage أثناء التحرير. استخدم زر “استرجاع من التخزين” لإعادة آخر نسخة.

س: هل تدعم الأداة ملفات كبيرة جدًا؟
ج: نعم بقدر الذاكرة المتاحة للمتصفح. إن شعرت ببطء، قسّم الملف أو نفّذ العمليات بالتتابع (Beautify ثم Minify).

س: هل أستطيع تخصيص مقدار المسافات البادئة؟
ج: الإعداد الافتراضي 2 مسافة لـBeautify و4 لـFormat. يمكننا إضافة متحكّم للهوامش إن رغبت—أخبرني بالمقدار الذي تفضله وسأعدّله لك.

س: هل يمكن تصغير CSS/JS تلقائيًا داخل الصفحة؟
ج: هذه الأداة تركز على HTML. لتصغير CSS/JS، استخدم أدوات مخصّصة ثم أدمج النتائج، أو أخبرني لأضيف خيارًا متقدّمًا لذلك لاحقًا.