Forum How do I...?

HTML web view for debugging?

meowist
Hello,

I'm wondering if it's possible to view the result of changes to HTML/CSS without regenerating a PDF. For instance, if I change a font size setting, is there a way to see a "preview" of that change in a simple HTML/web view before generating the PDF once all styling and positioning is in place? I searched the Forum and could not find any answers.

Thanks!
mikeday
How about using a browser and hitting refresh? :)
meowist
Could you elaborate? : ) Obviously I know what you mean, but it's not quite that simple: I'm generating PDFs from within a Rails app, so are you suggesting I set up a separate PDF view and then just debug that view until it matches what I want to see in the PDF? When working with the Wicked PDF gem (pre-Prince), I used the built-in debugging view, which was triggered just by passing a debug parameter to a URL. See debugging here, that's what I'm after:

https://github.com/mileszs/wicked_pdf
mikeday
Yes, you could just send the HTML straight to the browser, instead of passing it to Prince. But I'm not a Rails expert, so I don't know how much work that is to toggle.
meowist
Got it, was just curious if there might be an option via Prince. Thx!
sfinktah
I generally do all my publishing inside Chrome, then when I'm happy with it, I copy and paste the DOM to a text file, and go.

That allows me the conforms of interactively tweaking the CSS, and trying out various javascripts - and allows me full use of javascript, without using Princes internal javascript engine.

If you just want a preview, then you can run something like imagemagick to convert the pdf to a png.
meowist
thank you for the helpful suggestions. i hadn't thought of imagemagick, that's a good idea too. thx!
clarkr
My HTML looks different in Chrome than when I run it through Prince and translate to PDF. Is there a way to interactively debug the actual content Prince going to render into a PDF rather than what's rendered by some web browser (e.g. chrome)?
mikeday
We don't have the equivalent of a DOM inspector yet, unfortunately. What kind of differences are you seeing?
clarkr
I'm seeing fairly significant differences in layout. I've attached a screenshot of what I'm see and would be happy to follow up with more technical details off the forum if that would be helpful.
  1. html.png23.9 kB
    HTML input as rendered by Chrome
  2. pdf.png16.6 kB
    PDF result
mikeday
Tricky, this could be a width issue, as paper is typically narrower than a browser window.