I have a page with some data and content. I want to make a print version that will display the content and footer not to worry much about the header.
Instead of writing another page just for printing, I was reading about CSS's feature for "#media print".
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:block". Is that doable?
How do I achieve this?
EDIT: This is what I have so far:
/* Print Style - SuccinctNate */
#media print {
* {display:block;}
.printable, .printable > * {display:block;}
#footer {display:block;}
}
your code seems correct . you can set display:block to the items you want to show on the print and display:none on everything else.
#media print {
* { display:none }
.item_i_want_to_print { display:block;}
}
or you could just hide the ones you don't want to appear on the print
#media print {
.item_i_do_not_want_to_print { display: none;}
}
it is compatible with every browser . so use it with confidence
see more here : media print
Related
Say I wanted to show a print preview, would it be possible to have an iframe or a div element use print media query instead of screen? something akin to this:
<iframe media='print'></iframe>
I already have a CSS file with print media, the issue is just triggering that selector outside of using print preview.
I'm not sure but you can modify your print page css as below
first you need to create a file as name is yourcssfile.css then add it in your html file like this,
<link href="yourcssfile.css" rel="stylesheet" >
inside
#media only screen and (max-width : 640px) {
/* All your print styles go here */
#header, #footer, #nav { display: none !important; }
}
I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.
#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.
I have many divs that proposed to be printed - on different pages.
How can I make sure that when the user is clicking the print button, each div will be on a different page?
Thanks!
You can use the page-break-after attribute in the print media query. The advantage is, that you don't have to change the size of your divs, it just makes sure that the page break will be after the div.
#media print {
div {
page-break-after: always;
}
}
More information about page-break-after on MDN.
In css, there is a media query you can use to specifically format your web page for when you want to print it:
#media print {
/* insert your style declarations here */
div {
page-break-after: always; /* ensures the next will we appear on new page */
}
}
You can use this media query to make each div fill up an entire page when the user decides to print. You can use this to modify things like removing the navbar when the user decides to print.
On the other hand, to avoid direct breaks after a certain element use page-break-after: avoid;
You can also for the use to print in a certain format that you want to specify using the follow:
#page {
size: A4; /* or A4 landscape or A5 */
}
maybe this question is too weird or even is off-topic, sorry for that but I have this doubt:
Exists a way to show a HTML page in the same size for all screens when the user types control + p (print page)?
For example my laptop have this screen resolution: 1600x900 and when I type control + p the HTML page look perfect (all in 1 page)!
Problem appears when I use a bigger(page appear in 2 or more pages) or smaller screen(page appear in 1 page but with a lot of blank spaces).
At the moment I tried with #page margins but not work at all, just in some cases, however here is the code:
<style>
#page :left {
}
#page :right {
margin-top: 0.2cm;
margin-bottom: 0.2cm;
}
body {
font-size: 9.5px;
}
</style>
PD. I'm using JavaScript, jQuery, HTML5, CSS3, Bootstrap.
Control + P means print, right?
Then yes, you should use the media query
#media print{
}
This a good explanation: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
I'm not sure if this is even possible, but I'd like to throw it out there: say I have something like
.this-thing:hover {
/* something magical */
}
in CSS. During Print Preview and Print, I would like to "disable" whatever hover effect is on .this-thing, such that even if the user is hovering over a given element when they decide they want to print the page, the effects from /* something magical */ do not appear on Print Preview or the printed media.
Is there a pure CSS solution to this?
Note that I do not want to found out what the specifics of /* something magical */ is in order to disable it during #media print.
You could use #media only screen to apply the hover effects only to the :hover rules.
So you would do:
#media only screen {
.this-thing:hover {
/* something magical */
}
}
Organizationally, this may be a mess to pepper #media only screen around all of your hovers, but it's one option.
The same way as you use the only and and logical selector, you can use the not to specify that the style rule should not apply to some media type:
#media not print {
.this-thing:hover {
/* something magical */
}
}