f1vlad.com

by Vladislav Kulchitski

*

Show images in print mode with media="print" attribute

"

First, I was going to write an entire blog post about how to force images in browser in print mode, but decided to be brief. So print mode, that is when you click CTRL+P or APPLE+P and enter preview mode, then proceed with sending the document to a printer. Many may already know that most newer browsers, when in print mode, do use .css file with media="print" attribute like this: <link rel="stylesheet" rev="stylesheet" href="file.css" media="print">

Cool little hack, an author of which is unknown [to me] allows you to achieve this in the following manner: 

.cssClass {
        display: list-item !important;
        list-style-position: inside !important;
        letter-spacing: -1000em !important;
	text-indent:0 !important;
	list-style-image: url(/images/someimage.gif) !important;
}

You may need to mask/hide text that will pop up on top of this picture, but that is an easy part. This is a good starting point. An example of how I am using it on slashdot.org, for forcing logo and topic icons into print version, could be seen directly from a.fsdn.com/sd/print.css.

|