Page 1 of 1

How to speed up css debuging for PDF cover

Posted: Tue Mar 17, 2020 11:33 am
by 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?

Re: How to speed up css debuging for PDF cover

Posted: Tue Mar 17, 2020 5:28 pm
by chrispitude
catherine wrote: Tue Mar 17, 2020 11:33 amFor 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?

Re: How to speed up css debuging for PDF cover

Posted: Tue Mar 17, 2020 6:42 pm
by 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

Re: How to speed up css debuging for PDF cover

Posted: Tue Mar 17, 2020 6:52 pm
by 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?

Re: How to speed up css debuging for PDF cover

Posted: Wed Mar 18, 2020 3:52 am
by 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.

Re: How to speed up css debuging for PDF cover

Posted: Wed Mar 18, 2020 10:10 am
by 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

Re: How to speed up css debuging for PDF cover

Posted: Wed Mar 18, 2020 4:57 pm
by 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.

Re: How to speed up css debuging for PDF cover

Posted: Wed Mar 18, 2020 5:50 pm
by 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

Re: How to speed up css debuging for PDF cover

Posted: Thu Mar 19, 2020 3:17 am
by catherine
Lol...
Thanks, Julien
Indeed, it is faster to generate a PDF file..