Following on from a previous question, I have managed to get the 'screen' version (HTML) of a document into PDF format using the <cfdocument format="pdf"> tag. I need the styling of the PDF to be different to that of the screen version for obvious reasons (e.g. different header styles).
I know that you can use Media Queries in CSS so that different styles are applied for printing, screen, tv etc. But how do I supply a different set of CSS styles to the <cfdocument> tag so that it renders correctly?
My initial solution was to apply a class to the containing div of the <cfdocument> tag called .pdf and then write new styles for the content based on that class inside my main CSS file. So for example a style would be .pdf h1 {font-size:20px;}. The CFML would look like this:
<cfdocument type="pdf">
<link href="/css/mainStyleSheet.css" rel="stylesheet" type="text/css">
<div class="pdf">
<h1>Document Title</h1>
... {document body here} ...
</div>
</cfdocument>
Is there a better way to do this at all? Is there anyway to pass a different stylesheet just for PDF rendering? Can it be done with Media Queries perhaps?
How are you generating the PDF, via a parameter in the querystring? Something like index.cfm?page=foo&format=pdf? If you aren't, you could easily add a parameter like that, then in your CFM:
<link href="/css/mainStyleSheet.css" rel="stylesheet" type="text/css">
<cfif structKeyExists(url, "format") AND url.format EQ "pdf">
<link href="/css/pdfStyleSheet.css" rel="stylesheet" type="text/css">
</cfif>
pdfStyleSheet.css would contain only the CSS overrides for the PDF.
Related
I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.
Why have both? Please simplify you answer, don't go so technical.
<style type="text/css"> is when you want to have style rules embedded within the page.
<link rel="stylesheet" href="path/to/style.css" /> is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.
CSS has the #import directive, if you use <style>#import style.css;</style> then it's roughly equivalent to <link rel="stylesheet" href="style.css" /> (but with some minor differences: see Difference between #import and link in CSS ).
Method 1 (using <style type="text/css">)
Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.
Method 2 (using <link rel="stylesheet" href="path/to/style.css" />)
The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.
What is better?
In my opinion Method 2.
Using <style type="text/css"> is for CSS code in your HTML file and <link...> is for including an external CSS file.
The first case <style type="text/css"> is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.
The first is used to insert css code directly in your html files, while the second is calling an external css file.
Usecase: Clicking on a link opens an overlay with some content in it. There are many such links on the page, each of which has a corresponding content that loads inside the overlay. User should be able to print only the particular content.
Approach: On clicking the link, I am setting a class called "printer" to the body. Inside print.css, I am hiding all the page content EXCEPT what I see inside the overlay. On closing the overlay, I am removing the class from the body.
Issue: Everything seems to be working fine on FF and IE. On Chrome the print dialog hangs, whereas on Safari, I see a blank page.
Any help would be appreciated to understand what I might be doing wrong OR if any other approach exists.
you can use media type to apply a stylesheet that is used only for print.
<link rel="stylesheet" type="text/css" media="print" href="yourPrint.css"/>
or use #import within your current stylesheet
#media print {
/* style sheet for print goes here */
}
for more info regarding this, check out w3.org http://www.w3.org/TR/CSS2/media.html
and for a less technical albeit less reliable source, http://www.w3schools.com/css/css_mediatypes.asp
Use Print CSS
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
I have a asp.net mvc application and my Views are in HTML5. I need to print a view as a report. This View shows some data with <table/> tag and it is formatted with css style as font-family, font-size, text-align properties etc. When I try to print it with Chrome (exporting to PDF) my css does not work, I mean, the print's result is shown without formating.
What can I do to solve this problem? It Does not matter whether I use css to apply the style or use html tags to format the page, but I wish it would leave the impression formatted.
PS: I would like to keep the html valid document.
You need to split up the css for screen and print separately just by following setting
<link href="css/main.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
then no need to change your html code just change the css or duplicate the old css.
You can use different styles for screen and print media in your style sheet, i.e.
#media screen
{
table.test {
font-family:"Times New Roman",Georgia;
font-size:10px;
// more
}
}
#media print
{
table.test {
font-family:Verdana, Arial;
font-size:10px;
// more
}
}
When you'll print the table only styles defined in print media will be applied.
Check this for more.
You can try to define the css semantics with #media print rule, then stylize the stylesheet with that in mind. Maybe this help.
the template of my website looks quite good when printed, so i have no separate print css.
However, there is one element at the top which is not needed when printed, and about 2 inches high, so that's kind of a waste at the top of the printed page (which imho distracts the user from the actual content)
So, what i want to accomplish, is 'hide' that element (div) at the top of the page when a user prints the page.
But so far the only solution i've seen is top create a separate css document which then will be used when the user will print my page. That sounds good, but do i now have to maintain 2 different stylesheets with exact the same content (besides that one div)?
Or is it possible to sort of override the standard stylesheet in the print stylesheet? (so i only have to define the exception for that one div in my print stylesheet?)
Hope this explains my problem.....
If you declare your main stylesheet to apply to all media (browsers apply it to all by default):
<link rel="stylesheet" type="text/css" media="all" href="style.css">
Then adding a print stylesheet should not require you to duplicate styles across both CSS files:
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
All you would do is add the print-specific styles to print.css.
But if you want to keep a single stylesheet, and have print-specific overrides within that one stylesheet, you can place the rules in a print media rule:
#media print {
div.do-not-print {
display: none;
}
}
I think this is what you asked vor: overriding the standard css in your print style
A page on my site has a link to a stylesheet for media="print".
<link rel="stylesheet" href=".../print.css" type="text/css" media="print" />
Most browsers correctly ignore this link when rendering for a screen, but IE7 includes the file and processes the style rules, rendering the page inappropriately for a screen display.
How does IE (and how do other browsers) recognize what the intended display is? Is there an HTML header (or absence of) that guides them? Can this be correctly with Javascript?
Use the #import at-rule instead to include the file only for print and bypass IE7:
<style type="text/css" media="print">
#import "print.css";
</style>
If that does not work, try the other alternatives on the media test page