I have set a responsive style sheet for my website and here is part of the CSS file responsible to empty some space for the navigation-menu on the left :
#media (min-width: 48em) {
#layout { padding-left: 150px }
}
I've also set a print.css file as dedicated print style sheet as follow where I set the menu to hide and it's space to be omitted :
#media print {
#layout { padding-left:0 }
#menu { display : none }
}
The problem is that, while in print preview, the menu will hide but there's still the 150px white space on the left side of the content, no matter what, I've even tried :
#layout { padding-left:0 !important }
But no luck,
When I manually change the padding-left value to 0 using the Chrome's built-in feature (Inspect element), the page shows up alright in print preview, but the code in print.css does not seem to be applied no matter what.
All right after a lot of testing. I got it figured out. It seems the padding-left problem is only happening in Google Chrome's print preview, since all the other browsers print-preview respect print CSS. So everything is fine with my CSS, and this is browser related bug.
Related
I was reading through MDN's page for history.pushState() on my phone and noticed what I thought was a textual error: there should be a comma after the [ in the final argument of the syntax.
I went to edit the page, and discovered the comma does exist; it's hidden by the 📋 Copy to Clipboard button. (Oddly, despite white-space: pre, Chrome iOS treats it like pre-wrap, while Chrome desktop does not.)
The ideal solution for this (barring a fix to Chrome iOS) would be a CSS style that sets the padding-right of the first line.
#media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
.code-example pre:first-line {
padding-right: 41px;
}
}
This, however, seems to be ignored. Am I doing something wrong or--as I suspect--is this simply impossible?
Another, easier if inelegant, solution would be to set the Copy to Clipboard button's style to
.code-example .copy-icon {
display: block;
margin-right: -16px;
margin-top: -16px;
float: right;
}
and move the <button> inside the <pre>. But, much like <table> en lieu of display: grid, float is out of vogue.
Plus, without a conditional check for mobile browsers, this change would alter the behavior of desktop/non-buggy mobile browsers:
Despite white-space: pre; overflow: auto, the browser is rendering line-wrap.
Assuming :first-line { padding-right } is unsupported, is there another way to achieve the same effect with either CSS or a JavaScript hack?
Note: I did search for a duplicate question, but every result was about indenting the first line of a paragraph, the solution to which is :first-line { text-indent }.
Update
I suppose given any solution that detects the browser must, by definition, detect the browser, we could just detect buggy browsers using navigator.userAgent, and then manipulate the DOM and apply float: right to the button. Kinda nasty, though.
Inspecting the MDN page you've referred to, I noticed there is a <code> element inside the <pre>. Hence, you could do the following:
#media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
.code-example pre code {
display: block;
max-width: 90%;
}
}
That way, the Copy to Clipboard button wouldn't overlap the code.
I know about #media css tag however it looks like no matter what I set the padding, I se no padding in "print" for my website.
I want to set a padding for print so that I want the website to be printed out with a custom page spacing around the text rather then letting the printer/browser "fit" the content with almost no white area around the website.
Any solution(s) is appreciated.
Did you take a look at the #page rule ? https://developer.mozilla.org/en/docs/Web/CSS/#page
#page {
margin: 2cm;
}
It's from CSS 2 specs, so it's supported by all major browsers (included IE8+).
It might help if you showed some code — it's hard to offer a solution if www can't tell what the problem is. This works fine for me in Safari on a Mac:
<style>
#media print {
body {padding:100px;}
}
</style>
Im trying to learn how to enable print background-colors pages in chrome :
Take for example http://angularjs.org/
the main page is :
So If I click print ( ctrl+P) and mark the "background colors and images" - it does show the background colors which are future to be print :
All ok.
But If I navigate to another page http://docs.angularjs.org/tutorial/step_02 which also have background colors in it :
And when I try to print it - I see it in the preview pane without colors :
My question is : how did they do that ? ( or better , how can I make it print background colors ?)
I already read here that I should use -webkit-print-color-adjust:exact;
so I added it to the html via chrome developer toolbar , but it didn't help. ( when I clicked ctrl+p again
What should I change in the css in order for it to print also background colors ?
related info , searching for #media , found it under :
But I didn't find any related info there.
Ok, I think you didn't got what I meant in the comments, anyways, so it's pretty simple, say am having an element, like
<div class="blow"></div>
With a background set to tomato, so inorder to make that work, first of all you have to be sure that you have media print set, like
#media print {
/* Declarations go here */
}
OR
<link rel="stylesheet" href="style.css" media="print" />
Now, what you have to declare is
-webkit-print-color-adjust: exact; in the property block, like
#media print, screen { /* Using for the screen as well */
.blow {
height: 100px;
width: 100px;
background: tomato;
-webkit-print-color-adjust: exact;
}
}
Demo (Only for webkit browsers i.e Chrome/Safari)
In the above demo, you should be able to see the red block, even in the print preview window of your Chrome.
As you have commented, it works for me..
OR
Support for the same is dirty, for more information on the property, you can refer MDN
From MDN :
Body element backgrounds are not printed Currently neither
Chrome nor Safari print backgrounds of the body element. If this
property is set to exact for the body element, it will apply only to
its descendants.
Chrome clipped image bug
When background images are clipped (for example, when using
background-image sprites), due to Chromium bug 131054, they will
appear distorted when printed from the Chrome browser with
-webkit-print-color-adjust: exact. Solid backgrounds and background images that are not clipped (i.e. have lower width and height than the
element to which they are applied) are printed correctly.
External links
WebKit bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"
CSSWG wiki: "print-background" - a proposal to standardize this
property
Your background-color is probably overwritten. To achieve background-color for printing increase the specificity of your selector or add !important to the statement. Along with -webkit-print-color-adjust: exact; this should work for you:
#media print {
.mycontainer {
background-color: #000 !important;
-webkit-print-color-adjust: exact;
}
}
Is there any way to force Chrome to always print without headers and margins? Chrome keeps forgetting and it really messes up my cash register program (if the header is there, it tries to print the entire page, which is a lot of white space). If you have any CSS, Chrome settings, even hard-coded editing of Chrome itself: anything that can fix this would be appreciated.
If you want to change this via your website, you can try using css media queries to hide or rearrange elements for printing.
#media print {
/* All your print styles go here */
margin: 0;
#header, #footer, #nav {
display: none !important;
}
}
I had the same issue. I wanted to override the print options so that the browser's headers and footers did not display.
Putting #page {margin: 5mm;} into my CSS file worked perfectly. In fact if you use #page {margin: 0} the Headers and Footers option is not even displayed on the Print Preview (in Chrome, I have not yet tested other browsers.
I have a HTML "report" page that contains amongst other things a HTML view that looks like this:
When you print preview this though, it looks a lot less nice :)
I know about CSS for printing, but what I don't understand is how my HTML is being interpreted like that - for example why do my blue borders come up fine, but my colored boxes (which are actually just empty divs inside a td cell) don't show up at all in the print preview. Also, why would the white text on black on the left not print like that?
Are there some rules for print-friendly css? Any suggestions here?
BTW - I tried previewing in both IE 10 and chrome - both pretty much did the same
I guess the problem is related to "background-color" and "background-image" properties that are ignored by default on many browsers (when printing).
For chrome you can add the following code to your print css, in firefox and IE you must select "print background" in the print dialog.
:root {
-webkit-print-color-adjust: exact;
}
EDIT: AN ALTERNATIVE APPROACH
Since you're looking for a way to provide readable information also on the printer you may provide specific content just for that:
in your HTML:
<td class="green_background blue_border">
<img src="img/green_bk.png" class="show_on_print">
</td>
<td class="orange_background blue_border with_star">
<img src="img/orange_with_star_bk.png" class="show_on_print">
<span class="hide_on_print">*</span>
</td>
in your stylesheet:
#media screen,print
{
.blue_border {border: 1px solid #00F;}
}
#media screen
{
.green_background {background-color: #0F0;}
/* hide something when displayed on screen */
.show_on_print {display: none;}
}
#media print
{
img.show_on_print {/* add size, etc. */}
.hide_on_print {display: none;}
}
you have to create also the images. The idea is to replace the background with some small sprites, or an alternative text only on printers. This works in any browser
The reason why you don't see the colored boxes is because the color is applied via background-color. This was one of the main sources of problems with printing HTML in the past, so many browsers ignore background colors and images to make the printout more readable (text is hard to read on a B&W printer when it's on top of a "gray" area).
In your case, this is problematic since there is no text.
Here is a question which explains how to turn background color printing on in Chrome. Other browsers have an option in the printing dialog.
Alternatively, "print" the page into a PDF file and then use a PDF viewer to print it. In this case, the browser might preserve the background settings.
Check if your browser suppresses background colours when printing.