How to properly use CSS direction RTL and LTR in email newsletters

How to properly use CSS direction RTL and LTR in email newsletters

The need to have the content moved from right to left and left to right comes usually when you use table headers <th> to stack content on mobile and not tables.

If you use tables you would usually have something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
<title>Untitled Document</title>
<style type="text/css">
@media only screen and (max-width: 599px) {
table {
    width: 100% !important;
    background: #ffffff !important;
    min-width: 100% !important;
}
}
</style>
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tbody>
    <tr>
      <td align="center"><table width="275" border="0" cellspacing="0" cellpadding="0" align="right">
          <tbody>
            <tr>
              <td align="center" style="height:100%" bgcolor="yellow"> right on desktop, top on mobile </td>
            </tr>
          </tbody>
        </table>
        <table width="275" border="0" cellspacing="0" cellpadding="0" align="left">
          <tbody>
            <tr>
              <td align="center" style="height:100%" bgcolor="green"> left on desktop, bottom on mobile </td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>

This is how it looks on desktop:

This is on mobile:

However there are situations when the 2 stackable elements have to stay side by side so having a gap between tables won't be possible. The gap in between tables is needed for Outlook because Outlook adds some extra space around tables and putting them next to each other will result into the second table to be pushed underneath the first one because it won't fit anymore because the extra space added.

The solution in this case is to use table headers <th> and stack those. But now we are ending up with a new problem, table headers won't align left and right as tables do. That means putting the first TH which is supposed to be at the bottom on mobile won't work. 

The solution is using CSS direction, rtl = right-to-left and ltr = left-to-right to stack the 2 columns not in the order they are on desktop but differently.

Here is the code with explanations below though is pretty self explanatory:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Untitled Document</title>
<style type="text/css">
@media only screen and (max-width: 599px) {
table {
    width: 100% !important;
    background: #ffffff !important;
    min-width: 100% !important;
}
th {
    display: block !important;
    width: 100% !important;
}
}
</style>
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="direction: rtl">
  <tbody>
    <tr>
      <th width="300" border="0" bgcolor="yellow" style="direction: ltr; font-weight:normal"> right on desktop, top on mobile </th>
      <th width="300" border="0" bgcolor="green" style="direction: ltr; font-weight:normal"> left on desktop, bottom on mobile </th>
    </tr>
  </tbody>
</table>
</body>
</html>

This is the desktop version rendering:

This is how stackable table headers <th> look on mobile:

The key here is to add direction on the table as well and not only on the 2 table headers. Another thing to notice is that th style is centering and bolding the text automatically so you will have to account for that in your CSS.

When the two elements we want to stack on mobile are not flushed against each other so they don't touch we could always use tables to stack them. We could stack and also revert order without using rtl or ltr. However when we have elements that are next to each other we have to use THs and when they need to be in a different order than on desktop we also need to use CSS direction.

Hopefully this works well for you and helps you keeping your cool and the hair left... Till next time, your friend, the email snob. Cheers!