Log in / Register

Forum › How do I...?

Can Prince version be detected in CSS?

Jellby
As Prince evolves, new versions fix old bugs (or introduce new ones). Workarounds that were once needed may now degrade the output. So... it would be desirable to be able to detect the Prince version in CSS and apply different sets of rules depending on the version, such as the output is always close enough to the intent.

Is this possible at all? How?
mikeday
We don't have a version-specific rule in CSS at the moment. Since you know which version of Prince you are running, the easiest way might be to apply a different style sheet on the command-line.
Jellby
Yes, but it's not so easy to ship a CSS file for others to use. I'd have to ship several files together with a script to select the right one depending on the version.

I guess even if such a feature would be added in the future, it wouldn't be very useful for older versions, which wouldn't understand it.

Maybe in some cases I could use @supports with some property/syntax that happens to be first implemented in the same version I want to detect.
mikeday
Yes, that is what @supports is for, along with the regular fallback behaviour of the CSS cascade:
p {
    color: black;
    color: FancyBlack /* may not be supported */
}

Is there a particular feature that is causing trouble?
Jellby
Well, the way 100% height/weight is computed seems to have changed, so before I had:
/* specific code for the cover image */
@page cover {
  size: 600px 800px !important; /* hard-coded cover image size */
  margin: 0 -100px !important; /* make virtual page width 800px */
}

to show a particular image full-page, while with version 13 I have to use "margin: 0" instead.
mikeday
Interesting, was the negative horizontal page margin to make the cover image extend into the bleed area?
Jellby
The HTML looked something like this:
<html>
<head>
  <title>Cover</title>
  <style type="text/css">
  body { margin: 0 }
  div { text-align: center }
  </style>
</head>
<body class="cover">
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
  <image width="600" height="800" xlink:href="images/Cover.jpg" />
</svg>
</div>
</body>
</html>

and the image is exactly 800x600 pixels. But somehow, if I remember correctly, Prince used to scale the SVG to a height equal to 100% div width. So the negative margin is to make the div the same width as the page's height. Since the image matches the true page size, the parts lost in the negative margins are just blank.
Jellby
See: https://www.princexml.com/forum/topic/1164/scaling-images-to-full-page