f1vlad.com

by Vladislav Kulchitski

*

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

I'm at Boston University Fitness & Recreation Center (915 Commonwealth Ave., btwn Harry Agganis & Buick, Boston) http://t.co/qyP2liB2 8 hours 6 min ago

f1vlad last spotted in:

Nashua, New Hampshire

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.

|

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
eight - eight =
Solve this math question and enter the solution with digits. E.g. for "two plus four = ?" enter "6".