0

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>
MikeMichaels
  • 454
  • 1
  • 6
  • 25
  • I can't reproduce this problem with the code you've provided. I'm testing in Chrome 85.0.4183.121 on Mac, as well as Firefox and Safari without trouble. Note that when browsers do this, they're applying "faux italic." It's not a proper font substitution; it's just applying a skew transform (since I don't know any fonts that have italicized kana glyphs). It's conceivable that you've broken this skewing (maybe with a CSS transform?) Or it may be a bug in Chrome. But so far I haven't been able to reproduce it. – Rob Napier Nov 01 '20 at 16:31
  • I am having trouble with this on Chrome's Version 86.0.4240.111 (64 bits), on a PC running Windows 10. In the snippet above (which also doesn't work properly in Chrome), there is no other CSS rule that could be breaking the skewing. I can't even force it by using some CSS like `transform: skewX(-8deg);` – MikeMichaels Nov 01 '20 at 17:08
  • This works fine for me in Chrome 86.0.4240.193 (64 bits) and Windows 10. My guess is that your font by default does not support italic? AFAIK `sans-serif` does not contain any of CJK letters. – Coconut Nov 17 '20 at 12:22

0 Answers0