Log in / Register

Forum › How do I...?

Css background gradients?

sbrown
Does Prince support Css background gradients?
It doesn't seem to unless I'm doing something wrong?
Such as:
.new-middle {
border: 1px solid #333;
width: 758px;
height:854px;
margin:2px 0;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#9a9383));
background: -moz-linear-gradient(top, #f1f1f1, #9a9383);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#9a9383');
}
mikeday
Prince 8.1 does not, but we're supporting gradients in the next release.
sbrown
Does Prince support the css background image?
background:url(../images/new-flyer-1bg.jpg), no-repeat;

in 7.1 or 8.1?

Thanks,
Shawn.
mikeday
Yes, although there should be no comma before the no-repeat.
mikeday
Prince 9 is now available, and supports multiple background images per element and CSS background gradients.
sfinktah
There appears to be something quite wrong with the way gradients are being rendered.

Horizontal gradients are "sort of" okay, although missing the end of the spectrum.

Vertical gradients just seem to stick at the starting or ending value.



<!DOCTYPE html>

<html>
<head>
  <style>
	.border {
		border: 0.5pt solid #aaa;
		border-radius: 10pt;

		margin: 24pt 12pt;
		padding: 10pt 12pt 10pt 16pt;
		height: 10cm;
  }
  .grad-right {
	  background-image: linear-gradient(to right, black, white);
  }
  .grad-top {
	  background-image: linear-gradient(to bottom, black, white);
  }
  </style>

  <title></title>
</head>

<body>
    <div class="border grad-right">
Evidence obtained as a result of a forensic procedure conducted on a
person is inadmissible as part of the prosecution case if the statutory
requirements have not been complied with, unless the prosecution
satisfies the court on the balance of probabilities that the
circumstances justify the reception of the evidence or the accused person
consents to the reception of the evidence.
    </div>
    <div class="border grad-top">
Evidence obtained as a result of a forensic procedure conducted on a
person is inadmissible as part of the prosecution case if the statutory
requirements have not been complied with, unless the prosecution
satisfies the court on the balance of probabilities that the
circumstances justify the reception of the evidence or the accused person
consents to the reception of the evidence.
    </div>
  </div>
</body>
</html>


That said - I can see in another part of my (real document) a working gradient... so... I'm not quite sure what's going on.

mikeday
Which PDF viewer are you using? When I convert your document to PDF the gradients look correct. Does the attach PDF file still look wrong on your machine?
  1. gradient.pdf‎ 21.9 kB
dauwhe
Interesting. PDF looks correct in Acrobat 10.1.7 on Mac OS X 10.8. It looks wrong (bottom is all black) in the SchubertIT PDF Plugin we use with Firefox, and it looks wrong in Preview 6.0.1. It's fine in Safari 6.0.5 using Adobe Acrobat NPAPI Plug-in, Version 10.1.7.
mikeday
Right, there are a few bugs and inconsistencies that we have found in MacOS X Preview. It looks fine in the Evince document viewer on Linux, as well as Adobe viewers.
sfinktah
Interesting, I do use preview, and the example pdf rendered differently in chrome than in preview.

I took the sample I pasted earlier, and processed the PDF through Acrobat's optimise (which is SOP before shipping off to lulu for printing) and all the gradients were perfect.

Opened it in Preview - which then refused to show any gradients at all :)

So looks like Preview is to blame. And not the first piece of strange behaviour I've noticed. It does some messed up things with custom fonts aswell - namely, it refuses to print them. Again, Adobe fixes ☺