Kimmy247 Posted April 23, 2011 Share Posted April 23, 2011 HiI am only new to HTML and CSS so forgive my ignorance if I am asking a question that cannot happen. I have to produce a website that has pictures and style it for both screen and print. The Print.css file needs to ensure that it is suitable for print meaning it is to be black and white. I have read on numerous websites that there is no feature to make an image file black and white the closest thing is to make it grayscale but that only works in IE. However I have read on other sites that you can substitute a picture for print compared to screen. I have two copies of my pictures one color and one black and white. I was wondering how substitute the picture, can the @media function do this and if so what coding do I need both in my HTML and print CSS for this to happen. From websites I got the gist that I have to turn one off for print and one on for screen, but no website I have found actually explains the coding I require for this to happen. If anyone out there can help it would be appreciated. Thanks in advance Link to comment Share on other sites More sharing options...
rubykitten Posted April 27, 2011 Share Posted April 27, 2011 I would not concern yourself with changing ever image on your website to be able to be swap for a black and white version as that is not the real purpose of the print.css file.Leave the black and white to the users printer settings to take care of. The print.css function was designed to allow the websites designer to remove or hide elements within the page they do not wish to be printed by the user.As an example, using the css file you can hide the ad banners on your web page or remove a background image that would cause the printed text to be harder to read. Hope this helps! Link to comment Share on other sites More sharing options...
jeffman Posted April 27, 2011 Share Posted April 27, 2011 I mostly agree with CoderKitten. However, I work in an environment where everyone's default printer is color, and most users don't know how to adjust their settings. To save costs, employees are urged not to print in color for the most part. So I'm sensitive to your concern.@print cannot change the src attribute of an image element. Period.You might be able to get around this limitation, if you use a non-semantic dummy element (probably a span) in place of the image, and assign your image to the background of the dummy element. The @print ruleset would use the BW image for the background. For this to work, you'll have to play with height, width, and probably the display property of the span. I'm not thrilled with the solution. It's non-semantic, for one thing, so search-bots probably will probably not index your image as content, and alternative browsers (for the blind, say) might ignore the image (I'm not sure).You'll also need a way of preloading the BW image, or it might not finish downloading before printing is executed. For all I know, printing might occur before the image gets swapped, regardless of its preload status (again, I'm really not sure).Try it. Test all the usual browsers. See if it works. See how you like it. Link to comment Share on other sites More sharing options...
baligena Posted April 28, 2011 Share Posted April 28, 2011 its a good idea to have separate style for the web and for printing. So when the user has a nice printing format if they decide to printPay attention to the media attribute<!-- for the visual (web) media="screen"--><link href="web.css" rel="stylesheet" type="text/css" media="screen" /><!-- for printing media="print"--><link href="print.css" rel="stylesheet" type="text/css" media="print" /> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.