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.
Related
I know to use media queries and anchor pseudo classes I need to place them in the head of an email rather than inlining the styles (impossible).
Does it make any difference with the plethora of email clients out there is the styles are written in the head like so:
<style>
body {
....
}
</style>
Or linked like so:
<link rel="stylesheet" type="text/css" href="http://example.com/mystyle.css">
Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag outside the <body> tag), these are the most important thing to avoid. **
Many email services cut everything above the body tag and disable
external style sheets.
It's best to use <style> tag inside <body>
<body>
<style type="text/css">
body {
....
}
#media only screen and (max-width: 600px) {
....
}
</style>
</body>
If you want more details you can refer to this link, It was quite helpful for me, Cheers...
Best is for style to be written in the document and not linked. Linked resources are blocked by webmail clients like Outlook.com, Yahoo and Gmail
Use this guide for style support of email clients:
https://www.campaignmonitor.com/css/
I'm trying to hide parts of my page for print. Found a solution with #media print and added this code to my page:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then I've added the class="no-print" to divs I didn't wont to print. Works like magic on Chrome but IE (8-11) ignores it completely and print all objects.
You can see the print function in the following page.
You can see that the print icon and the green tabs are not show in Chrome but are in IE.
BTW, on FireFox for some unknown reason I don't even see the print icon... /:
Thanks in advance for any help provided,
Guy.
I'm not sure why your method won't work on IE. IE is a pain.
Adding a stylesheet like this:
<link rel="stylesheet" href="http://rom.guywalderonline.com/templates/shaper_istore_ii/css/print.css" type="text/css" media="print" />
and adding your print specific CSS to the print.css file works for me in IE.
This is what the free AddPrintStylesheet extension does: http://extensions.joomla.org/extensions/style-a-design/print-a-pdf/20611
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.
I'd like to change some things on my web page. Also I would like to make some things hidden. Is there a way I can do this with CSS when I print? In particular I want to be able to hide some DIVs and all that they contain.
This can be achieved with a separate print stylesheet. The media attribute is the key:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Yes, you need to use the media attribute when you include your css. E.g.
<link rel="stylesheet" href="my_print_style.css" media="print">
Or, you can use the media rule in your stylesheets if for example, you do not have enough changes to warrant a whole new stylesheet. Something like this,
#media print {
// print specific styles.
}
See http://www.w3.org/TR/CSS2/media.html#at-media-rule, for details and valid media types.
Answer is the CSS #media rule: http://www.w3.org/TR/CSS2/media.html#at-media-rule
I've used
<link href="print.css" type="text/css" rel="stylesheet" media="print">
To achieve this. Assign #ids or .classes to elements you don't want to display. And use display: none for those elements in print.css stylesheet.
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