![\"Office](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/08\/print-styling-01-1024x539.jpg\")
<\/figure>\n\n\n\nHow to Design for Print<\/h3>\n\n\n\n
All the magic is contained within CSS by defining print-specific styles. You may find it helpful to create a separate The naming convention and specific styles will be unique to your own project\u2019s stylesheet, but these concepts will apply. After the basics are added, go through the default stylesheet of your website and look for any unique situations that need print styles to ensure the best printing experience.<\/p>\n\n\n\n Most people prefer to print in black and white due to the expense of colored ink. Also, there is a higher contrast when text is black and printed on white paper. You\u2019re probably familiar with media queries, as they are critical in modern, responsive web design. Media queries are also necessary for creating print styles.<\/p>\n\n\n\n This is what will make text in the body black, and get rid of any background color for best printing:<\/p>\n\n\n\n Chances are, the text will print out in Times New Roman. There\u2019s nothing wrong with that, but what if you want to specify a different font? Just like you did in your default styles, this can be done in print as well. While we\u2019re at it, let\u2019s not forget the line height.<\/p>\n\n\n\n You\u2019ve probably been conditioned to keep the There are page elements that are not necessary, like navigation, footer, sidebar, and background images, so this is where our Articles are often printed, so it is great to have each article start on a separate page. It is much easier for the user to organize their printouts if key information is grouped together and not spread across multiple pages.<\/p>\n\n\n\n By adding this to your print stylesheet, the articles will always start on a new page:<\/p>\n\n\n\n Keeping the unordered lists together on the same page is a great idea too:<\/p>\n\n\n\n Let\u2019s take it a step further and do the same for headings, images, blockquotes, tables, and other list elements:<\/p>\n\n\n\n We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.<\/p>\n\n\n\n Here is where the spacing can really be fine tuned for printouts. It\u2019s not too often that you see centimeters in web design, but it works great for the purpose of determining borders on the page. The If pages are intended to be printed and put in a binder, keep in mind that there is the option to adjust the margins for every other page. Left page is for pages 1, 3, 5… and the right page is page 2, 4, 6…<\/p>\n\n\n\n First-page customization comes in handy in certain instances. By using the These may or may not apply to your site, but they are good to note nonetheless.<\/p>\n\n\n\n To prevent images from being cut off and bleeding over the edge of the printed page, adding a declaration of a max width will prevent this.<\/p>\n\n\n\n A nice welcome message is a great addition. Print content will be around for awhile, so it is always nice to include a friendly message or reminder.<\/p>\n\n\n\n Now that we\u2019ve covered some of the print consideration basics, it is easy to incorporate these ideas into your print stylesheet. Although print is not what we ultimately think of when we use the web, it is a great way to provide your users with the same great experience no matter how they are accessing content.<\/p>\n\n\n\n Would you like to learn more about WordPress, and the various ways you can use this platform to your company\u2019s advantage? Subscribe to our newsletter\u00a0and learn more about our\u00a0managed hosting for WordPress<\/a>\u00a0and our\u00a0flexible hosting plans<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" What does Print have to do with the Web? Most of us live online, getting all of our information from the web. We\u2019re connected all day, every day, from many devices. You may have heard that print is dead when, in fact, that certainly isn\u2019t true! We may not print as frequently as we once…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":141012,"template":"","resource-topic":[1396,901],"resource-role":[1397,896],"resource-type":[916],"class_list":["post-139655","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nprint.css<\/code> stylesheet so it is separate from all your other styles. Keep in mind that not all sites have a print style sheet; this is an additional feature and step in the development process. If no print styles are specified, the default styles are used for printing. We will be defining styles to make things more efficient for print, which will override any defaults.<\/p>\n\n\n\nColor and Layout Considerations<\/h3>\n\n\n\n
@media print {\nbody {\ncolor: #000;\nbackground: #fff;\n}\n}<\/code><\/pre>\n\n\n\nbody {\nfont: 13pt Tahoma, Geneva, sans-serif;\nline-height: 1.5;\n}<\/code><\/pre>\n\n\n\nHiding Unnecessary Elements<\/h3>\n\n\n\n
display: none<\/code> to a minimum, but this is entirely okay for your print styles. By hiding some elements, you are giving your users a better way to print and keeping anything unnecessary from the hard copy. The goal is to allow them to effectively print out the most important content, not the exact web page.<\/p>\n\n\n\ndisplay: none<\/code> will come in handy.<\/p>\n\n\n\n@media print {\nnav, aside, footer {\ndisplay: none;\n}\n\nsection {\nbackground: none\n}\n\/* section had a patterned background in the default styling which is best removed in the print style *\/\n}<\/code><\/pre>\n\n\n\narticle {\npage-break-before: always;\n}<\/code><\/pre>\n\n\n\nul {\npage-break-inside: avoid;\n}<\/code><\/pre>\n\n\n\nh1, h2, h3, h4, h5, h6 {\npage-break-after:avoid;\npage-break-inside:avoid\n}\n\nimg {\npage-break-inside:avoid;\npage-break-after:avoid;\n}\n\nblockquote, table, pre {\npage-break-inside:avoid\n}\n\nul, ol, dl {\npage-break-before:avoid\n}<\/code><\/pre>\n\n\n\n&amp;amp;amp;lt;\/pre&amp;amp;amp;gt;\n&amp;amp;amp;lt;img class=&amp;amp;quot;aligncenter wp-image-12547 size-full&amp;amp;quot; src=&amp;amp;quot;https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/08\/print-styling-03.jpg&amp;amp;quot; alt=&amp;amp;quot;print-styling-03&amp;amp;quot; width=&amp;amp;quot;1022&amp;amp;quot; height=&amp;amp;quot;480&amp;amp;quot; \/&amp;amp;amp;gt;\n&amp;amp;amp;lt;pre&amp;amp;amp;gt;\n&amp;amp;amp;lt;h3&amp;amp;amp;gt;Page margin measurements&amp;amp;amp;lt;\/h3&amp;amp;amp;gt;<\/code><\/pre>\n\n\n\nbody, article {\nwidth: 100%;\nmargin: 0;\npadding: 0;\n}<\/code><\/pre>\n\n\n\n@page<\/code> rule is how we will target the spacing. This example will allow for 2cm around all the borders. This measurement can be customized to allow for more or less space. For instance, your users may want to take notes and allowing for a larger margin would be helpful.<\/p>\n\n\n\n@page {\nmargin: 2cm;\n}<\/code><\/pre>\n\n\n\n@page :left {\nmargin: 1cm 3cm 1cm 2cm;\n}\n\n@page :right {\nmargin: 1cm 2cm 2cm 3cm;\n}<\/code><\/pre>\n\n\n\n:first<\/code> page pseudo-class, the styling of the first printed page can be determined:<\/p>\n\n\n\n@page :first {\nmargin: 1cm 2cm;\n}<\/code><\/pre>\n\n\n\n![\"a](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/08\/print-styling-021-1024x348.jpg\")
<\/figure>\n\n\n\nImage and Intro Text Ideas<\/h3>\n\n\n\n
img {\nmax-width: 100% !important;\n}<\/code><\/pre>\n\n\n\nheader:before {\ndisplay: block;\ncontent: &amp;amp;quot;Thank you for visiting my website at www.mysite.com. Please check back for upcoming specials and new products.&amp;amp;quot;;\nmargin-bottom: 15px;\npadding: 5px 8px;\nfont-style: italic;\n}<\/code><\/pre>\n\n\n\nStay Educated With WP Engine<\/strong><\/h2>\n\n\n\n