CODEWITHSUNDEEP
htmlcssunicode
AlexMA
AlexMA

Reputation: 10214

Setting element's language attribute causes unicode character style bugs in children

Question: Is there a proper way to set the page language such that it doesn't cause a bunch of style regressions if you use unicode characters? Or is there a simple workaround that doesn't involve scattering a bunch of :lang pseudo selectors throughout our css, a very inefficient solution? Other unappealing ideas I've had: stop using unicode characters and use icons instead. This would not be easy in our large and mature code-base.

Update: here is a new runnable example. It seems that only some unicode characters have this issue, and only with some fonts. 

body {
  font-family: serif;
}
<h3>Blackjack advice (Unicode dabblings)</h3>

<p lang="en-US">If you draw ♤, alway hit</p>
<p lang="zh-Hans">如果你画 ♤，总是打</p>

<p lang="en-US">If you draw ●, alway hit</p>
<p lang="zh-Hans">如果你画 ●，总是打</p>

<p lang="en-US">If you draw ❦, alway hit</p>
<p lang="zh-Hans">如果你画 ❦，总是打</p>


<p lang="en-US">If you draw 𝄞, alway hit</p>
<p lang="zh-Hans">如果你画 𝄞，总是打</p>

Why is ● so large in Chinese? Interestingly, changing font-family to sans-serif normalizes the size (at least in my current context, Chrome/Windows).

Upvotes: 1

Views: 52

Answers (1)

YellowAfterlife
YellowAfterlife

Reputation: 3202

From specification:

User agents may use the element's language to determine proper processing or rendering (e.g. in the selection of appropriate fonts or pronunciations, for dictionary selection, or for the user interfaces of form controls such as date pickers).

You asked to get you a font that's appropriate for rendering Simplified Chinese, and browser/OS did, and it just so happens that this font, at least on your system, has a differently styled ● glyph.

I would suggest to wrap your symbols of interest in a separate tag, use it to override the font to best-fitting one (perhaps a CSS font for fine control over size/style) and also use this as a wonderful opportunity to give them alt-text/title of some kind, as personally I am already lost as to whether the circle is clubs or diamonds in your example, for the music note doesn't look like either of these suits in any of interpretations that I'm aware of.

body {
  font-family: serif;
}
abbr.ico {
  font-family: sans-serif;
}
<h3>Blackjack advice (Unicode dabblings)</h3>

<p lang="en-US">If you draw ●, alway hit</p>
<p lang="ru-RU">Если вам попался ●, ходите</p>
<p lang="zh-Hans">If you draw ●, alway hit</p>
<p lang="zh-Hans">如果你画 ●，总是打
<br>If you draw ●, alway hit</p>
<p lang="en-US">If you draw <abbr class="ico" title="a circle?">●</abbr>, alway hit</p>
<p lang="zh-Hans">如果你画 <abbr class="ico" title="a circle?">●</abbr>，总是打</p>

Upvotes: 1

Related Questions