Font changes in editable <div> element after style changes (bold, italicize, but not underline)

Question

So I noticed this odd bug while I was making a notes section in my app. I have a <div> element with contenteditable = true; 

When adding bold or italic text (ctrl+b, ctrl+i), and then resetting back to normal (another ctrl+b, or ctrl+i), the font changes. 

It is not a showstopper, but the notes section begins to look very sloppy with different fonts throughout. 

Reproduction steps.

1. Add this line to a project: (adding borders might make it easier to find)

<div id="noteSpace" contenteditable="true"></div>

2. Type any text

3. Begin bold by pressing "ctrl+b"

4. Type bolded text

5. Undo bold by pressing "ctrl+b"

6. Type any text. Notice the font has changed. 

Selecting a font using the style attributes did not correct the issue either. Anyone have solutions?

Thanks in advance!

Answer 1

Hi TR1320,

When I create a new Windows Store App HTML5 app, what I found is when I press ctrl+b in div, nothing changes in div content, but when I press ctrl+i, I found the <em>tag has been attached to the div content.

But I don't think this is what you meant, I cannot type any bolded text by press ctrl+b.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Hmm. Strange. I get this by following my reproduction steps

<div>Any text</div>
<div><strong>Bolded Text</strong></div>
<div><font face="Segoe UI Bold">font change</font></div>

I can't seem to correct it adding the <font face="Segoe UI Bold"> </font> automatically 

EDIT: forgot to include new line in the reproduction steps. Each step is on a separate line. That may be something to do with it. 

Answer 3

Hi TR1320,

Well, yes, new line is the key point, now I can reproduce it. The font face has been attached automatically. Only <strong> tag has been attached, but not with font face.

I think this is a default HTML behavior, if you test with a normal HTML page, the same thing happens. Meanwhile Windows Store App HTML app use the same render engine as IE10 or IE11, if IE10 behavior like this, then it is reasonable with Windows Store App.

It really depend on different render engines, for instance if we use ctrl+b and ctrl+i in Chorme, the <i>and<b> tag has been attached, but if we are working with IE engine, the <font> and <strong> has been attached.

And sorry I cannot tell how to add <font face="Segoe UI Bold"> instead of <strong>, it is a system behavior.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.