i am working in HTML to PDF conversion using ItextPdf 5.5.1 and XMLWorker 5.5.1 in Java.
i managed to convert PDF document having height as that of HTML contents but contents in PDF looking bigger and having unwanted spaces between lines. These spaces are not there in HTML document.
private static void createPdf() {
try {
// getting HTML file from the path
InputStream is = new FileInputStream(new File("/Users/salman.nazir/Desktop/html/tq.txt"));
Date now = new Date();
File file = new File(("/Users/salman.nazir/Desktop"), "my_" + now.getTime() + ".pdf");
ElementList el = parseToElementList(is, new XMLWorkerFontProvider("resources/fonts/"));
// width of 204pt
float width = 204;
// height as 10000pt (which is much more than we'll ever need)
float max = 10000;
//column without a `writer`
ColumnText ct = new ColumnText(null);
ct.setSimpleColumn(new Rectangle(width, max));
for (Element e : el) {
// Add only HTML Body Element
// Avoiding IllegalArgumentException ("Format not found.")
if(!e.isContent()) {
System.out.print("META DATA");
}
else {
ct.addElement(e);
}
}
ct.go(true);
// Getting y posItion from simulation mode
float y = ct.getYLine();
Rectangle pagesize = new Rectangle(width, (max - y) + 25);
// Document with predefined page size
Document document = new Document(pagesize, 0, 0, 0, 0);
// Getting PDF Writer
PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(file));
document.open();
// Column with a writer
ct = new ColumnText(writer.getDirectContent());
ct.setSimpleColumn(pagesize);
for (Element e : el) {
// Add only HTML Body Element
// Avoiding IllegalArgumentException ("Format not found.")
if(!e.isContent()) {
System.out.print("META DATA");
}
else {
ct.addElement(e);
}
}
ct.go();
// closing the document
document.close();
showPDFPath(file.getAbsolutePath());
} catch (Exception e) {
e.printStackTrace();
}
}
is there any thing to set resolution anywhere in the code ? here is HTML code that is working fine in browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Lieferschein/Rechnung 27.03.17 11:18 2017/2432</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
#font-face {
font-family: "Roboto Mono";
src: url('RobotoMono-Bold.ttf') format('ttf'), url('RobotoMono-BoldItalic.ttf') format('ttf'), url('RobotoMono-Italic.ttf') format('ttf'), url('RobotoMono-Light.ttf') format('ttf'), url('RobotoMono-LightItalic.ttf') format('ttf'), url('RobotoMono-Medium.ttf') format('ttf'), url('RobotoMono-MediumItalic.ttf') format('ttf'), url('RobotoMono-Regular.ttf') format('ttf'), url('RobotoMono-Thin.ttf') format('ttf'), url('RobotoMono-ThinItalic.ttf') format('ttf');
}
body {
font-family: "Roboto Mono";
font-size: 2pt;
width: 100%;
margin: 0pt;
}
.documentType {
text-transform: uppercase;
}
h1 {
text-align: center;
font-size: 16pt;
font-weight: normal;
}
h2 {
text-align: center;
font-size: 10pt;
font-weight: normal;
margin: 0pt;
}
tr.manual_imprint td {
border-bottom:1pt dotted black;
height: 30pt;
vertical-align: bottom;
}
h3 {
text-align: center;
font-size: 13pt;
font-weight: normal;
}
h3.left {
font-size: 13pt;
text-align: left;
}
hr {
height: 1pt;
color: black;
background-color: black;
border: 0pt;
}
table {
width: 100%;
border: 0pt;
padding: 0pt;
border-spacing: 0pt;
}
tr.lineitem_head td {
border-bottom:1pt solid black;
}
tr.total td {
border-top:1pt solid black;
border-bottom:3pt double black;
font-size: 6pt;
font-weight: bold;
}
td {
overflow: hidden;
}
td.left {
max-width: 1px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td.left_indent {
text-align: left;
padding-left: 7pt;
}
td.right {
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.image-container {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>Tischlerei Helmut Meyer_676647</h1>
<h2>Winsener Landstrasse 22</h2>
<br></br>
<div class="image-container"><img src="http://www.iconsdb.com/icons/download/gray/android-6-512.jpg"/> </div> <h2>21423 Winsen / Luhe</h2>
<h2></h2>
<h2>Tel.: +4940441777</h2>
<h3 class="left documentType">Lieferschein/Rechnung</h3>
<table class="order">
<tr class="lineitem_head">
<td>Nr. 2017/2432</td>
<td class="right">27.03.17 11:18</td>
</tr>
</table>
<table class="lineitems">
<colgroup>
<col width="100%" />
<col width="0%" />
</colgroup>
<tbody>
<tr class="lineitem" data-net="3,78 €">
<td class="left">1x Filter Kalita</td>
<td class="right">4,50 €</td>
</tr>
<tr class="lineitem" data-net="3,03 €">
<td class="left">1x Latte</td>
<td class="right">3,60 €</td>
</tr>
<tr class="lineitem" data-net="7,38 €">
<td class="left">1x Skywalker/250g</td>
<td class="right">7,90 €</td>
</tr>
<tr class="lineitem" data-net="8,32 €">
<td class="left">1x Playground Love</td>
<td class="right">8,90 €</td>
</tr>
<tr class="lineitem" data-net="12,06 €">
<td class="left">1x Dschaggah Khan</td>
<td class="right">12,90 €</td>
</tr>
<tr class="lineitem" data-net="12,06 €">
<td class="left">1x King Kongo</td>
<td class="right">12,90 €</td>
</tr>
</tbody>
<tfoot>
<tr class="total">
<td class="left">Total</td>
<td class="right">50,70 €</td>
</tr>
<tr class="net">
<td class="left">Netto</td>
<td class="right">46,62 €</td>
</tr>
<tr class="tax">
<td class="left">7,00 VAT</td>
<td class="right">2,79 €</td>
</tr>
<tr class="tax">
<td class="left">19,00 VAT</td>
<td class="right">1,29 €</td>
</tr>
</tfoot>
</table>
<h3>Vielen Dank für Ihren Besuch!</h3>
<h2>St-Nr.: </h2>
</body>
</html>
Your issue is due to print resolution used in the parser which, by default is 72. You should design for that resolution instead of 100 or any other resolution (ie: If you'll be printing PDFs of letter size (8.5in x 11in), instead of designing for 850px by 1100px, you should do it on 612px x 792px.
Related
I've automated the sending of my e-mails in PHP using PHPMailer:
$mail->isSMTP();
$mail->SMTPAuth = true;
$mail->Host = $host; // verified with my host
$mail->Port = 465;
$mail->Username = 'mymail#example.com'; // verified with my host
$mail->Password = 'mypassword'; // verified with my host
$mail->SMTPSecure = 'ssl';
$mail->SMTPAutoTLS = true;
$mail->setFrom( 'mymail#example.com', 'This is the Header of the E-Mail' );
$mail->addAddress( 'recipientsmail#hisexample.com', '' );
$mail->isHTML( true );
$mail->Subject = 'This is the Subject of the E-Mail';
$mail->CharSet = 'UTF-8';
$mail->Body = 'HTML Content of the E-Mail';
$mail->send();
$mail->SmtpClose();
First, many emails sned via this script dropped into the SPAM of my clients. I checked back with the host, and they helped me to add an SPF record:
Type: TXT
TTL: 300
Value: "v=spf1 redirect=shared_host_mail_server"
This improved the non-spam delivery rate a lot, but especially for gmail, significant portion still drops into spam. An example of the source of an email that dropped into the email spam is:
Delivered-To: my.secret#gmail.com
Received: by 2002:a17:906:f12:0:0:0:0 with SMTP id secret;
Mon, 21 Mar 2022 06:58:32 -0700 (PDT)
X-Google-Smtp-Source: ABdhPJz6F29tChwOYHMaPAlJC0D9QTnj/JMhktHDZEuWjHBWU7x/ZdnkZS7MccoMwSxrMjrZec73
X-Received: by 2002:a5d:4ad2:0:b0:203:d56d:9c82 with SMTP id secret;
Mon, 21 Mar 2022 06:58:30 -0700 (PDT)
ARC-Seal: i=1; a=rsa-sha256; t=1647871110; cv=none;
d=google.com; s=arc-20160816;
b=K3FgBLtaiFZEsUAPiR2dBpquBEVEKZ2A82PhG+nCN7I7NRTxE8KDueotg3pndOeoQQ
IaCxIO8uYvkka1BmdSz8RuL0H/+OuXh+UMTpuy5tnhteTy3IR5Ub8vfl2eCl5AsCUj1R
ZLkysapUMphblFlZnSz4JObVz0jgN8P4uAE39ObN1YVpLZ9bT//BXuVjyYbKuHyhDUoP
AnZ+cjey7I4dyuvaaUWyrIMC7xEnLratGSN4mtIBWhEuWrMokXZtnbVZMHtNh+W7d5d1
HGmWzWdnWftGZJFI8e2fnNSRosRE0pwzblCNAkGd+PmJHOEDlq5pmaLla1I9yZpxZa3z
dx4w==
ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=google.com; s=arc-20160816;
h=content-transfer-encoding:mime-version:message-id:subject:from:to
:date;
bh=NCbhFSalLdDA2HAK57ps0Gy6VG+hTVJz6G8PW0XPkpo=;
b=TuIDSDjGMJOISTWTkb8iaOA1qJ3QYFLU6adhuG2kbyzpICBc0EC5MNvkGDWcEH9znp
UjYJ0Uug/79c6ZSzLaXuv3THIwuO7MJTuM5r7YXTbFvGnwNlO/Qc1xO/bo63rIN1ZS8y
aKRtpzjO0hMqjxlbltnZPcNice0DqZZcX0BlaU8kkgKFGw96vpBj9A0ZZbAyvmK2Lyws
oGYdKUmcOhosxXIxM8AAu1JVtM0bI2EncDo5UvwBIXVitvgcmORTfS1u3RBsKakk9tXI
bBCer6hxpjjn+hRxMOsdjqFdLa0EIIxnuW/z05Yh4CYSPBi1RZM0q/hWCMPvjDqBRFY5
8vVQ==
ARC-Authentication-Results: i=1; mx.google.com;
spf=pass (google.com: domain of secret.sender#example.com designates 2a00:d70:0:e::313 as permitted sender) smtp.mailfrom=secret.sender#example.com
Return-Path: <secret.sender#example.com>
Received: from host_out_mail_server (host_out_mail_server. [2a00:d70:0:e::313])
by mx.google.com with ESMTPS id secret
for <my.secret#gmail.com>
(version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256);
Mon, 21 Mar 2022 06:58:30 -0700 (PDT)
Received-SPF: pass (google.com: domain of secret.sender#example.com designates secret_ip as permitted sender) client-ip=secret_ip;
Authentication-Results: mx.google.com;
spf=pass (google.com: domain of secret.sender#example.com designates secret.sender#example.com as permitted sender) smtp.mailfrom=secret.sender#example.com
Received: from [10.0.2.46] (helo=host_mail_server) by host_out_mail_server with esmtps
(TLS1.3) tls TLS_AES_256_GCM_SHA384 (Exim 4.94.2 (FreeBSD)) (envelope-from <secret.sender#example.com>) id 1nWIYH-0000QW-8D for my.secret#gmail.com; Mon, 21 Mar 2022 14:58:29 +0100
Received: from other_host_server ([2a00:d70:0:b::2:10] helo=example.com) by host_mail_server with esmtpa (Exim 4.95 (FreeBSD)) (envelope-from <secret.sender#example.com>) id 1nWIYG-00010j-7w for my.secret#gmail.com; Mon, 21 Mar 2022 14:58:29 +0100
X-Authenticated-Sender-Id: secret.sender#example.com
Date: Mon, 21 Mar 2022 13:58:28 +0000
To: my.secret#gmail.com
From: Werbe - Anfrage <secret.sender#example.com>
Subject: Bekanntmachung
Message-ID: <secret#example.com>
X-Mailer: PHPMailer 6.5.0 (https://github.com/PHPMailer/PHPMailer)
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks"
Content-Transfer-Encoding: 8bit
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE html>
<html lang=3D"de" xmlns=3D"http://www.w3.org/1999/xhtml" xmlns:o=3D"urn:sch=
emas-microsoft-com:office:office">
<head>
<meta charset=3D"UTF-8">
<meta name=3D"viewport" content=3D"width=3Ddevice-width,initial-scale=3D1=
">
<meta name=3D"x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<style type=3D"text/css">
table {border-collapse:collapse;border:0;border-spacing:0;margin:0;=
}
div, td {padding:0;}
div {margin:0 !important;}
</style>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style type=3D"text/css">
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
}
/* ANDROID CENTER FIX */
div[style*=3D"margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style=3D"margin: 0 !important; padding: 0; !important; word-spacing: =
normal; background-color: #ffffff;" bgcolor=3D"#ffffff">
<div style=3D"display: none; font-size: 1px; color: #fefefe; line-height: 1=
px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; =
max-width: 0px; opacity: 0; overflow: hidden;">
This is the text of the preheader
</div>
<table role=3D"presentation" border=3D"0" cellpadding=3D"0" cellspacing=3D"=
0" width=3D"100%" bgcolor=3D"#d3d3d3" style=3D"background: #d3d3d3;">
<tr>
<td align=3D"center" valign=3D"top" width=3D"100%" style=3D"padding=
: 0;">
<!--[if (gte mso 9)|(IE)]>
<table role=3D"presentation" align=3D"center" border=3D"0" cell=
spacing=3D"0" cellpadding=3D"0" width=3D"600">
<tr>
<td align=3D"center" valign=3D"top" width=3D"600">
<![endif]-->
<table role=3D"presentation" align=3D"center" border=3D"0" cell=
padding=3D"0" cellspacing=3D"0" width=3D"100%" style=3D"max-width:600px;">
<tr>
<td align=3D"center" valign=3D"top" style=3D"padding: 0; border-left: 1=
px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid=
#000000;">
<img src=3D"https://example.com/mail_visual.png" wi=
dth=3D"600" border=3D"0" alt=3D"" style=3D"display: block; width: 100%; hei=
ght:auto;" class=3D"img-max"/>
</td>
</tr>
<tr>
<td align=3D"left" valign=3D"top" bgcolor=3D"#ffffff" style=3D"backgrou=
nd: #ffffff; padding: 15px 30px 30px 30px; font-family: Open Sans, Helvetic=
a, Arial, sans-serif; border-left: 1px solid #000000; border-right: 1px sol=
id #000000;">
<h4 style=3D"font-family: Open Sans, Helvetica, Arial, sans-serif; =
font-size: 17px; line-height: 23px; color: #000000;">Salutation</h4>
<p style=3D"color: #000000; font-family: Open Sans, Helvetica, Aria=
l, sans-serif; font-size: 16px; line-height: 22px; margin: 0;">Sample Context</p>
</td>
</tr>
<tr>
<td align=3D"center" valign=3D"top" bgcolor=3D"#13aff0" style=3D"backgr=
ound: #13aff0; padding: 10px 30px; font-family: Open Sans, Helvetica, Arial=
, sans-serif; border-left: 1px solid #000000; border-right: 1px solid #0000=
00; border-top: 1px solid #000000;">
<h5 style=3D"font-family: Open Sans, Helvetica, Arial, sans-serif; fo=
nt-size: 16px; line-height: 24px; color: #ffffff; margin:0 0 5px 0;">Domai=
n</h5>
<img src=3D"https://example.com/icons/first.png" width=3D"107" he=
ight=3D"40" border=3D"0" alt=3D"first" style=3D"display: bl=
ock; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;=
" />
<p style=3D"margin:7px 0 15px 0;"><a href=3D"mailto:secret.sender=
#example.com" target=3D"_blank" style=3D"text-decoration: none; color: #fff=
fff; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px;=
line-height: 16px;">secret.sender#example.com</a></p>
<p style=3D"margin:0 0 14px 0;"><a href=3D"https://example.com" targe=
t=3D"_blank" style=3D"text-decoration: none; color: #ffffff; font-family: O=
pen Sans, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 16px;=
">www.example.com</a></p>
<!--[if (gte mso 9)|(IE)]>
<table role=3D"presentation" align=3D"center" border=3D"0" cellspacin=
g=3D"0" cellpadding=3D"0" width=3D"157">
<tr>
<td align=3D"center" valign=3D"top" width=3D"157">
<![endif]-->
<table role=3D"presentation" align=3D"center" border=3D"0" cellpaddin=
g=3D"0" cellspacing=3D"0" width=3D"100%" style=3D"max-width:157px;">
<tr>
<td style=3D"padding:0;">
<a href=3D"https://www.instagram.com/companylink/" target=3D"_blank=
" style=3D"text-decoration: none;"><img src=3D"https://example.com/icons/In=
stagram.png" alt=3D"Link for Instagram Channel" width=3D"30" height=
=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 15px;">
<a href=3D"https://www.linkedin.com/company/name" target=3D"=
_blank" style=3D"text-decoration: none;"><img src=3D"https://example.com/ic=
ons/LinkedIn.png" alt=3D"Link for LinkedIn Channel" width=3D"30" he=
ight=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 15px;">
<a href=3D"https://twitter.com/companyname" target=3D"_blank" style=
=3D"text-decoration: none;"><img src=3D"https://example.com/icons/Twitter.p=
ng" alt=3D"Link for Twitter Channel" width=3D"30" height=3D"30" sty=
le=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 7px;">
<a href=3D"https://www.facebook.com/compnyname" ta=
rget=3D"_blank" style=3D"text-decoration: none;"><img src=3D"https://domai=
n.com/icons/Facebook.png" alt=3D"Link for Facebook Channel" width=
=3D"30" height=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks
Content-Type: application/octet-stream; name=QR_DE.pdf
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=QR_DE.pdf
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks--
I don't see the problem in this e-mail source extract / the reason why it drops into spam; does anyone of you?
I then checked back with the host about the particular gmail problem, and they recommended me to change my spf record to:
"v=spf1 include:_spf.google.com redirect=shared_host_mail_server"
But I feel that this is wrong / is only necessary if you want to send emails from your domain across gmails server's, or am I wrong?
Anyway, any suggestions on how I can improve the result? I don't use DKIM / DMARC so far, because my host does not support DKIM signing. Is it a good idea to try to implement DKIM via PHPMailer in this case / is it even possible to do so if the host server does not support DKIM natively?
Thanks in advance for any help!
P.S.: I did this test and the result was:
This goes for both mentioned versions of the SPF. However if I check in other tools as mail-tester or email on acid, the SPF is valid. Just FYI
Header not showing up for blackberry work ios and the wrapper isn't being respected for blackberry email. Padding is also not respected in blackberry email for buttons.
I've tried border, align, adding a wrapper div for the weird space after that appears around images. I've given up on responsiveness for those clients but I would like to just look cohesive.
html,
body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border: 0;
border-spacing: 0;
border-collapse: collapse
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
/* What it does: A work-around for email clients automatically linking certain text strings. */
/* iOS */
a[x-apple-data-detectors],
.unstyle-auto-detected-links a,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u + #body a, /* Gmail */
#MessageViewBody a /* Samsung Mail */
{
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
.im {
color: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app. */
/* Create one of these media queries for each additional viewport size you'd like to fix */
.email-container {
width: 100% !important;
}
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<!-- What it does: Helps DPI scaling in Outlook 2007-2013 -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons and tags */
.s-btn__primary:hover {
background: #0077CC !important;
border-color: #0077CC !important;
}
.s-btn__white:hover {
background: #EFF0F1 !important;
border-color: #EFF0F1 !important;
}
.s-btn__outlined:hover {
background: rgba(0,119,204,.05) !important;
color: #005999 !important;
}
.s-tag:hover,
.post-tag:hover {
border-color: #cee0ed !important;
background: #cee0ed !important;
}
/* What it does: Styles markdown links that we can't write inline CSS for. */
.has-markdown a,
.has-markdown a:visited {
color: #0077CC !important;
text-decoration: none !important;
}
/* What it does: Styles markdown code blocks that we can't write inline CSS for. */
code {
padding: 1px 5px;
background-color: #EFF0F1;
color: #242729;
font-size: 13px;
line-height: inherit;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
}
pre {
margin: 0 0 15px;
line-height: 17px;
background-color: #EFF0F1;
padding: 4px 8px;
border-radius: 3px;
overflow-x: auto;
}
pre code {
margin: 0 0 15px;
padding: 0;
line-height: 17px;
background-color: none;
}
/* What it does: Styles markdown blockquotes that we can't write inline CSS for. */
blockquote {
margin: 0 0 15px;
padding: 4px 10px;
background-color: #FFF8DC;
border-left: 2px solid #ffeb8e;
}
blockquote p {
padding: 4px 0;
margin: 0;
overflow-wrap: break-word;
}
/* What it does: Rounds corners in email clients that support it */
.bar {
border-radius: 5px;
}
.btr {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bbr {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#media screen and (max-width: 680px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* Hides things in small viewports. */
.hide-on-mobile {
display: none !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* What it does: Utility classes to reduce spacing for smaller viewports. */
.sm-p-none {padding: 0 !important;}
.sm-pt-none {padding-top: 0 !important;}
.sm-pb-none {padding-bottom: 0 !important;}
.sm-pr-none {padding-right: 0 !important;}
.sm-pl-none {padding-left: 0 !important;}
.sm-px-none {padding-left: 0 !important; padding-right: 0 !important;}
.sm-py-none {padding-top: 0 !important; padding-bottom: 0 !important;}
.sm-p {padding: 20px !important;}
.sm-pt {padding-top: 20px !important;}
.sm-pb {padding-bottom: 20px !important;}
.sm-pr {padding-right: 20px !important;}
.sm-pl {padding-left: 20px !important;}
.sm-px {padding-left: 20px !important; padding-right: 20px !important;}
.sm-py {padding-top: 20px !important; padding-bottom: 20px !important;}
.sm-mb {margin-bottom: 20px !important;}
/* What it does: Utility classes to kill border radius for smaller viewports. Used mainly on the email's main container(s). */
.bar,
.btr,
.bbr {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
<!-- Progressive Enhancements : END -->
</head>
<!--
The email background color is defined in three places, just below. If you change one, remember to change the others.
1. body tag: for most email clients
2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
3. mso conditional: For Windows 10 Mail
-->
<body width="100%" style="margin: 0; padding: 0 !important; background: #f3f3f5; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f3f3f5;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f3f3f5;">
<tr>
<td>
<![endif]-->
<!-- Visually Hidden Preview Text : BEGIN -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our
</div>
<!-- Visually Hidden Preview Text : END -->
<div class="email-container" style="max-width: 680px; margin: 0 auto;">
<!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 680px;">
<!-----------------------------
EMAIL BODY : BEGIN
------------------------------>
<!-- Primary Email Body : BEGIN -->
<tr>
<td style="padding: 30px; background-color: #ffffff;" class="sm-p btr">
<div dir="rtl" style="display: table; width: 100%; margin: 0 auto; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620">
<tr>
<td align="left" valign="top" width="128">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 680px; min-width:100px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<!-- White text : BEGIN -->
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #fff; text-align: left; padding-right: 0px;">
<p>
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our clients every day. Last week, we announced that we have reached an agreement to acquire Cleary Gull<br><br>
</p>
</td>
</tr>
<!-- White text : END -->
<!-- View in Browser : BEGIN -->
<tr>
<td style="padding-bottom: 10px; font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;">
<a style="color: #9199A1; text-decoration: underline;" href="http://++ViewHTMLCustom++ ">View in browser</a>
</td>
</tr>
<!-- View in Browser : END -->
<!-- Hero Image : BEGIN -->
<tr>
<td>
<a href="https://us.cibc.com/en/commercial.html">
<img src="https://sf-asset-manager.s3.amazonaws.com/96926/7/1524.png" alt="CIBC Connections" border="0" height="" width="100%" style="display: block; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44;">
</a>
</td>
</tr>
<!-- Hero Image : END -->
<br>
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #3C3F44; text-align: left; padding-right: 0px;">
<p style="margin: 0;" class="has-markdown">
<br>
<br>
++FirstName++,<br><br>
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our clients every day. Last week, we announced that we have reached an agreement to acquire Cleary Gull, a Milwaukee-based boutique investment banking firm specializing in middle market mergers and acquisitions, private capital placement and debt advisory.
<br>
<br>
Cleary Gull is a well-recognized middle market investment bank. The team has advised on over 200 transactions for clients like you and has expertise in manufacturing, business services, consumer/retail and technology.
<br>
<br>
We expect the transaction to close in the fall. Your relationship manager can answer any questions you have about Cleary Gull or our Capital Markets services for you in the meantime.
<br><br>
</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>
<!-- PRIMARY BODY : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td aria-hidden="true" height="10" style="font-size: 0px; line-height: 0px;">
I'm having trouble using PdfAWriter class to convert my HTML to PDF, the HTML gets converted normally until it finds a table or a list.
If I use PdfWriter class it works fine, but I need a PDF/A version.
Here is the code I'm using to make the conversion:
public static byte[] ConverterParaPdf(string html)
{
MemoryStream ms = new MemoryStream();
Document document = new iTextSharp.text.Document(PageSize.A4);
PdfAWriter writer = PdfAWriter.GetInstance(document, ms, PdfAConformanceLevel.PDF_A_1B);
//PdfWriter writer = PdfWriter.GetInstance(document, ms);
writer.PdfVersion = PdfWriter.VERSION_1_7;
writer.SetTagged();
writer.ViewerPreferences = PdfWriter.DisplayDocTitle;
writer.CloseStream = false;
writer.InitialLeading = 12.5f;
writer.CompressionLevel = PdfStream.BEST_COMPRESSION;
//writer.SetFullCompression(); //Causa erro no padrão PDF_A_1*
try
{
document.AddLanguage("pt-BR");
document.AddCreationDate();
writer.CreateXmpMetadata();
document.Open();
ICC_Profile icc = ICC_Profile.GetInstance((byte[])Properties.Mensagens.ResourceManager.GetObject("icc_profile"));
writer.SetOutputIntents("Custom", "", "http://www.color.org", "sRGB IEC61966-2.1", icc);
MemoryStream cssStream = new MemoryStream(Encoding.UTF8.GetBytes("html, html * { font-family: Arial, Arial, Arial!important; color: black!important; }"));
MemoryStream htmlStream = new MemoryStream(Encoding.UTF8.GetBytes(html));
XMLWorkerHelper.GetInstance().ParseXHtml(writer, document, htmlStream, cssStream);
document.Close();
writer.Close();
}
catch (Exception ex)
{
throw ex;
}
byte[] byteArray = ms.ToArray();
ms.Close();
return byteArray;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
font-family: Arial;
font-size: 15px;
background-color: white;
margin: 20px;
}
.imagem {
padding-bottom: 15px;
}
.titulo {
font-size: 23px;
font-weight: bold;
}
.barra-tipo-documento {
background-color: #3B454E;
width: 4px;
height: 40px;
float: left;
}
.tipo-documento {
padding-left: 16px;
padding-top: 13px;
float: left;
font-size: 17px;
color: #3B454E;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td class="imagem">
<img src="http://localhost:8090/Resources/img/logomarca-documentos.wmf" height="45" alt="TCE-ES"/>
</td>
</tr>
<tr>
<td>
<div class="barra-tipo-documento"> </div>
<div class="tipo-documento">Comunicação Interna</div>
</td>
</tr>
</table>
<br />
<br />
<div><strong>N.º: </strong>00747/2014-7</div>
<div><strong>Data: </strong>22/10/2014 18:05:10</div>
<div><strong>Assunto: </strong>teste</div>
<div><strong>De: </strong>NCD</div>
<div><strong>Para: </strong>NCD</div>
<div></div>
<div><strong>Anexos: </strong>12252/2014-9, 12253/2014-3</div>
<br />
<div><p> gerqg r</p>
<p>g </p>
<ol>
<li>eqrg geqr</li>
<li>g er</li>
<li>g</li>
<li>qe r</li>
<li>geqr</li>
</ol>
<p>g eqrgqergqerg</p>
<p> geqr geqrg</p>
</div>
</div>
</body>
</html>
Image:
http://postimg.org/image/9utepiza1/
I'm using itextsharp/itextsharp.pdfa/itextsharp.xmlworker/itextsharp.xtra version 5.5.3.0.
If there is another way of doing it, please tell me, I even tried using HtmlWorker which is obsolete.
Implemented this on our site about a month ago and it was working perfectly. Today, suddenly, I am getting this error on all pages that have the auto complete. I created a blank page with nothing but the example code copy pasted from Google's Docs, and I still get the error. Yet on Google's site, the example works.
The error is:
ReferenceError: V is not defined
...,function(a,b){V("places_impl",N(this,function(){this.Sa.getDetails(a,b)}))});G....
Here is the code, straight from Google:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]
</script>
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</body>
</html>
On Google's example page, there is an error relating to a variable "Tk", but it the example still works. Whatever this V is, it is killing all my code. Any help?
Though you haven't mentioned which browser you are using and whether you use Firebug, here's what worked for me:
Initially, I thought Google updated their Maps JS which introduced this bug. However, after further digging around and testing in other browsers, I finally realised that this issue is caused by Firebug 2.0. Firebug got automatically updated to v2.0 on my computer, thus resulting in the error. Downgrading Firebug resolves the issue.
I have the following table:
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse">
<tr>
<td class="tr-l-t">
</td>
<td class="tr-t">
</td>
<td class="tr-r-t">
</td>
</tr>
<tr>
<td class="tr-l">
</td>
<td class="control-panel">
</td>
<td class="tr-r">
</td>
</tr>
<tr>
<td class="tr-l-b">
</td>
<td class="tr-b">
</td>
<td class="tr-r-b">
</td>
</tr>
...and CSS
.tr-l-t
{
background: url("../Images/tr_l_t.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-l-b
{
background: url("../Images/tr_l_b.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-r-t
{
background: url("../Images/tr_r_t.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-r-b
{
background: url("../Images/tr_r_b.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-t
{
background: transparent url("../Images/tr_t.png") repeat scroll 0 0;
height: 6px;
}
.tr-l
{
background: transparent url("../Images/tr_l.png") repeat scroll 0 0;
}
.tr-r
{
background: transparent url("../Images/tr_r.png") repeat scroll 0 0;
}
.tr-b
{
background: transparent url("../Images/tr_b.png") repeat scroll 0 0;
height: 6px;
}
.control-panel
{
background-color: #151515;
width: 300px;
height: 30px;
}
Both look good in IE7/8, FF, Chrome and Safari (Windows and Mac OS) browsers. However, in Safari for Ipod / Iphone / Ipad white stripes appear in between td tags. I've tried adding border:0 none, padding:0px, margin: 0px, but with no success.
Do you have any ideas on how to fix it?
margin-bottom: -2px; //on one of the TD elements
This worked for me, but in my case I was joining two TDs with a solid white color.
Not sure if this will be usable in every case.
Set the viewport using a meta tag in the template of the page. When the scale is at "1" the tables apear okay. When zooming in or out OR even setting the initial zoom anything other than 1, you get the gaps. That's what I'm working on at the moment.
reg,
MW