‏چرا سایت‌ها باید قابل چاپ باشن

Brennen Puth تو این پست می‌گه این روزها مقاله‌ها رو بیشتر چاپی می‌خونه، چون یادداشت‌نوشتن روی کاغذ تمرکزش رو بیشتر می‌کنه. برای همین سایت شخصی خودشو با CTRL-P چاپ کرده و فکر می‌کرده بدون هیچ زحمتی خروجی خوبی می‌گیره. نتیجه این بود که محتوا کامل دیده می‌شد، ولی متن حدود دو سایز بزرگ‌تر از لازم بود، هدر سایت روی کاغذ زشت درمیومد و لینک‌های آبی توی چاپ سیاه‌وسفید خاکستری و کم‌رنگ می‌شدن.

راه‌حلش استفاده از @media print هست، یعنی یه بلاک توی CSS که فقط موقع چاپ اعمال می‌شه. این یه تیکه‌ی خلاصه‌شده از کد خودشه:

@media print {
  .noPrint {
    display: none;
  }
  p, ol {
    font-size: 12pt;
  }
  a {
    color: black !important;
  }
}

کلاس noPrint یه چیزی رو از نسخه‌ی چاپی حذف می‌کنه و نویسنده اونو روی هدر گذاشته. برعکسش کلاس onlyPrint هست که بیرون از حالت چاپ display: none داره و فقط روی کاغذ دیده می‌شه، مثلاً یه اسم کوچیک نویسنده زیر عنوان. فونت متن رو روی 12pt گذاشته چون سایز رایجیه و تیترها رو بین 13pt تا 16pt. لینک‌ها هم با !important مشکی شدن تا همرنگ بقیه‌ی متن باشن.

به گفته‌ی نویسنده، زشت‌ترین بخش هنوز بلاک‌های کده. کلاس‌های giallo براشون یه حاشیه‌ی مشکی 3px و فونت 11pt می‌ذارن، ولی بلاک‌ها می‌خوان یه تیکه‌ی یکپارچه بمونن و بین صفحه‌ها نمی‌شکنن. خودش می‌گه هنوز راه‌حلی براش نداره و از خواننده‌ها کمک خواسته.

نویسنده قبول داره که این کار، حتی برای سایت ساده‌ی خودش، یه بخش خوبی از صبحش رو گرفت و شاید آدم‌های زیادی صفحه‌ی وب چاپ نکنن. ولی معتقده اگه سایتت بیشترش متنه، اینکه کاربر بتونه تو قالب دلخواهش بخونه هیچ‌وقت بد نیست. بعداً هم اضافه کرده که پستش به صفحه‌ی اول Hacker News و lobste.rs رسیده و چندتا ایراد CSSش رو هم بهش گفتن.

نکات کلیدی:

• @media print استایل‌هایی می‌ده که فقط موقع چاپ اعمال می‌شن.
• سایز 12pt برای متن چاپی یه انتخاب رایجه و تیترها کمی بزرگ‌ترن.
• کلاس‌های noPrint و onlyPrint تعیین می‌کنن چی روی کاغذ بیاد و چی نیاد.
• لینک‌های آبی تو چاپ سیاه‌وسفید خاکستری می‌شن و بهتره مشکی بشن.
• شکستن بلاک‌های کد بین صفحه‌ها هنوز مشکل حل‌نشده‌ی نویسنده‌ست.