ربما حدث لك هذا. تنسخ كتلة منسّقة بأناقة — بطاقة عنوان، تنبيهاً ملوّناً — وتلصقها في محرّر WeChat أو نظام إدارة محتوى. أحياناً تصل تبدو صحيحة تماماً. وأحياناً تحطّ كنص عارٍ بكل التصميم منزوعاً. الفعل نفسه، نتيجة مختلفة، ويبدو عشوائياً. ليس كذلك. الفرق هو ما إذا كنت نسخت HTML مضمّناً.
فهم هذه الفكرة الواحدة يجعل لصق المحتوى المنسّق متوقّعاً بدل مقامرة.
ما هو HTML المضمّن فعلاً
تنسيق الويب يمكن أن يعيش في مكانين. في موقع عادي، يجلس التنسيق في ورقة أنماط منفصلة، وHTML يشير إليه فقط باسم فئة: <div class="title-card">. الـ div بلا معنى وحده — التصميم يعيش في ملف CSS في مكان آخر.
HTML المضمّن يضع التنسيق داخل العنصر نفسه: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. كل ما يلزم لتصيير الكتلة يسافر معها. لا ملف خارجي للاعتماد عليه.
ذلك التمييز هو القصة كلها لسبب إبقاء بعض عمليات اللصق تصميمها وعدم إبقاء غيرها. حين تلصق في محرّر، لا يحصل المحرّر على ورقة أنماط الموقع المصدر. إن كان التصميم يعيش في تلك الورقة، فقد ذهب — تحصل على البنية العارية، أي نص عادي المظهر. إن كان التصميم مضمّناً، فيأتي معه، وتُصيَّر الكتلة بشكل صحيح.
لماذا يحتاجه WeChat والمحرّرات المنسّقة
محرّر WeChat صارم. يزيل أوراق الأنماط الخارجية ويرشّح كثيراً من التنسيق. كتلة اعتمدت على فئة معرّفة في مكان آخر ليس لها ما ترجع إليه بمجرد أن تصبح داخل WeChat. كثير من محرّرات النص المنسّق وحقول لصق أنظمة إدارة المحتوى تتصرّف بالطريقة نفسها — تعقّم ما تلصقه وتبقي فقط السمات المضمّنة.
فالطريقة الموثوقة لنقل كتلة منسّقة إلى هذه المحرّرات هي نسخها كـ HTML مضمّن، حيث يكون التنسيق قائماً بذاته. عندها حتى محرّر صارم يملك كل ما يحتاجه لعرض الكتلة كما صُمِّمت.
كيف يعمل نسخ كتلة "بالتنسيق"
المتصفحات الحديثة لها Clipboard API يستطيع وضع محتوى منسّق — HTML بتنسيق — على الحافظة، لا نصاً عادياً فقط. حين تنسخ أداة كتلة "كـ HTML مضمّن"، فهي تستخدم تلك الواجهة لوضع ترميز الكتلة القائم بذاته على حافظتك. ثم تلصق (Ctrl/Cmd+V) في المحرّر، ولأن التنسيق كان مضمّناً والحافظة حملت الـ HTML، تظهر الكتلة منسّقة.
أمران يجب أن يكونا صحيحين كي ينجح هذا:
- يجب أن يكون الترميز مضمّن التنسيق، فلا يلزم ملف خارجي.
- يجب أن تحمله الحافظة كـ HTML، لا كتفريغ نصي عادي لأقواس زاوية.
اضبط الاثنين فـ"يعمل" اللصق فحسب. أخطئ أياً منهما فتحصل على نص عادي أو جدار شيفرة مرئية.
القيام به دون تحرير شيفرة يدوياً
تستطيع، مبدئياً، أخذ كتلة منسّقة وتضمين كل نمط يدوياً — نقل قواعد كل فئة إلى سمة style="" على كل عنصر. لأي شيء يتجاوز كتلة تافهة، ذلك ممل وعرضة للخطأ، خصوصاً مع بطاقات SVG حيث ينتشر التنسيق عبر عقد كثيرة.
أداة تتعامل مع هذا أسهل. يستخرج مستخرِج وحدات التنسيق من IMG.DIY الكتل المنسّقة من محتوى WeChat الملصوق ويعطي كلاً زرّ نسخ يضعها على حافظتك كـ HTML مضمّن عبر Clipboard API. تنقر نسخ، تبدّل إلى محرّر WeChat (أو نظام إدارة المحتوى، أو حقل نص منسّق)، تلصق، فتبقي الكتلة تنسيقها. لا تضمين يدوي، ولا إصلاح ترميز معطّل.
قائمة فحص لصق سريعة
حين يخطئ لصق منسّق، راجع هذه:
- هل نسخت HTML مضمّناً، أم لقطة شاشة/نصاً عادياً؟ فقط HTML المضمّن يُلصَق ككتلة منسّقة عاملة.
- الصق في جسم المحرّر العادي، لا في وضع "شيفرة المصدر" أو "نص عادي" الذي قد ينزع الترميز أو يهرّبه.
- افحص الكتلة في المعاينة. معاينة WeChat نفسها تُظهِر كيف ستُصيَّر الكتلة فعلاً على هاتف — أكّد هناك قبل النشر.
- إن بدت الألوان خاطئة، أعد التلوين قبل النسخ. في المستخرِج يمكنك نقر لون وتغييره في كل مكان في الكتلة، فتنسخها أصلاً بألوان علامتك.
حدّ صادق واحد يستحق التكرار: أداة كهذه تنسخ وتنظّم الكتل — إنها مستخرِج، لا مصمّم قوالب من الصفر، ولا تستطيع جلب مقال برابط (المتصفحات تحجب الجلب عبر المواقع لصفحات WeChat، فتلصق المحتوى أنت). ضمن تلك الحدود، HTML المضمّن هو ما يتيح لكتلة منسّقة أن تنجو من الرحلة من محرّر إلى آخر بتصميمها سليماً.
بمجرد أن ترى كتلة تُلصَق بشكل مثالي بضع مرات، تصبح العشوائية السابقة منطقية: لم تكن عشوائية قط. كانت دائماً عن ما إذا كان التنسيق يسافر داخل الكتلة.