سبک برگه های چاپ تا حدودی فراموش شده اند، اما همچنان مهم هستند. بسیاری از مردم هنگام سفر یا زمانی که به اینترنت دسترسی ندارند، مقالاتی را برای خواندن چاپ می کنند.
سبک برگه های چاپ مزایای قطعی دارند. به عنوان مثال، خواندن روی کاغذ کمتر از خواندن روی صفحه برای چشم ها خسته کننده است.
همچنین، اگر یکی از آموزش‌ها را در کنار خود داشته باشید و ویرایشگر کدتان روی صفحه باز باشد، زیر آموزش‌ها آسان‌تر است. به این ترتیب، لازم نیست هر بار برای جستجوی چیزی، ویندوز را عوض کنید.
در این مقاله به 10 نکته آسان اشاره خواهیم کرد که به شما در ایجاد برگه های سبک چاپ بهتر کمک می کند.
در صورتی که فراموش کرده اید، در اینجا نحوه تنظیم یک صفحه سبک چاپ آمده است:
ویژگی media="print" تضمین می کند که کاربران هیچ یک از سبک های تعریف شده در فایل print.css را نمی بینند.
توجه لازم است، اما: اگر شیوه نامه اصلی شما هیچ ویژگی رسانه ای نداشته باشد، شیوه نامه چاپ سبک خود را به ارث می برد. برای جدا کردن آنها، شیوه نامه اصلی خود را به صورت زیر تنظیم کنید:
در اینجا 10 نکته برای شروع کار با برگه سبک چاپ آورده شده است.
1. Navigation
را حذف کنید
تفاوت اصلی کاغذ و کامپیوتر چیست؟ کاغذ ثابت است، در حالی که یک کامپیوتر تعاملی است. و برای تسهیل این تعامل، وب سایت ها دارای ناوبری هستند که روی کاغذ بی فایده می شود.
پیمایش و سایر قسمت‌های وب‌سایت خود را که روی کاغذ بی‌معنی می‌شوند، مانند نوارهای کناری که به پست‌های دیگر پیوند می‌دهند، پنهان کنید. کد این کار بسیار آسان است: فقط نمایش عنصر را روی none تنظیم کنید.
[css]
#nav، #نوار کناری {
نمایش: هیچ
}
[/css]
2. ناحیه محتوا
را بزرگ کنید
با حذف پیمایش و نوار کناری، محتوای ما اکنون در سراسر صفحه پخش شده است. این باعث می‌شود که برگه سبک چاپ بیشتر شبیه یک سند معمولی به‌جای نسخه کاغذی وب‌سایت باشد.
تنها کاری که برای گسترش محتوا باید انجام دهیم این است که float را بازنشانی کنیم، حاشیه‌ها را حذف کنیم و عرض را روی 100% تنظیم کنیم.
[css]
#محتوا {
عرض: 100%؛
حاشیه: 0;
شناور: هیچ
}
[/css]
3. بازنشانی رنگ های پس زمینه
اکثر مرورگرها از قبل ویژگی‌های پس‌زمینه را برای حفظ جوهر نادیده می‌گیرند. اما برای اطمینان از سفید بودن کل پس‌زمینه، می‌توانیم بدنه را روی سفید قرار دهیم و سپس به هر عنصر فرزندی که هنوز در صفحه است، پس‌زمینه سفید بدهیم.
[css]
بدن {
پس زمینه: سفید؛
}
#محتوا {
پس زمینه: شفاف
}
[/css]
4. بازنشانی رنگ های متن
با تنظیم مجدد پس زمینه، مشکل دیگری ظاهر می شود. اگر یک کادر خاکستری تیره “اطلاعات نویسنده” در انتهای پست های خود داشته باشید، با متن خاکستری روشن یا سفید، چه؟ با تنظیم پس‌زمینه روی سفید، این اطلاعات نامرئی خواهند بود.
برای رفع این مشکل، هر متنی با رنگ روشن را به چیزی تیره‌تر تغییر دهید: سیاه یا ترجیحاً خاکستری تیره.
[css]
#نویسنده {
رنگ: #111;
}
[/css]
از وبلاگ سام براون در بالا. آیا می‌توانید تصور کنید که اگر رنگ‌های متن را بازنشانی نکند، چه شکلی می‌شود؟ در واقع ناخوانا.
5. نمایش مقصد پیوندها
از آنجایی که کاغذ یک رسانه تعاملی نیست، خوانندگان نمی توانند برای جمع آوری اطلاعات بیشتر روی پیوندها کلیک کنند.
بگویید شخصی در حال خواندن نسخه چاپی یک محصول جدید و شیک است. دیدن ناگهانی “برای اطلاعات بیشتر اینجا را کلیک کنید” برای آنها بسیار آزاردهنده خواهد بود، اینطور نیست؟ این به راحتی با افزودن مقصد پیوند پس از متن پیوند برطرف می شود و چیزی شبیه به این به شما می دهد: “برای اطلاعات بیشتر اینجا را کلیک کنید (http://hereismore.com/information).”
علاوه بر این، برای مرورگرهای CSS 2-ready، این کار را می توان با CSS ساده قدیمی انجام داد. کد اینجاست:
[css]
a:link:پس از {
محتوا: ” (” attr(href) “) “;
}
[/css]
می‌توانید چیزها را با اندازه قلم کوچک‌تر، مورب یا هر چیز دیگری تزیین کنید.
6. پیوندها را از متن معمولی متمایز کنید
خوانندگان باید بتوانند پیوندها را از متن معمولی تشخیص دهند. قوانین اساسی استفاده در اینجا اعمال می شود: آبی و زیرخط ترجیح داده می شود، اما من ترجیح می دهم پررنگ را نیز اضافه کنم.
به خاطر داشته باشید که اسناد اغلب سیاه و سفید چاپ می شوند. فقط به تفاوت رنگ بستگی نداشته باشید. در اینجا کد پیوندهای معقول چاپ شده است:
[css]
a:link {
فونت-وزن: پررنگ;
متن-تزیین: زیر خط.
رنگ: #06c;
}
[/css]
#0066cc یک رنگ آبی تازه است و هنگامی که در مقیاس خاکستری چاپ می شود مانند #999999 به نظر می رسد. با این کار، لینک ها چه به صورت رنگی و چه سیاه و سفید چاپ شده خوب به نظر می رسند. آنها همچنین از متن معمولی متمایز خواهند شد.
7. اندازه قلم چطور؟
در چاپ، 12 امتیاز استاندارد است. اما چگونه آن را به CSS ترجمه کنیم؟ برخی می گویند تنظیم اندازه قلم روی 12 نقطه (pt) به اندازه کافی خوب است. دیگران توصیه می کنند آن را روی 100٪ تنظیم کنید. هنوز دیگران می گویند که به هیچ وجه هیچ اندازه قلمی را در شیوه نامه چاپ خود اعلام نکنید، زیرا انجام این کار تنظیمات برگزیده کاربر را لغو می کند.
من شخصاً اکثر اوقات با اندازه فونت 12 نقطه ای استفاده می کنم:
[css]
پ {
اندازه فونت: 12pt;
}
[/css]
8. در مورد فونت ها چطور؟
بیشتر مردم فونت‌های سریف را ترجیح می‌دهند زیرا کمتر چشم را خسته می‌کنند، بهتر خواننده را در متن هدایت می‌کنند و غیره. تنظیم font-family بر روی serif در شیوه نامه چاپ شما احتمالاً ایده خوبی است، اگرچه ممکن است برخی از خوانندگان متوجه شوند که فونت موجود در چاپ آنها نیست. مانند آنچه در وب سایت شما وجود دارد.
این کد برای پشته فونت چاپ خوب است:
[css]
بدن {
font-family: Georgia، ‘Times New Roman’، serif;
}
[/css]
یکی از مزایای ویژگی @font-face در CSS 3 این است که فونت‌های خاص شما نیز قابل چاپ هستند و باعث می‌شود چاپ‌های چاپی بسیار شبیه به وب‌سایت شما به نظر برسند!
9. وبلاگ من نظرات زیادی دارد. چه کاری باید انجام دهم؟
خب، این واقعاً انتخاب شماست. از یک طرف، به تمام درختانی فکر کنید که فقط با افزودن #comments { display: none; } به شیوه نامه چاپ شما. از سوی دیگر، نظرات در برخی از وبلاگ ها ارزش زیادی دارند و حاوی بحث های خوبی هستند.
با انتقال نظرات به صفحه خود، به کاربران این امکان را می دهید که آنها را چاپ کنند یا خیر. CSS دارای ویژگی است که این کار را بسیار آسان می کند:
[css]
#نظرات {
page-break-before: همیشه;
}
[/css]
به عنوان مثال، اگر مقاله شما دو و نیم صفحه باشد، نظرات از صفحه 4 تا مثلاً 6 نمایش داده می شود. کاربران می توانند انتخاب کنند که چه صفحاتی چاپ شوند، بدون از دست دادن اطلاعات.
10. نمایش یک پیام فقط برای چاپ
“از شما برای چاپ این مقاله سپاسگزاریم! لطفاً فراموش نکنید که برای مقالات جدید به mysite.com بازگردید.” چرا یک پیام دوستانه مانند این را در نسخه چاپی نمایش نمی دهید؟ یا شاید از خوانندگان بخواهید کاغذی را که برای حفظ محیط زیست استفاده کرده اند بازیافت کنند.
در اینجا به نظر می رسد:
از شما برای چاپ این مقاله متشکریم. لطفاً فراموش نکنید که برای مقالات جدید به mysite.com بازگردید.
[css]
#printMsg {
نمایش: بلوک؛
}
[/css]
می‌توانید کمی استایل نیز اضافه کنید، مانند یک حاشیه 1 پیکسلی. فراموش نکنید که #printMsg { display: none; } به شیوه نامه معمولی خود، برای جلوگیری از سردرگمی بازدیدکنندگان.
ویترین
در اینجا چند نمونه از وب‌سایت‌های معروفی آورده شده است که درباره شیوه چاپ فکر کرده‌اند (یا فراموش کرده‌اند). با خیال راحت الهام بگیرید.
به نظر خوب می رسد:
در اینجا برخی از وب‌سایت‌ها وجود دارد که با شیوه‌های چاپ خود کار بسیار خوبی انجام می‌دهند:
24 روش: وب‌سایت این «تقویم ظهور برای متخصصان وب» طراحی فانتزی دارد، اما من نمی‌دانستم که در چاپ چگونه به نظر می‌رسد. نتیجه واقعا خوب است. موارد نرم CSS 3 حذف شده است. چیدمان تمیز و در عین حال نرم است. نام تجاری بزرگ حذف شده است و با یک “24 راه” ساده تراز راست در کنار عنوان پست جایگزین شده است.
ThinkVitamin: وبلاگ Carsonified یک مثال خوبی از نحوه چاپ شیوه نامه ها. هیچ نقطه ضعف واقعی وجود ندارد به جز اینکه مقصد URL نشان داده نمی شود.
ترفندهای CSS: کریس کویر از CSS-Tricks.com با شیوه نامه چاپ خود کار خوبی انجام داده است. او همه به هم ریختگی ها را حذف کرده و نظرات را به صفحه جدیدی منتقل کرده است، بنابراین کاربران می توانند انتخاب کنند که آنها را چاپ نکنند.
می‌توان از برخی کارها استفاده کرد
در اینجا برخی از وب‌سایت‌ها وجود دارد که قبلاً عالی هستند، اما سبک چاپ آنها می‌تواند از کمی جلا استفاده کند. هیچ توهینی به کسی در این بخش وجود ندارد.
دفتر طراحی وب: به نظر می رسد دفتر طراحی وب سایت دارای سبک چاپ خود را نادیده گرفت. وقتی روی «چاپ» کلیک می‌کنید، در نهایت با سه صفحه تبلیغات و پیوندهای مرتبط مواجه می‌شوید.
خانه طراحی: به نظر می رسد برایان هاف فراموش کرده است برگه سبک چاپ او نیز. وقتی مقاله ای را چاپ می کنید، فرم نظر را نیز دریافت می کنید.
Flickr: توانایی چاپ ارسال عکس برای نشان دادن به دوستان خوب خواهد بود. فلیکر می توانست همه چیز را به جز خود عکس و اطلاعات حق چاپ در نسخه های چاپی حذف کند. اما همه چیز در HTML ساده بدون استایل ظاهر می شود.
منابع
نوشته شده به طور انحصاری برای WDD توسط Pieter Beulque. او یک دانشجو و توسعه دهنده وب است که در بلژیک زندگی می کند. می‌توانید او را در تویتر نیز دنبال کنید.
بدون دیدگاه