Printen met andere layout dan op scherm

Status
Niet open voor verdere reacties.
C

Cyroq

Gebruiker
Lid geworden
7 apr 2009
Berichten
180
Hallo,

Ik weet niet of het hier thuis hoort, maar ik heb het gevoel dat het met javascript mogelijk zou kunnen zijn.
Is het mogelijk om een pagina te printen met bijv een andere font-color dan op de website?
Ik heb namelijk een website met zwarte achtergrond en vrijwel witte letters. Als je dat wilt printen met window.print() krijg je een erg onduidelijke pagina. Als ik nu met bijv javascript de font-color kan veranderen naar zwart is het een stuk duidelijker (hierbij moet de webpagina zelf niet veranderd worden).
Is dit überhaupt mogelijk?

Groeten,
Cyroq


Edit: Zou het ook mogelijk zijn om de achtergrondkleur van een cel in een tabel mee te printen? Dat gebeurt nu niet.
 
Laatst bewerkt:
Nou, dan kan je inderdaad gaan moeilijk doen met javascript, maar het kan veel makkelijker met css.

Je moet alleen een extra stylesheet maken. Nu, even wat uitleg: stel je voor, nu heb je deze html:
HTML: 
<link rel='stylesheet' href='standaard.css' />
nu, zoals je ziet gebruikt deze pagina de css uit standaard.css voor elk medium. Of iemand de site nou opent met een browser op zn computer of op zn pda.

Nu is er een 'media' property: met deze geef je aan welk soort 'devices' de stijl moeten laten zien. Een leuke: print:
HTML: 
<link rel='stylesheet' href='voorbeeld.css' media='print' />
Deze css zal gebruikt worden als de pagina geprint wordt.




Dit kan je doornemen:
http://www.w3schools.com/CSS/css_mediatypes.asp
http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html (!)
http://www.css-help.com/css-mediaprint.htm (!!!)



:thumb:
 
Geweldig! Het werkt prima :thumb:
Nu alleen nog de achtergrondkleur van de tabel. Deze staat nu ook in css gedefinieerd maar wordt nog steeds niet meegenomen in de printversie. Of is dit misschien een browserprobleem?

Edit: Ik heb al gevonden dat dit blijkbaar niet te online af te dwingen is. Ik probeerde de border color te veranderen maar ook dat pakt 'ie niet. Zijn er helemaal geen mogelijkheden om een cel/tabel een omlijning of achtergrondkleur te geven binnen een print?
 
Laatst bewerkt:
Code: 
.celkleur{ background-color: #CCCCCC; border-width: medium; border-color:#999999;}
En de html waar het wordt aangeroepen:
HTML: 
<table width="460" border="0" class="celkleur">
 <tr>
   <td width="200" valign="top" class="celkleur">Text here</td>
............etc

Celkleur wordt nu bij zowel table als td aangeroepen, omdat ik niet wist waar het precies moest :eek:
 
Hmm, is er echt geen mogelijkheid om een tabel of iets wat erop lijkt af te drukken binnen een webpagina?
 
Ja natuurlijk kan dat wel:

Code: 
.celkleur {

  color: #000;
  background: #fff;
  border: medium solid #999;

}

en dan de HTML zo:

HTML: 
<table class="celkleur">
  <tr>
    <td>Inhoud</td>
  </tr>
</table>

Dat moet gewoon werken. Wat krijg je te zien dan als je het zo probeert?
 
Ja op een webpagina werkt dat prima, maar dus niet als ik het ga printen. Dan wordt de opmaak van tabellen genegeerd...
 
Dat gebeurt als volgt:
HTML: 
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
Het probleem is dat alles gewoon werkt (andere achtergrondkleur, andere lettertypes) behalve de tabellen. Zoals ik al eerder heb gezegd zou dit kunnen liggen aan de instellingen van de gebruiker thuis, maar het lijkt me toch raar dat het helemaal onmogelijk is.
 
Heb je het ergens online staan / kun je het even ergens online zetten?
 
De betreffende pagina kun je hier vinden. Let niet op de opmaak, deze is nog niet helemaal compleet. Ik denk dat je wel begrijpt wat mijn bedoeling is als je de tabellen ziet. Dit afdrukken zonder tabel-opmaak maakt het allemaal erg rommelig.
 
Hmm, daar snap ik niks van, ik heb even wat geprobeerd, de class op andere elementen instellen, etc, etc, maar niets werkt. Ik kijk er nog even naar, maar ik geloof niet dat ik eruit ga komen :confused:
 
Het is ook wat lastig om te zien, want je ziet hier niet wat er bedoeld wordt in de print.css.
Die komt vanwege het media="print" niet op het scherm! Dus. :D
En bij het printvoorbeeld zie je het ook niet, daar zie je alleen het resultaat (zoals het niet moet zijn).

Vandaar:
  • in de pagina het stylesheet voor schermweergave uitgeschakeld;
  • en het stylesheet voor printweergave ingeschakeld (dus nu ook op scherm);
  • dan krijgen we deze te zien.
Kijk, en toen begon er bij bezichtiging van het printvoorbeeld een lampje op te gloeien:
  • de tabelcellen zijn op scherm grijs van achtergrond, de binnenranden wit van kleur (=papierkleur), en de border van de tabel zelf is grijs/zwart;
  • bij het printvoorbeeld valt de grijze achtergrond van de cellen weg, de binnenranden waren al wit, en de border van de tabel zelf blijft bestaan.
Het zit 'm dus uitsluitend in het niet printbaar zijn van de background-kleur.

Ja, en dat is eigenlijk nogal wiedus! :D
Om te voorkomen dat ik per ongeluk een negatief gelayoute webpagina print (met witte letters op zwarte achtergrond, en dan een inkt-druipend zwart vel uit mijn printer rolt; of prachtige kleuren over de hele pagina, ook druipend van de inkt; waardoor ik rennend naar de winkel moet om weer van die dure cartridges te gaan kopen) ... heb ik standaard het meeprinten van achtergrondkleuren en achtergrondfiguren uitgezet via m'n internet-opties. :)

Konklusie: dat zullen méér mensen gedaan hebben (u ook soms? ;) ), en van bezoekers van de site kan je niet verwachten dat ze eerst (als ze die al kunnen vinden) in de print-opties gaan rommelen. Oftewel: een tabel die gaat leven door z'n grijze achtergrondkleur is uitgesloten.
  • Maar voorgrondkleuren kunnen wel, en borders zijn voorgrondkleuren. Dan moeten die gestyled worden.
  • Voorgrondfiguren worden ook altijd geprint, dus als je een figuur wilt zien, moet het een voorgrondfiguur zijn. Liefst een zwart/wit of grijstintfiguur, dan weet je zeker dat het ook een beetje oogt als mensen voor de inktbesparing hun kleurencartridges uit hebben gezet en alleen maar in zww printen. Of een kleurenfiguur die het ook in zww goed doet, natuurlijk.
Toen maar eens tekeer gegaan in het stylesheet: print-styles binnen de head van de pagina gehaald, en 3 regeltjes met overrulende styles erachteraan geplakt:

CSS kan erg gehoorzaam zijn! ;)

Succes verder!
CSShunter
 
Wat schandalig dat het gewoon aan onze instellingen lag :eek: Ik heb nu achtergrondkleuren afdrukken aangezet en dan doet de pagina van de TS het inderdaad wel goed ;)

Als CSSHunter er toch ook niet was :thumb:
 
Nou, je kan beter meteen bij het ontwerpen van een webpagina door je eigen (printer-)instellingen op een eigenaardigheid stuiteren, dan dat je niets doorhebt en later bezoekers met een "afwijkende" printer-instelling komen mopperen dat ze zo'n raar witterig formulier uitgeprint krijgen. Kom er dan maar eens op afstand achter wat er aan de hand is! ;)

CSShunter
 
Een erg heldere uitleg CSShunter!
Dus ik kan de achtergrond helaas niet kleuren (ik snap waarom, toch jammer dat het niet kan ;)) maar de borders wel? Ik ga het vanavond even proberen. :)

EDIT: Gelukt! Ik kende de !important functie ook niet, erg handig :) Thanks iedereen!
 
Laatst bewerkt:
Nawoordje

Nog ene kleine terugblik:
toch jammer dat het niet kan ;)
Klik om te vergroten...
Maar we hoeven nu ook weer niet meteen alles op te geven. Wat je altijd kan doen, is een heel lichte achtergrond-kleur in je tabel zetten (met eventueel ook een vrij donker kleurentintje van de border):
  • Voor mensen met uitgeschakelde backgrounds geeft dan de border genoeg te zien van waar de tabelcellen zitten.
  • Voor mensen met zwart-witte printoptie met ingeschakelde bg hebben de lichtgekleurde cellen dan een heel licht grijze tint.
  • En de mensen met kleuren printoptie met ingeschakelde bg kunnen genieten van je subtiele kleurtjes.
tabelcel-kleurtjes.gif
Zo laveer je netjes tussen de kool en de geit door, en zijn ook de vos en de schipper tevreden. :)
  • En voor de geïnteresseerden: in de css-specificaties wordt hier de !important regel uit de doeken gedaan (er mag wel of geen spatie tussen het "!" en het woord "important").
Groetjes,
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan