Printing dynamically generated CSS

rhyspaterson · October 1, 2008

Hey guys,

I have a page that loads, and then makes quite a few AJAX requests to generate some tabular data and style it with CSS.

When i print the page, the table prints successfully, however the CSS that it is styled with it not.

Each row is a new request, and for each row, i style it depending on some variables. So the CSS is generated whenever a new row is generated.

Why then does the row (+ data) get printed but not the css?

I could possibly add a 'Print Page' option that opens the generated data in a new window.. might fix the problem.. but would like to avoid it.

Suggestions?

Cheers!

Rhys

F1Fan · October 1, 2008

Are you putting your CSS code in <style type="text/css"></style> tags, or in the style="" tag within the <td>?

If it's the former, try the latter.

rhyspaterson · October 2, 2008

I'm giving the td's classes. So it's not inline style but a class that refers to the stylesheet.

I will try inline and see what happens (i.e <td style="text-decoration: ect... ">.

rhyspaterson · October 2, 2008

Nope, no dice.

No matter how i apply these updated CSS rules (classes, inline, style), they are never printed (even though they show up on the browser).

Guess it has something to do with the whole generated source thing.

Any suggestions?

xtopolis · October 2, 2008

Show some relevant code

F1Fan · October 2, 2008

Is the AJAX generating the CSS code dynamically as well? Please show us your code.

rhyspaterson · October 7, 2008

Here is the post AJAX (generated) source code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>PMaps Report</title>
<link href="/pmaps/media/style/reports.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/pmaps/media/javascripts/tablesort.js"></script>
<script type="text/javascript" src="/pmaps/media/javascripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="/pmaps/media/javascripts/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="/pmaps/media/javascripts/scriptaculous.js"></script>
<script type="text/javascript">
function init() {
   /**
   At the moment, we can't retrieve information from the 9500 series printers
   */   
   var excludedPrinters = ('W1C2, S2C2');
   
   /**
   Parse our URL arguments.
   */
   var reportToGenerate = getURLParams( 'report' );
   var dataToUse = getURLParams( 'data' ); 
      
   /**
   Create our table.
   */
   resetTable(dataToUse, reportToGenerate);
   
   /**
   Update our html variables.
   */
   updatePageVariables(dataToUse, reportToGenerate, excludedPrinters);
}

var y = 0;
var z = 0;

/**
Being generating our table.
*/

function resetTable(dataToUse, reportToGenerate) {

	var text1 = '\r\n   ';

        table     = document.createElement("table");
	var caption	= document.createElement("caption");
        var tr    = document.createElement("tr");
        var thead = document.createElement("thead");
        var tbody = document.createElement('tbody');
        var th    = document.createElement("th");
        var trc   = tr.cloneNode(true);
        var thc;

        table.id = "pmapsGeneratedTable";
	table.className = "pmapsTable no-arrow";
        table.border = 0;

        table.cellspacing = 0;
	table.cellpadding = 5;

	var theDate = new Date();
	theDate = theDate.toLocaleString();

	caption.innerHTML = 'Generated on '+theDate;

        document.getElementsByTagName('body')[0].appendChild(table);
	table.appendChild(caption);
        thead.appendChild(trc);
        table.appendChild(thead);
        table.appendChild(tbody);
        table = null;		

	/**
	Define our printer arrays. Used for telling PMaps what hardware to include in its reporting.
	*/

	if(dataToUse == 'allPrinters'){

	dataToUse = new Array('WG01','SG01','NG01','WG02','NG02','WG03','SG03','WGC1','SGC1','WGC2','WGC3','N100','S100','W101','W102','N102','S102','N103','S103','W104','S104','W105','N105','N106','S106','S107','S108','N128','N203','W1C1','N1C1','S1C1','N200','W201','N201','S201','W202','N202','S202','W203','S203','W204','W205','W206','N207','S2C1','W2C2','N300','W301','N301','S301','W302','N302','W303','S303','W304','N304','S304','W305','N305','W306','S306','W307','W308','W3C1','S3C1','W3C2','N400','W401','N401','S401','W402','S402','W403','N403','S403','S404','W405','S405','W406','W407','W408','W4C1','N4C1','N4C2');

	}

	if(dataToUse == 'groundFloorPrinters'){

	dataToUse = new Array('WG01','SG01','NG01','WG02','NG02','WG03','SG03','WGC1','SGC1','WGC2','WGC3');

	}

	if(dataToUse == 'firstFloorPrinters'){

	dataToUse = new Array('N100','S100','W101','W102','N102','S102','N103','S103','W104','S104','W105','N105','N106','S106','S107','S108','N128','N203','W1C1','N1C1','S1C1');
	}

	if(dataToUse == 'secondFloorPrinters'){

	dataToUse = new Array('N200','W201','N201','S201','W202','N202','S202','W203','S203','W204','W205','W206','N207','S2C1','W2C2');

	}

	if(dataToUse == 'thirdFloorPrinters'){

	dataToUse = new Array('N300','W301','N301','S301','W302','N302','W303','S303','W304','N304','S304','W305','N305','W306','S306','W307','W308','W3C1','S3C1','W3C2');

	}

	if(dataToUse == 'fourthFloorPrinters'){

	dataToUse = new Array('N400','W401','N401','S401','W402','S402','W403','N403','S403','S404','W405','S405','W406','W407','W408','W4C1','N4C1','N4C2');			

	}

        var rowCnt = dataToUse.length;
        
	if (reportToGenerate == 'pageCountReportList'){

		var h = [["Printer Name","sortable-text"] ,["A4 Simplex (Mono)","sortable-numeric"] ,["A4 Duplex (Mono)","sortable-numeric"],["A4 Simplex (Colour)","sortable-numeric"],["A4 Duplex (Colour)","sortable-numeric"],["Total Page Count","sortable-numeric"],["Ratio (Duplex : Simplex)","sortable-numeric"]];
		for(var j = 0; j < h.length; j++) {
				thc = th.cloneNode(false);
				trc.appendChild(thc);
				thc.className = h[j][1];
				thc.appendChild(document.createTextNode(h[j][0]));
				thc = null;
		};
        
	}		

	if (reportToGenerate == 'consumablesStatusReportList'){

		var h = [["Printer Name","sortable-text"] ,["Printer Type","sortable-numeric"],["Console Display","sortable-text"],["Black (%)","sortable-numeric"],["Cyan (%)","sortable-numeric"],["Magenta (%)","sortable-numeric"],["Yellow (%)","sortable-numeric"],["Maintenance (%)","sortable-numeric"],["Image (%)","sortable-numeric"],["Transfer %","sortable-numeric"],["Status","sortable-numeric"]];
		for(var j = 0; j < h.length; j++) {
				thc = th.cloneNode(false);
				trc.appendChild(thc);
				thc.className = h[j][1];
				thc.appendChild(document.createTextNode(h[j][0]));
				thc = null;
		};
        
	}

	if (reportToGenerate == 'currentStatusReportList'){

		var h = [["Printer Name","sortable-text"] ,["Printer Type","sortable-numeric"],["Status","sortable-numeric"]];
		for(var j = 0; j < h.length; j++) {
				thc = th.cloneNode(false);
				trc.appendChild(thc);
				thc.className = h[j][1];
				thc.appendChild(document.createTextNode(h[j][0]));
				thc = null;
		};
        
	}		

        trc = thead = null;

	tableColumnsLength = h.length;
        
        for(var i = 0; i < rowCnt; i++) {
                trc = tr.cloneNode(false);
                tbody.appendChild(trc);
                addCells(trc, i, dataToUse, reportToGenerate, tableColumnsLength);
        }


        tbody = null;

	/**
	Make the table sortable.
	*/

	fdTableSort.init();
        
        return false;
}

/**
Prototype AJAX call.
*/

function addCells(tr, cnt, dataToUse, reportToGenerate, tableColumnsLength) {
	new Ajax.Request( '/pmaps/scheduled_files/printer_data/'+dataToUse[cnt]+'.xml', { 
	  method: 'get',
	  
	  /**
	  Probably best not to try and pull all ~90 XML files at once, so lets disable the asynchronous transfer.
	  */
	  
	  asynchronous: false,
	  
	  onFailure: function(){ 

		tr.className='failure';
		tr.id = 'failure';

		temp = false;

		for(c = 0; c < tableColumnsLength; c++){
				var td = document.createElement("td");
				tr.appendChild(td);
				if (temp == false){
					td.appendChild(document.createTextNode(dataToUse[cnt]));
					temp=true;
				}
		}
			  					  
	  },
	  		  
	  /**
	  Successfully retrieved the XML file
	  */
	  
	  onSuccess: function( transport ) {  
	  	
		if (reportToGenerate == 'pageCountReportList'){

			tr.className='clear';

			var totalPageCount = 0;

			var name = transport.responseXML.getElementsByTagName("pmaps.system.sysname.0")[0].childNodes[0].nodeValue;

			tr.id = name;

			var type = transport.responseXML.getElementsByTagName("pmaps.25.3.2.1.3.1")[0].childNodes[0].nodeValue;
			type = removeDoubleQuotes(type);
			type = stripNonNumeric(type);

			var a4SimplexMono = transport.responseXML.getElementsByTagName("pmaps.enterprises.11.2.3.9.4.2.1.1.16.1.1.1.26.0")[0].childNodes[0].nodeValue;
			totalPageCount = parseInt(totalPageCount) + parseInt(a4SimplexMono);

			var a4DuplexMono = transport.responseXML.getElementsByTagName("pmaps.enterprises.11.2.3.9.4.2.1.1.16.1.1.3.26.0")[0].childNodes[0].nodeValue;
			totalPageCount = parseInt(totalPageCount) + parseInt(a4DuplexMono);								

			var simplexDuplexRatio = parseInt(a4DuplexMono) / parseInt(a4SimplexMono);

			a4SimplexMono = formatNumber(a4SimplexMono,0,',','','','','-','');
			a4DuplexMono = formatNumber(a4DuplexMono,0,',','','','','-','');

			if (type == '5550'){ 

			var a4SimplexColour = transport.responseXML.getElementsByTagName("pmaps.enterprises.11.2.3.9.4.2.1.1.16.3.1.1.26.0")[0].childNodes[0].nodeValue;
			totalPageCount = parseInt(totalPageCount) + parseInt(a4SimplexColour);

			var a4DuplexColour = transport.responseXML.getElementsByTagName("pmaps.enterprises.11.2.3.9.4.2.1.1.16.3.1.3.26.0")[0].childNodes[0].nodeValue;
			totalPageCount = parseInt(totalPageCount) + parseInt(a4DuplexColour);	

			var simplexDuplexRatio = ((parseInt(a4DuplexMono) + parseInt(a4DuplexColour)) / (parseInt(a4SimplexMono) + parseInt(a4SimplexColour)));

			a4SimplexColour = formatNumber(a4SimplexColour,0,',','','','','-','');
			a4DuplexColour = formatNumber(a4DuplexColour,0,',','','','','-','');

			}else{
				var a4SimplexColour = '-';
				var a4DuplexColour = '-';
			}

			simplexDuplexRatio = formatNumber(simplexDuplexRatio,3,',','.','','','-','');

			if(simplexDuplexRatio < 1){
				tr.className='critical';
			}else if(simplexDuplexRatio < 1.5){
				tr.className='attention';
			}

			simplexDuplexRatio = '1:'+simplexDuplexRatio;

			totalPageCount = formatNumber(totalPageCount,0,',','','','','-','');	

			var printerData = new Array(name, a4SimplexMono, a4DuplexMono, a4SimplexColour, a4DuplexColour, totalPageCount, simplexDuplexRatio);    

			for(c = 0; c < printerData.length; c++){
				var td = document.createElement("td");
				tr.appendChild(td);
				td.appendChild(document.createTextNode(printerData[c]));
				if(tr.className=='critical'){
						td.className='critical';
				}
			}					
		}

		if ((reportToGenerate == 'consumablesStatusReportList') || (reportToGenerate == 'currentStatusReportList')){

			var name = transport.responseXML.getElementsByTagName("pmaps.system.sysname.0")[0].childNodes[0].nodeValue;

			tr.id = name;

			var type = transport.responseXML.getElementsByTagName("pmaps.25.3.2.1.3.1")[0].childNodes[0].nodeValue;
			type = removeDoubleQuotes(type);
			type = stripNonNumeric(type);

			var consoleDisplay = transport.responseXML.getElementsByTagName("pmaps.43.16.5.1.2.1.1")[0].childNodes[0].nodeValue;
			consoleDisplay = removeDoubleQuotes(consoleDisplay);

			var blackCartridgeMax = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.8.1.1")[0].childNodes[0].nodeValue;
			var blackCartridgeCurrent = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.9.1.1")[0].childNodes[0].nodeValue;
			var blackCartridgeStatus = Math.round((blackCartridgeCurrent / blackCartridgeMax)*100);

			var status = '(1) Clear';
			tr.className='clear';

			/**
			If the printer is a colour printer, lets ask it some specific questions.
			*/

			if (type == '5550'){ 
				var maintenanceKitStatus = 'n/a';

				var cyanCartridgeMax = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.8.1.2")[0].childNodes[0].nodeValue;
				var cyanCartridgeCurrent = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.9.1.2")[0].childNodes[0].nodeValue;
				var cyanCartridgeStatus = Math.round((cyanCartridgeCurrent / cyanCartridgeMax)*100);

				var magentaCartridgeMax = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.8.1.3")[0].childNodes[0].nodeValue;
				var magentaCartridgeCurrent = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.9.1.3")[0].childNodes[0].nodeValue;
				var magentaCartridgeStatus = Math.round((magentaCartridgeCurrent / magentaCartridgeMax)*100);

				var yellowCartridgeMax = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.8.1.4")[0].childNodes[0].nodeValue;
				var yellowCartridgeCurrent = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.9.1.4")[0].childNodes[0].nodeValue;
				var yellowCartridgeStatus = Math.round((yellowCartridgeCurrent / yellowCartridgeMax)*100);

				var imageTransferKitMax = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.8.1.5")[0].childNodes[0].nodeValue;
				var imageTransferKitCurrent = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.9.1.5")[0].childNodes[0].nodeValue;
				var imageTransferKitStatus = Math.round((imageTransferKitCurrent / imageTransferKitMax)*100);

				var imageFuserKitMax = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.8.1.6")[0].childNodes[0].nodeValue;
				var imageFuserKitCurrent = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.9.1.6")[0].childNodes[0].nodeValue;
				var imageFuserKitStatus = Math.round((imageFuserKitCurrent / imageFuserKitMax)*100);

				if(cyanCartridgeStatus < 25 || magentaCartridgeStatus < 25 || yellowCartridgeStatus < 25 || blackCartridgeStatus < 25) {
				 status = '(2) Attention';
				 tr.className='attention';
				  }
				if(cyanCartridgeStatus < 5 || magentaCartridgeStatus < 5 || yellowCartridgeStatus < 5 || blackCartridgeStatus < 5) {
				  status = '(3) Critical';
				  tr.className='critical';
				  }					
			}else{
				cyanCartridgeStatus = magentaCartridgeStatus = yellowCartridgeStatus = imageTransferKitStatus = imageFuserKitStatus = '-';

				var maintenanceKitMax = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.8.1.2")[0].childNodes[0].nodeValue;
				var maintenanceKitCurrent = transport.responseXML.getElementsByTagName("pmaps.43.11.1.1.9.1.2")[0].childNodes[0].nodeValue;
				var maintenanceKitStatus = Math.round((maintenanceKitCurrent / maintenanceKitMax)*100);	

				if(maintenanceKitStatus < 25 || blackCartridgeStatus < 25){
					 status = '(2) Attention';
					 tr.className='attention';
				  }
				  if(maintenanceKitStatus < 5 || blackCartridgeStatus < 5) {
					  status = '(3) Critical';
					  tr.className='critical';
				  }												
			}		

			if (reportToGenerate == 'consumablesStatusReportList'){

				var printerData = new Array(name, type, consoleDisplay, blackCartridgeStatus, cyanCartridgeStatus, magentaCartridgeStatus, yellowCartridgeStatus, maintenanceKitStatus, imageTransferKitStatus, imageFuserKitStatus, status);    

					for(c = 0; c < printerData.length; c++){
						var td = document.createElement("td");
						tr.appendChild(td);
						td.appendChild(document.createTextNode(printerData[c]));
						if(tr.className=='critical'){
							td.className='critical';
						}
					}
				}
			}

			if (reportToGenerate == 'currentStatusReportList'){

				var printerData = new Array(name, type, status);    

					for(c = 0; c < printerData.length; c++){
						var td = document.createElement("td");
						tr.appendChild(td);
						td.appendChild(document.createTextNode(printerData[c]));
						if(tr.className=='critical'){
							td.className='critical';
						}
					}
				}				
			}	
	});
}

/**
Update the static variables in the page.
*/

function updatePageVariables(dataToUse, reportToGenerate, excludedPrinters) {

if(dataToUse == 'allPrinters'){
	dataToUse = 'All Printers';
}else if(dataToUse == 'fourthFloorPrinters'){
	dataToUse = 'Fourth Floor Printers';
}else if(dataToUse == 'thirdFloorPrinters'){
	dataToUse = 'Third Floor Printers';
}else if(dataToUse == 'secondFloorPrinters'){
	dataToUse = 'Second Floor Printers';
}else if(dataToUse == 'firstFloorPrinters'){
	dataToUse = 'First Floor Printers';
}else{
	dataToUse = 'Ground Floor Printers';
}

if(reportToGenerate == 'currentStatusReportList'){
	reportToGenerate = 'Current Status';
	className = 'sortable-onload-2r';
}else if(reportToGenerate == 'consumablesStatusReportList'){
	reportToGenerate = 'Consumables Status';
	className = 'sortable-onload-10r';
}else{
	reportToGenerate = 'Page Count';
	className = 'sortable-onload-6r';
}

$('pmapsGeneratedTable').addClassName(className);
$('reportType').update(reportToGenerate);
$('printerGroup').update(dataToUse+' (Note current exclusions for <strong>'+excludedPrinters+'</strong>)');
}

/**
Grab our URL arguments. This tells us what report to generate, and with what printer.
*/

function getURLParams( name ) {
   name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
   var regexS = "[\\?&]" + name + "=([^&#]*)";
   var regex = new RegExp( regexS );
   var results = regex.exec( window.location.href );
   if( results == null ) return "";
   else return results[1];
   }

/**   
Housekeeping to remove the double quotes from a string. The HP SNMP data strings are sometimes surrounded by them. 
*/
   
function removeDoubleQuotes(str)
{
charToRemove = '"';
regExp = new RegExp("["+charToRemove+"]","g");
return str.replace(regExp,"");
}

/**
Remove all non numberic characters from a string.
*/

function stripNonNumeric( str )
{
  str += '';
  var rgx = /^\d|\.|-$/;
  var out = '';
  for( var i = 0; i < str.length; i++ )
  {
if( rgx.test( str.charAt(i) ) ){
  if( !( ( str.charAt(i) == '.' && out.indexOf( '.' ) != -1 ) ||
		 ( str.charAt(i) == '-' && out.length != 0 ) ) ){
	out += str.charAt(i);
  }
}
  }
  return out;
}

/**
Number Formatting Function.
Copyright Stephen Chapman 24th March 2006, 22nd August 2008.
Permission to use this function is granted provided that this copyright notice is retained intact.
*/

function formatNumber(num, dec, thou, pnt, curr1, curr2, n1, n2) 
{
var x = Math.round(num * Math.pow(10, dec));
if (x >= 0) n1 = n2 = '';
var y = ('' + Math.abs(x)).split('');
var z = y.length - dec;
if (z < 0) z--;
for(var i = z; i < 0; i++) y.unshift('0');
if (z < 0) z = 1;
y.splice(z, 0, pnt);
if(y[0] == pnt) y.unshift('0');
while (z > 3) {
  z -= 3;
  y.splice(z, 0, thou);
}
var r = curr1 + n1 + y.join('') + n2 + curr2;
return r;
}

</script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function() {
   /**
   When the document is loaded, begin our dynamic table generation.
   */	
init();	
});
</script>
<h1>PMaps Report</h1>
<h2 id="reportType">Current Status</h2>
<p id="printerGroup">Ground Floor Printers (Note current exclusions for <strong>W1C2, S2C2</strong>)</p>

<!------------------------------- DYNAMICALLY GENERATED TABLE-------------------------------------->

<table class="pmapsTable no-arrow sortable-onload-2r" id="pmapsGeneratedTable" border="0">
  <caption>
  Generated on Wednesday, 8 October 2008 8:13:38 AM
  </caption>
  <thead>
    <tr>
      <th style="-moz-user-select: none;" class="sortable-text fd-column-0"><a title="Sort on “Printer Name”" class="fdTableSortTrigger" href="#">Printer Name</a></th>
      <th style="-moz-user-select: none;" class="sortable-numeric fd-column-1"><a title="Sort on “Printer Type”" class="fdTableSortTrigger" href="#">Printer Type</a></th>
      <th style="-moz-user-select: none;" class="sortable-numeric fd-column-2 reverseSort"><a title="Sort on “Status”" class="fdTableSortTrigger" href="#">Status</a></th>
    </tr>
  </thead>
  <tbody>
    <tr class="critical" id="SG01">
      <td class="critical">SG01</td>
      <td class="critical">4350</td>
      <td class="critical">(3) Critical</td>
    </tr>
    <tr class="attention" id="WGC3">
      <td>WGC3</td>
      <td>4730</td>
      <td>(2) Attention</td>
    </tr>
    <tr class="attention" id="SGC1">
      <td>SGC1</td>
      <td>5550</td>
      <td>(2) Attention</td>
    </tr>
    <tr class="clear" id="WGC2">
      <td>WGC2</td>
      <td>5550</td>
      <td>(1) Clear</td>
    </tr>
    <tr class="clear" id="WGC1">
      <td>WGC1</td>
      <td>5550</td>
      <td>(1) Clear</td>
    </tr>
    <tr class="clear" id="SG03">
      <td>SG03</td>
      <td>4350</td>
      <td>(1) Clear</td>
    </tr>
    <tr class="clear" id="WG03">
      <td>WG03</td>
      <td>4350</td>
      <td>(1) Clear</td>
    </tr>
    <tr class="clear" id="NG02">
      <td>NG02</td>
      <td>4350</td>
      <td>(1) Clear</td>
    </tr>
    <tr class="clear" id="WG02">
      <td>WG02</td>
      <td>4350</td>
      <td>(1) Clear</td>
    </tr>
    <tr class="clear" id="WG01">
      <td>WG01</td>
      <td>4350</td>
      <td>(1) Clear</td>
    </tr>
    <tr class="clear" id="NG01"></tr>
  </tbody>
</table>
<!------------------------------- DYNAMICALLY GENERATED TABLE-------------------------------------->
</body>
</html>

Here is a screenshot of what it looks like:

However, when printed (PDF + Printer), it looks like this:

The CSS classes used to change the background colours are:

clear (green)

attention (yellow)

critical (red with white text)

and are called in my addCells function. The CSS classes look like such:

.clear {
background-color:#a3ca64;
}
.attention {
background-color:#fbd37d;
}
.critical {
background-color:#c86764;
color:#FFFFFF
}

Cheers for your help.

Rhys

F1Fan · October 7, 2008

I'm sorry. when you said "print" I wasn't thinking print on paper, I was thinking print on the page. I don't think you can control that from the HTML/CSS code. You can control page breaks and stuff, but not colors. That needs to be set in the user's print settings in their browser.

rhyspaterson · October 7, 2008

Ah, even when i print preview the generated source, i can't get those CSS background colours to print.

Googling tells me that, by default, printing background CSS images/colours is disabled!

It seems i will have to find another way.

Thanks for your help all.

F1Fan · October 7, 2008

In FF, you go to File -> Page Setup and there's a check box for printing the background colors and images.

alexweber15 · October 15, 2008

I'm sorry. when you said "print" I wasn't thinking print on paper, I was thinking print on the page. I don't think you can control that from the HTML/CSS code. You can control page breaks and stuff, but not colors. That needs to be set in the user's print settings in their browser.

you can include a specific printing stylesheet... not sure how that works dynamically but here's how its done:

<link rel="stylesheet" type="text/css" media="print" href="printstyles.css" />

never tried it myself so i'm unaware of any specific limitations this might have but i know for a fact that this exists and is used just google "css media print"

F1Fan · October 15, 2008

http://www.w3schools.com/css/css_mediatypes.asp

http://www.w3schools.com/css/css_ref_print.asp

alexweber15 · October 16, 2008

http://www.w3schools.com/css/css_mediatypes.asp

http://www.w3schools.com/css/css_ref_print.asp

nice, only thing it doesnt mention is if the properties listed in the print page are the ONLY ones allowed or are EXTRA ones allowed... (maybe i missed something...)

F1Fan · October 16, 2008

You really would want to use those two together. Use the media type to create your CSS code (one set for print, the other for screen), and on the print media type, use the print CSS tags as well as any regular CSS tags that you want for printing.

So, the CSS print tags (http://www.w3schools.com/css/css_ref_print.asp) will only be applicable when the user prints.

The media types (http://www.w3schools.com/css/css_mediatypes.asp) apply sections of CSS to ONLY screen viewing, and another section to ONLY print.

Make sense?

alexweber15 · October 16, 2008

does to me

OP is on hiatus...

Sign In

Printing dynamically generated CSS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information