Bei clickpress wird auf standardkonformes Markup geachtet und Bilder per Image-Replacement ins CSS gepackt. Nur leider (oder zum Glück?) ignorieren die Druck-Dialoge der Browser das CSS-Attribut background-image:url(‚image.jpg‘).
Auf meiner Suche im Internet nach einer Lösung fand ich einen Beitrag von Andreas Bovens, der via Listen-Element das Problem fixt. Hier nun die deutsche Version:
Nehmen wir an, wir haben einen h1-tag mit der id „title“.
#ti\tle { /* 6. */ display: list-item; /* 1. */ list-style-image: url(banner.jpg); /* 2. */ list-style-position: inside; /* 3. */ letter-spacing: -1000em; /* 4. */ font-size: 1pt; /* 5. */ color: #fff; /* 5. */ } |
- Das h1-(Inline-)Element wird in ein Listen-Element gewandelt
- Als Listen-Image wird das Bild eingebunden.
- Firefox hätte gern das inside
- Per Malarkey’s Image Replacement (MIR) wird der eigentliche Text zwischen den h1-tags versteckt.
- Da MIR nicht in Opera funktioniert, wird die Schriftgröße auch 1 pt reduziert und weiß eingefärbt. Mit Operas Standard-Printeinstellungen wird der Text nun unsichtbar.
- Da der IE 5 und IE 5.5 list-style-image nicht verstehen, schließen wir diese Browser kurzerhand per Escaping-Hack aus.