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.
Here is the rendering from development:
Here is the rendering from production:
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 pdf.css.scss
.pdf-body {
background-color: white;
p {
font-size: 12pt;
line-height: 20.5pt;
.underline {
border-bottom: 1pt solid;
}
}
h1 {
margin-top: 0;
font-size: 24pt;
}
h3 {
font-size: 14.25pt;
}
.code {
position: absolute;
top: 23pt;
right: 20pt;
}
.header {
border-bottom: 1pt solid;
}
.content {
.line {
height:30pt;
border-bottom: 1pt solid;
display:block;
}
ul {
list-style-type: none;
height:112pt;
li {
font-size: 12pt;
display: block;
float: left;
height: 22.5pt;
line-height: 17pt;
list-style: none;
margin-right: 20pt;
width:100%;
div {
display: block;
float: left;
border:1pt solid;
width: 15pt;
height: 15pt;
margin-right: 10pt;
}
}
}
ul.horizontal {
height:30pt;
li {
width:auto;
}
}
ul.horizontal-fixed {
height:30pt;
li {
width:250pt;
}
}
}
}
Here is the HTML output (generated from same source as PDF):
<!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>
wkhtmltopdf can (and will) use system fonts to render content through its headless wekbkit browser.
So your issue is really an issue of differing environments in development and production.
If you have some control over your server, you might try installing freetype and fontconfig packages to get extra fonts on your server, or serving your fonts in your stylesheets as OTF files like this:
# in application.css.erb
@font-face {
font-family: 'OpenSansRegular';
src: url('<%= font_url('OpenSans.otf') %>');
font-weight: normal;
font-style: normal;
}
and telling the stylesheet to use that:
body {
font-family: 'OpenSansRegular';
font-size: 13px;
}
If you don't have the font in OTF, here's a service to convert them.
来源：https://stackoverflow.com/questions/26694543/wicked-pdf-font-size-too-large-in-production