search

OfficeDev / office-js

A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official "evergreen" Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
https://learn.microsoft.com/javascript/api/overview
Other
669 stars 95 forks source link

HTML insertion in old Outlook desktop has incorrect fonts in tables #4596

Closed nickdekesel closed 1 week ago

nickdekesel commented 2 months ago

Provide required information needed to triage your issue

When trying to insert html into outlook via setSelectedDataAsync in the office js api, some font's are wrongly set. It does work fine in the new version of Outlook or Outlook online. In the new versions of Outlook it seems to happen only after sending/replying.

Your Environment

Expected behavior

It should keep the same fonts as specified in the HTML.

Current behavior

The font in the first row in the table that should have been Calibri as no specific font was specified, turn into Aptos.

Steps to reproduce

Use the following snippet in script lab to replicate the issue:

name: Replace selected text in item body
description: Replaces selected text in a message or appointment's body with specified text.
host: OUTLOOK
api_set: {}
script:
  content: |
    $("#replace-selection").on("click", replaceSelection);

    function replaceSelection() {

      const html = `<html>
       <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta http-equiv="Content-Style-Type" content="text/css" />
          <title></title>
       </head>
       <body style="line-height:108%; font-family:Calibri; font-size:11pt">
          <div>
             <p style="margin-top:0pt; margin-bottom:8pt"><span>This is Calibri Font 11</span></p>
             <p style="margin-top:0pt; margin-bottom:8pt"><span style="-aw-import:ignore">&#xa0;</span></p>
             <p style="margin-top:0pt; margin-bottom:8pt"><span style="font-family:'Times New Roman'">This is Times New Roman Font 11</span><br /><br /><br /><span style="font-family:Aptos">This is Aptos Font 11</span></p>
             <p style="margin-top:0pt; margin-bottom:8pt"><span style="font-family:Aptos; -aw-import:ignore">&#xa0;</span></p>
             <p style="margin-top:0pt; margin-bottom:8pt"><span style="font-family:Arial">This is Arial Font 11</span></p>
             <p style="margin-top:0pt; margin-bottom:8pt"><span style="font-family:Aptos; -aw-import:ignore">&#xa0;</span></p>
             <p style="margin-top:0pt; margin-bottom:8pt"><span style="font-family:Aptos; -aw-import:ignore">&#xa0;</span></p>
             <table cellspacing="0" cellpadding="0" style="border:0.75pt solid #000000; -aw-border:0.5pt single; -aw-border-insideh:0.5pt single #000000; -aw-border-insidev:0.5pt single #000000; border-collapse:collapse">
                <tr>
                   <td style="width:139.45pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-bottom:0.5pt single; -aw-border-right:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span>This is Calibri 11</span></p>
                   </td>
                   <td style="width:139.45pt; border-right-style:solid; border-right-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-bottom:0.5pt single; -aw-border-left:0.5pt single; -aw-border-right:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span>This is Calibri 11</span></p>
                   </td>
                   <td style="width:139.5pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-bottom:0.5pt single; -aw-border-left:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span>This is Calibri 11</span></p>
                   </td>
                </tr>
                <tr>
                   <td style="width:139.45pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-bottom:0.5pt single; -aw-border-right:0.5pt single; -aw-border-top:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:'Times New Roman'">This is Times New Roman 11</span></p>
                   </td>
                   <td style="width:139.45pt; border-style:solid; border-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:'Times New Roman'">This is Times New Roman 11</span></p>
                   </td>
                   <td style="width:139.5pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-bottom:0.5pt single; -aw-border-left:0.5pt single; -aw-border-top:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:'Times New Roman'">This is Times New Roman 11</span></p>
                   </td>
                </tr>
                <tr>
                   <td style="width:139.45pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-bottom:0.5pt single; -aw-border-right:0.5pt single; -aw-border-top:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:Aptos">This is Aptos 11</span></p>
                   </td>
                   <td style="width:139.45pt; border-style:solid; border-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:Aptos">This is Aptos 11</span></p>
                   </td>
                   <td style="width:139.5pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-bottom:0.5pt single; -aw-border-left:0.5pt single; -aw-border-top:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:Aptos">This is Aptos 11</span></p>
                   </td>
                </tr>
                <tr>
                   <td style="width:139.45pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-right:0.5pt single; -aw-border-top:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:Arial">This is Arial 11</span></p>
                   </td>
                   <td style="width:139.45pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-left:0.5pt single; -aw-border-right:0.5pt single; -aw-border-top:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:Arial">This is Arial 11</span></p>
                   </td>
                   <td style="width:139.5pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; padding-right:5.03pt; padding-left:5.03pt; vertical-align:top; -aw-border-left:0.5pt single; -aw-border-top:0.5pt single">
                      <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt"><span style="font-family:Arial">This is Arial 11</span></p>
                   </td>
                </tr>
             </table>
             <p style="margin-top:0pt; margin-bottom:8pt"><span style="font-family:Aptos; -aw-import:ignore">&#xa0;</span></p>
          </div>
       </body>
    </html>`

        Office.context.mailbox.item.body.setSelectedDataAsync(html, { coercionType: Office.CoercionType.Html }, (asyncResult) => {
          if (asyncResult.status === Office.AsyncResultStatus.Failed) {
            console.log("Action failed with error: " + asyncResult.error.message);
            return;
          }
        });
    }
  language: typescript
template:
  content: "<section class=\"samples ms-font-m\">\n\t<h3>Replace HTML</h3>\n\t<button id=\"replace-selection\" class=\"ms-Button\">\n        <span class=\"ms-Button-label\">Replace selection with html</span>\n    </button>\n</section>"
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

  core-js@2.4.1/client/core.min.js
  @types/core-js

  jquery@3.1.1
  @types/jquery@3.3.1

Context

We have a very large amount of customers managing email snippets/signatures for inserting into their emails in outlook using our product.

timwan10 commented 1 month ago

This behavior is due to the fact that Classic Win32 Desktop Outlook uses Word to render HTML instead of a Web Browser. There will be differences like this, and sometimes they get fixed, but it would probably better to find a workaround in HTML that the Word renderer is capable of rendering. This can be hard due to the fact that there really isn't a guide as to what Word renders differently than a browser, and usually it must be done with trial and error.

Note that if this was fixed, a workaround may still be necessary as older Outlook clients would always be out of date.