search

mileszs / wicked_pdf

PDF generator (from HTML) plugin for Ruby on Rails
http://www.mileszs.com/wicked-pdf-plugin
MIT License
3.54k stars 645 forks source link

Font sizing issue, even after changing from PX to PT #351

Open abrambailey opened 9 years ago

abrambailey commented 9 years ago

I am experiencing an issue where the font sizing for rendered PDFs is larger in production. Everything looks great on the PDF generated in development.

This is making it very difficult for me to format my document for the production server in development. Can you please take a look?

HTML Version: http://www.hearingtracker.com/tickets/170

PDF Download: http://www.hearingtracker.com/tickets/170.pdf

Here is my controller action:

  def show
    @ticket = Ticket.find(params[:id])
    respond_to do |format|
      format.html { render :layout => false }
      format.pdf do
        render  :pdf => "HearingTrackerTicket",
                :layout => false,
                :dpi => '300'
      end
    end
  end

Here is the HTML source: 

<!doctype html>
<html>
  <head>
    <meta charset='utf-8' />
      <style type='text/css'>.pdf-body{background-color:white}.pdf-body h1{margin-top:0;font-size:24pt}.pdf-body h3{font-size:14.25pt}.pdf-body .code{position:absolute;top:23pt;right:20pt}.pdf-body p{font-size:12pt;line-height:20.5pt}.pdf-body p .underline{border-bottom:1pt solid}.pdf-body .header{border-bottom:1pt solid}.pdf-body .content .line{height:30pt;border-bottom:1pt solid;display:block}.pdf-body .content ul{list-style-type:none;height:112pt}.pdf-body .content ul li{font-size:12pt;display:block;float:left;height:22.5pt;line-height:17pt;list-style:none;margin-right:20pt;width:100%}.pdf-body .content ul li div{display:block;float:left;border:1pt solid;width:15pt;height:15pt;margin-right:10pt}.pdf-body .content ul.horizontal{list-style-type:none;height:30pt}.pdf-body .content ul.horizontal li{display:block;float:left;list-style:none;margin-right:20pt;width:auto}.pdf-body .content ul.horizontal li div{display:block;float:left;border:1pt solid;margin-right:10pt}.pdf-body .content ul.horizontal-fixed{list-style-type:none;height:30pt}.pdf-body .content ul.horizontal-fixed li{display:block;float:left;list-style:none;margin-right:20pt;width:250pt}.pdf-body .content ul.horizontal-fixed li div{display:block;float:left;border:1pt solid;margin-right:10pt}
    </style>  
  </head>
  <body class="pdf-body">
    <div class="header">
      <h1>Hearing Tracker Survey</h1>
      <span class="code">Code: <strong>a9e78</strong></span>
      <p style="border-bottom:1px solid; padding-bottom:17px;">
        Thank you for taking the time to review your hearing aid(s) and hearing provider. Your responses will be made available to your hearing provider and to the public (anonymously). <strong>It is important that you answer these questions as honestly as possible.</strong> Your answers will help your provider to improve their practice and help provide valuable feedback to hearing aid manufacturers. For more information please visit <strong>hearingtracker.com</strong>
      </p>
      <p>
        <i>Please complete the included surveys and return to: </i>
      </p>
      <p>
      <strong>Hearing Tracker, Inc <br />
      PO Box 40702 <br />
      Austin, TX 78704</strong>
      </p>

    </div>
    <div class="content">
      <h3 class="section-header">
        Hearing Aid Outcome Survey
      </h3>
      <p style="margin-top:-10px;">
        <i>Place a check mark in <span class="underline">one box</span> per question.</i>
      </p>
      <div class="question">
        <p>
          1) How much does your hearing aid help you to hear speech in quiet environments?
        </p>
        <ul>
          <li><div></div>Vast improvement with the hearing aid(s)</li>
          <li><div></div>Good improvement with the hearing aid(s)</li>
          <li><div></div>Slight improvement with the hearing aid(s)</li>
          <li><div></div>No improvement with the hearing aid(s)</li>
          <li><div></div>I heard better without the hearing aid(s)</li>
        </ul>
      </div>
      <div class="question">
        <p>
          2) How much does your hearing aid help you to hear speech in noisy situations (restaurants, crowds, etc)?
        </p>
        <ul>
          <li><div></div>Vast improvement with the hearing aid(s)</li>
          <li><div></div>Good improvement with the hearing aid(s)</li>
          <li><div></div>Slight improvement with the hearing aid(s)</li>
          <li><div></div>No improvement with the hearing aid(s)</li>
          <li><div></div>I heard better without the hearing aid(s)</li>
        </ul>
      </div>
      <div class="question">
        <p>
          3) How much does your hearing aid help you to hear speech on the phone?
        </p>
        <ul>
          <li><div></div>Vast improvement with the hearing aid(s)</li>
          <li><div></div>Good improvement with the hearing aid(s)</li>
          <li><div></div>Slight improvement with the hearing aid(s)</li>
          <li><div></div>No improvement with the hearing aid(s)</li>
          <li><div></div>I heard better without the hearing aid(s)</li>
        </ul>
      </div>
      <div class="question">
        <p>
          4) How clear and natural does the hearing aid sound?
        </p>
        <ul>
          <li><div></div>Very clear and natural</li>
          <li><div></div>Somewhat clear and natural</li>
          <li><div></div>Clear or natural, but not both</li>
          <li><div></div>Neither clear nor natural</li>
          <li><div></div>The sound is unbearable</li>
        </ul>
      </div>
      <div class="question">
        <p>
          5) How much does your hearing aid improve your hearing for music?
        </p>
        <ul>
          <li><div></div>Vast improvement with the hearing aid(s)</li>
          <li><div></div>Good improvement with the hearing aid(s)</li>
          <li><div></div>Slight improvement with the hearing aid(s)</li>
          <li><div></div>No improvement with the hearing aid(s)</li>
          <li><div></div>I heard better without the hearing aid(s)</li>
        </ul>
      </div>
      <div class="question">
        <p>
          6) How comfortable is the hearing aid?
        </p>
        <ul>
          <li><div></div>I don't even notice the hearing aid in my ear</li>
          <li><div></div>I can feel the hearing aid in my ear, but it's very comfortable</li>
          <li><div></div>The hearing aid is slightly uncomfortable after a few hours</li>
          <li><div></div>The hearing aid is not comfortable, but I can tolerate it</li>
          <li><div></div>The hearing aid hurts my ear</li>
        </ul>
      </div>
      <div class="question">
        <p>
          7) How reliable is the hearing aid?
        </p>
        <ul>
          <li><div></div>I've had no problems, and expect none in the future</li>
          <li><div></div>I've had no problems, but anticipate there might be some in the future</li>
          <li><div></div>I've had some issues, but nothing I couldn't take care of myself</li>
          <li><div></div>I've had some issues with my hearing aid, but my provider has taken care of it in the clinic</li>
          <li><div></div>My hearing aid has been sent offsite for repair by my audiologist</li>
        </ul>
      </div>
      <div class="question">
        <p>
          8) Does the hearing aid do a good job of stopping unwanted feedback (buzzing and whistling)?
        </p>
        <ul>
          <li><div></div>I never hear feedback from my hearing aid</li>
          <li><div></div>My hearing aid creates feedback very rarely</li>
          <li><div></div>My hearing aid creates feedback occasionally</li>
          <li><div></div>My hearing aid creates feedback often</li>
          <li><div></div>My hearing aid creates feedback frequently</li>
        </ul>
      </div>
      <div class="question">
        <p>
          9) How much does the hearing aid improve your hearing?
        </p>
        <ul class="horizontal-fixed">
          <li><div></div>Vast improvement with the hearing aid(s)</li>
          <li><div></div>Good improvement with the hearing aid(s)</li>
          <li><div></div>Slight improvement with the hearing aid(s)</li>
          <li><div></div>No improvement with the hearing aid(s)</li>
          <li><div></div>The hearing aid hurts my ear</li>
        </ul>
      </div>
      <div class="question">
        <p style = "clear: both; padding-top: 20px;">
          10) How would you rate the value of your hearing aid?
        </p>
        <ul class="horizontal">
          <li><div></div>Excellent value</li>
          <li><div></div>Great value</li>
          <li><div></div>Good value</li>
          <li><div></div>Fair value</li>
          <li><div></div>Poor value</li>
        </ul>
      </div>
      <div class="written">
        <p>
          What would you tell others about your experience with your hearing aid(s)? Please DO NOT review your provider here.
        </p>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <p>
          More to say? Please continue on the back of this page, or on a separate sheet of paper.
        </p>
      </div>
      <h3 class="section-header">
        Provider Survey
      </h3>
      <div class="question">
        <p>
          The location was easy to access, pleasant, and professional
        </p>
        <ul class="horizontal">
          <li><div></div>Strongly Agree</li>
          <li><div></div>Agree</li>
          <li><div></div>Neutral</li>
          <li><div></div>Disagree</li>
          <li><div></div>Strongly Disagree</li>
        </ul>
      </div>
      <div class="question">
        <p>
          I was seen in a reasonable amount of time
        </p>
        <ul class="horizontal">
          <li><div></div>Strongly Agree</li>
          <li><div></div>Agree</li>
          <li><div></div>Neutral</li>
          <li><div></div>Disagree</li>
          <li><div></div>Strongly Disagree</li>
        </ul>
      </div>
      <div class="question">
        <p>
          My provider listened to me
        </p>
        <ul class="horizontal">
          <li><div></div>Strongly Agree</li>
          <li><div></div>Agree</li>
          <li><div></div>Neutral</li>
          <li><div></div>Disagree</li>
          <li><div></div>Strongly Disagree</li>
        </ul>
      </div>
      <div class="question">
        <p>
          My provider was knowledgable
        </p>
        <ul class="horizontal">
          <li><div></div>Strongly Agree</li>
          <li><div></div>Agree</li>
          <li><div></div>Neutral</li>
          <li><div></div>Disagree</li>
          <li><div></div>Strongly Disagree</li>
        </ul>
      </div>
      <div class="question">
        <p>
          My provider adequately explained procedures and results
        </p>
        <ul class="horizontal">
          <li><div></div>Strongly Agree</li>
          <li><div></div>Agree</li>
          <li><div></div>Neutral</li>
          <li><div></div>Disagree</li>
          <li><div></div>Strongly Disagree</li>
        </ul>
      </div>
      <div class="question">
        <p>
          My provider solved or offered solutions for my hearing needs
        </p>
        <ul class="horizontal">
          <li><div></div>Strongly Agree</li>
          <li><div></div>Agree</li>
          <li><div></div>Neutral</li>
          <li><div></div>Disagree</li>
          <li><div></div>Strongly Disagree</li>
        </ul>
      </div>
      <div class="question">
        <p>
          I am satisfied with the overall experience
        </p>
        <ul>
          <li><div></div>Strongly Agree</li>
          <li><div></div>Agree</li>
          <li><div></div>Neutral</li>
          <li><div></div>Disagree</li>
          <li><div></div>Strongly Disagree</li>
        </ul>
      </div>
      <div class="question">
        <p>
          I would recommend my provider to a family member or friend
        </p>
        <ul class="horizontal">
          <li><div></div>Strongly Agree</li>
          <li><div></div>Agree</li>
          <li><div></div>Neutral</li>
          <li><div></div>Disagree</li>
          <li><div></div>Strongly Disagree</li>
        </ul>
      </div>

      <div class="written">
        <p>
          Please provide a short review of your hearing professional.
        </p>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <p>
          More to say? Please continue on the back of this page, or on a separate sheet of paper.
        </p>
      </div>
    </div>
  </body>
</html>
abrambailey commented 9 years ago

I have added some photos for you to see the issue more easily. See http://stackoverflow.com/questions/26694543/wicked-pdf-font-size-too-large-in-production