Log in / Register

Forum › How do I...?

Advanced HTML5 Processing

cbourne
Hi,

I've been doing some preliminary tests with with Prince9 and some fairly advanced use of HTML 5.

However, if use this as a test URL:

http://getbootstrap.com/css/

Prince will produce a PDF but a lot of the content (code samples etc) is missing. Also, it doesn't look like the correct style sheets are being applied.

Here's the output - As you can see prince seems to successfully retrieve all of the CSS references.

$ prince http://getbootstrap.com/css test.pdf -v
prince: Loading document...
prince: loading document: http://getbootstrap.com/css
prince: loading HTML5 input: http://getbootstrap.com/css
prince: loading document: http://getbootstrap.com/css
prince: Applying style sheets...
prince: loading style sheet: http://getbootstrap.com/dist/css/bootstrap.min.css
prince: loading style sheet: http://getbootstrap.com/docs-assets/css/docs.css
prince: loading style sheet: http://getbootstrap.com/docs-assets/css/pygments-manni.css
prince: Preparing document...
prince: loading document: http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true
prince: loading HTML5 input: http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true
prince: loading document: http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true
prince: Applying style sheets...
prince: loading image: data URL
prince: loading document: http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true
prince: loading HTML5 input: http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true
prince: loading document: http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true
prince: Applying style sheets...
prince: Converting document...
prince: used font: Helvetica Neue, Regular
prince: used font: Helvetica Neue, Medium
prince: used font: Helvetica Neue, Light
prince: used font: Helvetica Neue, Bold
prince: used font: Monaco, Regular
prince: used font: Helvetica Neue, Italic
prince: used font: Arial, Regular
prince: Finished: success


Am I missing something here?

Edited by cbourne

mikeday
It's probably because Prince applies print media style sheets by default. You can specify --media=screen on the command-line to apply screen style sheets instead.
cbourne
Thanks Mike,

Thats a bit better but still not quite right. Its dropping some of the divs that contain the code samples and some of the elements have rounded corners which are being rendered with square corners!

Carl
cbourne
I've added an example but its easy to create your own!
  1. bp-prince.pdf‎ 310.2 kB ‎
    Example PDF from Bootstrap HTML
mikeday
Prince doesn't support box-shadow, which might be affecting the rounded corners. Unfortunately the code samples are hidden by default, and only displayed selectively using media queries if the screen is above a certain width:
.highlight {
  display: none; /* hidden by default, until >480px */
  ...
}

@media (min-width: 481px) {
  .highlight {
    display: block;
  }
}


This makes code samples invisible by default in any user-agent which doesn't support min-width media queries, which includes Prince. It probably would be more sensible to implement it the other way around: show the code samples by default, and hide them if media queries are supported and the screen is too narrow. Or just show them anyway, and let the device deal with it; what's the worst that could happen? :)