Changing the text alignment to justify in OWA - HTML emails

Having trouble navigating the Outlook Web App (OWA)? It seems like there are countless issues with different Outlook clients, but OWA is definitely the most poorly documented one.

The snippet of code below functions flawlessly in all email clients such as Outlook 2000-2013, GMail, Yahoo, AOL. However, when it comes to OWA, the text always defaults to text-align: justify and refuses to be overridden.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="left" width="208" valign="top">
      <div><multiline label=”Body”>
        Insert random text here, who knows what I'm saying. I need food.
      </multiline></div>
    </td>
  </tr>
</table>

I've attempted the following:

  • text-align: left;
  • text-align: left !important;
  • float: left;
  • float: left !important;

On these elements:

  • <table>
  • <td>
  • <div>
  • <span>
  • <multiline>
  • .left as a class

In addition, on an unrelated note, the 

<div><multiline label="Body"> content </multiline></div>

solves the issue of double line spacing that exclusively affects OWA.

Any suggestions for changing text-align: left successfully?

htmlcsshtml-emailoutlook-web-app

Answer №1

Dealing with the same issue in OWA, I found @John's advice to take out align="left" from the surrounding <td> cell really helpful.

To address it, I enclosed my text within a <span> tag which allowed me to manage the line-height better. Hopefully, this solution works for you too!

This is how I modified my code:

<td class="center respHead" valign="top" bgcolor="#FFFFFF" style="font-size:26px;line-height:30px;font-weight:bold;padding-left:20px;text-align:left !important">
    <span style="color:#010101;font-size:26px;line-height:30px;font-weight:bold">
       Content Previously Aligned Justified
    </span>
</td>

Answer №2

After encountering the same issue, I managed to find a solution today that worked for me! The key is to align all text to the left by default and then use specific classes for centering or right aligning text.

Here is the CSS code:

td {
    text-align: left !important; /* Setting all text to left by default to override OWA text-align justify */
}

td.center {
    text-align: center !important; /* Center align text for most email clients, OWA may not recognize this */
    text-align: center; /* Fix for OWA, overrides left alignment with this */
}

td.center * {
    text-align: center; /* Fix for Outlook 07, 10, 13 */
}

td.right {
    text-align: right !important; /* Right align text for most email clients, OWA may not recognize this */
    text-align: right; /* Fix for OWA, overrides left alignment with this */
}

td.right * {
    text-align: right; /* Fix for Outlook 07, 10, 13 */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display only the static placeholder in Angular 2 multi-select feature

My experience with angular 4 is fairly new and I've recently delved into using the angular multiselect feature with the npm package available here. I've managed to successfully configure it, as well as capture selected and deselected items/event ...

cssangularnpmresponsive-design

Navigating pages in tinymce editor

Currently, I have implemented TinyMCE as the editor for my PHP-based website. However, I am facing a challenge in integrating pagination within the editor. My goal is to allow users to input long content that will be displayed across multiple pages inste ...

phpjqueryhtmlcsstinymce

Can a CSS rule be prevented from inheriting?

Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...

css

"Enhance your client-side PDF capabilities with the pdfMake plugin, offering support for multiple languages

I am in search of a plugin that can convert HTML content into a PDF format and is compatible with javascript/jQuery/AngularJS. It must also provide multilingual support. I have experimented with the following two plugins, but encountered limitations with ...

javascriptjqueryhtmlangularjs

issues with padding in the main content section

When I try to search for something that isn't on the page, a strange margin or padding issue occurs. I have thoroughly reviewed the code but can't seem to pinpoint the problem. The unwanted 30pxish margin after the footer should not be present wi ...

htmlcss

Peruse through the Vignettes: exclude the `source` and `R code` files in the results

For my R package on GitHub, I created an HTML vignette. When using browseVignettes, the content displayed flawlessly in the browser looks like this: HTML, source, or R code, it opens the same file in three different versions.</p> However, I only wan ...

htmlrr-markdownr-usethis

Creating a responsive canvas and image container in fabric.js involves adjusting the layout and size of the

I am working with fabric.js and canvas to dynamically add an image from a URL. I would like to make the canvas responsive based on the resolution. How can this be achieved? Here is my current code: <canvas id="panel" width="700" height="350"></ ...

htmlfabricjs

What is the best way to position my two icons next to each other in the footer of my React application?

I'm struggling with styling the footer of my react portfolio project. I specifically want to include Github and LinkedIn icons side-by-side at the bottom of the screen, but currently, they are stacked vertically in the middle of the page with too much ...

cssreactjssingle-page-applicationreact-bootstrapfooter

Aligning a collapsible feature while ensuring that the content descends

My dilemma involves a centered menu with a dropdown feature. The issue arises from the absolute positioning, causing the entire menu to shift upward when the dropdown is activated due to the increased height. I am struggling to find an effective solution ...

css

The newly added radio button does not function as a separate group as expected

I currently have a set of radio buttons: <input type="radio" class='form-control' name="progress_type[]" value="Journal Papers"><span class='radio-label'>Journal Paper</span> <input type="radio" class='form-co ...

javascriptjqueryhtmlradio-button

Hovering Div Troubles

I've been working on creating a hover effect for the blocks on my website. Everything was going smoothly until I reached the last block. The hover effect appears to be displaced, as shown in this sample link. Although the CSS code I'm using seem ...

htmlcss

Guide on showcasing active users currently online within the system utilizing CodeIgniter

I'm currently working with CodeIgniter and trying to display live online users using this framework. I attempted some code, but I'm feeling a bit lost now. I found a helpful video that I learned from: Alternatively, I followed these steps as sh ...

phpjqueryajaxhtmlcodeigniter-3

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Recently, I received a helpful solution that involved using the extra_css = argument in cell_spec() from the kableExtra package. This allowed me to fill the entire cell of my table instead of just the text inside it. However, even after specifying align = ...

cssrkableextra

The Visualforce page is not displaying page breaks correctly for cells with rowspan in the table

Having encountered a similar issue to this question: table rowspan page break On my Visualforce page, I have an HTML table with a custom rowspan in one column (varies based on the number of spanned rows) and I'm experiencing a styling problem (see is ...

htmlcsshtml-tablevisualforcepage-break

What is the best way to incorporate a Django variable as the width parameter in a style tag within HTML?

I'm attempting to utilize a Django variable as the percentage width value within a style tag in HTML, but it's not functioning correctly. Strangely, I've discovered that using curly braces {} within style tags is prohibited—this contradict ...

pythonhtmlcssdjango

Alignment issues in buttons within Bootstrap

I'm facing an issue with the code snippet below <div className="row"> <div className="col-md-3"> <DateTimePickerComponent id="dateFrom" ...

csstwitter-bootstrapbootstrap-5

What is the maximum size allowed for a background image in CSS?

Within a 70 by 50 px box, I have various SVG images with different aspect ratios - some portrait and others landscape. Setting background-size: 70px auto; works for landscape images but distorts the portraits by stretching them vertically. Is there a way t ...

htmlcssimage

Tips for keeping notification icons in the upper right corner of the box?

I am facing an issue with absolute positioning where the notification icons I've positioned to the top-right corner of a box are moving away when the screen size changes. Desired appearance of the image Actual appearance when screen size is adjusted ...

javascriptcssreactjsstyled-components

Preventing box shadows from blending together

I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect. https://i.sstatic.net/NdAUB ...

htmlcss

Triggering a JavaScript event with every update to the DOM marked as "completed"

I've been having some trouble with a specific task. I'm working on a script where I need to execute some functions after DOM manipulation is complete. The challenge is that I can't make changes to any other scripts on the page, as they might ...

javascriptjqueryhtmlajaxdom