Category Archives: HTML

HTML Email and Litmus – Prevent Plain Text Email Hyperlinks From Turning Blue

by ,

This article focuses on how to prevent plain text email hyperlinks from turning blue when testing email clients using an email design and marketing tool such as Litmus. This post will also be useful for situations where you want to prevent hyperlinks from turning blue.

Please see the image and HTML below for a visual. The URL has been bolded for illustrative purposes and is not part of final solution.

plain text hyperlink

HTML


<tr>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 <td valign="top" align="left" width="560" style="font-size: 14px; color:#6d6e71;">Ut sit amet consectetur justo, vel convallis ante. Phasellus at augue eu mi posuere rhoncus. Nullam quis pretium tellus. Quisque a odio vulputate lacus suscipit blandit ut vitae dolor http://www.website.com/page/document.pdf. Curabitur sed purus non ante eleifend aliquet id ut lacus. Aliquam erat volutpat. Duis tincidunt, enim nec eleifend condimentum, tellus lectus tempor felis, eu dictum magna elit ut arcu. Curabitur sodales, nisi eu lobortis consequat, ligula nulla placerat augue, ac vehicula quam arcu at ex.</td>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 </tr>

The following list of email clients will show a blue colored plain text hyperlink.

  • Apple Mail 9
  • Apple Mail 10
  • all versions of Outlook after 2003
  • Gmail App(Android)
  • Gmail App(iOS)
  • Inbox by Gmail(iOS)
  • all iPhones and iPads
  • AOL all browsers
  • Gmail all browsers

Here is what it looks like in Outlook 2016:

outlook 2016 plain text hyperlink blue

In most cases inserting a zero width joiner &#8205; or &zwj; within the plain text URL will solve the issue. Normally you would insert the zero width joiner in the www and the .com as shown here <a href="http://www.website.com/page/document.pdf">ww&zwj;w.website.co&zwj;m/page/document.pdf</a>. We normally do not precede linked text inside an anchor element with the http:// protocol, since it is only needed for the href attribute. However, for promotional emails or for references, URL’s are usually entered as plain text with the http:// preceding it.

When using plain text URLs with the http:// preceding it, placing a zero width joiner in the www and .com parts of the string will resolve the issue on email clients such as iPhone and iPads, but may yield strange results. See below:

HTML


<tr>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 <td valign="top" align="left" width="560" style="font-size: 14px; color:#6d6e71;">Ut sit amet consectetur justo, vel convallis ante. Phasellus at augue eu mi posuere rhoncus. Nullam quis pretium tellus. Quisque a odio vulputate lacus suscipit blandit ut vitae dolor http://ww&zwj;w.website.co&zwj;m/page/document.pdf. Curabitur sed purus non ante eleifend aliquet id ut lacus. Aliquam erat volutpat. Duis tincidunt, enim nec eleifend condimentum, tellus lectus tempor felis, eu dictum magna elit ut arcu. Curabitur sodales, nisi eu lobortis consequat, ligula nulla placerat augue, ac vehicula quam arcu at ex.</td>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 </tr>

Using the code above reveals a hyperlink that is partially blue in Gmail App (iOS):

Gmail-app-iOS-partially-blue-hyperlinkGmail-app-iOS-partially-blue-hyperlink-zoomed-in

The solution that seems to work for most, if not all, email clients, is to insert the zero with space joiner inside of the http://, the www, and the domain extension (.com, .net, .biz), at the very minimum. You may need to place it many locations as possible, such as after the dots, etc. By strategically placing them in certain parts of the URL string, you will avoid it appearing partially blue in some email clients. See below:

Solution

HTML


<tr>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 <td valign="top" align="left" width="560" style="font-size: 14px; color:#6d6e71;">Ut sit amet consectetur justo, vel convallis ante. Phasellus at augue eu mi posuere rhoncus. Nullam quis pretium tellus. Quisque a odio vulputate lacus suscipit blandit ut vitae dolor ht&zwj;tp://ww&zwj;w.webs&zwj;ite.&zwj;co&zwj;m/page/document.pdf. Curabitur sed purus non ante eleifend aliquet id ut lacus. Aliquam erat volutpat. Duis tincidunt, enim nec eleifend condimentum, tellus lectus tempor felis, eu dictum magna elit ut arcu. Curabitur sodales, nisi eu lobortis consequat, ligula nulla placerat augue, ac vehicula quam arcu at ex.</td>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 </tr>

Gmail-app-iOS-gray-hyperlinkGmail-app-iOS-gray-hyperlink-zoomed-in

This article may be unnecessarily long, however, as you become more experience with programming HTML emails, hacks for some issues may not resolve the worst case scenario. The worst case scenario here is that we needed to place a plain text URL, that is not hyperlinked, in a reference section of an email.

We may continue to expand on this post in the future. Hoping that this is a great help to you all!

IE 11 – Word Wrap or Word Break not working for Long Word or Overflowing Text

by ,

If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. See below:

word wrap or break overflowing width of container

There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word; or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;, may not work. It didn’t for me.

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character &#8203;.

CSS


#container { 
  width: 120px;
  background-color:#ccc;
  border: 1px solid #aaa;
  margin: 50px 50px 0;
}

.break {
  word-wrap: break-word;
}

HTML


<div id="container">
  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr&#8203;afdssf</span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com/reallylongurl">www.reallylong&#8203;websiteurl&#8203;.com/reallylongurl</a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.</p>
</div>

You have to insert the unicode character whereever you want the breaks to occur. See the final result below.

word wrap or break in IE 11 with zero space unicode character

HTML figcaption size (width) too long – iPhone in portrait mode

by ,

I came across this issue when I was attempting to use an HTML <figcaption> element underneath an image on an iPhone 5s using Safari and Chrome. In portrait view, the font size of the caption does not change, even if explicitly setting a font size in CSS to a size. This may be due to the fact that browsers on an iPhone will automatically increase the size of small text. See the initial HTML and CSS below.

CSS


figcaption {
	font-style: italic;
        font-size: 0.5rem;
	text-align: right;
	margin-bottom: 25px;
}

HTML


<figure>
  <img src="http://image.jpg" />
  <figcaption>Photograph courtesy of John Smith, 
    <a href="http://www.website.com">www.website.com</a>
  </figcaption>
</figure>

With my font-size explicitly set to 0.5rem in CS, the figcaption pretty much takes up the entire width of page, when attempting to align it to the right at a smaller screen size in portrait mode.

In portrait view, the figcaption almost spans entire width of layout (not what we want).

In portrait mode, the figcaption almost spans entire width of layout (not what we want).

The figcaption in the landscape version (aligned to right and font-size relative to layout) is the desired outcome.

In landscape view, the figcaption looks just the way we want it to.

In landscape mode, the figcaption looks just the way we want it to.

Solution

It turns out that this happens because browsers on smartphones lays out the web page using a viewport that is wider than the device screen, unlike a desktop browser. Therefore using the -webkit-text-size-adjust property does the trick. After applying the property to our CSS, it should look like this below.

CSS


figcaption {
	font-style: italic;
        font-size: 0.5rem;
	text-align: right;
	margin-bottom: 25px;
        -webkit-text-size-adjust: 100%;
}

Be sure not to use “none” as the value for -webkit-text-size-adjust since it can affect how the text will be resized when using zoom in a browser. This would affect desktops as well. See the image below for how the figcaption now looks after adding this rule. Click on the image to see a larger version.

after adding -webkit-text-size-adjust property to our CSS, the figcaption renders the way we want it to (font-size) and now is aligned to the right

after adding -webkit-text-size-adjust property to our CSS, the figcaption renders the way we want it to (font-size) and now is aligned to the right