Solved the problem of <p> tags being given different padding or color by different clients, without having to copy-paste a string of CSS into every <p> tag in the templates.
:locals => { :body => capture(&block) }
)
end
:locals => { :body => capture(&block) }
)
end
+
+ def apply_inline_css(html)
+ html.gsub /<p>/, '<p style="color: black; margin: 0.75em 0">'
+ end
<meta charset="UTF-8"></meta>
</head>
<body style="padding: 0; margin: 0; font-size: 14px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #222">
<meta charset="UTF-8"></meta>
</head>
<body style="padding: 0; margin: 0; font-size: 14px; font-family: 'Helvetica Neue', Arial, sans-serif; color: #222">
<table style="background-color: #fff; color: #222; border: solid 1px #ccc; border-collapse: separate">
<tr>
<td style="text-align: left; padding: 0px 15px 5px 15px">
<table style="background-color: #fff; color: #222; border: solid 1px #ccc; border-collapse: separate">
<tr>
<td style="text-align: left; padding: 0px 15px 5px 15px">
+ <%= raw apply_inline_css(yield) %>
<table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px">
<tr>
<table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px">
<tr>
- <td style="width: 50px; vertical-align: top; padding: 5px 15px">
- <%# Some email clients (e.g. Yahoo as of 2017-01) remove the margin
- on <p> tags. Since the body itself always starts with a <p>, by
- wrapping the image here in a <p> as well, we ensure that they will at
- least always be aligned with each other. %>
- <p>
- <%= link_to(
- image_tag(
- attachments["avatar.png"].url,
- alt: @author,
- title: @author
- ),
- user_url(@author, :host => SERVER_URL),
- :target => "_blank"
- ) %>
- </p>
+ <td style="width: 50px; vertical-align: top; padding: 15px">
+ <%= link_to(
+ image_tag(
+ attachments["avatar.png"].url,
+ alt: @author,
+ title: @author,
+ width: 50,
+ height: 50
+ ),
+ user_url(@author, :host => SERVER_URL),
+ :target => "_blank"
+ ) %>
</td>
<td style="text-align: left; vertical-align: top; padding-right: 10px">
<%= body %>
</td>
<td style="text-align: left; vertical-align: top; padding-right: 10px">
<%= body %>