CSS for i18n

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🦊 🥑 🧗 🏳️‍🌈

@hj_chen

Numeronyms

Internationalisation is the design and development of a product, application or document that enables easy localisation for target audiences that vary in culture, region, or language.

There is no canonical set-in-stone definition of internationalisation, but the W3C does offer this guidance. It is designing and developing in a way that enables easy localisation for specific audiences. Localisation covers a broad range of customisations including but not limited to: numeric, time and date formats, currencies, symbols, icons and colours, even textual and graphical references.

This implies that internationalisation is a lot more than simply translating the content on a site to different languages. There are nuances to the presentation of that content which will affect the experience of a native speaker using your site. This is where CSS comes in.

To be honest, this talk originated from an article I wrote earlier, and the main reason I wrote that article was because someone said to me that CSS has nothing to do with internationalisation. It was my passive-aggressive two thousand plus word response.

What is CSS?

A vocabulary for communicating with the browser.

To inform the browser how we want elements to be styled and laid out.

CSS is a domain-specific, declarative programming language.
–Lara Schenck

Why `lang` matters?

Language-specific behaviour in browsers
Default font selection
Search engine optimisation
Spelling and grammar checks
Translation
Non-text readers
Parsers and scripts

Source: Why use the language attribute?

Basics of using `lang`

Set the default language of the document:

<html lang="zh">

If you have mixed language content on your page:

<p>The fourth animal in the Chinese Zodiac is Rabbit (<span lang="zh">兔子</span>).</p>

Always set the overall default language on the HTML element, because if you simply set it on the body element, the stuff in the head doesn't get it. Language code information is inherited according to the following order of precedence: a lang attribute on the element itself, if not, then the closest parent with a lang attribute set, if not, then the HTTP "Content-Language" header, if not, then user agent default values and user preferences. Once we've got that settled, let's look at how to make use of this attribute.

The `:lang()` pseudo-class

A selector that represents an element based on its language

We use italics to emphasise words in English, 但是中文则是用着重号.

We use italics to emphasise words in English, 但是中文则是用着重号.

I'm not sure how many people are familiar with the :lang() pseudo-class, but this is a pretty cool selector. So we've got this mixed language sentence here marked up like so. The bit in Chinese is marked up as a span tag with lang set to zh.

Chinese writing does not have italic styles. To emphasise words, we use a type of punctuation called 着重号. And we can use CSS for this with the text-emphasis property and set a value of dot. There are more values available, like double circle, or triangle. You could put a string in there as well.

:lang will recognise the language of the content of an element even if the language is declared outside the element in question. In this case, the attribute in on the span not the em, but it still picks up.

Attribute selectors

A selector that matches elements based on the presence or value of a given selector

[lang="zh"]
/* will match only zh */

[lang^="zh"]
/* will match zh, zh-HK, zh-Hans, zhong, zh123…
 * basically anything with zh as the first 2 characters */

[lang|="zh"]
/* will match zh, zh-HK, zh-Hans, zh-amazing, zh-123 */

Some things to note…

The :lang() pseudo-class does take care of partial tag matching

In terms of selector matching, the |= operator performs a comparison against a given attribute on the element, while the :lang() pseudo-class uses the UAs knowledge of the document's semantics for the comparison

You can always use normal classes or ids, but you would no longer be making use of the convenience of what already exists

The faux fonts problem

Faux italic effect — Spotting faux italic

Image source: Cai

`font-synthesis`

Controls if the browser should synthesize a missing typeface or not

We use italics to emphasise words in English, 但是中文则是用着重号.

Or in the case of Chinese, not even necessary. We can use the font-synthesis property to fix this, and make use of the :lang() pseudo-class to target just Chinese, like we did in the example before.

Glyph differences

能

lang="zh-hans"

能

lang="zh-hant"

The lang attribute also impacts default font selection. Chinese fonts are so huge that most of us don't use them as web fonts for body text. We usually fallback to system fonts. For this presentation, I did not explicitly specify any Chinese fonts, and instead, let the browser pick the appropriate font.

I'm guessing most of the audience may not read Chinese, but there are two variants of the Chinese script, simplified and traditional. There are glyphs that look exactly the same for both, there are glyphs that are completely different and there are glyphs that are essentially the same but with stylistic differences.

Like this particular glyph here, I've made it large so hopefully you can spot the differences in the styles. When I set the language to traditional Chinese, the browser knows to pick the traditional Chinese typeface instead of the simplified typeface.

`font-variant-east-asian`

Allows control of glyph substitution and sizing in East Asian text

一个简体字可能对应多个繁体字，如简体字「发」，其相应的繁体字可能为「發」或「髮」；一个繁体汉字对应多个简体汉字的情况与前者相比数量极少但仍需注意，如繁体字「乾」可能对应简体字「干」或「乾」。

`font-language-override`

To control the use of language-specific glyph substitutions and positioning

<!-- Macedonian lang code -->
<body lang="mk">
  <h4>Члeн 9</h4>
  <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>
</body>

body {
  /* Serbian OpenType language tag */
  font-language-override: "SRB";
}

Example lifted from CSS Fonts Module Level 4

`text-transform`

Transforms text for styling purposes

If I want [flowers], I’m going to send them to myself.

Süße Soßen-Klöße genießen maßgeblich gefräßige preußische Nutznießer.

Ουδέν κακόν αμιγές καλού.

ァィゥェォヵㇰヶ

Line breaks for inline boxes

If an element generates zero boxes, was it really there at all?

If an element generates zero boxes, was it really there at all?

CSS for controlling line breaks

`line-break`	allows choosing various levels of “strictness” for line breaking restrictions
`word-break`	controls what types of letters are glommed together to form unbreakable “words”, causing CJK characters to behave like non-CJK text or vice versa
`hyphens`	controls whether automatic hyphenation is allowed to break words in scripts that hyphenate
`overflow-wrap`	allows the UA to take a break anywhere in otherwise-unbreakable strings that would otherwise overflow

Line breaking by Florian Rivoal @ dotCSS

But there is a lot of nuance involved because word breaking works differently depending on the language we're typesetting for.

For example, English wraps at spaces. But for Japanese or Chinese characters, the break is per character, but on occasion it's not, because line breaks are prohibited before certain punctuation marks.

A number of Southeast Asian scripts are written without spaces between words, then text is wrapped at syllable boundaries in addition to word boundaries. We could keep going here.

There is interplay between the 4 properties here to provide developers more precise control over line breaking, because some rules take precedence over others if both are present, or some only take affect if white-space allows wrapping, for example.

Hyphenation

If you don't give a lang attribute, you don't get automatic hyphenation.

—Florian Rivoal

Browsers use language-specific dictionaries to figure out where the hyphenation points should be.

This ties back to my earlier point. If you don't use lang properly, you don't get out-of-the-box features like automatic hyphenation, for example.

`writing-mode`

ᠬᠦᠮᠦᠨ ᠪᠦᠷ ᠲᠥᠷᠥᠵᠦ ᠮᠡᠨᠳᠡᠯᠡᠬᠦ ᠡᠷᠬᠡ ᠴᠢᠯᠥᠭᠡ ᠲᠡᠢ᠂ ᠠᠳᠠᠯᠢᠬᠠᠨ ᠨᠡᠷ᠎ᠡ ᠲᠥᠷᠥ ᠲᠡᠢ᠂ ᠢᠵᠢᠯ ᠡᠷᠬᠡ ᠲᠡᠢ ᠪᠠᠢᠠᠭ᠃ ᠣᠶᠤᠨ ᠤᠬᠠᠭᠠᠨ᠂ ᠨᠠᠨᠳᠢᠨ ᠴᠢᠨᠠᠷ ᠵᠠᠶᠠᠭᠠᠰᠠᠨ ᠬᠦᠮᠦᠨ ᠬᠡᠭᠴᠢ ᠥᠭᠡᠷ᠎ᠡ ᠬᠣᠭᠣᠷᠣᠨᠳᠣ᠎ᠨ ᠠᠬᠠᠨ ᠳᠡᠭᠦᠦ ᠢᠨ ᠦᠵᠢᠯ ᠰᠠᠨᠠᠭᠠ ᠥᠠᠷ ᠬᠠᠷᠢᠴᠠᠬᠥ ᠤᠴᠢᠷ ᠲᠠᠢ᠃

writing-mode: vertical-lr

すべての人間は、生まれながらにして自由であり、かつ、尊厳と権利とについて平等である。人間は、理性と良心とを授けられており、互いに同胞の精神をもって行動しなければならない。

writing-mode: vertical-rl

Okay, let's move a level up to layout. The default value for writing-mode is horizontal-tb. Perfectly logical because the web was born at CERN, where the official languages are English and French. Moreover, most of web technologies were pioneered in English-speaking countries anyway (I think).

The traditional Mongolian script runs vertically from left-to-right, while East Asian languages like Japanese, Chinese and Korean, when written vertically, runs from right-to-left. The writing mode properties that let you do that are vertical-lr and vertical-rl respectively.

There are also the values of sideways-lr and sideways-rl, which rotate the glyphs sideways. Every Unicode character has a vertical orientation property that informs rendering engines how the glyph should be oriented by default.

`text-orientation` & `text-combine-upright`

國家籃球協會（英語：National Basketball Association，縮寫：NBA）是北美的男子職業籃球聯盟。

text-orientation: upright

國家籃球協會（英語：National Basketball Association，縮寫：NBA）是北美的男子職業籃球聯盟。

text-combine-upright: all

We can change the character’s orientation with the text-orientation property. This usually comes into play when you have vertically typeset East Asian text interspersed with Latin-based words or characters. For abbreviations, you have the option of using text-combine-upright to squeeze the letters into one character space.

Right-to-left languages

CSS should not be used for bi-directional styling

Because directionality is an integral part of the document structure, markup should be used to set the directionality for a document or chunk of information, or to identify places in the text where the Unicode bidirectional algorithm alone is insufficient to achieve desired directionality.

Not just for East Asian text

Recreation of Gosizdat poster in HTML and CSS

Confusing physical directions

Physical directions for writing modes other than horizontal top-to-bottom may be confusing

Госиздат

Logical properties

		writing-mode / direction
		horizontal-tb		vertical-rl		vertical-lr
		ltr	rtl	ltr	rtl	ltr	rtl
Edge	top	inset-block-start	inset-block-start	inset-inline-start	inset-inline-end	inset-inline-start	inset-inline-end
	right	inset-inline-end	inset-inline-start	inset-block-start	inset-block-start	inset-block-end	inset-block-end
	bottom	inset-block-end	inset-block-end	inset-inline-end	inset-inline-start	inset-inline-end	inset-inline-start
	left	inset-inline-start	inset-inline-end	inset-block-end	inset-block-end	inset-block-start	inset-block-start

See the Pen CSS Logical properties demo for borders by Chen Hui Jing (@huijing) on CodePen.

Lists and counters

Allows us to display ordered lists with international numbering systems

CSS Fizzbuzz

Thank you!

https://www.chenhuijing.com