I am rendering a html email template and i have a pre-wrapped text i want to show.
Using white-space: pre-wrap; works perfectly everywhere (gmail, yahoo...) except Outlook. I tried using <pre>/<pre> this also works perfectly everywhere (gmail, yahoo, even Outlook desktop app), but it doesn't work in Outlook web app.
Any suggestions what should i try next?
Code example 1:
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
<div style="white-space: pre-wrap; text-align: left; font-weight: bold" th:text="${content}"></div>
</td>
Code example 2:
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
<pre style="text-align: left; font-weight: bold" th:text="${content}"></pre>
</td>
Best way forward probably is then to use Outlook conditional code, i.e.:
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
<!--[if !mso]><!-- --><div style="white-space: pre-wrap; text-align: left; font-weight: bold" th:text="${content}"></div><!--<![endif]-->
<!--[if mso]><!-- --><pre style="text-align: left; font-weight: bold" th:text="${content}"></pre><!--<![endif]-->
</td>
Related
I have email template with simple css. I send email to user but it show css code to user and template is not working correctly.
I test by sent email to myself on Gmail It work correctly.
and problem is I don't have enough data what kind of email client that they use.
If it possible I want to avoid using email with text only.
First image is what user get.
Second image is what I test and got on gmail
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* 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) {
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> We're thrilled to have you here! Get ready to dive into your new account. </div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#2194F4" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#2194F4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">We're excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 30px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#2194F4">
Confirm Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#65F489">
View Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">Cheers,<br> Team</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
When you send an email like this you will want a fallback. The person receiving the email can set the email up so he will see text only. You want to create a multipart message. This might help you out, so both types get content. Multipart MIME Email Guide or here: How do I send a multipart email (both HTML and plain text)
It looks like you're forwarding the email - emails will get reformatted according to the native styles of the specific email application. There's very little we can do to control that. If you want to test what it will look like, you need to send to them directly. You can use something like https://putsmail.com/ if you need.
However, not sure why the #font-face declaration are showing on forward. They shouldn't be. I suggest removing them from the #media screen { ... } - you don't need that. Just have #font-face { ... } declarations on their own.
I have a emailTemplate that I want to have a light background.
But Outlook in darkMode messes the css up. Sure there is a switch in outlook to "turn the ligths on" but I want to have white background all the time because everyone that gets the email will not know how to do that switch.
I have tried to add bgcolor to the table tag and the td tag and added backgroundColor to inline style, but without success.
I have also tried to force the button to have the same yellow color in darkmode, but it switches no matter what.
I have also tried to search the internet but cant anything that covers outlook darkmode.
https://litmus.com/blog/email-designers-next-challenge-apple-dark-mode
<table bgcolor="#ffffff" style="width:70%;" align="center" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td bgcolor="#ffffff">
<tr>
<td align="center" style="
display: inline-block;
background-color: #ffdd00;
border-radius: 3px;
padding: 18px 0px;
width: 100%;
text-align: center;
cursor: pointer;
">
<a href="https://my.hogia.se" target="_blank" style="
text-decoration: none;
text-transform: uppercase;
color: #000;
font-family: Lato, Trebuchet, Verdana, Tahoma, Lucida Sans Unicode, Arial;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.0625em;">Kom igång</a>
</td>
</tr>
StandardMode:
DarkdMode:
Outlook365 and Outlook.com dark mode can't be overridden because Microsoft adds !important inline to every background color it finds including the system. I think they added this in June 2021.
thanks for helping me first of all.
I'm trying to format this email, but the link can not be put inside the container.
I do not know what properties I can use.
In html it works very well but when I see it in a mail client it does not work
<table width="650" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
[imagen_1]
</td>
</tr>
<tr>
<td width="650" bgcolor="#FFFFFF" style="padding-right: 30px; padding-bottom: 20px; padding-left: 30px">
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #5c6670; text-align: left;">
[texto_1]
</p><br>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
<a style="text-decoration:none; margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold"
href="https://{{ $_SERVER['HTTP_HOST'] }}/validating-email/{{$data->token}}">
CLICK HERE IN THE FOLLOWING LINK <br>TO CONFIRM YOUR MAIL
</a>
</p>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
and start enjoying great benefits.
</p>
</td>
</tr>
<tr>
<td>
<table width="550" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
<a rel="nofollow" style="widh: 500px; word-break: break-all;">
https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
So it looks in the emails
I already try a thousand things and not one works.
you have some idea of how I can do so that the link is set and does not remain in a single line
<table width="650" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
[imagen_1]
</td>
</tr>
<tr>
<td width="650" bgcolor="#FFFFFF" style="padding-right: 30px; padding-bottom: 20px; padding-left: 30px">
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #5c6670; text-align: left;">
[texto_1]
</p><br>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
<a style="text-decoration:none; margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold"
href="https://{{ $_SERVER['HTTP_HOST'] }}/validating-email/{{$data->token}}">
CLICK HERE IN THE FOLLOWING LINK <br>TO CONFIRM YOUR MAIL
</a>
</p>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
and start enjoying great benefits.
</p>
</td>
</tr>
<tr>
<td>
<table width="550" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
<a rel="nofollow" style="widh: 500px;">
https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Are you asking how to make an href work?
This is how a basic href works:
stackoverflow.com
In your case it should look like this:
<a href="https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0="
target="_blank" rel="nofollow" style="widh: 500px; word-break: break-all;">CLICK HERE IN THE FOLLOWING LINK<br />
TO CONFIRM YOUR MAIL<br />
and start enjoying great benefits.</a>
Or do this if you only want the url to link to the website:
<a href="https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0="
target="_blank">https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=</a>
All of this can be on one line. I added the breaks to make it easier to see the code.
Good luck.
I'm setting up a new email signature for my client which needs to be responsive .
I tried out one layout which includes div , tables etc which works out good on desktops but not on mobiles .
Below is one such sample but the email appears as same is desktop & mobile with the cells / divs shifting one under the other .
As a part of my research , i tried using this email boilerplate which ended up in the same way . - https://github.com/seanpowell/Email-Boilerplate
<!--[if gte mso 9]>
<table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email {qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}
</div>
<!--[if gte mso 9]>
</td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong>
</div>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
https://jsfiddle.net/623y57p1/1/
Have a look at the demo i made . This is responsive in browsers , but not in outlook .
I created a sample code that works with Outlook. The two columns of this email footer will display side-by-side if the viewing window is wider than 580px. If it goes below that width, it will revert to two stacked columns. You can set the width breakpoint by adjusting <td width="290">.
<table align="center" role="contentinfo" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
<tr>
<td width="290" style="direction: ltr !important; display: inline-block;">
Column A
</td>
<td width="290" style="direction: ltr !important; display: inline-block;">
Column B
</td>
</tr>
</table>
Please keep in mind a few caveats:
Outlook 2007-2019 does not support responsive email. There is no support for #media queries.
The width for the table must be set to <table width="100%">.
The width for the table cells to 290 because the maximum width for an Outlook viewing window is 580px.
You can turn off <table border="1"> It's on for demonstration purposes.
<table role="contentinfo"> supports screen readers. Please leave it to help visually impaired users know about the structure of your email message.
https://jsfiddle.net/wallyglenn/w0s4xmc0/60529/
Good luck.
I have a custom typekit font used in an email signature with Georgia used as the fallback font.
On a mobile device, it will not fallback on Georgia. However, Georgia will load if I remove the custom font.
Am I missing anything?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Signature</title>
<style type="text/css">
#import url("https://use.typekit.net/rzf8bdg.css");
body {
font-family: 'Bressay', Georgia, sans-serif;
font-weight: normal;
font-size: 12px;
text-align: left;
}
td {}
</style>
</head>
<body>
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 320px;">
<tr>
<td width="31.25%"><img src="https://fertilityconsultants.ca/wp-content/uploads/2018/11/cfc-logo-es.jpg" alt="CFC logo"/></td>
<td valign="center" style="padding-left: 10px;">
<strong style="font-size: 16px;">First Last Name</strong><br/>
<em style="font-size:12px; margin-bottom:6px;">Job position</em><br/>
<strong style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #66905f;">T</strong> (555) 555.5555 <strong style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #66905f;">EXT</strong> 555<br/>
<strong style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #66905f;">C</strong> (555) 555.5555<br/>
</td>
</tr>
</table>
</div>
</body>
</html>
Bressay is never going to work in Outlook or Gmail, since they don't work with web fonts like Google Fonts. I used your code and could not really tell if it was working for me or if it was Georgia, a web safe font that looks darn close. Here are some suggestions to make sure you always display a serif font for First Last Name.
In the head change your body declaration to remove the sans-serif backup:
body, table.body, td {
font-family: Bressay, Georgia, serif;
font-weight: normal;
font-size: 12px;
text-align: left;
}
Adobe does not use single quotes around the font name, try it without.
In addition to the body tag above, I also added table.body and td to the css. This will work with the parts where you wanted a sans-serif font instead.
I added the font-family tag directly to the strong tag in the signature.:
<strong style="font-family: bressay, Georgia, serif; font-size: 16px;">First Last Name</strong>
After doing this, I got a serif font in Gmail and Android.
I tested this in Litmus and it works fine for all desktop and mobile clients.
Good luck.