Log in / Register

Forum › Bugs

Media query does not trigger when expected

jvdneut
Hi,

I'm trying to convert the following HTML to PDF using the following command 
prince a4.html -o ../prince.pdf --page-size A4


<html>
<head>
<style>
@page {
	size: A4;
	margin: 21mm;
	background: #fbfaf6;
}

.width {
	width: 200mm;
	background: silver;
	margin: 0 -21mm;
}
.shouldBeBlue {
	background: red;
}
@media (min-width: 200mm) {
	.shouldBeBlue {
		background: blue;
	}
}
</style>
</head>
<body>
	<div class="width">width</div>
	<div class="shouldBeBlue">I'm not blue :-(</div>
</body>
</html>


But the "div.shouldBeBlue" stays red.

When I change the "min-width" in the media query to 171mm, the div does become blue.
Since an A4 sheet of paper is 210mm wide, I would expect this to be the case up until "min-width" is 210mm.

I have tried reducing the margins to 0, but this had no effect.

FWIW I first encountered this bug when attempting to match on a "min-width" of 700px, which should also still be hit on an A4 sheet of paper.
mikeday
Prince is taking the page margins into account and measuring the page body area, you will need to reduce the page margins with --page-margin 0 on the command-line.
jamespaden
I just ran into a similar issue. To clarify, you're saying that Prince ignores the CSS @page margins when calculating the page width for use in @media queries?

Try DocRaptor - PrinceXML web service and official PrinceXML partner