Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

Word Wrapping and Tables in iOS6

Posted January 25, 2013 by Geoff Phillips

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

The Problem - Weird Word Wrapping

If you've done much work with iOS6 emails and tables you've probably noticed some peculiar behavior. Sometimes it looks as though the iPhone is wrapping your text strangely, or putting in line-breaks where they don't belong. This is because the iPhone (running iOS6) tries to rescale your email according to the widest element in your layout. This can cause issues in how elements are resized if not handled properly. Check out our example below.

The Code

<body>

   <table width="576" height="175" border="0" align="center">
       <tr>
           <td width="12" height="171"> </td>
           <td width="250"><img src="#" alt="1"/></td>
           <td width="253">
             <strong>Nulla diam...</strong><br />Phasellus condimentum...
           </td>
           <td width="43"> </td>
       </tr>
   </table>
 
   <table width="576" height="175" border="0" align="center">
       <tr>
           <td width="11" height="171"> </td>
           <td width="56"><img src="#" alt="2"/></td>
           <td width="448">
             <strong>Nulla...</strong><br />Phasellus condimentum...
           </td>
           <td width="43"> </td>
       </tr>
   </table>
 
   <table width="576" height="175" border="0" align="center">
       <tr>
           <td width="11" height="171"> </td>
           <td width="56"><img src="#" alt="3"/></td>
           <td width="448">
             <strong>Nulla diam...</strong><br />Phasellus condimentum... 
           </td>
           <td width="43"> </td>
       </tr>
   </table>
 
 </body>

In this example, we are using stacked tables, one on top of the other. The tables have empty cells on either side to create spacing. To see how it should be rendering, scroll down to our example at the bottom. But in iOS6, the iPhone will take the widest table and scale all the others by the same ratio in order to fit it inside the viewport. This causes the strange wrapping that you saw in the example above.

The Fix

To correct this, we wrapped our entire email (inside the body tags) in a table of its own. This will ensure that the entire email is scaled at the same aspect ratio.

 

<body>
  <table><tr><td>
   <table width="576" height="175" border="0" align="center">
       <tr>
           <td width="12" height="171"> </td>
           <td width="250"><img src="#" alt="1"/></td>
           <td width="253">
             <strong>Nulla diam...</strong><br />Phasellus condimentum...
           </td>
           <td width="43"> </td>
       </tr>
   </table>
 
   <table width="576" height="175" border="0" align="center">
       <tr>
           <td width="11" height="171"> </td>
           <td width="56"><img src="#" alt="2"/></td>
           <td width="448">
             <strong>Nulla...</strong><br />Phasellus condimentum...
           </td>
           <td width="43"> </td>
       </tr>
   </table>
 
   <table width="576" height="175" border="0" align="center">
       <tr>
           <td width="11" height="171"> </td>
           <td width="56"><img src="#" alt="3"/></td>
           <td width="448">
             <strong>Nulla diam...</strong><br />Phasellus condimentum... 
           </td>
           <td width="43"> </td>
       </tr>
   </table>
  </td></tr></table>
 </body>

The simple fix above will force the iPhone to scale all of the inner tables in the same way. Take a look at the email below, the way it's supposed to look.

This doesn't seem to be a problem for iPhones running iOS5 or iOS4, but as more users move to iOS6 it is becoming increasingly important to make sure emails render properly in all iOS environments.
Test your emails on all iOS devices and more by signing up for Email on Acid today!

Comments

101 okey indir pic
101 okey indir
Thank you for useful information
Posted 02/25/2013

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!