JSX Pasted Into Outlook Desktop App Changing Font Size

Question

I'm using react and creating a page is essentially a dynamic JSX template that gets put into the clipboard via copy button. Here is a scaled down version of how that looks ->

return (
  <>
    <div className="template-1">
      <div style={{ fontSize: "11px" }}>
        Hello, and thank you for choosing...
      </div>
    </div>
  </>
);

and here is the code I'm using to grab the JSX and copy to clipboard ->

const handleTemplateCopy = () => {
    const template = document.querySelector(".template-1");

    if (template) {
        const templateString = template.innerHTML;
        
        // copied this from SO
        const listener = (e) => {
            e.clipboardData.setData("text/html", templateString);
            // I tried removing this line, but didn't change anything
            e.clipboardData.setData("text/plain", templateString);
            e.preventDefault();
        };

        document.addEventListener("copy", listener);
        document.execCommand("copy");
        document.removeEventListener("copy", listener);

        setSnackbarMessage("Successfully copied template!");
        setOpenSnackbar(true);
    }
};

great! so everything is working at this point, and here is what the raw html that I just copied looks like when pasted ->

<div style="font-size: 11px;">
  Hello, and thank you for choosing...
</div>

and the good news is that it works in every single email client that I paste it into... EXCEPT the outlook 365 desktop app on windows / mac. On there it scales the font size down to 8.5pt and I have no idea why. This is obviously a small section of a much larger template, but should illustrate the issue at hand. I'm also in some cases taking the divs innerHTML and emailing the template programmatically through SendGrid and I have the exact same issue. It comes through looking perfect on all clients EXECPT the outlook desktop app. I've looked through a lot of posts about outlook formatting issues, copy paste issues, etc etc but can't seem to find the solution. So any help would be greatly appreciated, thanks!

UPDATE 1 (things I've tried but haven't worked) ->

Refactoring everything to use a table

I also tried a bunch of outlook specific overrides suggested in various litmus articles

I created an interpolated string for testing

const templateSkeleton = `
    <!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">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Litmus Newsletter</title>
            <!-- [if mso]>
                <style>
                    .fs-16 { font-size: 16px; }
                </style>
            <![endif]-->

            <style type="text/css">
                /* GENERAL STYLE RESETS */
                body, #bodyTable { height:100% !important; width:100% !important; margin:0; padding:0; }
                img, a img { border:0; outline:none; text-decoration:none; }
                .imageFix { display:block; }
                table, td { border-collapse:collapse; }
                /* STYLES */
                .fs-16 { font-size: 16px; }

                /* CLIENT-SPECIFIC RESETS */
                .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
                .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}
                table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
                img{-ms-interpolation-mode: bicubic;}
                body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
            </style>
        </head>
        <body>
            <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
                <tr>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="600">
                            <tr>
                                <td align="center" valign="top" class="fs-16" style="font-size: 16px;" >
                                    ...EMAIL CONTENT...
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </body>
    </html>
`;

SOLUTION

Found the solution - and maybe this is kind of obvious in retrospect but I wasted a lot of hours trying a bunch of different things. Outlook app seemingly doesn't read pixels properly (although I can't find the technical details about this), so instead I used the pt unit and it worked as expected. I just had to create a conditional statements in the html that used pt's in Outlook and pixels in all other browsers like so ->

const templateSkeleton = `
 <!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">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title></title>
   </head>
   <body>
     <!--[if mso]>
       <p style="font-size: 16pt">TEST TEXT</p>
     <![endif]-->
     <!--[if !mso]> <!---->
       <p style="font-size: 16px">TEST TEXT</p>
     <![endif]-->
   </body>
  </html>
`;

Notice the weird empty tag  after the <!--[if !mso]> statement. It wouldn't render the non-mso content without that, which is referenced in this SO post

JSX Pasted Into Outlook Desktop App Changing Font Size

0 Answers0