Tips for Better Print Style Sheet

With Everything Being Digital Around Us Print Sheets Are Somewhat Being Ignored Yet They Continue To Be An Important Part Of Our Life. Sometimes Tangible Prints Are Needed Rather Than Just Web Pages. Print Style Sheet Have Many Benefits Over Digital Copies That Are More Tiring To Read For Example Reading Books In Hardcopy Is Considered Less Tiring Than Reading E-books.

Designers Sometimes Tend To Ignore This Part Until Need Comes Up And They Have To Dig Various Sources To Get Things Right. Here Are A Few Tips To Keep In Mind For A Better Print Style Sheet:

1. Remove Useless Stuffs

There Are Stuffs On A Web Page That Are Absolutely Not Needed In A Print Style Sheet. Do Away With Navigations First Since They Will Mean Nothing But A Useless Space Capturer In Paper. Sidebars That Link To Other Posts Are Also To Be Removed At First Alteration Begins For Print Style. The Code For This Is Very Easy: Just Set The Element’s Display To None.
[css] #nav, #sidebar {display: None ;} [/css]

2.Expand The Content Area

With Navigation Panel And Other Useless Stuffs Gone Your Page Is Looking To Look Rather Crouched And So You Need To Expand The Content Area. Expand The Content Is Reset The Float, Remove Any Margins And Set The Width To 100%.
[css] #content { Width: 100%; Margin: 0; Float: None; } [/css] ]

3. Color Changes

Remember You Are Doing It For Print Style And Not For Any Website. Many Browsers Will Involuntarily Reverse Colors When Printing In Order To Save Toner, But This Won’t Have The Same Amount Of Excellence As A Handcrafted Solution. For Best Results, Make Color Changes Explicit. On Some Websites, Such As Portfolios, Background Images And Colors Are A Significant Visual Constituent. If You Are Printing From A WebKit Browser, You Can Force The Printer To Deliver The Colors As Seen On Screen. To Make Sure That The Whole Background Is White, You Can Set The Body To White, And Then Give Every Child Element Still On The Page A White Background.

[css] Body { Background: White; } #content { Background: Transparent; } [/css]

After Resetting The Background, Another Quandary Comes Up. What If You Have A Dark-gray “Author Information” Box At The End Of Your Posts, With The Text In Light Gray Or White? With The Background Now Set To White, This Part Will Be Unseen. To Amend This, Change Any Light-colored Text To Something Darker: Black Or, Preferably, Dark Gray.
[css] #author { Color: #111; } [/css]

4. Make Links More Visible

Since It Is Not A Webpage Where Readers Can Click The Links Directly To Follow It, Highlight The Links Well. If There Are Texts Like “click For More” Or “continue Reading”, Make Necessary Changes. Links Need To Stand Out So That Users Can Identify It And Link URLs Should Be Visible On The Printed Version Of The Web Page. It Is Rather Wise To Expand Only Outbound Links In Articles, And Suppress Internal Ones. This Way Your Print Will Look Cleaner. Remember That Documents Are Often Printed In Black And White. Don’t Rely Only On Color Difference. Here Is The Code For Wise Printed Links:

[css] A:link { Font-weight: Bold; Text-decoration: Underline; Color: #06c; } [/css]

5. Print QR Codes

Frequently Looked Upon As An Advertising Fright, QR Codes Do Have Their Value In Definite Conditions. One Evident Case Is Providing An Easily-scanned Sigil On A Printed Web Page That Enables The User To Return To The Live Version Without Having To Type The URL.


• The Kind Of Chart Information We Want Google To Deliver (qr, In Our Case);
• The Rendered Size Of The QR Sigil, In Pixels;
• The URL To Encode;
• The Form Of Character Encoding To Use.

6. CSS3 Filters

Browsers Have Issues Printing Banner Images Especially When The Image Is White Against A Dark Background. In General, You Could Use A CSS Sprite To Toggle Between Different Versions Of The Logo For Print, But That Would Mean Copying The File Size For Potentially Little Benefit. Instead, Go For CSS Filters And Their SVG Equivalent, For Firefox To Invert The Image Just Before It Hits The Printed Page. CSS3 Filter Will Invert The Colors In Header Images, Turning Black To White And Vice Versa.

Allen Ray

is a graphic designer. The Design Mag was founded in 2008, and since then she is constantly looking for new ways to serve the Design community both online and offline. It is her ultimate goal to make The Design Mag the best source for Design related Tutorial and Resources. Follow on Twitter@thedesignmag

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *