Toon posts:

[css] media print borders backgrounds landscape

Pagina: 1
Acties:

Onderwerpen


  • siepeltjuh
  • Registratie: maart 2003
  • Niet online
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?

Can`t live without the mods


  • X-Lars
  • Registratie: januari 2004
  • Niet online

X-Lars

Just GoT it.

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
  • Registratie: april 2001
  • Laatst online: 16-09 10:21

Skef

Ik scheer.me

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).

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


  • siepeltjuh
  • Registratie: maart 2003
  • Niet online
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]

Can`t live without the mods


  • haampie
  • Registratie: augustus 2009
  • Laatst online: 24-12-2017
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 haampie op 24-10-2010 00:36]


  • mcDavid
  • Registratie: april 2008
  • Laatst online: 17-09 07:01
Als je een SVG bestand maakt ipv een HTML bestand. Doet'ie dan de kleurtjes wél meenemen?

  • RobIII
  • Registratie: december 2001
  • Laatst online: 19:14

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

^ 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.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • mcDavid
  • Registratie: april 2008
  • Laatst online: 17-09 07:01
...Alleen met PNG worden het wel gelijk van die bizar grote bestanden, als je de tekst een beetje scherp wilt kunnen printen...

  • X-Lars
  • Registratie: januari 2004
  • Niet online

X-Lars

Just GoT it.

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:
1
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
  • Registratie: maart 2003
  • Niet online
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.

Can`t live without the mods


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
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
  • Registratie: maart 2003
  • Niet online
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]

Can`t live without the mods


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
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
  • Registratie: januari 2004
  • Niet online

X-Lars

Just GoT it.

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
  • Registratie: maart 2003
  • Niet online
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.

Can`t live without the mods


  • mcDavid
  • Registratie: april 2008
  • Laatst online: 17-09 07:01
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
  • Registratie: maart 2003
  • Niet online
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.

Can`t live without the mods


  • DiSiLLUSiON
  • Registratie: september 2000
  • Laatst online: 02-09 21:04
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]

Da's toch niet te g'leuven!


  • alex3305
  • Registratie: januari 2004
  • Laatst online: 17-09 09:47
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
  • Registratie: april 2008
  • Laatst online: 17-09 07:01
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
  • Registratie: september 2000
  • Laatst online: 02-09 21:04
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.

Da's toch niet te g'leuven!


  • siepeltjuh
  • Registratie: maart 2003
  • Niet online
@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.

Can`t live without the mods


  • X-Lars
  • Registratie: januari 2004
  • Niet online

X-Lars

Just GoT it.

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

  • Tim
  • Registratie: mei 2000
  • Laatst online: 24-08 14:09
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
  • Registratie: augustus 2006
  • Niet online

noes

gek op benzine.

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.

2020 R1250RS, K26/R1200RT, E61/550i


  • siepeltjuh
  • Registratie: maart 2003
  • Niet online
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.

Can`t live without the mods

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee