WeasyPrint icon indicating copy to clipboard operation
WeasyPrint copied to clipboard

Add a rendering inspector

Open LukasKlement opened this issue 3 years ago • 2 comments

Due to the limited flexbox support, the HTML rendered by WeasyPrint often does not correspond with what browsers render. Is there a way to have a browser-like inspector on WeasyPrint rendered documents?

I have not found any other way than trial-and-error to circumvent these flexbox limitations, which is extremely time-consuming.

LukasKlement avatar Jul 05 '22 09:07 LukasKlement

Hi!

Having a rendering inspector would be awesome, but it’s quite complicated 😁.

The best solution right now is:

  • set up an automatic PDF generation (I use inotifywait),
  • fix the flexbox layout (should hopefully be included in version 57).

liZe avatar Jul 05 '22 11:07 liZe

What would be useful in this inspector for you, and how do you imagine it in your dreams?

Looking quickly at the WeasyPrint code, I can imagine having a json dump of computed styles from .css.StyleFor.set_computed_styles would be useful. In order to limit the amount of data, this dump could only be done for HTML elements with a certain HTML attribute (perhaps inspect=1 or something like that).

Maybe having another logger, similar to PROCESS_LOGGER, would be convenient because this json dump could be configured to go into a standalone log file. Users can then do further processing on the json of this standalone log file if they want prettier output.

I'm predicting that it would be useful to be able to compare the above output to the "Computed" tab of a web browser inspector for the HTML element of interest. Then one can quickly determine whether WeasyPrint and a web browser think the style should be the same (and just differ in how they draw the style) or whether for some reason the style cascade has resulted in diff computed style between WeasyPrint and a web browser.

castedo avatar Dec 27 '22 16:12 castedo