Log in / Register

Forum › How do I...?

PDF with inline styles in HTML is not working properly

neelima_kaja
Hello,

I am trying to produce the PDF from a html that has inline styles. But the PDF is not showing the correct fonts.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us">
<head>
<title>Internal Communications - Item - Internal Communications</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="index,follow" />
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" vlink="#660066"
alink="#003366" link="#003366" text="#000000">
<table cellpadding="0" cellspacing="0" border="0" width="750" style="font-family: sans-serif, Arial, Helvetica;
font-size: 12px; line-height: 16px;">
<!-- START LOGO AREA -->
<tr valign="top" bgcolor="#9a918c">
<td width="30" height="20">&nbsp;</td>
<td width="600">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="20">&nbsp;</td>
</tr>
<tr valign="top" bgcolor="#9a918c">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align="right" valign="middle" style="color: #000000; font-size: 12px; line-height: 12px;">
March 10, 2010</td>
<td>
</td>
</tr>
<tr valign="top">
<td colspan="4" bgcolor="#9a918c" height="4">
&nbsp;</td>
</tr>
<!-- END LOGO AREA -->
<!-- START YELLOW RULE -->
<tr valign="top">
<td colspan="4" bgcolor="#ffcc00" height="4">
&nbsp;</td>
</tr>
<!-- END YELLOW RULE -->
<!-- START TITLE AREA -->
<tr valign="top">
<td colspan="4" bgcolor="#ffcc00" height="20">
&nbsp;</td>
</tr>
<tr valign="top" bgcolor="#ffcc00">
<td>
</td>
<td colspan="2" style="color: #000000; font-size: 30px; line-height: 30px;">
<!-- MAIN TITLE -->
Headline - Where in the world are we going these days?9876543210987654321
<!-- SUB TITLE -->
<p style="color: #000000; font-size: 16px; line-height: 16px; margin-top: 6px; margin-bottom: 5px;">
Subhead - Lorem ipsum dolor sit amet, consectetur adipiscing elit cras amet</p>
</td>
<td>
</td>
</tr>
<tr valign="top">
<td colspan="4" bgcolor="#ffcc00" height="20">&nbsp;</td>
</tr>
<!-- END TITLE AREA -->
<!-- SPACER -->
<tr valign="top">
<td colspan="4" height="30">&nbsp;</td>
</tr>
<!-- SRART CONTENT -->
<tr valign="top">
<td>
<!-- Left gutter -->
</td>
<td colspan="2">
<h1 style="color: #f27f1a; font-weight: 500; font-size: 16px; line-height: 18px;
margin-top: 0px; margin-bottom: 11px;">
<span style="color: #c41200;">Body Content</span></h1>
<span style="color: #000000;"><span style="color: #888888;">Sub head</span></span>
<br />
<div style="float: right; background: #ffffff; width: 134pt; margin: 5pt 0pt 5pt 0pt;
display: inline-block;">
<div style="float: right; background: #ebe9e8; padding: 5pt 10pt 0pt 10pt; margin: 0pt 0pt 0pt 0pt;
width: 100pt; border-radius: 10pt;">
<p style="margin-top: 0px; margin-bottom: 8px;">
Registration will be closing soon.</p>
<p style="margin-top: 0px; margin-bottom: 8px;">
this is a test</p>
</div>
</div>
<p style="margin-top: 0px; margin-bottom: 8px;">
Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit cras amet. Lorem
ipsum dolor sit amet, consectetur adipiscing elit cras amet.Lorem ipsum dolor sit
amet, consectetur adipiscing elit cras amet. Paragraph - Lorem ipsum dolor sit amet,
consectetur adipiscing elit cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing
elit cras amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit cras amet.
Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit cras amet. Lorem
ipsum dolor sit amet, consectetur adipiscing elit cras amet.Lorem ipsum dolor sit
amet, consectetur adipiscing elit cras amet.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" height="20">&nbsp;</td>
</tr>
</table>
<h1 style="color: #f27f1a; font-weight: 500; font-size: 16px; line-height: 18px;
margin-top: 0px; margin-bottom: 11px;">
testing the line break</h1>
<p style="margin-top: 0px; margin-bottom: 8px;">
new paragraph tesint spacing</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif;
font-size: 12px; line-height: 16px; margin-top: 0px; margin-bottom: 8px;">
<tr>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" width="10">
1.</td>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit cras amet.Lorem ipsum dolor
sit amet, consectetur adipiscing elit cras amet.Lorem ipsum dolor sit amet, consectetur
adipiscing elit cras amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit
cras amet.</td>
</tr>
<tr>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" width="10">
2.</td>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit cras amet.Lorem ipsum dolor
sit amet, consectetur adipiscing elit cras amet.Lorem ipsum dolor sit amet, consectetur
adipiscing elit cras amet.</td>
</tr>
<tr>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" width="10">
3.</td>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit cras amet.Lorem ipsum dolor
sit amet, consectetur adipiscing elit cras amet.Lorem ipsum dolor sit amet, consectetur
adipiscing elit cras amet.</td>
</tr>
</table>
<p style="margin-top: 0px; margin-bottom: 8px;">
testing the bullet spacing</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif;
font-size: 12px; line-height: 16px; margin-top: 0px; margin-bottom: 8px;">
<tr>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" style="font-size: 16px;" width="5">
<strong>&#8226;</strong></td>
<td valign="top" width="5">&nbsp;</td>
<td valign="top">
hksfjdhkjshdfjksdfk</td>
</tr>
<tr>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" style="font-size: 16px;" width="5">
<strong>&#8226;</strong></td>
<td valign="top" width="5">&nbsp;</td>
<td valign="top">
fkljsgjl;dfuoerhoa</td>
</tr>
<tr>
<td valign="top" width="5">&nbsp;</td>
<td valign="top" style="font-size: 16px;" width="5">
<strong>&#8226;</strong></td>
<td valign="top" width="5">&nbsp;</td>
<td valign="top">
ekl;rghouear'gh'ea</td>
</tr>
</table>
<p style="margin-top: 0px; margin-bottom: 8px;">
testing testing testing</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" height="20">&nbsp;</td>
</tr>
</table>
<h1 style="color: #f27f1a; font-weight: 500; font-size: 16px; line-height: 18px;
margin-top: 0px; margin-bottom: 11px;">
this testing</h1>
<p style="margin-top: 0px; margin-bottom: 8px;">
this is testing the line break</p>
<!-- Horizontal Rule -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" height="20">&nbsp;</td>
</tr>
<tr>
<td valign="top" height="1" bgcolor="#888888">&nbsp;</td>
</tr>
<tr>
<td valign="top" height="20">&nbsp;</td>
</tr>
</table>
<!-- Legal Text -->
<p style="font-size: 10px; line-height: 14px; margin-top: 0px; margin-bottom: 0px;">
Copyright stuff goes hereLorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque fermentum lectus et ipsum viverra malesuada. Ut auctor velit eu mi
blandit tincidunt. Sed fermentum magna et lorem luctus tempus dignissim nisi rhoncus.
Fusce luctus rutrum metus quis aliquet. Quisque id nisl et elit pretium rhoncus.
Nulla posuere, ipsum ornare elementum congue, enim tellus accumsan erat, a blandit
neque ipsum et leo. Cras arcu eros, pellentesque vitae facilisis eget, ultricies
ut sed1</p>
<p style="font-size: 10px; line-height: 14px; margin-top: 0px; margin-bottom: 0px;">
284682 83o45</p>
</td>
<td>
<!-- Right gutter -->
</td>
</tr>
<!-- END CONTENT -->
<!-- BOTTOM SPACER -->
<tr valign="top">
<td colspan="4" height="20">&nbsp;</td>
</tr>
</table>
</body>
</html>
jim_albright
I didn't see what you were getting that was incorrect. You might try reversing the order of your font list. Put the generic "sans serif" at the end.

Jim Albright
Wycliffe Bible Translators

mikeday
Which fonts are you expecting? Arial? Is it installed on the computer you are running Prince on?
neelima_kaja
I am expecting the Sans font, it is installed on my computer.
mikeday
In that case you will need to refer to it explicitly, or edit the fonts.css that comes with Prince so that the default sans-serif font family resolves to Sans instead of Arial.