Afbeelding centreren op print

Status
Niet open voor verdere reacties.

ErikBooy007

Terugkerende gebruiker
Lid geworden
24 mei 2007
Berichten
3.814
Goedemiddag!

Ik vraag me af of het mogelijk is om een afbeelding op een pagina te centreren bij het afdrukken. Ik heb een afbeelding:

cg.php


http://www.erikbooy.nl/SAA/cg.php?t...moment=48370.5&zfm_mass=1351&zfm_moment=45714

De pagina waar het om gaat staat (statisch, het daadwerkelijke verhaal is dynamisch) op http://www.erikbooy.nl/SAA/test_pagina.html .

Die wil ik dus graag in het midden van de pagina printen. Dat lukt niet. Het probleem is (o.a.) dat het niet de enige content van de pagina is. Ik heb al wel een page-break weten te forceren (niet eens per sé nodig, aangezien de rest van de content is gemaakt om precies één pagina te vullen) en ik kan de afbeelding ook in horizontaal in het midden krijgen. Alleen verticaal niet.

Dit is m'n print.css tot nu toe:

Code:
body {
	width:		100%;
}

@media print {

	div.fullscreen {

		page-break-before:	always;
		height:	100%;
		width:	100%;
		position: relative;

	}

	img.centered {
		display:      block;
		position:     absolute;
		top:          50%;
		left:         50%;
		margin-left:  -204px;
	}
}

Overigens weet ik de exacte afmetingen van de afbeelding, die zijn constant.

Normaal gesproken als ik iets zowel horizontaal als verticaal wilde centreren, dan deed ik dat op de volgende manier:

Code:
element {

  position:     absolute;
  top:       50%;
  left:      50%;
  margin-left:  -204px; /* De helft van de breedte van het element */
  margin-top:   -300px; /* De helft van de hoogte van het element */

}

Waarbij de parent absolute, relative of fixed is. Maar daarvoor heb ik dus nodig dat mn div.fullscreen in dit geval 100% van de hoogte van een pagina inneemt...

I'm lost...

Het is een nogal onsamenhangend verhaal geworden, maar hopelijk begrijpen jullie wat ik bedoel en kunnen jullie me helpen.
 
Laatst bewerkt:
Als ik het goed begrijp wil je de afbeelding gewoon precies op het midden van de pagina hebben.
Dit kan je doen door de afbeelding op te slaan en dan met de afdruk wizard uitprinten.
In deze wizard kan je dacht de afbeelding precies in het midden krijgen
Hier staat het allemaal nog eens duidelijk uitgelegt
 
Euhm, ja, maar het gaat hierbij om een website waar de afbeelding in staat en de gebruiker moet de afbeelding in het midden van z'n pagina krijgen door de webpagina uit te printen.
 
Hoi Erik,
Jij hebt altijd van die leuke uitdagingen! :D
Maar wat zie ik als ik je stylesheet open met de FF Webdeveloper? Er zit een BOM
bom.gif
in je stylesheet! Caramba! :p
Kijk maar:
stella-bom.gif


-​

Verder blijkt in Firefox' afdrukvoorbeeld (FF3.5), dat het toch niet helemaal goed gaat met de page-break. Zowel op "100%" als op "Verkleinen tot papierformaat" komt er nog een stuk van de vorige pagina mee, en nog onder de afbeelding door ook:

stella-screenshot-ff.gif

Ik heb er nog niet naar gekeken, maar zit er misschien ergens een overflow'tje in dat dwarsligt? IE7 toont 'm bij "100%" en bij "Passend maken" wel zonder stukje van de eerste pagina, maar voegt een lege 3e pagina toe. IE7 zegt trouwens ook dat er een runtime-error in zit in "regel 6" (kan een document.getElementById(...) niet vinden ofzo). Opera 10.10 schaalt 'm bij aanpassen naar 80%, en daar past ie ook goed op (met kleinere afbeelding!), met ook een gratis lege 3e pagina.

-​

Overigens weet ik de exacte afmetingen van de afbeelding, die zijn constant.
M'n eerste impuls was: "o, maar dan is het makkie: gewoon de hoogte van de afbeelding en de bovenmarge opgeven in cm". :rolleyes:
Dat mag, want:
  • Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:
    * in: inches — 1 inch is equal to 2.54 centimeters.
    * cm: centimeters
    * mm: millimeters
    * pt: points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
    * pc: picas — 1 pica is equal to 12 points.
    (even scrollen in www.w3.org/TR/CSS2/syndata.html#value-def-length)
Stel: je gewenste img-hoogte op een A4'tje (daar gaan we maar van uit) is 25cm, dan moet de bovenmarge (29.7-25)/2 = 2.35cm zijn. > Klaar! :)

Toen mijn tweede impuls: die vlieger kan helemaal niet op gaan! :(
Tenminste niet op een website, waar iedere bezoeker zo zijn eigen browser en eigen printer op kan loslaten (op een intranet zou het nog kunnen).
Want via je browser en/of printerinstellingen kan je regelen of je er wel of niet kop- en voetregels onder wilt hebben (met webadres, datum, paginanummer, enz.), en: je kan je er eigen marge-instellingen op na houden (waarbij de ondermarge afwijkend kan zijn van de bovenmarge; niet ongebruikelijk voor staande A4'tjes...).
Wat er in hoogte overblijft, valt dus volstrekt niet te voorspellen. Bah!

O.k., terug naar af. - Ik ga nog eens fnutselen met de css. ;)

Wordt vervolgd!
CSShunter

[edit]Het print-stylesheet is ook niet BOMvrij, zie ik.[/edit]
 
Laatst bewerkt:
De BOMs zouden er nu uit moeten zijn ;) Heb nu alle files even (eigenlijk was het niet even, want het waren vrij veel files) opnieuw opgeslagen :)

Waar heb je de pagina-marges op staan als ik vragen mag? Ik snap dat het daar eigenlijk niet van af mag hangen, maar ik dacht dat de mijne op standaard stonden ( 12.7mm rondom ). En zolang het bij standaard marges op de pagina past... fine :D

De het derde pagina probleem heb ik (volgens mij) ook opgelost. Om één of andere onlogische reden had ik ook een page-break geforceerd ná de afbeelding... :confused:

De runtime error is er ook uit. Had eerst de wizard (die de gegevens voor het invullen opvraagt) en sheet op één pagina staan... Heb de wizard nu op een aparte pagina, maar had het JS laten staan. Slordig.

Fijn dat je er nog eens naar wilt kijken. Het is jammer dat je (voor zover ik weet) een div niet de grootte een A4-tje (het printbare gedeelte dan) kunt geven... Want dan zou het makkelijk zijn om de afbeelding in het midden daarvan te zetten...

Ik denk er zelf ook nog eens over na ;)
 
Hoi Erik,
Het resultaat van mijn kijken is dit probeersel:
En daar horen dan de volgende kanttekeningen bij ;) :
  • ik heb de print-styles direkt in de html opgenomen, dat werkte wel zo snel; de gewone screen-pagina ziet er dus niet uit.
  • de @media: print {...} operatie om alles heen hoeft m.i. niet in een sheet dat via de <meta> alleen voor media: print wordt aangeroepen. *)
  • om de eerste pagina er altijd op te laten passen heb ik de marges onder de tables wat kleiner gemaakt.
  • het logo heb ik ook een kopje kleiner gemaakt.
  • ook de padding in de "correction"-tabel heb ik geminimaliseerd.
  • van dat soort dingetjes.
  • het img kan gewoon horizontaal in het midden komen met: {text-align: center;}.
  • ik heb het img doldriest een hoogte van 24cm gegeven (de breedte moet zichzelf er dan bij schalen).
Op deze manier doet hij het bij benadering ook verticaal gecentreerd in mijn FF3.5 en IE7.
In beide browsers zowel op "100%" als op "passend maken". :)

Edoch: in mijn Opera 10.10 krijg ik in "afdrukvoorbeeld" de onderkant van de img-pagina niet te zien. Nog niet geprobeerd wat er gebeurt bij daadwerkelijk printen.
Mijn vers geïnstalleerde Safari5 pakt 'm wel op, maar daarbij wordt het img een stuk kleiner dan opgegeven, en komt verticaal bovenin te hangen... En ik zie niet dat je in Safari een % kunt opgeven of zo. Lijkt niets aan te doen.

Hé poppelepé: m'n virtuele IE6 knalt 'm er ook goed uit! :d
Blijft over: Chrome, die nog even gecheckt moet worden.

Waar heb je de pagina-marges op staan als ik vragen mag?
  • Firefox staat op: 12.7mm rondom, dat zal dus de default zijn.
  • IE7 heb ik op: 19,05mm rondom.
  • Safari staat op: 25mm rondom.
  • Opera staat op: boven en onder 10mm en link/rechts 5mm.
  • Bij alles staan de kop- en voetregels aan.

De mystery-pagina 3 is inderdaad niet meer te zien! :)

Al met al valt 't dus wel tegen wat er kan, maar 't valt me toch ook wel weer mee. Daarom zijn vooraf-pessimisten achteraf altijd véél vrolijker dan vooraf-optimisten! :D

Succes ermee!
CSShunter
_________
*) De spaties tussen media: en print moet je wegdenken; anders wordt het hier media:print.
 
Laatst bewerkt:
Idee 2

Tja, die verstokte no-table-layouters vergeten wel eens wat ... Dus: het img ophangen in een table kan natuurlijk ook. Dan kan het img een {vertical-align: middle; } krijgen en staat ie ook in het midden. :D

Het mooist is om dat met de css table-display eigenschappen te doen, maar ach, op zoveel tables in het document maakt een table'tje meer of minder ook niet zoveel uit. Dusdoende:
  • Nog een test: http://developerscorner.nl/csshunter/tests/stella_new2.htm
  • Om de table op 100% "available paper-height" te krijgen, lukte me weer niet met css.
  • Daarom de table-height weer op de 24 cm vastgeprikt.
  • Voordeel van dit alternatief: nu kan het img op ware grootte getoond worden, en er kunnen eventueel ook andere images met afwijkend formaat in geworpen worden, die dan ook automatisch zoveel mogelijk hor/vert centreren.
Volgende keer eerder aan denken! ;)

Dag-dag,
CSShunter

PS:
Er zijn in css2.1 ook nog de @page eigenschappen, die de print-margins definiëren. Dat zou het precies moeten zijn. Maar nu geen hoi roepen: de @page rule schijnt het alleen (enigszins) in Opera te doen, en de rest laat volledig verstek gaan, zegt dit artikel in de css-discuss Wiki: "forget about @page for the present".
Da's nou toch héél erg jammer. :confused:
 
You never seize to amaze me! :D

Fantastisch weer, dit is zo ongeveer wat ik bedoelde! :D Je hele verhaal maakt het ook helemaal duidelijk. (overigens, ik ga niet elk punt in je post langslopen, maar ik heb alles gelezen en begrepen en je uitgebreide uitleg wordt ontzettend gewaardeerd!).

Alleen, misschien zeg ik nu iets wat helemaal niet kan, maar je geeft de container voor de image een vaste hoogte (24cm) en de afbeelding heeft ook een vaste hoogte, dus de ruimte tussen de top van de container en de bovenkant van de afbeelding is altijd hetzelfde. Die zou ik dan toch ook een absolute marge-waarde moeten kunnen geven? Ik kom er alleen nog niet helemaal uit hoeveel dat dan zou moeten zijn...
 
... je geeft de container voor de image een vaste hoogte (24cm) en de afbeelding heeft ook een vaste hoogte, dus de ruimte tussen de top van de container en de bovenkant van de afbeelding is altijd hetzelfde. Die zou ik dan toch ook een absolute marge-waarde moeten kunnen geven?
Da-klop! :)
Als je in stella_new.htm (die zonder de extra tabel) de vrije hoogte van de ge-page-breakte div.fullscreen laat bestaan, en het img.centered een margin-top geeft, ben je er. Nu is jouw plaatje niet de 24cm hoog die ik ervan gemaakt heb, maar wat kleiner. Dus: géén hoogte opgeven (of het exacte aantal pixels) voor de afbeelding, dan komt dit op "ware grootte".

Ik kom er alleen nog niet helemaal uit hoeveel dat dan zou moeten zijn...
Dat doen we even proefondervindelijk. Eerste poging was 2,5cm gegokt, dat was te veel voor FF. Tweede poging gelukt:
Nu even kijken in IE7 ... hmmpf-grumpf, die maakt de onderkant te groot. Toch weer browser-verschillen: 't is ook nooit goed met die dingen. :rolleyes:
Nog even geprobeerd met opgeven van de echte pixelmaat erbij (776px hoog), stella_new4.htm, maar dat helpt ook geen sikkepit. 100% bij IE is een andere 100% dan bij FF, en "Passend maken" hebben ze ook hun eigen gedachten over.
Misschien is de tabel-oplossing dan toch nog het beste.
- Maar je moet maar eens een riem papier kopen en wat uitdraaien maken. Daar heb ik me niet aan gewaagd! :d

Met vriendelijke groet,
CSShunter
 
Fantastisch! Wederom hartelijk bedankt! Ik kan hier zeker mee verder!! :D:D

De moeite die jij doet voor (de mensen op) het forum, zo zijn er maar een paar! :D
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan