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
670 stars 96 forks source link

Text background not honored when HTML is inserted in Web Word using range.InsertHtml #3066

Closed lynneosmith closed 4 months ago

lynneosmith commented 1 year ago

When inserting HTML into Word using the range.insertHtml API, the background color is not honored on Word web. It is honored on Word desktop. If underline or alignment is specified in the html, that is not honored either on Word on the web.

Your Environment

Expected behavior

If I insert html using the insertHtml API, I expect Word on the Web to correctly render the HTML, honoring the background color. I would also expect my sample code with underline and alignment styles to render with those styles.

Current behavior

The background color in the HTML is not honored. The alignment and underline styles are not honored. Other style attributes of the text are honored correctly... font, fontsize, font color, fontweight, etc.

Steps to reproduce

1) Using ScriptLab, I replaced the text for one of your samples. Run this sample code in Scriptlab on Word Desktop. You will see the text is rendered with the correct background color. Run it in Scriptlab using Word on the Web and you will see that the background color is not honored. ( I replaced the text for your "start" function in the "Insert content at different locations" sample.

async function start() { await Word.run(async (context) => { const range = context.document.getSelection(); const mystr = `

Ban me, try it, you might cause a riot

`; range.insertHtml(mystr, "Replace");

await context.sync();

}); }

2) Using the same code above in Scriptlab, replace the html assigned to mystr with the following line. You will see that the underline style is also not rendered on Word on the web.

const mystr = `<

My text.

`;

3) Using the same code above in Scriptlab, replace the html assigned to mystr with the following line. You will see that the text alignment style is not honored when the html is rendered in Word on the Web.

const mystr = `

Alignment1

Alignment2

Alignment3



`; # Provide additional details No other details needed. ## Context We have an addin that inserts report content from our pane into the Word document. We already support Excel, Outlook and PowerPoint and we are working to add support for Word. We want to insert the content honoring the styles that it has in our pane. When I insert the html, all of the styles are honored except the background color. This behavior is really odd and depending on background colors and font colors, this could cause the user to have text that is not visible. We are inserting the content as HTML and Word on the Web should be able to render the HTML correctly. Thank you for taking the time to report an issue. Our triage team will respond to you in less than 72 hours. Normally, response time is <10 hours Monday through Friday. We do not triage on weekends. This issue was closed Fixed
ghost commented 1 year ago

Thank you for letting us know about this issue. We will take a look shortly. Thanks.

lynneosmith commented 1 year ago

I updated my description to include underline and alignment as well as background color. None of these styles are being rendered in Word on the Web through the insertHtml function.

jingxuan0109 commented 1 year ago

Hi @lynneosmith I am trying to reproduce your scenario. I tried below code. 

async function run() {
  // Gets the current selection and changes the font color to red.
  await Word.run(async (context) => {
    const range = context.document.getSelection();
    const mystr = '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><h1 style="background-color:red">h1</h1><h2>h2</h2></body></html>'; 
  range.insertHtml(mystr, "Replace");
    await context.sync();

  });
}

background color is honored on word online. It seems your html string is rendered on description. I am just wondering if you could share code through script lab. If not, I am just wondering whether you can make the html string as one code block like above.

lynneosmith commented 1 year ago 
const mystr = 'async function run() {
 // Gets the current selection and changes the font color to red.
 await Word.run(async (context) => {
   const range = context.document.getSelection();
   const mystr = '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><h1 style="background-color:#e74c3c;color:#2980b9;text-decoration:underline;">h1</h1><h2>h2</h2></body></html>'; 
 range.insertHtml(mystr, "Replace");
   await context.sync();

 });
}

I have modified the code sample above, which is your code sample with a different html string that includes styles as I had them specified. You will see if you run this that the text foreground color is honored, but the text background and the underline are not. If you change the background color from '#e74c3c' to 'red', then it does honor the background color. That is why your sample worked.,

jingxuan0109 commented 1 year ago

@lynneosmith Thank you for your reply, I just tried rgb value and it works. I am just wondering if you accept this workaround. I will investigate why hex value and underline does not work.

lynneosmith commented 1 year ago

Glad you can now reproduce. Unfortunately, we can have some very large and complex html to insert into the document and it would not be reasonable for us to try to parse through it to figure out which places hex color values need to be changed to rgb. Hopefully, it is not too difficult for you to fix the bug since the hex values already work for the foreground colors. Thanks!

lynneosmith commented 1 year ago 
<!DOCTYPE html>
<html>
<body>

<table><tr><th style='background-color: #dd5757;'>A</th><th style='background-color:#dd5757;'>B</th></tr><tr><td style='background-color:#f9edc6;'>C</td><td style='background-color:#f9edc6;'>D</td></tr></table><br><br>

</body>
</html>

Thanks so much for looking into the issue we are having on Word online with background colors in html I am updating the github issue with some new html. We receive complex html that represents a report. It is not an option for us to go in and edit the html to change background colors to find the closest supported color. I have found that if I insert a table (in Word online) in html that has the same background colors specified in hex, the background color is honored. If Word online is able to honor the hex color for backgrounds in tables, and for foreground of text, then can Word not also support that same background color as a text background? It seems dependent on where in the html the color is more that the fact that it is a hex color

jingxuan0109 commented 1 year ago

Thank you for providing more details. I will investigate it.

lynneosmith commented 1 year ago

Is there any update on this problem? @jingxuan0109

jingxuan0109 commented 1 year ago

We have a created a work item (id: 7588861). It is on going.

lynneosmith commented 4 months ago

@jingxuan0109 @gergzk It says that a work item was created to address this issue. Is that work item still on going and open? Would like clarification on why you closed the ticket. Thanks.