Text in Outlook Doesn't Use Line-Height

Text in Outlook doesn't use line-height

You need to use the mso style "mso-line-height-rule". This is used to force Outlook to respect the line height rule. Please note this needs to be added PRIOR to the declared line-height or it will not work. See below:

<td background="images/11-text-1--alpha-d3c29e.jpg" 
bgcolor="#d3c29e" width="514" height="460"  valign="top" style="margin:0;padding:0;font-family:'Courier New',Courier,monospace; font-size:14px;font-weight:bold;color:#000000;mso-line-height-rule:exactly; line-height:15px;">        
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" 
    style="width:514px;height:460px;">
    <v:fill type="tile" src="images/11-text-1--alpha-d3c29e.jpg" color="d3c29e" />
    <v:textbox inset="0,0,0,0">
    <![endif]-->   
            #TEXT
    <!--[if gte mso 9]>     </v:textbox>   </v:rect>   <![endif]-->
</td>

Text is not vertically centered in Outlook with line-height

Looks like I found answer.

First of all, I used mso-line-height-rule: exactly;, but specified line-height in percents - that's not correct (need to have pt or px or anything else).

Secondly, looks like Outlook uses the same engine as Microsoft Word for processing HTML, so I can just create html files, and then open and edit them in Microsoft Word.

In Word I can play with Line Spacing Options dialog as long as I want. Basically, it has several useful options:

  1. Spacing before paragraph.
  2. Spacing after paragraph.
  3. Line spacing.

Line spacing can have following options:

  • Single
  • 1.5 lines
  • Double
  • At least
  • Exactly
  • Multiple

Single, 1.5 lines, Double and Multiple are converted to line-height values: 100%, 150%, 200% and xxx% accordingly when saved.

At least I didn't play with long enough.

Exactly behaves slightly different from the others. See https://medium.com/@mattsamberg/line-spacing-explained-9aecda41f48d for details.

Basically, to get line-height like in browser, we can use:

  • Exactly + positive margin-bottom (recommended)
  • or Multiple + positive margin-top (can be used, but will have too much extra space)

Finally, we have this (recommended):

<table>
  <tbody>
    <tr>
      <td style="border-top:1px solid black;mso-line-height-rule:exactly;line-height:50px;font-size:11px;">
        <!--[if mso]><p style="margin-bottom:24px;"><![endif]-->
        paragraph text1
        <!--[if mso]></p><![endif]-->
      </td>
    </tr>
  </tbody>
</table>

or

<table>
  <tbody>
    <tr>
      <td style="border-top:1px solid black;line-height:500%;font-size:11px;">
        <!--[if mso]><p style="margin-top:50px;"><![endif]-->
        paragraph text1
        <!--[if mso]></p><![endif]-->
      </td>
    </tr>
  </tbody>
</table>

In Outlook there will be slightly more space than in browser (because we have line-height and margin-top/margin-bottom), but it's the best I could do.

mso-line-height and mso-text-raise not working in Outlook 2013?

Outlook support for div is spotty.

Remove the div and move the style sheet to the parent td. Use line-height instead, so it works for all email clients.

Remove span and use p instead.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="text-col-3 copyright-text" style="color: #0F1934; font-family: Arial,sans-serif; font-size: 14px; line-height: 15px; text-align: left;">
        <p>The Company, 1234 Main Street
        <br />
        Suite 9999, Los Angeles, CA 10001</p>

        <p>&copy; 2019 The Company
        <br />
        All Rights Reserved
        <br />
        <a href="#" target="_blank" style="color: #787985;">Terms, Privacy & Notices</a></p>
      </td>                
  </tr>
</table>

Good luck.

Outlook 2016 - first line with default line-height, mso-line-height-rule doesn't work

Finally I found some workaround solution... below you can find simplyfied example.

Option 1 (hidden <div> with some text, w/o mso-hide: all style): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            table {
                border-collapse: collapse; 
                border-spacing: 0px;
            }
        </style>
    </head>
    <body>
        <div style="overflow:hidden; color:transparent; visibility:hidden; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                </tr>
                <tr>
                    <td width="1" style="background-color: blue;"></td>
                    <td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
                    <td width="1" style="background-color: blue;"></td>
                 </tr>
                 <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

It works relatively good, but if you click somewhere/select something in the message, your first visible item (e.g. <td>) will disappear.

Option 2 (hidden <div> with some text, w/ mso-hide: all style, conditionally shown additional row with zero height and with transparent backround): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            table {
                border-collapse: collapse; 
                border-spacing: 0px;
            }
        </style>
    </head>
    <body>
        <div style="overflow:hidden; color:transparent; visibility:hidden; mso-hide:all; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <!--[if gte mso 9]>
                <tr height="0">
                    <td colspan="3" style="background-color: transparent;"></td>
                </tr>
                <![endif]-->
                <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                </tr>
                <tr>
                    <td width="1" style="background-color: blue;"></td>
                    <td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
                    <td width="1" style="background-color: blue;"></td>
                 </tr>
                 <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

Then it's relatively unbreakable.

OriginalVsOptions

Only bad thing is that Outlook shows warning about possibility of wrong rendering. Most probably caused by <div> tag usage.

EDIT: warning is caused by height: 0 and width: 0 in <div> style. I think it's possible to remove these properties.

Enjoy!

Vertical-align is not working in Outlook mail template ? Needs to align images with text ? any alternatives?

For this it appears the only way to get it working for Outlook is to wrap it in a table.

<tr>
  <td style="background:#fff;">
    <h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
    <h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
  </td>
</tr>
<tr>
  <td>
    <table width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td width="22">
          <!--Use this to control space between icon and text-->
          <p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
            <img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="Sample Image" border="0" style="vertical-align: middle;" />
          </p>
        </td>
        <td>
          <!--No need to put width here. It will automatically size (and is responsive without a width) -->
          <p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{orderDate}}
          </p>
        </td>
      </tr>
      <tr>
        <td width="22">
          <p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
            <img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="Sample Image" border="0" style="vertical-align: middle;" />
          </p>
        </td>
        <td>
          <p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;"><span style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{storeName}}</span></p>
        </td>
      </tr>
    </table>
  </td>
</tr>

Excessive line height on text when displaying on mobile email clients

It looks like GMail and other mobile email clients such as Outlook Mobile don't render correctly when layout properties are set inline and/or set to zero. The below seemed to resolve my issue and for those clients which only render inline styling the spacing was as it should be anyway. I did notice that the last paragraph had some additional white space so hence the line break at the end which seemed to resolve this issue. So all lines look tight together as they do on the desktop. Hope this helps someone.

<style type="text/css">
   .sigRow { margin: 1px; font-size:9pt; font-family:"Arial",sans-serif;}
</style>
<p class="sigRow">One line</p>
<p class="sigRow">Two line</p>
<br>

Related Topics

What Is The Meaning of an Ampersand in Less Selectors

Bootstrap 4 Center Pagination in Column

CSS Rules for Webkit Based Browsers

Sass with Bem, Inherit Selector

Wkhtmltopdf CSS Sizes in Cm/Mm

Make a <Textarea> Fill Remaining Height

Compass Font-Face Outputs Wrong Path to Font File

How to Get Bootstrap Tour to Work with a Jquery Dialog

Selecting Children Elements But Not Grandchildren

Angular: Transclusion, Set Color of Svg Element

Efficient and Inefficient CSS Selectors (According to Google, Pagespeed ...)

How to Use Font-Family with Same Name

Text in Outlook Doesn't Use Line-Height

Center Content in a Absolute Positioned Div

How to Align The Radio Buttons Horizontally in Angular Material

CSS Content Property Not Displaying

Svg Stroke-Dasharray Offset Not Consistent

CSS and Images on Master Page


Leave a reply



Submit