How do I make japanese text italic in Chrome?

Question

I have a div whose contents the user can edit, since it has the attribute contenteditable="true".

The user can type Chinese, Japanese, or Korean text in there, and style it as bold, italic, or underline.

All works well in Firefox. But not in Chrome, or Edge (haven't tested on other browsers yet). In Chrome, I cannot make Japanese Kana italic. Everything else works.

I do know that italic characters are not something that is used in real, native Japanese text, but I really need this feature nonetheless.

I tried using <i>, <em>, using CSS to make font-style: italic, font-style: oblique...Nothing seems to work for Chrome.

What can I do?

This is my code (the part I cannot italize is the "かな", in front of "Japanese Kana:", on the third line):

JSFiddle

function styleText(x) {
  document.execCommand(x);
}

body {
  padding: 10px;
  font-family: sans-serif;
}

input {
  padding: 5px;
  outline: 0;
  font-weight: bold;
}

div {
  margin: 10px 0;
  width: 200px;
  border: solid 1px #000;
  padding: 5px;
}

<input type="button" value="Bold" onclick="styleText('bold');">
<input type="button" value="Italic" onclick="styleText('italic');">
<input type="button" value="Underline" onclick="styleText('underline');">

<div contenteditable="true">
  Chinese Hanzi: 汉字<br>
  Japanese Kanji: 漢字<br>
  Japanese Kana:  かな<br>
  Korean Hangul: 한글
</div>