How to speed up css debuging for PDF cover

catherine
Posts: 133
Joined: Fri Nov 10, 2017 8:16 am

How to speed up css debuging for PDF cover

Post by catherine » Tue Mar 17, 2020 11:33 am

Hi,
I generate a PDF file based on HTML5&CSS, and get a merged html file.
When I debug the html file, the PDF cover is not displayed.

However, I need to debug the elements styles on the pdf cover, such as the font size, line height, etc.

For now, I need to change css file then generate PDF file to check the style.
I do this process many times to get the style that I want, it wastes my time.
Any way to improve this process?

chrispitude
Posts: 181
Joined: Thu May 02, 2019 2:32 pm

Re: How to speed up css debuging for PDF cover

Post by chrispitude » Tue Mar 17, 2020 5:28 pm

catherine wrote:
Tue Mar 17, 2020 11:33 am
For now, I need to change css file then generate PDF file to check the style.
I do this process many times to get the style that I want, it wastes my time.
Any way to improve this process?
Are you running on an empty (or mostly empty) book so it's only publishing the cover?

julien_lacour
Posts: 84
Joined: Wed Oct 16, 2019 3:47 pm

Re: How to speed up css debuging for PDF cover

Post by julien_lacour » Tue Mar 17, 2020 6:42 pm

Hello,

You can debug "partially" the cover by inspecting the following HTML elements:

Code: Select all

<div class="- front-page/front-page front-page">
	<div class="- front-page/front-page-title front-page-title">
		...
	</div>
</div>
You should find there your selectors regarding font-size, line-height, etc...

Regards,
Julien

chrispitude
Posts: 181
Joined: Thu May 02, 2019 2:32 pm

Re: How to speed up css debuging for PDF cover

Post by chrispitude » Tue Mar 17, 2020 6:52 pm

Hi Julien,

How does this work? Do I create an empty HTML file with just these tags, then apply my book CSS and see how it renders? Or is there a file somewhere that I open and view in Oxygen?

catherine
Posts: 133
Joined: Fri Nov 10, 2017 8:16 am

Re: How to speed up css debuging for PDF cover

Post by catherine » Wed Mar 18, 2020 3:52 am

Hi, Julien
No, I generate a dita map to get a PDF file, everything is displayed excluding the pdf cover in the merged html file.

In this case, I cannot debug the styles for my PDF cover directly by the merged html file.

That is why I need to change css file for the PDF file again and again to see if the style matches my needs.

julien_lacour
Posts: 84
Joined: Wed Oct 16, 2019 3:47 pm

Re: How to speed up css debuging for PDF cover

Post by julien_lacour » Wed Mar 18, 2020 10:10 am

Hello,

The HTML elements I indicated in my previous post are at the beginning of the .merged.html file (on publication title).
If your CSS customization use the following selectors

Code: Select all

    *[class~="front-page/front-page"] {
        /* Some properties */
    }

    *[class~="front-page/front-page-title"] {
        /* Some properties */
    }
You should be able to see them inside the merged file (and each time you will modify the CSS, the html content will reflect the modification after refreshing the page).

But if you declare a @page rule for the front-page you will not be able to see them inside the HTML file.
Anyway, if you want to see the font-size, line-height, etc... and you are using a @page rule just copy the properties from the @page element inside the selector declaring the page property, here's an example:

Code: Select all

    *[class~="front-page/front-page"] {
        page: my-front-page;
    }
    
    @page my-front-page {    	
        font-size: 12pt;
    }
Become the following:

Code: Select all

    *[class~="front-page/front-page"] {
        font-size: 12pt;
    }
Note: The solution for @page rule does not work on the content set on @top-left, @bottom-right, etc... properties. If you want to debug these properties you may create a ditamap without topics and transform it using your customization (as Chris suggested).

Regards,
Julien

catherine
Posts: 133
Joined: Fri Nov 10, 2017 8:16 am

Re: How to speed up css debuging for PDF cover

Post by catherine » Wed Mar 18, 2020 4:57 pm

Thanks for your help, Julien.
I add a png page as the PDF cover, and set the background-with:100%;
I copy the css codes from "@page front-page" to *[class~="front-page/front-page"] , and delete the @page front-page codes.

But the generated PDF file could not be opened.

julien_lacour
Posts: 84
Joined: Wed Oct 16, 2019 3:47 pm

Re: How to speed up css debuging for PDF cover

Post by julien_lacour » Wed Mar 18, 2020 5:50 pm

Hello Catherine,

For background images unfortunately the @page rule cannot be avoided.
You should get back to the simple ditamap transformation for this case.

Regards,
Julien

catherine
Posts: 133
Joined: Fri Nov 10, 2017 8:16 am

Re: How to speed up css debuging for PDF cover

Post by catherine » Thu Mar 19, 2020 3:17 am

Lol...
Thanks, Julien
Indeed, it is faster to generate a PDF file..

Post Reply