I am looking for some direction for how to parse an email using nokogiri. Below is a sample email. I have reviewed this document http://nokogiri.org/tutorials/parsing_an_html_xml_document.html and hours of googleing. I am new at Ruby on Rails and am looking for a great example or detailed instructions. Thank you for your time.
MIME-Version: 1.0
Received: by 10.76.129.52; Mon, 30 Apr 2012 22:11:24 -0700 (PDT)
Date: Mon, 30 Apr 2012 22:11:24 -0700
Message-ID: <CAJq2oOCB-UzNEFGc+3TVBSEA0L9VPRrjevhdW_KK41C+AGDjJw#mail.gmail.com>
Subject: Customize Gmail with colors and themes
From: Gmail Team <mail-noreply#google.com>
To: parse email <parseemail2#gmail.com>
Content-Type: multipart/alternative; boundary=bcaec545501825242f04bef29a74
--bcaec545501825242f04bef29a74
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable
To spice up your inbox with colors and themes, check out the Themes tab
under Settings.
Customize Gmail =BB <https://mail.google.com/mail/#settings/themes>
Enjoy!
- The Gmail Team
[image: Themes thumbnails]
Please note that Themes are not available if you're using Internet Explorer
6.0. To take advantage of the latest Gmail features, please upgrade to a
fully supported
browser<http://support.google.com/mail/bin/answer.py?answer=3D6557&hl=3Den&=
utm_source=3Dwel-eml&utm_medium=3Deml&utm_campaign=3Den>
.
--bcaec545501825242f04bef29a74
Content-Type: text/html; charset=ISO-8859-1
<html>
<font face="Arial, Helvetica, sans-serif">
<p>To spice up your inbox with colors and themes, check out the Themes tab
under Settings.</p>
<table cellpadding="0" cellspacing="0">
<col style="width: 1px;"/>
<col/>
<col style="width: 1px;"/>
<tr>
<td></td>
<td height="1px" style="background-color: #ddd"></td>
<td></td>
</tr>
<tr>
<td style="background-color: #ddd"></td>
<td background="https://mail.google.com/mail/images/welcome-button-background.png"
style="background-color: #ddd; background-repeat: repeat-x;
padding: 10px; font-size: larger">
<a href="https://mail.google.com/mail/#settings/themes"
style="font-weight: bold; color: #000; text-decoration: none;
display: block;">
Customize Gmail ยป</a>
</td>
<td style="background-color: #ddd"></td>
</tr>
<tr>
<td></td>
<td height="1px" style="background-color: #ddd"></td>
<td></td>
</tr>
</table>
<p>Enjoy!</p>
<p>- The Gmail Team</p>
<img width="398" height="256" src="https://mail.google.com/mail/images/gmail_themes_2.png"
alt="Themes thumbnails" />
<p><font size="-2" color="#999">Please note that Themes are not available if
you're using Internet Explorer 6.0. To take advantage of the latest Gmail
features, please
<a href="http://support.google.com/mail/bin/answer.py?answer=6557&hl=en&utm_source=wel-
eml&utm_medium=eml&utm_campaign=en"><font color="#999">
upgrade to a fully supported browser</font></a>.</font></p>
</font>
</html>
--bcaec545501825242f04bef29a74--
Nokogiri works great for parsing HTML, but what you have here is an email. Try using TMail to first get the HTML section from the email, then you can use Nokogiri to parse that. Extrapolating from the TMail docs, you could do something like:
email = TMail::Mail.load('my_email.eml')
html_doc = Nokogiri::HTML(email.body)
Related
been struggling with this issue for a bit now and its really bugging me. Basically I have some email templates that I've been working on, they work fine on all clients (Litmus tests) except for Gmail specifically on iOS, Android works fine. The issue I'm having is that I want all my tables to me 100% width so they're all the same size, however gmail resizes the tables seemingly based off the content inside.
Heres a section of my code:
<tr class="module bg-white" style="background-color:#fff;color:#23282b">
<td>
<table class="container" cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%"
style="margin:0 auto;width:100%!important;max-width:600px!important">
<tr>
<td class="card-wrapper" align="center" valign="top" style="padding:0 15px 10px">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%">
<tr>
<td class="card-content bg-white border-lightgray"
style="padding:30px 20px 20px;background-color:#fff;color:#23282b;border:solid 1px #eee">
<h2
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 20px;font-size:18px;font-weight:700;line-height:22px">
YOUR DELIVERY DETAILS</h2>
<table class="delivery-details" cellpadding="0" cellspacing="0" border="0"
role="presentation" width="100%"
style="width:100%!important;max-width:600px!important">
<tr>
<td style="vertical-align:top;padding-right:8.5px;padding-left:0">
<h3
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
Delivery Service</h3>
</td>
<td style="vertical-align:top;padding-right:0">
<p
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
Next Day</p>
</td>
</tr>
<tr>
<td style="vertical-align:top;padding-right:8.5px;padding-left:0">
<h3
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
Delivery Address</h3>
</td>
<td style="vertical-align:top;padding-right:0">
<p
style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
Fake Name <br>Fake House <br>Fake Street
<br>Fake Town <br>UK <br>Fake Postcode</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
On my phone it looks like this:
Email Result on iOS 15 gmail
Is there any way to fix this? On every other client it expands to 100% no issue, thank you!
This sounds like this might be due to this bug, where Gmail adds a .munged class to <table>s and <td>s with a width:auto!important.
A solution would be to add a min-width:100% to each <table> and <td> potentially impacted.
The following HTML code displays a table which is a link to another site. That is, clicking on any pixel in the inner table (even white space) invokes the link. How do I code this in a Wiki using pipes syntax?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How To Convert A Wiki Table To A Link?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;">
<tr>
<td>
<a href="http://google.com">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="text-align: left;">M pigeons</td>
<td style="text-align: right;">000</td>
</tr>
<tr>
<td colspan="2">into N holes</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</body></html>
Pipes Syntax for this table-in-a-table looks like this (but without the ... )
{| border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;"
|
{| border="0" cellpadding="0" cellspacing="0" width="100%"
|-
|style="text-align: left;"|M pigeons
|style="text-align: right;"|000
|-
|colspan="2"|into N holes
|}
|}
How do I achieve the effect of the ... as in the HTML code above?
In a nutshell: you can do this with MediaWiki's external link syntax and a single-line HTML table, but it won't work if you have enabled HTML tidying.
MediaWiki links
In MediaWiki, the default settings are to disallow <a>...</a> tags in wikitext. This is for security reasons: if your wiki is publicly editable and <a>...</a> tags were allowed unchecked, anyone could add arbitrary JavaScript to your site, by adding links like <a onmouseover="alert(1)">foo</a>.
Instead, you add links to wikitext in two different ways. For internal links to other pages on the same wiki, you use [[Page name|display text]], which produces something like display text. For external links, you use [http://www.example.com Example], which produces a link like <a rel="nofollow" class="external text" href="http://www.example.com">Example</a>.
For what were probably Very Good Reasons At The Time, you can insert newline characters into the display text of internal links, but not external links. So this produces a valid link:
[[Page name|display
text]]
But this is just output as-is (with the URL itself linked):
[http://www.example.com display
text]
This will be important later on.
MediaWiki tables
While MediaWiki doesn't allow <a>...</a> tags in wikitext, it does allow a subset of HTML tags. This includes <table>, <tr>, <th> and <td>, which means that there are actually two ways to make tables in wikitext. The first is using wikitext table syntax, like you have done in your question:
{|
| Row 1, cell 1
| Row 1, cell 2
|-
| Row 2, cell 1
| Row 2, cell 2
|}
The second is by using HTML table elements:
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
For wikitext table syntax, you need to add newline characters for the table to render properly. However, for HTML table tags, you can do everything on one line, like <table><tr><td>Foo</td></tr></table>.
How to put tables in links
Putting a table inside a link in MediaWiki is a matter of putting the appropriate table syntax inside the appropriate link syntax. If your link is an internal link, you can choose either of the table syntaxes:
[[Page name|
{|
| Foo
|}
]]
[[Page name|
<table>
<tr>
<td>Foo</td>
</tr>
</table>
]]
These will both produce something like the following HTML:
<a href="/wiki/Page_name" class="mw-redirect" title="Page name">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
</a>
If your link is an external one, then because the external link syntax doesn't accept newline characters, you are limited to using HTML table tags.
[http://www.example.com <table><tr><td>Foo</td></tr></table>]
This will produce something like the following HTML:
<a rel="nofollow" class="external text" href="http://www.example.com">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
</a>
In your case, the following code should do what you are trying to do:
{| border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;"
| [http://www.google.com <table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="text-align: left;">M pigeons</td><td style="text-align: right;">000</td></tr><tr><td colspan="2">into N holes</td></tr></table>]
|}
Why you might not want to do this
While putting table tags inside links is allowed in HTML 5, it is not allowed in HTML 4.01 or XHTML 1.0. When I tested your HTML with the W3C validator, it gave me the error 'document type does not allow element "table" here'.
I believe that more recent versions of MediaWiki use HTML 5, so this might not be an error per se. However, if your wiki uses HTML tidying software, then tables inside links might be interpreted as broken HTML, and "fixed" for you. When I tested the above code on Wikipedia, which I think currently uses the HTML 5 tidying algorithm, the link was rendered before the table.
<table border="1" cellspacing="0" cellpadding="0" width="20%" style="border-collapse: collapse;">
<tr>
<td><a rel="nofollow" class="external text" href="http://www.google.com"></a>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="text-align: left;">M pigeons</td>
<td style="text-align: right;">000</td>
</tr>
<tr>
<td colspan="2">into N holes</td>
</tr>
</table>
</td>
</tr>
</table>
So, if you really want to do this, then go ahead, but beware that there may be pitfalls.
One last thing: if you want to use <a> tags in wikitext as-is, it is possible to enable the $wgRawHtml option. However, do not do this if your wiki is publicly editable! It will enable people to add random JavaScript to your site, which is Not A Good Idea.
I am creating an code for an email signature. The image is never left align on the email client on my iPhone and I have no idea why.
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" style="padding:0;margin:0;height:45px;width:230px;">
<ul style="padding:0;margin:0;height:45px;width:230px;">
<li style="text-align:left;margin:0;padding:0;height:45px;width:230px;">
<a target='_blank' href="https://www.mypage.com" style="margin:0;padding:0;width:230px;height:45px;">
<img style="padding:0;margin:0;" height="45px" width="230px" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</li>
</ul>
</td> ......
The problem is visualized on the image below:
Is there something I can do?
Thanks for helping me.
Best regards,
Yab86
If the linked <img> is the only thing in that <td>, can you remove the <ul>? Or is there another reason the list is there?
Email clients do weird things to margin and padding of block level elements like <ul> and<li>, sometimes even if they're reset with inline CSS. If you don't need a list here, why introduce the complexity?
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td height="45" width="230" align="left" style="padding:0;">
<a target='_blank' href="https://www.mypage.com">
<img align="left" style="display: block; margin:0;" height="45" width="230" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
</a>
</td>
</tr>
</table>
I'm trying to convert html to PDF using Rotativa I'm building the report as svg tag in html page and pass the generated view to Rotativa, it prints almost every thing except what's inside (which is here and ):
<svg style="display: block;margin-left: auto;margin-right: auto;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.2" height="1453" width="1040" y="0" x="0">
<switch>
<foreignObject x="49" y="215" width="943" height="500" class="s2_2" requiredExtensions="http://www.w3.org/1999/xhtml">
<p style="line-height: 25px;">
Any words here
</p>
<table cellspacing="0" cellpadding="0" class="styled-table">
<tbody><tr>
<th class="s3_2">Full Name</th>
<th class="s3_2">Source</th>
<th class="s3_2">Date of Birth</th>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
<tr>
<td>Caroline Ashcrof</td>
<td>Lorem ipsum dolor</td>
<td>dd/mm/yyyy</td>
</tr>
</tbody></table>
</foreignObject>
</switch>
I upgraded wkhtmltopdf.exe in rotativa to latest version (0.13) with no luck.
Is there a solution, workaround or even another module to convert html to PDF.
I don't know why but attribute "requiredExtensions" shouldn't be added when using Rotativa and want to convert to PDF
I have been trying to create an html email. When viewed on gmail it shows spaces between images. I have tried all possible that I could find on internet but did not work. Any help would be appreciated. Below is the code for the same.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#</title>
<style>
table {border-collapse:collapse;}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" align="center" border="0">
<tr bgcolor="#FFFFFF"><td align="center"> <font size="1" face="Arial" color="#666666">If you are unable to see this message Click Here </font></td></tr>
</table>
<table cellpadding="0" cellspacing="0" style="margin:0; padding:0; border:none;" align="center" width="600" border="0">
<tr><td><img src="images/bg-1.jpg" alt="Call: 9212612255" border="0" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-2.jpg" alt="We support all Microsoft windows desktop operating system all software and hardware, Networking peripherals and internet are also supported" border="0" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-3.jpg" border="0" alt="Computer Support By Microsoft Certified Engineers" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-4.jpg" border="0" alt="Support available for any desktop or laptop Branded or Non-Branded" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-5.jpg" border="0" alt="Visit Our Website" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-6.jpg" border="0" alt="For more details mail us at info#codeslab.com" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
<tr><td><img src="images/bg-7.jpg" border="0" alt="Computer Support By Microsoft Certified Engineers" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" width="600" border="0" style="margin:0; padding:0; border:none;">
<tr>
<td align="center">
<font size="1" face="Arial" color="#666666">To unsubscribe mailing list, click here</font>
</td>
</tr>
</table>
</body>
</html>
It is a common eDM technique to set all <img> tag with CSS display: block to solve this Gmail display issue. Also, remove vertical-align CSS.
Here's a good guide for HTML e-mail support:
http://www.campaignmonitor.com/css/
If you are setting img elements to display: block; then the vertical-align property does not work. So, try removing display: block from images only.
Also, keep in mind that once you make changes to this so it works in Gmail it may break in Outlook or Yahoo! or Hotmail etc. So, test thoroughly.