HTML gets modified in setSignatureAsync breaking inline styles

[barclayadam]

When calling setSignatureAsync with HTML that contains inline styles in Outlook Desktop in reply emails the signature HTML is manipulated in such a way as to remove styles and make it default to an incorrect font.

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: PC desktop
• Host [Excel, Word, PowerPoint, etc.]: Outlook
• Office version number: 16.0.14228.20186
• Operating System: Windows 10

Expected behavior

When setting HTML signature it is left as-is and the design of the signature does not change.

Current behavior

If we have HTML that contains an inline style, such as font-family: calibri,pt sans; font-size: 11pt then, when composing emails this style is removed and we end up with a font family of Times New Roman 12 pt (only when replying, not when composing a new email where the default of Calibri is kept).

If we were to use, for example a class name and a span the style is kept:

<style type="text/css">
    .myStyle{ font-family: Calibri; font-size: 11pt;}
</style>

<span class="myStyle">
Many thanks, Adam
</span>

If we have a block element inside then the Times New Roman font is used:

<style type="text/css">
    .myStyle{ font-family: Calibri; font-size: 11pt;}
</style>

<span class="myStyle">
    <div>Many thanks, Adam</div>
</span>

Steps to reproduce

const sig = '<style type="text/css">
    .myStyle { font-family: Calibri; font-size: 11pt; }
</style>

<span class="myStyle">
    <div class="myStyle">
        Many thanks
    </div>
</span>';

Office.context.mailbox.item.body.setSignatureAsync(
    sig,
    {
        coercionType: 'html',
    },
    function (asyncResult) {
        console.info('Done');
    });

HTML used by outlook:

<p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri",sans-serif;mso-fareast-language:EN-US'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><a name="_MailAutoSig"><span style='mso-fareast-font-family:"Times New Roman";mso-no-proof:yes'>Many thanks </span></a>

[exextoc]

I am trying to repro with your sample code and have been unable to so far. To confirm,

1. In the reply case (style changed), is the signature showing up as the wrong font in the UI? Or is the issue about Outlook modifying the style (but the font renders correctly)? So far, I am seeing the correct font being rendered.
2. For the reply case, to make sure I get the right repro, I hit reply and then open a task pane to run the API as is. Does that match your repro steps, or do you have additional steps here?

[barclayadam]

@exextoc I will work to get you some more concrete examples of emails that cause this issue. It appears this does not affect all replies, as a number of other emails I reply to have Calibri (I have included an example of a full working reply at the bottom, below the non working version).

The add-in does some work to load the signatures etc. but that is all automated within an event-based launch. It boils down to a simple setSignatureAsync on a new message compose event.

As a simpler example I add the HTML <div style="font-family: Calibri; font-size: 11pt;">Many thanks,</div> as a signature. The result is:

You can see the actual font is rendered and shown as Times New Roman at 12pt.

The HTML at the bottom of this message is what I can get from calling getAsync on the Office.context.mailbox.item.body property (it's from a real email, I have removed a little bit of content from original email, but otherwise it's as-is).

The important part, the signature HTML that ends up being used:

<p class=MsoNormal>
    <a name="_MailAutoSig">
        <span style='mso-fareast-font-family:"Times New Roman";mso-no-proof:yes'>Many thanks,</span>
    </a>
    <span style='mso-bookmark:_MailAutoSig'>
        <span style='font-size:11.0pt;font-family:"Calibri",sans-serif;mso-fareast-language:EN-US;mso-no-proof:yes'>
            <o:p></o:p>
        </span>
    </span>
</p>

You can see that the "Many thanks" signature no longer is wrapped in the div I sent through. That is available but in the span below the a tag. If I send this email to, for example, a Gmail mail box I can see the HTML for the signature as:

<p class="MsoNormal">Many thanks,<span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif"><u></u><u></u></span></p>

Not Working HTML

Email content here

 

Many thanks,

 

From: Example Person <someone@example.com>
Sent: 12 August 2021 12:45
To: Example Person <someone@example.com>; Adam Barclay <barclay.adam@gmail.com>
Subject: Test email for signature font issue

 

Test email for signature font issue.

 

 

 

Please let us know if we can be of any further assistance.

 

Sincerely,

A Person

The Team

My Company,  http://www.mywebsite.com [Snipped]

[Snipped]

Working HTML

d

 

Many thanks,

 

From: Ted Young <ted@lightstep.com>
Sent: 10 August 2021 18:19
To: Adam Barclay <barclay.adam@gmail.com>
Subject: Have you played with Lightstep yet?

 

Hi there,

You’ve probably heard how modern observability saves you time (or something like that). But have you tried it for yourself?

With the Lightstep sandbox, you can debug an error or resolve a performance regression in less than 10 minutes. You should check it out!

Play with the Lightstep sandbox here: https://lightstep.com/sandbox

Let me know if you have questions. I would be happy to discuss them with you!

Best,
Ted

--

Ted Young
Director of Developer Education

You may unsubscribe here.

 

[barclayadam]

Font Issues.zip

Attached is a couple of emails that, if replied to, would demonstrate the problem. You'll see the .eml files have a font name in their file name which indicates what font Outlook we set as the signature when replying.

The signature being set is:

<span style="font-family: calibri, 'pt sans'; font-size: 11pt;">Test signature</span>

If the signature is more complex (i.e. tables) then all fonts will be changed

[exextoc]

I was able to repro with your attached emails. However I was also able to "fix" the sample you provided via this:

const sig = '<style type="text/css"> .myStyle { font-family: Calibri; font-size: 11pt; } </style> <div class="myStyle"> <span class="myStyle"> Many thanks </span> </div>';

Putting the Span inside the Div instead of the Div inside the Span.

The underlying issue here is that Outlook uses Word to render HTML, and Word's HTML renderer is different than the one used by Browsers/Outlook Web Access/etc. It is likely little differences like this get interpreted strangely along with the Other stuff Word inserts into emails. It's likely fiddling with the HTML can make a big difference in how Word interprets rendering emails.

If you have a more complex example (you mentioned with tables), I can try forwarding it to the product group (but I have no guarantee on when they will respond), and playing with it yourself may solve the problem faster.

[barclayadam]

Because signatures are user-controlled we are trying to find a generic workaround, a way of processing the HTML before it gets to Outlook for Word to destroy it. Tweaking and playing with individual HTML snippets is OK for a static example but breaks down fast in our scenario.

I'm still a little confused as to why it only breaks on certain inbound emails too.

Again, what I am trying to get to is a generic way I could process some user-sent HTML to allow it to work correctly in that the default font of Calibri, 11pt is respected throughout the signature we set. I've set out a few scenarios below, and so far I've come up with needing to:

• Add a class to every single element to ensure defaults get applied
• Wrap the inner contents of td elements with a span
• Change / add inner span to any p or div elements

Doing the above, particularly wrapping or changing elements is quite a destructive change and has the potential of breaking the given HTML.

On the note of breaking HTML, it also appears that id attributes are stripped, but again only in replies and not on new emails.

Is there going to be anything more general that I can do that is safe and will work in Outlook? Would love feedback from the product group who may have some insight in to how to prevent / workaround these issues.

div -> span works

<style type="text/css"> .default { font-family: Calibri; font-size: 11pt; } </style>

<div style="font-family: calibri,pt sans; font-size: 11pt">
    <span class="default" style="font-size: 10pt;">Many thanks</span>
</div>

That works (I end up with Calibri, size 10), using your example of having a class instead of inline styles.

div/p with a class does not work

<style type="text/css"> .default { font-family: Calibri; font-size: 11pt; } </style>

<div style="font-family: calibri,pt sans; font-size: 11pt">
    <div class="default" style="font-size: 10pt;">Many thanks</div>
</div>

<style type="text/css"> .default { font-family: Calibri; font-size: 11pt; } </style>

<div style="font-family: calibri,pt sans; font-size: 11pt">
    <p class="default" style="font-size: 10pt;">Many thanks</p>
</div>

That does not work, changing a span to a div or p (as discovered from your reply).

span -> div child does not work

<style type="text/css"> .default { font-family: Calibri; font-size: 11pt; } </style>

<div style="font-family: calibri,pt sans; font-size: 11pt">
    <span class="default" style="font-size: 10pt;">
        <div>Many thanks</div>
    </span>
</div>

The above also does not work. The difference here is adding a child div below the span that did work. If I instead have the inner element as a span and not a div it continues to work:

<style type="text/css"> .default { font-family: Calibri; font-size: 11pt; } </style>

<div style="font-family: calibri,pt sans; font-size: 11pt">
    <span class="default" style="font-size: 10pt;">
        <span>Many thanks</span>
    </span>
</div>

table child does not work

<div style="font-family: calibri,pt sans; font-size: 11pt">
    <span class="default" style="font-size: 10pt;">
        <table><tr><td>Many thanks</td></tr></table>
    </span>
</div>

That is another example that breaks, but in this case I'm not sure how to solve easily because adding a default class to the td does not work:

<style type="text/css"> .default { font-family: Calibri; font-size: 11pt; } </style>

<div style="font-family: calibri,pt sans; font-size: 11pt">
    <span class="default" style="font-size: 10pt;">
        <table><tr><td class="default">Many thanks</td></tr></table>
    </span>
</div>

It can be fixed by wrapping the contents of the td in a span with the class:

<style type="text/css"> .default { font-family: Calibri; font-size: 11pt; } </style>

<div style="font-family: calibri,pt sans; font-size: 11pt">
    <span class="default" style="font-size: 10pt;">
        <table><tr><td><span class="default">Many thanks</span></td></tr></table>
    </span>
</div>

[exextoc]

We have contacted the Microsoft Word team to get guidance on this issue and we are awaiting their response.

[barclayadam]

Another data point on this that I think is important: This behaviour does not replicate if you use the native UI (i.e. HTML file on disk) for managing and inserting signatures.

I would have expected the exact same behaviour to the built-in signatures functionality, not for the HTML to be treated differently even if it is Word doing the modifications

[exextoc]

Thank you for the additional information. We are reaching out to the Word team with additional information and awaiting their response. Internal tracking ID: 5401672

[bogdanst24]

Any updates here? This is a general issue and can be reproduced on all types of emails, not only replies. It is easy to reproduce, and from what I could find, it is always happening on Hyperlinks and sometimes related to Outlook document styles.

[ztcdsb]

@bogdanst24 @barclayadam The font error related to signature has been fixed, this update is available in version 16.0.17513.15040.

[ghelyar]

Does this also fix 11pt font size, or just font family?

https://github.com/OfficeDev/office-js/issues/2077

[ztcdsb]

@ghelyar This fix all style related issues in signature, unfortunately the fix for body is still pending(it is much more complex than signature)

[bogdanst24]

Could this also address similar issues on Mac or Office on the web in general? If so, which Mac version?