How to speed up css debuging for PDF cover

[catherine]

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]

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]

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]

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]

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]

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]

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]

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]

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