Font size in pdf is more than specified in css file when rendered through API



  • Hi,
    On rendering through API, with chrome-pdf recipe, I specify h1 tag in template and its style as font-size:26px but when I inspect the element through browser debug, the generated pdf shows font-size as 32.529 px. Reporting studio shows font-size as 26px. I am using object tag to embed the generated pdf.

    Thanks for helping me.

    In template <h1>Heading with h1 style</h1>   which changes to div tag in resultant pdf.
    
    <div style="left: 367.197px; top: 53.9214px; font-size: 32.529px; font-family: sans-serif; transform: scaleX(1.08986);">Heading with h1 style</div>
    
    where my style defined is 
    h1 {
        margin: 3px;
        font-size: 26px;
    }
    
    The generated pdf has the div tag wrapped under many classes and h1 tag became div tag. 
    <div id="viewer" class="pdfViewer">
    <div class="page" data-page-number="1" data-loaded="true" style="width: 1019px; height: 1319px;">
    <div class="canvasWrapper" style="width: 1019px; height: 1319px;">
        <canvas id="page1" width="1275" height="1650" style="width: 1020px; height: 1320px;"></canvas>
    </div>
    <div class="textLayer" style="width: 1019px; height: 1319px;">
      <div style="left: 367.197px; top: 53.9214px; font-size: 32.529px; font-family: sans-serif; transform: scaleX(1.08986);">Heading with h1 style</div>
    

  • administrators

    hi! hmm so far i'm having a hard time to understand how you can inspect styles of a embedded pdf in object tag. i mean, since pdf is a standalone file in theory it should not be affected by css of your page. are you sure that pdf results with bigger font size? maybe the object tag is somehow with zoom and making things more bigger than it is.

    i think to understand better the problem it will help if you can upload a simple version of your code in some github repository that i can download and run in my local machine i will try to check it. being able to see the same problem that you have in my computer will help to understand why the rendering behaves like that in your case.



  • If you include the pdf with just object tag and no embed within then you see the styles as I have put in my original post and I think that is my problem. I have pdf included using just object tag. If I change to embed tag then the fonts are good. Thanks for answering me.


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.