Issue
I set the lang attribute on the html element to "en". When looking around in the style inspector in chrome i saw the following css on the html element. Note that this is a default style added by the browser.
html[Attributes Style] {
-webkit-locale: "en";
}
When i look at it in firefox, the html element doesn't have these styles.
Is this in the spec?
What does this do?
Can you set this value in css?
Should you set this value?
What elements does this aply to?
Solution
TL;DR
"The font-language-override CSS property controls the use of language-specific glyphs in a typeface."[1] Similarly -webkit-locale
does the same thing but for webkit/chromium based browsers[2].
Unicode is not a 1:1 mapping of character's to glyphs - it is a function of the unicode character number and the current locale[3]. You may be interested in looking at CJK Unified Ideographs for examples[4][5].
Basically these CSS properties allow you to override or create a fallback for the document (or other element's) lang
attribute. It tells the browser which glyph in a font to render based on the language/locale value.
-webkit-locale
appears to use the same language range as the Accept-Language
HTTP header[6][7][8].
In contrast font-language-override
requires a three or four-character case-sensitive OpenType language system tag.[1][9][10]
Question Answers:
When I look at it in Firefox, the html element doesn't have these styles.
Firefox does not support -webkit-locale
but it does support font-language-override
[1], which essentially does the same thing[2].
Is this in the spec?
-webkit-locale
is non-standard[11][12] and only supported in webkit/chromium based browsers while font-language-override
is a standard[1][9] but only currently supported by Firefox. Between the two however, you essentially have full evergreen browser support.
What does this do?
Here is an example:
.traditional {
-webkit-locale: 'zh-Hant';
font-language-override: 'ZHT';
}
.simplified {
-webkit-locale: 'zh-Hans';
font-language-override: 'ZHS';
}
.traditional-hong-kong {
-webkit-locale: 'zh-Hant-HK';
font-language-override: 'ZHH';
}
.traditional-macao {
-webkit-locale: 'zh-Hant-MO';
font-language-override: 'ZHTM';
}
/* simple table styles */
table {
border-collapse: collapse;
}
th {
background: #cccccc;
}
th,
td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
tr:nth-child(even) {
background: #efefef;
}
tr:hover {
background: #d1d1d1;
}
td:first-of-type {
font-size: 100px;
}
<html lang="zh">
<head>
<title>-webkit-locale Example</title>
</head>
<body>
<h3>This is the same Chinese character (選) but different glyphs are rendered based on the -webkit-locale/font-language-override.</h3>
<table>
<thead>
<tr>
<th>Glyph</th>
<th>-webkit-locale <br> font-language-override</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>選</td>
<td>None</td>
<td>default, lang="zh"</td>
</tr>
<tr>
<td class="simplified">選</td>
<td>zh-Hans <br> ZHS</td>
<td>simplified Chinese</td>
</tr>
<tr>
<td class="traditional">選</td>
<td>zh-Hant <br> ZHT</td>
<td>traditional Chinese</td>
</tr>
<tr>
<td class="traditional-hong-kong">選</td>
<td>zh-Hant-HK <br> ZHH</td>
<td>Hong Kong traditional Chinese</td>
</tr>
<tr>
<td class="traditional-macao">選</td>
<td>zh-Hans-MO <br> ZHTM</td>
<td>Macao traditional Chinese</td>
</tr>
</tbody>
</table>
</body>
</html>
Result on Chrome 120 - MacOS - lang="en"
- uses -webkit-locale
:
Result on FireFox 121 - MacOS - lang="zh"
* - uses font-language-override
:
* Note that when using font-language-override the various glyphs in this example will not be applied correctly unless the lang attribute is zh
.
Can you set this value in css?
Yes, that is it's purpose.
/**
* Render Chinese traditional characters
* instead of the in-many-cases-defaulted-to
* Chinese simplified characters.
*/
[lang='zh'] {
-webkit-locale: 'zh-Hant';
font-language-override: 'ZHT';
}
Should you set this value?
Not unless you really need to. It would probably be preferable to just set the lang
tag to the character set you want (e.g., lang="zh-Hant"
).
What elements does this apply to?
"Applies to all elements and text. It also applies to ::first-letter and ::first-line."[13]
[1] - font-language-override MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override
[2]: After extensive searching I could not find an official definition or documentation on what -webkit-locale
does; however, this SO answer and examples should suffice.
[3] - Chromium implementation docs: https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/platform/fonts/LocaleInFonts.md#unified-han-ideographs
[4] - What are CJK Unified Ideographs?: https://en.wikipedia.org/wiki/CJK_Unified_Ideographs
[5] - CJK Unified Ideographs Unicode Standard: https://unicode.org/charts/PDF/U4E00.pdf
[6] - Accept-Language MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language
[7] - Language Range: https://www.rfc-editor.org/rfc/rfc4647#section-2.1
[8] - Accept-Language List: https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
[9] - CSS Fonts Module Level 4: https://drafts.csswg.org/css-fonts/#font-language-override-prop
[10] - OpenType Language System List: https://learn.microsoft.com/en-us/typography/opentype/spec/languagetags
[11]: Non-standard MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions#l
[12] - Mentions that this is non-standard: https://github.com/chromium/chromium/commit/74c5b3d45c81fcc9c5cd86213c8c265335e6e1a6
[13] - Formal Definition MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override#formal_definition
Answered By - coderfin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.