mbee mbee - 3 months ago 7
HTML Question

Why is ⌘ displayed smaller for Chinese language code in Chrome and Firefox?

On both Firefox and Chrome (but not in Safari) the following HTML displays the same symbol in very different font sizes.



<div lang="en">⌘</div>
<div lang="zh">⌘</div>






  1. Why?

  2. What can I do against it? My current workaround is to do
    <span lang="en">⌘</span>
    on Chinese pages. But that doesn’t feel right.

  3. I observed this on OS X (El Capitan) 10.11.6. How does it look on Windows?



Note:


  • You might not be able to see the symbol at all on your operating system (e.g. on Android). So what I mean is the command key (unicode) symbol: https://en.wikipedia.org/wiki/Command_key

  • Looks fine on iOS (both Safari and Chrome according to Andrew).


Answer

At least on OS X, it is a font problem.

The symbol "⌘" is only provided by a few fonts. Some of which are: Lucida Grande, the system font and Heiti SC, a Simplified-Chinese font. Since they are different fonts, we cannot expect the rendering of ⌘ is the same.

If the font you have chosen (say, Arial) does not contain the symbol "⌘", the rendering engine will try to find an alternative font that has it.

It seems Firefox and Chrome take the lang into account. So the Lucida Grande glyph is chosen for the English ⌘, and Heiti SC is chosen for the Chinese ⌘.

This could be fixed by adding the desired font in the font-family list:

<p style="font-family: Arial, sans-serif"> 
<span lang=en>english ⌘</span><span lang=zh>⌘ 中文</span> 
</p>
<p style="font-family: Arial, 'Lucida Grande', sans-serif"> 
<span lang=en>english ⌘</span><span lang=zh>⌘ 中文</span>
</p>