Försöker att göra en utskrift av en bild på en speciell kortskrivare. Korten som sitter i skrivaren är 8,56cm x 5,4cm. Har fått en .eps-fil som jag öppnat i Photoshop och sparat om som en .jpg med 300dpi i 8,56cm x 5,4cm.
Har sedan gjort ett enkelt html-dokument med följande innehåll:
Gör jag en utskrift får jag bara med översta delen till vänster på kortet, vilket är ganska logiskt då jag antar att bilden är för stor då den är inläst i 300dpi?
Gör jag samma sak med bilden inläst i 72dpi istället så täcker den inte ut hela kortet.
Vad är det jag behöver ändra för att få rätt storlek på utskriften?
Det här med utskrifter, upplösning och webbsidor är väldigt luddigt och beror mycket på vilket operativsystem och webbläsare som används.
Det går att använda många måttenheter i CSS, bland annat millimeter.
Ange bildens önskade exakta mått såhär:
Webbläsaren bör skala ner bilden till rätt mått.
Ju större bilden är desto bättre upplösning vid utskrift.
En Doctype är bra för att webbläsaren ska läsa CSS ordentligt.
Rätt DPI ställer du in i skrivarens inställningar för utskriften.
Kom på ytterligare en sak. Bilden skall egentligen bara användas som bakgrund och sedan skall en del text läggas ovanpå. Hur är rimligen enklast att gå till väga då? Göra en tabell och använda bilden som bakgrund? En div?
Tackar. Nu börjar det likna något. Ett sista problem (hoppas jag). Tanken är att jag skall kunna skriva ut X antal kort genom bara en utskrift. Hur gör man det på ett enkelt sätt? Finns det något enkelt sätt att göra sidbyte på eller skall man göra en div för varje kort som skall printas som innehåller bakgrund+text?
Men nu behöver jag skriva ut flera kort på samma gång.
Antar att det kan vara klokt att lägga varje enskilt kort inom en t.ex div class="card" som innehåller tex clear:both; ? Hur bör jag positionera texten så att den passar inom varje kort ?
Okej, här är ett komplett förslag där du kan placera texten var som helst på kortet.
Tips: Använd inte pt eller px som måttenheter vid utskrift, använd millimeter för allting, både textstorlek och placering.
(Jag har bara testat i Firefox, där verkar page-break-after bugga lite.
I övrigt har jag endast tillgång till IE8 Beta och där är Skriv ut-knappen stendöd...)
<!DOCTYPE html>
<html>
<head>
<title>Print</title>
<style type="text/css">
div.card {
width:85.6mm; height:54mm; /* Kortets totala storlek */
position:relative; /* Få texten absolut placerad inom klassen */
page-break-after:always; /* Ett kort per sida */
}
div.card img {
width:100%; height:100%; /* Sträcker ut bilden över hela kortet */
position:absolute;
top:0;
left:0;
z-index:1;
}
div.card div.text {
position:absolute;
z-index:2;
}
/* Här kan du placera varje enskild textrad på kortet */
div.item1 { left:24mm; top:5mm; }
div.item2 { left:24mm; top:14mm; }
</style>
</head>
<body>
<div class="card">
<img src="image.jpg">
<div class="text item1">Namn</div>
<div class="text item2">Personnummer</div>
</div>
<div class="card">
<img src="image.jpg">
<div class="text item1">Namn</div>
<div class="text item2">Personnummer</div>
</div>
</body>
</html>
Funkar perfekt. Förutom en sak. När jag kör med page-break-after:always; så kommer det automatiskt en helt tom utskrift efter det sista kortet. Kan man bli av med den på ett enkelt sätt tro?
