Alignment problem

[gilles...@gmail.com]

Hello,

I am using JSReport (JSRender and PhantomPDF) to render my template and create a PDF. Everything is working except that I have some issues with alignment.

I have a table in a div which is in a td of a table. For most of the row of the table, the alignment is perfect as expected, but few rows have bad alignement (in the red cercle of the screenshot) :

An other example :

Here is a part of my html code :

<td>

      <div style="border:2px solid #000000;border-bottom-right-radius: 10px;border-top-left-radius: 10px;height:90%;width:90%;">

          <table style="height:100%;width:100%;" >

               <tr>

                    <td style="text-align:center; height:100%;font-family: Arial;">{{:Unit}}</td>

                </tr>

          </table>

      </div>

 </td>

As you can see, the text and the border are smaller than others lines. I have tried everything,  table in td, div with span in td, table in div in td, div in td... I have always 2 or 3 issues in my 30 pages pdf.

Is it a bug or do I have done something wrong ?

Thanks for your help.

Gilles

[Jan Blaha]

Hi Gilles,

that will be tough one I am afraid....

1. Maybe adding this style would help?

body{

text-rendering: geometricPrecision;

}

2. jsreport currently uses phantomjs 1 and maybe this was fixed in phantomjs 2. You could try to download the latest executable, replace the one in jsreport and check the report again.

3. You could also try different recipe like

https://github.com/bjrmatos/jsreport-electron-pdf

https://github.com/jsreport/jsreport-wkhtmltopdf

[gilles...@gmail.com]

Hi Jan,

Thanks for your help. I have tried your solutions.

1) The issue remains with geometricPrecision.

2) I have the same issues with the last phantomjs V2.1

3) With wkhtmltopdf, the problem of alignment is the same. With electron-pdf, I have an empty page. I have tried those with your playground site.

Do you have other ideas ?

[Jan Blaha]

Can you save the template in playground so I can try to play with it? 

You can try to search phantomjs forums in the meantime.

https://github.com/ariya/phantomjs/search?p=1&q=text+align&type=Issues&utf8=%E2%9C%93

[gilles...@gmail.com]

Hi Jan,

You can find my template in playground at this adresse :

https://gillou.jsreportonline.net/#playground/E1xHt8vEte

The problem happens on page 11, 31 and 33.

Thank you for your help !

Gilles

[Jan Blaha]

Just ping back. I was trying to figure this out, but unfortunately didn't find a solution for it yet. 

[ssch...@figur8.com]

Watching this thread.. sounds like the same problem I have that I just emailed you about.

[gilles...@gmail.com]

Hi,

Thank you for your help. I hope you will find a solution soon. This is very annoying because the issue is completely random.

Gilles

[gilles...@gmail.com]

Hello Jan,

Do you still try to figure this out ?

Regards,

Gilles

[Jan Blaha]

Sorry for the missing comment on this issue.

I tried many variations of styles and element types but without luck. You did the same thing probably already as well. Unfortunately this cannot be fixed or troubleshooted in jsreport, it is rather phantomjs/webkit/qt issue and we don't have capacities or knowledge to troubleshoot these complex libraries. This could be changed in the near future after we extend the team, but not at this moment.

I'll try to find out why is the electron crashing for this particular template and maybe this gives us the desired results. If you try to print the html produced by jsreport with Chrome browser and it will work as expected, then the electron should be the solution.

You could try to prepare a minimum replicable example  and submit it to github phantomjs issue tracker, but I am afraid it won't get an attention. 

[Jan Blaha]

Hopefully good news!!

Notes about my further investigations on this topic:

1. We fixed jsreport-electron-pdf so now it works on this particular html. However it has some other layout issues like page breaks inside rows and also it doesn't support repeated table header on every page (https://bugs.webkit.org/show_bug.cgi?id=17205). After some time I rather decided to investigate deeper some workarounds for phantomjs.

2. I extracted minimal portion of code which is making troubles and it turned out that with even just simple table with one column the layout can be broken. See it here https://playground.jsreport.net/#playground/byY_RWD8Cx/2  . The source of the issue seems to be block element inside TD element.

3. I switched the block div into inline block. The problem went away, but the alignment of the text stopped to be in the middle. 

4. I tried various techniques to make the text in the middle and I seems to have a success with the one based on display: table-cell (http://vanseodesign.com/css/vertical-centering/)

The final code that seems to work 

<td style="height:100%;">
<div style="display: inline-block;

            border: 2px solid #000000;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            height:90%;
            width:90%;">

    <div style="display: table;
                height:100%;
                width:100%;">
                <div style="display: table-cell;
                            height:100%;
                            vertical-align:middle;
                            text-align: center">
                    {{:Unite}}
                </div>
    </div>
</div>
</td>

Please try it out and let me know if it works like expected or not.

[gilles...@gmail.com]

Hi,

It seems to work perfectly fine.

A big thank you for your help !!!!!!!!!!!!!!!

Best regards !

Gilles