I can get a header to print on each page, but I'm new to print margins. I thought the #page css would work, but it does not seem to affect page margins. If I set the margins on the body, it works on page one, but subsequent pages start the top margin at the default, putting the header over top of the text.
<style>
.header {
position: fixed;
top: 0;
}
#page {
size: 11in 17in;
margin-left: 1in;
margin-right: 1in;
margin-top: 1in;
margin-bottom: 1in;
}
</style>
<body>
<span class=header>This is the header</span>
This is the text of the document. (repeat until I get to page 2)
</body>
Printing support by all browsers is very poorly supported with horrendous bugs in many popular browsers that have gone unfixed for years.
The short answer is to avoid HTML/CSS printing if you need to ensure a specific layout. Use PDF, possibly dynamically generated on-demand. There's various PDF generator APIs such as iTextSharp. It's possible to print from Flash, but only if Flash is installed and working (i.e. no Flashblock, iOS).
HTML/CSS printing should be restricted to simple layouts. Form printing is a nightmare with fieldset & legend support being especially problematic (particularly on Firefox). Interestingly printing support is best on the internet explorers.
The CSS3 printing support specification hasn't been completed and is some time off.
General principles:
No backgrounds or background CSS images are supported (by default - users can change their browser settings for an intranet application). Only foreground images print.
Widths need to be fluid as page sizes vary around the planet. US Letter format is shorter and wider than A4 layout
All browsers support printing in different ways. Bugs are legion.
Test using print preview.
The accepted answer which is now 4 1/2 years old says:
"The short answer is to avoid HTML/CSS printing if you need to ensure a specific layout."
These days you may do HTML/CSS printing for comparatively simple layouts in browsers or if you use a tool like wkhtmltopdf you can go for more complex layouts. See also http://www.toccon.com/toc2013/public/schedule/detail/26714
Related
CSS has features specifically to support printing, designed for user agents intended for printing, the best known of which is probably Prince. Alas, browsers aren't such user agents, and Prince is expensive ($500 for the desktop version).
So I started looking into a closely-related problem: Whether it would be possible to produce properly paginated and formatted output using the print feature of a browser (Chrome, in my case), where the user agent (the browser) outputs to the screen, not to a printer, although it is able to print the contents of the browser window. (That's not the same thing as being a user agent for printing.) As anyone who's tried it finds out, Chrome (and probably other browsers) doesn't support the CSS #page rule. That means there's no practical way to, for example, distinguish between left and right pages, but in my case that didn't matter.
All I needed was:
Paginated output, and
Precise control over placement on the printed page.
Normally, when you print a browser page exact formatting isn't important. Think of a shipping label, a boarding pass, or notes for a meeting. But, in my case, the printed page is the critical part, and the browser rendition is merely a preview. Specifically, I was trying to prepare a PDF for a photo book for uploading to MagCloud, an on-demand magazine printing service (owned by Blurb, the book-printing people).
(Many apps, like Lightroom, have book layout capabilities, but for reasons not germane to this post I couldn't use any of them.)
So my question, which I'm also going to answer is: What's a simple way to produce precise printed output from a browser?
I found that, while Chrome doesn't support #page, it does support the page-break-before style. So, to get paginated printed output, all you have to do is something like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.page {
position: relative;
page-break-before: always;
width: 5.5in;
height: 8.5in;
}
.inner {
position: relative;
top: .25in;
left: .25in;
width: 5in;
height: 8in;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class=page>
<div class=inner>
<p>This is page one.
</div>
</div>
<div class=page>
<div class=inner>
<p>This is page two.
</div>
</div>
</body>
</html>
Note that I'm using inches instead of pixels, thus neatly avoiding the issue of the resolution of the printed page in pixels. (It happens to be 96, but I'm not using that fact, and it might be different on different systems anyway.) Millimeters would work as well.
Here's how it looked in my browser:
I found that the built-in Windows 10 PDF print driver isn't accurate, producing pages that don't reflect the sizes I set in CSS. The free CutePDF Writer, however, is dead on, as is Mac OS X.
Here's the PDF in Acrobat Reader:
As you can see, it's perfect. All you have to do is lay out your content inside the <div class=inner> and you're set. If you want a full-page bleed, such as for a book-cover photo, put the content directly in the <div class=page>.
In my application I generated the actual HTML from a PHP program, but this static HTML illustrates the important concepts.
Its about Print, and Print only.
css:
#page {
size: A4 portrait;
}
#page :first{
size: 210mm 1000mm;
}
As CSS defined, should only first page with 1000mm height and rest pages are 297mm (A4) height.
But in Chrome, from second page, looks like 297mm but all content is gone.
Try it yourself, use Google Chrome, open http://fiddle.jshell.net/T4nnG/1/show/
and try print, see the preview, first page is right, and from second page, size is right, but content gone
You can see more clearly by use "save as PDF", but if you choose a real printer, it will shrink first page, the bugs are same
It may only in Chrome, but I am only use the app for Chrome, so as long as it works in Chrome, I am happy.
Am I done something wrong? Please advice on correct CSS, thanks.
Verified with a lot of trials, so this is the summary of my trials,
While printing the page, there two things happening - Calculation of layout content and actual rendering of the layout with content
#page :first breaks the first part, calculation of the layout in Chrome. The :first properties are used for calculation for other pages even if there are overrides. But Chrome uses the correct values for pasting content in the wrong layout.
For eg: #page :first if size is x, then then the number of pages is calculated based on x, the amount of content in each page is based on x. When it comes to putting in the content, Chrome realizes there is an override and changes the layout to overridden properties, but does not change the calculation of content or pages. Hence the issue. This is very clear if your case is reversed like so,
#page :first{
size: A4 portrait;
}
#page{
size: 210mm 1000mm;
}
You will see that the page heights have been updated but not the content.
Tried with page-break-*, !important rules, but nothing worked.
Tried alternative tools which can be used server side, like
http://www.princexml.com/releases/9.0/ - Not working. Rather breaks further by not calculating content or layout size correctly.
After a bit of searching, found this #page :first { margin: ... } in Chrome bug? Similar to your problem. But unfortunately, same findings here too.
This is a bug in Chrome. Filed a bug report with your case at https://code.google.com/p/chromium/issues/detail?id=355116. Please star it in case you want to follow it.
So to answer your question, your CSS is fine. But Chrome has bugs. You can only wait for them to fix it. Or modify the way you are generating the print. Hope this helps!
Add this to your CSS:
#media print
{
div{
page-break-inside: avoid;
}
}
Does that fix your issues?
Hi I'm having problem with a site in IE 10 Compatibility View (and in IE7 view as well, they are the same problem). Originally I have a background div behind the sidebar called .info-bg, and it's suppose to hide behind the sidebar .info-area, using position: absolute. However, in IE7, it looks like the background is not hidden. The only way to get it to hide is using position: static, which leaves an empty spot.
get the background to hide completely (like display none) is not an option because the right side loads more content as I scroll down. Which, without .info-bg just returns a blank space on the left. Live Site Link
maikelsabido's answer is valid but only covers half of the issue. There is no point to supporting IE10 while it is rendering as IE7. So few people do this (my statistics are based on JavaScript/DOM object detection, not the user agent and therefore are extremely reliable, my site triggers an error 9999 if you try forcibly overriding the rendering mode) so just don't bother with IE10 rendering as IE7. However to test IE7 you should keep a copy of XP in a virtual machine.
That being said while Microsoft did a very small update to clean things up in IE7 it still has numerous issues. You'll want to use an Internet Explorer Conditional Comment Style Sheet which I have a full tutorial on how to implement at my site here...
http://www.jabcreations.com/web/css/ieccss
Once you've implemented an IECCSS for IE7 you don't need to use any hacks, just position it for IE7 specifically.
That being said your page layout doesn't look like you need CSS level 2 positioning at all. Even IE 5.0 has respectable CSS level 1 support if you know how to do basic layouts correctly, but don't feel bad because besides my site I always see people jumping head-first in their tutorials to use position instead of float. So if you want much more stable CSS in general and limit positioning for SEO purposes I recommend reading my CSS level 1 tutorial here as well...
http://www.jabcreations.com/web/css/nested-divisible-elements
If you do that it will limit your need to use CSS level 2 position. With your layout the only thing I was use position for is to keep the content at the top of the body element and then put the menus below the content in the code...and then use position to visually put the menus where they are on the page. If you disable CSS (e.g. Firefox's Web Developer toolbar does this easily or Firefox --> View [menu] --> Page Style [menu] --> No Style) that is how a search engine sees your page.
Also you really should fix your header elements. You have two h4 and then several h2 elements. You want to think of your page like a newspaper, yours currently has nothing about winning the war using h1 but at the top of the front page the most important story is h4 saving a cat from a tree in a retirement home. Understanding the semantics of HTML can be a powerful tool in combination with search engines in getting more people to find your site because you've made it easier for the search engine to understand the semantics of your content.
I hope this helps and if you have any other questions feel free to ask.
Add style rule position:relative to wraper id main-wrap like
#main-wrap{
position:relative;
}
and the add the following CSS to the ".info-bg" div
.info-bg{
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
height: 600px; /* change according to your need */
box-shadow: 0 0 73px rgba(0, 0, 0, 0.15) inset, 4px 0 4px rgba(0, 0, 0, 0.08);
}
Further you can check out this page to know how z-index property actually works - http://www.tutorialrepublic.com/css-tutorial/css-layers.php
I fixed the issue you highlighted in IE7. But I need you to see this gist https://gist.github.com/anonymous/6607075 and try it on your side.
It's quite hard to fix on my side because I don't have your Wordpress theme.
Anyway, with regards to the gist (https://gist.github.com/anonymous/6607075 )
For the css, look at the code at line 108. For the #info-wrapper
For the html, at line 94, I added a <div id="info-wrapper">
See if this fix the issue? If not, let me know in the comments.
--
Edit: You can download the files that I did test in IE7, here at wetransfer
You can put this on the section of your website:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This will disable the Compatibility mode and stop messing your site.
I'm really stumped here. What I have is a div stylized as a rectangle, containing text which is the main header for the page. Relevant code follows:
HTML:
<div id="rectangle">
<h1>SIN</h1>
</div>
CSS:
h1 {
text-align:right
font-family:Buenard;
font-size:120px;
font-weight:normal;
color:#FFFFFF;
position:absolute;
width:98%;
line-height:109px;
border:1px solid white; /*for debugging purposes*/
}
#rectangle {
position:relative;
width:237px;
height:109px;
background:#6F0000;
margin-top:40px;
}
The problem that is driving me crazy is that I have two different Windows 7 computers, one Home Premium and the other Enterprise, that produce different results for the same version of Chrome (Firefox has the inconsistency as well). On the Enterprise computer, the text is closer to the bottom of the box, and on the Home Premium computer, the text is closer to the top.
I remember reading that browsers like Chrome and Firefox use OS system settings for fonts sometimes, but I can't figure out what could be causing this, nor how to remedy it. I ultimately want the text to be vertically centered and right aligned inside the rectangle, and can pull that off for each of the computers but not both at once.
I believe that the Mac OSX computer I tried this on had the same behavior as the Windows Enterprise computer (but I'm not entirely sure), so this may just be a setting on my personal computer.
I realize I could just use an image to fix this problem (and I may) but I'd really like to know what's going on here.
EDIT: I tried it out on my other computer and the issue still exists. The web font is referenced in the manner stated below. Any other ideas? My inclination is that it is a system settings issue, but I can't find what setting that would be.
It most likely is the font your using as it may not be installed on one of those computers. I would suggest trying a different font-family first.
h1 {
font-family: san-serif;
}
If you want to use that font you will first have to determine if you have the legal right to distribute it and then you would have to have every visitor to your site download and install the font so your site displays properly.
If you want custom fonts I would suggest looking into web-fonts. Google web fonts are just one sample found here: http://www.google.com/fonts/
EDIT:
In addition to making sure, and thanks to #w3d, your font will work, though not the way you have it referenced. You will need to make it a webfont reference so that browsers know to go to the web resource, otherwise the fallback fonts will be used instead.
As per the images you added, the line height might be your issue, try removing it. If you need to elevate that text off its borders, then wrap it with a span and apply some styling.
HTML
<span class="elevate">SIN</span>
CSS
span.elevate {
display: inline-block; /* to allow applying margins and padding */
margin: 2px 0; /* puts 2px worth of margin below and above text */
}
Where am i doing wrong?
This is the normal print preview:
But I want to see this picture (without dragging margin arrows)
This is the css codes and preview:
Yes. It is possible to alter your margins in a page printout. The rule would look like:
#page {
margin: 0;
}
This will not work in Firefox as of now. If you check their developer reference on the #page CSS support, you can see what browsers do support #page.
The best you can do is set #page margins. Keep in mind, however, that you can and most likely will be overruled if you set margins to 0.
Thanks ! works well on chrome
#page {
margin: 0;
}
I don't think it is actually possible to do this, because you'd be overruling the defaults on the user's computer. As far as I know, a web application doesn't have the access rights to alter something like printer settings without some kind of ActiveX script in IE.
I had a similar problem a while back, and ended up having to generate a PDF on the fly using TCPDF. In the end that worked out better, because you have greater control over the layout.
I'm prevented from upgrading a computer from Windows XP to something more recent, so basically I'm stuck with IE8.
I found that on IE8, page margins will always be a minimum of 6.01mm left and right, and 5mm top and bottom. No matter what I do, even using #top-left right and centre rules inside the #page rule, it will still default to the values above.
It may be easier to create the stylesheet to take into consideration this limitation on the print size.
It may also help to put the IE hack \9 in front of the CSS class property value, duplicating the property may also help in some cases, (but won't affect the margins of the page), such as:
.aDiv {
margin: 10mm;
margin: 15mm\9; //this \9 hack will set that value only on IE8.
}
I know there are other hacks similar to this, such as \0 but I admit don't fully understand them. \9 works for me in IE8 in some situations.