[css] media print borders backgrounds landscape

[siepeltjuh]

Momenteel probeer ik om een rooster printbaar te krijgen, en dat lukt natuurlijk niet zo als ik het wil.

Standaard staat elke browser namelijk zo ingesteld dat achtergrond kleuren van een div (in dit geval een grijs tint) niet worden getoond. De gebruiker moet zelf in de instellingen duiken om de achtergrondkleur uitgeprint te krijgen.

Via http://www.w3.org/TR/css-print/ kwam ik er al achter dat het relatief eenvoudig is om het printscherm standaard op landscape te zetten met:
@page {size: landscape;}
Alleen lukt het nog niet om ook de browser te overtuigen borders en backgrounds standaard aan te hebben staan. Jullie wel?!

Ik vraag niet om het te forceren, maar wel om deze instellingen via css standaard aan te bieden. De gebruiker houd altijd de optie om het niet te printen. Opmerkingen over hoeveel inkt het kost en dat ik het niet moet willen zijn niet nodig. In dit geval gaat het erom dat de grijstint ook informatie is.

Door wat te zoeken en te lezen heb ik begrepen dat vrijwel elke browser je instellingen overruled met deze css in het print dialoog:
* {
background-color: white !important;
}
Is dat misschien een aanknopingspunt om dat dan weer te overrulen?

[X-Lars]

siepeltjuh schreef op vrijdag 22 oktober 2010 @ 18:05:
[...]

Is dat misschien een aanknopingspunt om dat dan weer te overrulen?

En? Wat gebeurt er als jij deze overruled? Maak gebruik van een hogere specificity in je CSS selector om dat te bereiken (maar ik weet niet of dat voor in jouw geval ook werkt, zou wel moeten natuurlijk).

[Skef]

Wij gebruiken voor een print-oplossing waarbij we html printen een ActiveX-object. Daarmee kunnen we zaken als marges, achtergrondkleur e.d. allemaal vantevoren via scripting instellen. Meen dat 't Meadco ScriptX heet oid... Enig nadeel is natuurlijk de IE-only beperking welke je vervolgens inbakt, maar dat was bij onze applicatie geen probleem (eerder werkten we met PDF's maar dat waren een fiks aantal handelingen meer om uit te printen).

[siepeltjuh]

Voorheen gebruikten wij ook PDF`s, werden handmatig gegenereerd, maar bij 20-25000 PDFjes per jaar wordt je niet vrolijk, daarom willen we dat nu automatiseren. Daarbij willen we ook graag van de PDF`s af om zo onafhankelijk mogelijk te zijn van derde partijen / instellingen etc. Zoveel mogelijk alles in de browser 'proppen'
|
Eeen activex component en dus IE only is geen optie.

@x-lars
Nou daar zit het hem nu in. Hoe overrule ik die instelling, er staat !important bij dus dan kan ik toch geen style maken die daar dan nog weer overheen gaat? Suggesties?

[ Voor 17% gewijzigd door siepeltjuh op 23-10-2010 21:39 ]

[Verwijderd]

Ik heb net wat zitten proberen met achtergrondkleurtjes in een CSS-bestand met media="print", maar welke prioriteit je ook stelt aan een CSS-selector, je krijgt geen achtergrond.

Zoals je zelf al hebt aangegeven is dat printgedrag een browserinstelling (zie bijvoorbeeld dit screenshot) en daardoor op geen enkele manier te wijzigen (stel je voor dat voorkeursinstellingen door scripts konden worden gewijzigd). Je moet het dus hebben van alternatieve methoden: gebruikers uitleggen wat ze moeten doen in hun browser, of logischer: PDF-bestanden laten genereren door een back-end script. En die back-end scripts zijn er genoeg.

[ Voor 18% gewijzigd door Verwijderd op 24-10-2010 00:36 ]

[mcDavid]

Als je een SVG bestand maakt ipv een HTML bestand. Doet'ie dan de kleurtjes wél meenemen?

[RobIII]

^ Dat of gewoon een PNG oid genereren. Je zou zelfs die PNG in de pagina mee kunnen nemen en default de display op none mikken, en in de print stylesheet de PNG tonen en de rest hiden.

Levert overigens wel ook de nodige problemen op zoals pagina-overloop; daar zul je rekening mee moeten houden en aannames op moeten doen. Echt ideaal is 't niet.

[mcDavid]

...Alleen met PNG worden het wel gelijk van die bizar grote bestanden, als je de tekst een beetje scherp wilt kunnen printen...

[X-Lars]

siepeltjuh schreef op zaterdag 23 oktober 2010 @ 21:37:
[...]
Hoe overrule ik die instelling, er staat !important bij dus dan kan ik toch geen style maken die daar dan nog weer overheen gaat? Suggesties?

De suggestie gaf ik al

Het is sowieso aan te raden goed te begrijpen wat specificity eigenlijk is als je met CSS bezig bent (Google levert ook wat meer leesbare artikelen op):
http://www.w3.org/TR/CSS2/cascade.html#specificity
http://www.w3.org/TR/css3-selectors/#specificity

Je kunt dus gewoon een !important rule over-rulen met een hogere specificity. Bijv.

Cascading Stylesheet:

html * { background-color: #CCC !important; }

Echter, ik zie na wat Googlen en testen (FF, GC, SA) dat zowel background-color als background-image in print dus een browser-instelling is die je niet met CSS kunt over-rulen.

Een PDF generator is vrij eenvoudig opgezet denk ik. Zelf was ik erg te spreken over wkhtmltopdf. De HTML heb je waarschijnlijk al, dus je kunt jezelf wellicht werk besparen door simpelweg een HTML-to-PDF script te implementeren (i.p.v. PDF generatie from scratch).

En misschien is het zelfs wel een optie om gewoon op de pagina zelf te vermelden dat men deze instelling even moet veranderen voor het printen. Dat is natuurlijk wel sterk afhankelijk van je doelgroep

[ Voor 0% gewijzigd door X-Lars op 24-10-2010 12:30 . Reden: * html = html * ]

[siepeltjuh]

Het wordt dus het kiezen tussen de minst slechte variant.

De instelling om landscape of portrait te printen zou oook een browser instelling zijn, echter kan ik die toch meegeven (lees niet beperken tot) vanuit CSS. Jammer dat dit niet kan voor de backgrounds.

PDF`s wil ik juist graag vanaf aangezien je hier plugins/readers voor nodig hebt. PNG is nog wel een redelijke oplossing, maar verre van ideaal.

@X-Lars dank voor de uitleg over specifity, dat wordt me nu ook steeds helderder Jammer dat het alleen geen oplossing bied. wkhtmltopdf is voor mij geen optie, het gaat heir om een .NET web app.

Ik ga zoeken naar een goede manier om 'screenshots' te schieten van de HTML pagina`s en die dan via CSS aan te bieden, mooi is het niet, maar een betere oplossing weet ik niet.

[Bosmonster]

De minst slechte variant lijkt me je print-css gewoon zo te maken dat je niet afhankelijk bent van achtergrondkleuren.

Als het gaat om een enkele tabel (planning oid), kun je hier (dat element dus, niet alles) eenvoudig een PDF of PNG van genereren. Dat doet Google ook met Analytics bijvoorbeeld.

[ Voor 44% gewijzigd door Bosmonster op 27-10-2010 12:09 ]

[siepeltjuh]

Het is een tabel die bestaat uit 6 kolommen. 1 kolom met tijden, de 5 andere zijn de dagen van de week.
Nu worden er divjes met absolute positioning overheen gelegd op de juiste positie om aan te geven op welke dag en tijdstip de activiteit plaatsvind.
Ik zie geen mogelijkheid om dezelfde planningsinformatie visueel inzichtelijk te maken zonder gebruik van gekleurde vlakken.
Dit is lastig naar PDF om te zetten omdat er vrijwel geen PDF plugins voor C# zijn die fatsoenlijk met die positionering omgaan. Wel zat ik te denken om de html pagina eerst naar een bitmap om tezetten en die dan in de PDF te plaatsen, ik had ergens gelezen dat dit best goed te doen is, maar moet me daar nog verder in verdiepen.

PDF was vooraf als laatste optie gekozen omdat ik liever niet afhankelijk wil zijn van readers/plugins etc aan de client kant.

[ Voor 8% gewijzigd door siepeltjuh op 27-10-2010 13:10 ]

[Bosmonster]

PDF is meer standaard dan Flash tegenwoordig. Magoed, een PNG kan ook prima werken natuurlijk

Daar heb je echter niet de print-specifieke mogelijkheden die je hebt met PDF (want daar is dat formaat nu juist voor bedoeld).

[X-Lars]

Ik zie ook het probleem niet van PDF (everybody else doing it, so why can't we?). Je hebt dan nog meer controle over wat er geprint wordt, en hoef je bijv. ook de url niet uit te printen (er staat standaard het e.e.a. in de header en footer als je vanuit de browser print).

Verder heeft dat dat wkhtmltopdf gebeuren niet zoveel met het platform te maken. Je kunt bijv. mooi met een crontab het rooster periodiek genereren (en ter download aanbieden).

Tenslotte is er nog de optie om direct images in je HTML te zetten (i.p.v. background images). Die verberg je (eventueel) bij normale weergave, en je geeft ze weer voor print. Daar valt nog aardig wat mee te spelen denk ik.

[siepeltjuh]

Zonder linux omgeving heb je niet zoveel aan wkhtmltopdf. Alles draait momenteel op Microsoft machines. Het rooster moet realtime worden gemaakt, dus crontab achtige constructies zijn niet mogelijk.

PDF kán wel, maar ik prefereer een variant die alleen de brwoser nodig heeft. Nu ik door heb dat dat praktisch onhaalbaar is ga ik opzoek naar een goede manier om het e.e.a. om te zetten van html naar PDF binnen de .net omgeving al dan niet met plugins. Ook ga ik de PNG variant nog eens goed bekijken.
Dank voor de hulp.

[mcDavid]

siepeltjuh schreef op vrijdag 29 oktober 2010 @ 18:04:
Zonder linux omgeving heb je niet zoveel aan wkhtmltopdf. Alles draait momenteel op Microsoft machines. Het rooster moet realtime worden gemaakt, dus crontab achtige constructies zijn niet mogelijk.

Als je HTML kunt outputten, kun je ook TEX outputten. Lijkt me. Maak je toch een TEX-template?

PDF kán wel, maar ik prefereer een variant die alleen de brwoser nodig heeft. Nu ik door heb dat dat praktisch onhaalbaar is ga ik opzoek naar een goede manier om het e.e.a. om te zetten van html naar PDF binnen de .net omgeving al dan niet met plugins. Ook ga ik de PNG variant nog eens goed bekijken.
Dank voor de hulp.

Ik heb net eens een print-preview gedaan van een SVG bestand, daarvan blijven de kleuren ook gewoon mooi in tact.

[siepeltjuh]

Heb je wat linkjes voor TeX, ik ken het namelijk niet en via google kwam ik niet echt wat nuttigs tegen.

Met SVG zit je weer met een half brakke Internet Explorer ondersteuning. Ook niet je-van-het. Dank in ieder geval voor de tips.

[DiSiLLUSiON]

Er is wel een behoorlijk goede reden voor de browser om die instelling te forceren; het besparen van inkt. Dan moet je je afvragen of het er doorheen jagen van de inkt van whomever je pagina uit wilt printen iets is wat bij het imago van de website hoort. ;-)

Wil je tóch perse ergens een achtergrondkleur achter hebben, dan zou je een beetje moeten knutselen. Print 'ie bijvoorbeeld wel borders af? Misschien werkt het als je een naastliggend element een gigantische border-left geeft plus negatieve margin of iets in die trant, dan fungeert de dikke kant van de border als achtergrondkleur voor het andere element. Je krijgt natuurlijk wel een beetje een ranzige print stylesheet zo. En misschien werkt het ook niet.

[ Voor 32% gewijzigd door DiSiLLUSiON op 02-11-2010 11:34 ]

[alex3305]

Kun je geen policy forceren die wel de achtergrondkleur aanzet in IE/Firefox? Heb je anders een voorbeeld van de pagina om te laten zien hoe het uitgeprint zou moeten worden (afbeelding) ?

[mcDavid]

siepeltjuh schreef op maandag 01 november 2010 @ 22:15:
Heb je wat linkjes voor TeX, ik ken het namelijk niet en via google kwam ik niet echt wat nuttigs tegen.

Ik heb er zelf geen ervaring mee maar een kennis van me maakt printtemplates door zijn applicatie een LaTeX template te laten genereren, die door de LaTeX-engine direct geparsed wordt naar PDF. Dat is dus uitsluitend een (makkelijke?) manier om PDF's te creëren.

Met SVG zit je weer met een half brakke Internet Explorer ondersteuning. Ook niet je-van-het. Dank in ieder geval voor de tips.

Als je IE >=8 wilt ondersteunen, zou je kunnen overwegen SVG en VML naast elkaar te gebruiken. Of je laat mensen maar gewoon de plugin van Adobe installeren. Maargoed dan zit je nóg met een plugin...

[DiSiLLUSiON]

mcDavid schreef op dinsdag 02 november 2010 @ 11:41:
[...]
Als je IE >=8 wilt ondersteunen, zou je kunnen overwegen SVG en VML naast elkaar te gebruiken. Of je laat mensen maar gewoon de plugin van Adobe installeren. Maargoed dan zit je nóg met een plugin...

Een andere mogelijk is eventueel svgweb; svg via de flash plugin. Penetratie hiervan is toch een stuk beter dan Adobe's SVG plugin die niet meer ondersteund wordt.

[siepeltjuh]

@DiSiLLUSiON
Zie TS voor inkt opmerking. De rooster layout blijft gelijk (handmatig (PDF) vs geautomatiseerd (HTML)), de hoeveelheid inkt veranderd daarbij niet. Ik wil alleen weten of en hoe het e.e.a. mogelijk is.

Dan toch maar PDF proberen. Ondertussen ben ik aan het kijken hoe ik netjes een 'screenshot' kan maken. Tot nu toch weinig succes. Als ik daar problemen mee heb zal ik posten in Programming ipv dit forum.

[X-Lars]

Waarom geen wkhtmltopdf? Is er ook in een Windows editie.

[Tim]

Als je die absoluut gepositioneerde divjes nou een horizontale marge geeft en een border, en de dagen scheid met een lijn, dan is dat toch ook duidelijk?
Google Calendar lukt het immers ook.

[noes]

Ander idee: alles op de pagina een z-index geven van minimaal 1. Dmv absolute positioning een img element erachter schuiven met je grid en klaar ben je.

[siepeltjuh]

Nou ik heb het opgelost door de HTML gewoon te genereren voor het online inkijken van het rooster. Het klikken op de print knop in de browser toont een lege pagina met alleen een tekst dat er niet op deze manier geprint kan worden en verwijst naar de printknop op de pagina zelf. (kan dit nog netter? / javascript die die knop klik detecteert?)

Op de pagina zelf zit een print knop die een PDF aanbied. De PDF wordt gegenereerd door de webbrowser control te gebruiken voor een screenshot. Het plaatje wordt vervolgens met iTextSharp in een PDF omgezet.
De snelheid hiervan valt me nog iets tegen, maar moet me nog even wat meer verdiepen in waar de bottleneck precies zit.

Voordeel is dat de PDF library maar 1 ding moet kunnen en dat is een bitmap laden in een pagina. Dat kunnen vrijwel alle library`s wel. Dit vooral omdat er bijna geen 1 library is die html en css correct renderd. Ook wil ik niet afhankelijk zijn van toekomstige versies en ontwikkelingen (of een gebrek daar aan) enz.

iTextSharp heeft als bijkomend voordeel dat de library (1 file) met de gewone installatie mee kan en geen verdere afhankelijkheden heeft.