اجعل مقالات موقعك تُطبع بوضوح: تنسيق CSS للطباعة وPDF

قد تبدو صفحة المقال مرتبة على الشاشة، ثم تتحول عند الطباعة إلى صفحات مليئة بالقوائم وأزرار المشاركة. الحل الذي يملكه صاحب الموقع هو تنسيق CSS خاص بالطباعة، بدل مطالبة كل قارئ بتنظيف الصفحة بنفسه.

ابدأ بتجربة صفحة واحدة

احفظ نسخة من التنسيق الحالي، واختر مقالًا قصيرًا وآخر فيه صورة وقائمة. افتح معاينة الطباعة بالاختصار Ctrl+P على ويندوز، أو Command+P على Mac، وسجل ما يزعجك: شريط جانبي، عرض ضيق، أو عناصر لا يحتاجها القارئ على الورق.

أضف قاعدة print إلى CSS

يوضح دليل MDN للطباعة أن @media print يطبق تنسيقًا عند الطباعة على الورق أو إلى PDF. ضع مثال البداية التالي في ملف CSS لموقعك، وعدّل أسماء الأصناف لتطابق قالبك:

@media print {
  .site-menu, .share-tools, .site-sidebar {
    display: none;
  }
  .article-body {
    width: auto;
    max-width: none;
    color: black;
    background: white;
  }
  .article-body img {
    max-width: 100%;
    height: auto;
  }
}

هذه أسماء توضيحية، وليست أسماء عناصر مضمونة في Blogger أو WordPress. افحص اسم العنصر في قالبك قبل التعديل. وفي Blogger أضف CSS ضمن إعدادات تنسيق القالب أو محرره المناسب، بعد حفظ نسخة احتياطية؛ لصق القاعدة كنص داخل المقال لا يعدّل تنسيق الموقع.

اخفِ عناصر التنقل مع الحفاظ على معنى المقال

أخفِ ما لا يخدم القراءة المطبوعة، واترك عنوان المقال والمحتوى والتاريخ أو بيانات الإسناد التي يحتاجها القارئ. لا تستعمل قاعدة واسعة مثل إخفاء كل الصور أو كل التذييلات دون مراجعة؛ قد تكون صورة الشرح أو الملاحظة الأخيرة جزءًا من المعلومة.

اختبر قبل اعتماد التغيير

1. افتح معاينة الطباعة مجددًا وتأكد أن عنوان المقال والنص كاملان.
2. راجع الصور والجداول الطويلة والعناوين عند نهاية الصفحة؛ لا يكفي نجاح أول صفحة.
3. جرّب الحفظ إلى PDF وافتح الملف الناتج، ثم قارن مقالًا آخر بالقالب نفسه.
4. ارجع إلى عرض الشاشة وتأكد أن التغيير بقي محصورًا داخل قاعدة print.

خيارات المتصفح، مثل الهوامش ورؤوس الصفحات وطباعة الخلفيات، تؤثر أيضًا في النتيجة. إذا لم تعمل قاعدة معينة، راجع أسماء العناصر وأولوية CSS قبل إضافة تغييرات أكثر. وتجنب تعديل القالب الحي عدة مرات بلا نسخة يمكن الرجوع إليها.