RTL digest emails

Allows RTL digest emails. 
For this to work, I have done the following major additions:
1- adding appropriate direction to body and tables
2- making text-direction compatible with rtl
3- making float, padding, and margin tags compatible with rtl
This commit is contained in:
hosnas 2017-06-16 15:20:20 +04:30 committed by GitHub
parent 77e886ec90
commit 4d62f41fbc
1 changed files with 60 additions and 59 deletions

View File

@ -6,7 +6,8 @@
<title></title>
</head>
<body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%">
<body dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;width:100%">
<!--[if mso]>
<style type="text/css">
@ -19,7 +20,7 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</span>
<%- if I18n.t('user_notifications.digest.custom.html.header').present? %>
<table style="width:100%;border-spacing:0;padding:0;">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="width:100%;border-spacing:0;padding:0;">
<tr>
<td style="padding:0;">
<%= raw(t 'user_notifications.digest.custom.html.header') %>
@ -27,7 +28,7 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</tr>
</table>
<%- else %>
<table style="background-color:#<%= @header_bgcolor -%>;width:100%;">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="background-color:#<%= @header_bgcolor -%>;width:100%;">
<tr>
<td align="center" style="text-align: center;padding: 20px 0; font-family:Helvetica,Arial,sans-serif;">
@ -44,11 +45,11 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</table>
<%- end %>
<table class="body" style="width:100%;background:#f3f3f3;padding:0;border-spacing:0;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;vertical-align:top;">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="body" style="width:100%;background:#f3f3f3;padding:0;border-spacing:0;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;vertical-align:top;">
<tr>
<td class="side-spacer" style="width:5%;vertical-align:top;padding:0;">
<div class="with-accent-colors">
<table class="spacer" style="border-spacing:0;padding:0;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="spacer" style="border-spacing:0;padding:0;width:100%">
<tbody>
<tr>
<td height="400px" style="height:400px;border-collapse:collapse!important;margin:0;mso-line-height-rule:exactly;padding:0;">&nbsp;</td>
@ -58,17 +59,17 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</div>
</td>
<td style="vertical-align:top;padding:0;font-family:Helvetica,Arial,sans-serif;">
<table align="center" class="with-accent-colors" style="border-spacing:0;margin:0;padding:0;text-align:inherit;vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" align="center" class="with-accent-colors" style="border-spacing:0;margin:0;padding:0;text-align:inherit;vertical-align:top;width:100%">
<tbody>
<tr>
<td style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:normal">
<td style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;word-wrap:normal">
<br/>
<center class="with-accent-colors" style="font-size:22px;font-weight:400;"><%=t 'user_notifications.digest.since_last_visit' %></center>
<table style="table-layout:fixed;margin:10px 0 20px 0;padding:0;vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="table-layout:fixed;margin:10px 0 20px 0;padding:0;vertical-align:top;width:100%">
<tbody>
<tr>
<%- @counts.each do |count| -%>
@ -94,22 +95,22 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</tr>
</tbody>
</table>
<table align="center" style="border-spacing:0;background:#fefefe;margin:0;padding:0;text-align:center;vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" align="center" style="border-spacing:0;background:#fefefe;margin:0;padding:0;text-align:center;vertical-align:top;width:100%">
<tbody>
<tr>
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:normal">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;word-wrap:normal">
<% @popular_topics.each_with_index do |t, i| %>
<!-- Beginning of Popular Topic -->
<table style="width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="width:100%">
<tbody>
<tr>
<td style="margin:0;padding:0 0 0 16px;text-align:left;vertical-align:top;">
<td style="margin:0;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
<p style="color:#8f8f8f;line-height:1.3;margin: 20px 0 0 0;">
<%= category_badge(t.category, inline_style: true, absolute_url: true) %>
</p>
</td>
<td style="margin:0;padding: 0 16px 0 0;text-align:right;vertical-align:top;">
<td style="margin:0;padding:<%= rtl? ? '0 0 0 16px' : '0 16px 0 0' %>;text-align:<%= rtl? ? 'left' : 'right' %>;vertical-align:top;">
<p class="text-right" style="color:#8f8f8f;line-height:1.3;margin:20px 0 0 0;font-weight:400;">
<%= short_date(t.created_at) %>
</p>
@ -118,10 +119,10 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</tbody>
</table>
<table style="vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="vertical-align:top;width:100%">
<tbody>
<tr>
<td style="padding: 0 8px 8px 16px; text-align:left; width:100%;">
<td style="padding:<%= rtl? ? '0 16px 8px 8px' : '0 8px 8px 16px' %>; text-align:<%= rtl? ? 'right' : 'left' %>; width:100%;">
<h2 style="font-size:18px;font-weight:400;line-height:1.3;margin:0;padding:0;word-wrap:normal">
<a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none">
<strong><%= gsub_emoji_to_unicode(t.title.truncate(60, separator: /\s/)) -%></strong>
@ -135,13 +136,13 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</tbody>
</table>
<table style="padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="padding:0;position:relative;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;width:100%">
<tbody>
<tr>
<td style="color:#0a0a0a;line-height:1.3;margin:0 auto;padding:0 0 0 16px;width:50px;">
<td style="color:#0a0a0a;line-height:1.3;margin:0 auto;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;width:50px;">
<img src="<%= t.user.small_avatar_url -%>" style="border-radius:50%;clear:both;display:block;float:none;height:50px;width:50px;margin:0;max-width:100%;outline:0;text-align:center;text-decoration:none;" align="center">
</td>
<td style="color:#0a0a0a;padding:0 16px 0 8px;text-align:left;vertical-align:top;">
<td style="color:#0a0a0a;padding:<%= rtl? ? '0 8px 0 16px' : '0 16px 0 8px' %>;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
<% if t.user %>
<% if SiteSetting.enable_names? && t.user.name.present? && t.user.name.downcase != t.user.username.downcase %>
<h6 style="color:inherit;line-height:1.3;margin:0;padding:0;font-weight: normal;font-size:16px;"><%= t.user.name -%></h6>
@ -150,8 +151,8 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
<% end %>
</td>
<%- if show_image_with_url(t.image_url) && t.featured_link.nil? && !(@excerpts[t.first_post&.id]||"").include?(t.image_url) -%>
<td style="margin:0;padding:0 16px 0 8px;text-align:right;" align="right">
<img src="<%= url_for_email(t.image_url) -%>" height="64" style="margin:auto;max-height:64px;max-width:100%;outline:0;text-align:right;text-decoration:none;">
<td style="margin:0;padding:<%= rtl? ? '0 8px 0 16px' : '0 16px 0 8px' %>;text-align:<%= rtl? ? 'left' : 'right' %>;" align="right">
<img src="<%= url_for_email(t.image_url) -%>" height="64" style="margin:auto;max-height:64px;max-width:100%;outline:0;text-align:<%= rtl? ? 'left' : 'right' %>;text-decoration:none;">
</td>
<%- end -%>
</tr>
@ -159,10 +160,10 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</table>
<%- if t.first_post.present? && !t.first_post.user_deleted %>
<table style="border-bottom:1px solid #f3f3f3;padding:0;text-align:left;vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="border-bottom:1px solid #f3f3f3;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;width:100%">
<tbody>
<tr>
<td class="post-excerpt" style="color:#0a0a0a;font-size:14px;padding:0 16px 0 16px;text-align:left;width:100%;font-weight:normal;">
<td class="post-excerpt" style="color:#0a0a0a;font-size:14px;padding:0 16px 0 16px;text-align:<%= rtl? ? 'right' : 'left' %>;width:100%;font-weight:normal;">
<%= @excerpts[t.first_post.id] %>
</td>
</tr>
@ -170,25 +171,25 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</table>
<%- end %>
<table style="padding:0;text-align:left;vertical-align:top;width:100%; margin-top:20px;">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;width:100%; margin-top:20px;">
<tbody>
<tr>
<td style="padding:0 8px 16px 16px;text-align:left;white-space:nowrap;vertical-align:top;width:75px">
<img src="<%= email_image_url 'heart.png' -%>" style="clear:both;display:inline-block;float:left;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto">
<p style="color:#8f8f8f;float:left;line-height:1.3;margin:0 5px 10px 5px;padding:0;text-align:left;font-weight:400;"><%= t.like_count -%></p>
<td style="padding:<%= rtl? ? '0 16px 16px 8px' : '0 8px 16px 16px' %>;text-align:<%= rtl? ? 'right' : 'left' %>;white-space:nowrap;vertical-align:top;width:75px">
<img src="<%= email_image_url 'heart.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto">
<p style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;font-weight:400;"><%= t.like_count -%></p>
</td>
<td style="padding:0 8px 16px 8px;text-align:left;white-space:nowrap;vertical-align:top;width:75px">
<img src="<%= email_image_url 'comment.png' -%>" style="clear:none;display:inline-block;float:left;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto">
<p style="color:#8f8f8f;float:left;line-height:1.3;margin:0 5px 10px 5px;padding:0;text-align:left;font-weight:400;"><%= t.posts_count - 1 -%></p>
<td style="padding:0 8px 16px 8px;text-align:<%= rtl? ? 'right' : 'left' %>;white-space:nowrap;vertical-align:top;width:75px">
<img src="<%= email_image_url 'comment.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto">
<p style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;font-weight:400;"><%= t.posts_count - 1 -%></p>
</td>
<td style="padding:0 8px 16px 8px;text-align:left;white-space:nowrap;vertical-align:top;">
<td style="padding:0 8px 16px 8px;text-align:<%= rtl? ? 'right' : 'left' %>;white-space:nowrap;vertical-align:top;">
<% t.posters_summary.each do |ps| %>
<% if ps.user %>
<img src="<%= ps.user.small_avatar_url -%>" style="border-radius:50%;clear:both;display:inline-block;height:20px;width:20px;outline:0;text-decoration:none;">
<% end %>
<% end %>
</td>
<td style="line-height:1.3;padding:0 16px 0 8px;text-align:right;white-space:nowrap;vertical-align:top;">
<td style="line-height:1.3;padding:<%= rtl? ? '0 8px 0 16px' : '0 16px 0 8px' %>;text-align:<%= rtl? ? 'left' : 'right' %>;white-space:nowrap;vertical-align:top;">
<a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" class="with-accent-colors" style="width:100%;text-decoration:none;padding:8px 16px;white-space:nowrap;">
<%=t 'user_notifications.digest.join_the_discussion' %>
</a>
@ -197,7 +198,7 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</tbody>
</table>
<div style="background-color:#f3f3f3;">
<table class="spacer" style="padding:0;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="spacer" style="padding:0;width:100%">
<tbody><tr><td height="20px" style="border-collapse:collapse!important;line-height:20px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr></tbody>
</table>
</div>
@ -217,7 +218,7 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
<td class="side-spacer" style="width:5%;vertical-align:top;padding:0;">
<!-- Background that goes down part-way behind content -->
<div class="with-accent-colors">
<table class="spacer" style="border-spacing:0;padding:0;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="spacer" style="border-spacing:0;padding:0;width:100%">
<tbody>
<tr>
<td height="400px" style="height:400px;border-collapse:collapse!important;margin:0;mso-line-height-rule:exactly;padding:0;">&nbsp;</td>
@ -235,38 +236,38 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
<%=t 'user_notifications.digest.popular_posts' %>
</center>
<table class="body" style="width:100%;background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;text-align:left;vertical-align:top;">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="body" style="width:100%;background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
<tr>
<td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td>
<td align="center" valign="top" style="width:90%;border-collapse:collapse!important;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;">
<td align="center" valign="top" style="width:90%;border-collapse:collapse!important;line-height:1.3;margin:0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
<% @popular_posts.each do |post| %>
<!-- Beginning of Popular Post -->
<table style="width:100%;background:#fefefe;border-spacing:0;padding:0;text-align:left;vertical-align:top;">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="width:100%;background:#fefefe;border-spacing:0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
<tbody>
<tr>
<td class="post-excerpt" style="color:#0a0a0a;font-size:14px;font-weight:200;padding:16px;text-align:left;width:100%;">
<td class="post-excerpt" style="color:#0a0a0a;font-size:14px;font-weight:200;padding:16px;text-align:<%= rtl? ? 'right' : 'left' %>;width:100%;">
<%= email_excerpt(post.cooked) %>
</td>
</tr>
</tbody>
</table>
<table style="border-spacing:0;background-color:#f3f3f3;padding:0;text-align:left;vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="border-spacing:0;background-color:#f3f3f3;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;width:100%">
<tbody>
<tr>
<td style="border-spacing:0;padding:0;color:#0a0a0a;line-height:1.3;padding:0 0 0 65px;text-align:left;">
<td style="border-spacing:0;padding:0;color:#0a0a0a;line-height:1.3;padding:<%= rtl? ? '0 65px 0 0' : '0 0 0 65px' %>;text-align:<%= rtl? ? 'right' : 'left' %>;">
<img src="<%= email_image_url 'right_triangle.png' -%>" style="clear:both;display:block;height:20px;width:20px;outline:0;text-decoration:none;">
</td>
</tr>
</tbody>
</table>
<table style="background-color:#f3f3f3;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="background-color:#f3f3f3;padding:0;position:relative;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;width:100%">
<tbody>
<tr>
<td style="padding:0 8px 8px 8px;text-align:left;width:50px;vertical-align:top;">
<td style="padding:0 8px 8px 8px;text-align:<%= rtl? ? 'right' : 'left' %>;width:50px;vertical-align:top;">
<img src="<%= post.user.small_avatar_url -%>" style="border-radius:50%;clear:both;display:block;height:50px;width:50px;outline:0;">
</td>
<td style="color:#0a0a0a;line-height:1.3;padding:0 8px 8px 8px;vertical-align:top;">
@ -277,9 +278,9 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
<p style="color:inherit;font-size:14px;font-weight:400;line-height:1.3;margin:0 0 8px 0;padding:0;word-wrap:normal;"><%= post.user.username -%></p>
<% end %>
</td>
<td style="color:#0a0a0a;line-height:1.3;padding:0 8px 8px 8px;text-align:right;">
<p style="color:#8f8f8f;line-height:1.3;margin:0 0 10px 0;padding:0;text-align:right;">
<a href="<%= post.full_url -%>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none"><%= gsub_emoji_to_unicode(post.topic.title.truncate(60, separator: /\s/)) -%></a>
<td style="color:#0a0a0a;line-height:1.3;padding:0 8px 8px 8px;text-align:<%= rtl? ? 'left' : 'right' %>;">
<p style="color:#8f8f8f;line-height:1.3;margin:0 0 10px 0;padding:0;text-align:<%= rtl? ? 'left' : 'right' %>;">
<a href="<%= post.full_url -%>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;text-decoration:none"><%= gsub_emoji_to_unicode(post.topic.title.truncate(60, separator: /\s/)) -%></a>
</p>
<a href="<%= post.full_url -%>" class="with-accent-colors" style="width:100%;text-decoration:none;padding:8px 16px;white-space: nowrap;">
<%=t 'user_notifications.digest.join_the_discussion' %>
@ -290,8 +291,8 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
</table>
<div style="background-color:#f3f3f3">
<table class="spacer" style="padding:0;text-align:left;vertical-align:top;width:100%">
<tbody><tr><td height="40" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:normal">&#xA0;</td></tr></tbody>
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="spacer" style="padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;width:100%">
<tbody><tr><td height="40" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;word-wrap:normal">&#xA0;</td></tr></tbody>
</table>
</div>
<!-- End of Popular Post -->
@ -311,43 +312,43 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
<% if @other_new_for_you.present? %>
<center style="color:#0a0a0a;background:#f3f3f3;font-size:22px;font-weight:400;padding-bottom: 8px;font-family:Helvetica,Arial,sans-serif;"><%=t 'user_notifications.digest.more_new' %></center>
<table class="body" style="width:100%;background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;text-align:left;vertical-align:top;">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" class="body" style="width:100%;background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;">
<tr>
<td class="side-spacer" style="width:5%;padding:0;">&nbsp;</td>
<td align="center" valign="top" style="width:90%;border-collapse:collapse!important;margin:0;padding:0;">
<table style="padding:0;text-align:left;vertical-align:top;width:100%">
<table dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;vertical-align:top;width:100%">
<tbody>
<% @other_new_for_you.each do |t| %>
<!-- Begin new topic -->
<tr style="vertical-align:top;">
<td style="padding:8px;text-align:left;">
<td style="padding:8px;text-align:<%= rtl? ? 'right' : 'left' %>;">
<a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none">
<strong><%= gsub_emoji_to_unicode(t.title.truncate(60, separator: /\s/)) -%></strong>
</a>
<%- if SiteSetting.show_topic_featured_link_in_digest && t.featured_link %>
<a class='topic-featured-link' href='<%= t.featured_link %>'><%= raw topic_featured_link_domain(t.featured_link) %></a>
<%- end %>
<p style="color:#0a0a0a;line-height:1.3;margin:0 0 10px 0;padding:0;text-align:left">
<p style="color:#0a0a0a;line-height:1.3;margin:0 0 10px 0;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>">
<%= category_badge(t.category, inline_style: true, absolute_url: true) %>
</p>
</td>
<td style="padding:8px;text-align:left;">
<td style="padding:8px;text-align:<%= rtl? ? 'right' : 'left' %>;">
<% t.posters_summary[0,2].each do |ps| %>
<% if ps.user %>
<img src="<%= ps.user.small_avatar_url -%>" style="height:20px;width:20px;margin:0 5px 5px 0;border-radius:50%;clear:both;display:inline-block;outline:0;text-decoration:none;">
<img src="<%= ps.user.small_avatar_url -%>" style="height:20px;width:20px;margin:<%= rtl? ? '0 0 5px 5px' : '0 5px 5px 0' %>;border-radius:50%;clear:both;display:inline-block;outline:0;text-decoration:none;">
<% end %>
<% end %>
</td>
<td style="padding:8px;text-align:left;">
<img src="<%= email_image_url 'heart.png' -%>" style="clear:both;display:inline-block;float:left;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto">
<p style="color:#8f8f8f;float:left;line-height:1.3;margin:0 5px 10px 5px;padding:0;text-align:left;font-weight:400;"><%= t.like_count -%></p>
<td style="padding:8px;text-align:<%= rtl? ? 'right' : 'left' %>;">
<img src="<%= email_image_url 'heart.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto">
<p style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;font-weight:400;"><%= t.like_count -%></p>
</td>
<td style="padding:8px;text-align:left;">
<img src="<%= email_image_url 'comment.png' -%>" style="clear:none;display:inline-block;float:left;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto">
<p style="color:#8f8f8f;float:left;line-height:1.3;margin:0 5px 10px 5px;padding:0;text-align:left;font-weight:400;"><%= t.posts_count - 1 -%></p>
<td style="padding:8px;text-align:<%= rtl? ? 'right' : 'left' %>;">
<img src="<%= email_image_url 'comment.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;margin:0;max-width:100%;opacity:.4;outline:0;text-decoration:none;width:auto">
<p style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;text-align:<%= rtl? ? 'right' : 'left' %>;font-weight:400;"><%= t.posts_count - 1 -%></p>
</td>
</tr>
@ -415,7 +416,7 @@ body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !impo
<%= digest_custom_html("above_footer") %>
<div class='footer'>
<div dir="<%= rtl? ? 'rtl' : 'ltr' %>" class='footer'>
<%=raw(t 'user_notifications.digest.unsubscribe',
site_link: html_site_link(@anchor_color),
unsubscribe_link: link_to(t('user_notifications.digest.click_here'), email_unsubscribe_url(host: Discourse.base_url_no_prefix, key: @unsubscribe_key), {:style=>"color: ##{@anchor_color}"})) %>