Search code examples
cssflying-saucer

How to align text at the heading margin of a PDF, generated with Flying Saucer XML/CSS renderer


I'm generating a PDF with the Flying Saucer 9.1.16 XML/CSS renderer, in a Spring Boot app. All the CSS properties are working fine, except text-align at the page margins. This is an extract of my CSS:

@page {
    size: landscape;
    margin-top: 100px;
    border-bottom: solid gray;

    @top-right{
        content: element(header-top);
        padding-top: 15px;
        text-align-last: end !important;
    }; 

    @bottom-right{
        content: element(pagination);
        vertical-align: top;
        text-align: right !important;
    };
}

That's the HTML:

<div class="header-center text-primary">
     <h3 th:text="${ownerProperty}"></h3>
     <h4 th:text="${owner.ownerName}"></h4>
</div>

<div class="pagination text-muted">
     <small>
         <span  th:text="#{page} + '&nbsp;'"></span>
         <span id="pagenumber"></span>
         <span  th:text="#{of} + '&nbsp;'"></span>
         <span id="pagecount"></span>
     </small>
 </div>

I have tried those two approaches, without success: text-align-last: end !important; and text-align: right !important;

I'm using Thymeleaf as template engine, and apart from my CSS, the PDF has this other one bootstrap.min.css linked .


Solution

  • When converting HTML with css to pdf people often encounter to a problems. Here's how you should use the align attribute to fix the problem.

    <div align="right">
        Any text
    </div>
    <div align="center">
        Any text
    </div>