Precise positioning for print in Firefox

HTML & CSS
1

I want to be able to create a document for print where I can precisely position elements relative to the top left corner of the printed page. I have already managed to cope with Chrome and IE 11 (each browser has its own share of bugs and needs workarounds) but I can’t figure out how to do it in Firefox. Test code:

<!DOCTYPE html>
<html moznomarginboxes>
<head>
<title>Print test</title>
<meta charset="utf-8">
<style type="text/css">
@page {
	margin: 0;
	padding: 0;
	size: portrait;
}
@media print {
	html {
		margin: 0;
		padding: 0;
	}
	body {
		margin: 0;
		padding: 0;
	}
}
div.rect {
	position: relative;
	top: 1cm;
	left: 1cm;
	box-sizing: border-box;
	width: 3cm;
	height: 3cm;
	border: 0.5mm solid black;
}
</style>
</head>

<body>
	<div class="rect">Square</div>
</body>
</html>

Demo: https://dl.dropboxusercontent.com/u/13230070/print-test.html

The square is supposed to be positioned at 1cm from the top left corner of the page but in Firefox it is positioned at 1.4cm x 1.4cm offset from the corner. 0.4cm is the minimum margin of my printer and Firefox apparently shifts the whole content to where the printable area begins. Both Chrome and IE 11 position the square at 1cm. Is there any way I can achieve the same result for Firefox? I suppose the behaviour makes sense for the majority of users because it guarantees no content will be cut off behind the margins but my requirements are that precise positioning is more important.

2

If you go into about:config, what are your default print margins?

1034×116 7.7 KB

Is this application for YOU only, or open to the public?

Edit-TBH I can’t seem to replicate the 1.4 inch margin (apposed to 1 inch). Do you have a ruler addon for FF? Do you have custom margins set up on print preview / page setup?

3

These were set to 0.5 in my case but changing them to 0 has no effect.

It’s for a company were I have some control over what is installed.

It’s 1.4cm not 1.4 inch. The thing is that the added margin is printer dependent. If I print to PDF via PDF Creator driver then the square is positioned correctly in the pdf and I can print it out in Adobe Reader and the square comes out fine at 1cm. But when I print from Firefox directly the additional 0.4cm margin is always added and I can’t get rid of it. I suppose Firefox gets the 0.4cm value from the printer driver.

No.

I have but changing them has no effect. I suppose the moznomarginboxes attribute makes them being ignored (which is what I want actually).

4

Is it coming from your browser’s file → print preview → page setup settings? eg.

5

I thought that’s what is used depending on the about:config settings? Could be wrong.

6

Apparently so. In my settings I have margins 1.27cm which is 0.5 inches.

7

Guess that’s why I thought they were related. Mine were 0 and my settings were 0. I feel stupid.

8

AFAIK there isn’t a way to over-ride browser settings. i.e.
the settings dictate the area (kind of like a print viewport)

I guess you could try negative margin, but that could result in “edge” content being lost if it exceeded the settings.

Of course who knows what a users settings are. Maybe they want the top and bottom margins for things like URL, title, date, etc.
Maybe they want the left margin so they can put the page into a ring binder.

And I don’t think providing “instructions” on how to adjust the settings would work very well.

9

I was hoping there is some Mozilla specific hack (just like moznomarginboxes) that would allow me to get rid of the margins. The other browsers have no problem with that so that’s why I’m still on the lookout.

Yes, at the moment the best I can do is apply a negative margin on the whole content and this will work fine. The problem is that each printer may have different margins so I’d have no way to set it globally.

No, they do not, this is for a specific print out from an application at a company.

As a last resort that would be acceptable - the problem is I can’t find any settings to get rid of the margins.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.