Typesetting East Asian languages on the web

(and how it can inspire alternative web layouts)

@hj_chen

🇲🇾 🏀 👩‍💻 📝 🦊

А а	Б б	В в	Г г	Д д	Е е
Ё ё	Ж ж	З з	І і	Й й	К к
Л л	М м	Н н	О о	П п	Р р
С с	Т т	У у	Ў ў	Ф ф	Х х
Ц ц	Ч ч	Ш ш	Ы ы	Ь ь	Э э
Ю ю	Я я			Belarusian (32)

ا	ب	ج	د	ه	و
ز	ح	ط	ي	ك	ل
م	ن	س	ع	ف	ص
ق	ر	ش	ت	ث	خ
ذ	ض	ظ	غ	Arabic (28)

א	ב	ג	ד	ה	ו
ז	ח	ט	י	ך כ	ל
ם מ	ן נ	ס	ע	ף פ	ץ צ
ק	ר	ש	ת	Hebrew (22)

A a	B b	C c	D d	E e	F f
G g	H h	I i	J j	K k	L l
M m	N n	O o	P p	Q q	R r
S s	T t	U u	V v	W w	X x
Y y	Z z			English (26)

Source Hans Serif Regular (65,535 glyphs)

захапленне
(Belarusian) 10 letters

入迷

Communication
(English) 13 letters

沟通

Grianghrafadóireachta
(Irish) 21 letters

摄影

Phoenician alphabet

甲骨文

“Chinese-script projects are crazy. The scope is mind-blowing.”
—David Březina from The long, incredibly tortuous, and fascinating process of creating a Chinese font

Distribution of content languages on the web

Sources: W3Techs

“People long for their national identity, to be different, to be proud of who they are. Political is daily, cultural is eternal.”
—Alena Makouskaya, coordinator of Budzma

“Only 13% of pupils in Belarus study in the Belarusian language.”
—Alesia Rudnik, Belarus Digest

“In order to tend to the continued development of our languages, we must continue to create technologies that provide smaller languages with the same support enjoyed by larger ones.”
—Rihards Kalniņš, The Guardian

Let's talk about CSS

Web fonts

The CSS3 Fonts specification describes the basic controls CSS provides for selecting and using fonts within documents.

http://bit.ly/css-font-history/

What is a font?

And what are glyphs?

Font formats for web use

WOFF2 (Web Open Font Format 2)
WOFF (Web Open Font Format)
OTF (OpenType)
TTF (TrueType)
EOT (Embedded Open Type)
SVG (Scalable Vector Graphics)

But why do we have so many different font formats anyway? Time for a bit of history. The earliest fonts were pixel-based bitmaps, okay for low-resolution screens, but not for high resolution printing.

One of the solutions to this problem came from Adobe founder, John Warnock, who created Postscript in 1985, the very first vector font, and it really took off.

TrueType was Apple and Microsoft's answer to Adobe's font monopoly. Microsoft came up with TrueType Open in 1994 and eventually Adobe joined in and together they developed OpenType.

Microsoft also came up with EOT or embedded OpenType, and tried to submit this as a W3C recommendation. However, it was rejected in favour of WOFF, or the Web Open Font Format. WOFF2 is an improvement over WOFF with significantly better compression rates.

@font-face

@font-face {
  font-family: 'Farro';
  src: url('farro-light.woff2') format('woff2'),
       url('farro-light.woff') format('woff');
}

On the practical side of things, we use the @font-face rule to declare a list of different font formats for browser support but nowadays, it's safe enough to declare just WOFF and WOFF2.

The @font-face rule has many descriptors but only font-family and src, are mandatory.

The font-family descriptor is simply a label that we reference in other CSS declarations. So maybe you're using Helvetica, you don't have to put “Helvetica” as the descriptor. You could call it “Zefir” if you wanted.

The src descriptor tells the browser where to find the font file, it could be an external URL, or a local font. It also includes an optional format hint. If the browser doesn't support a particular font format stated in that hint, it won't bother looking for the font at all.

Anatomy of an `@font-face` rule

@font-face {
  font-family: <family-name>;
  src: [ <url> [format(<string> #)]? | <font-face-name> ] #;
  font-style: normal | italic | oblique ;
  font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
  unicode-range: <urange> #;
  font-variant: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ];
  font-feature-settings: normal | <feature-tag-value> #;
}

@font-face {
  font-family: 'Farro';
  src: url('fonts/farro-light.woff2') format('woff2'),
       url('fonts/farro-light.woff') format('woff');
  /* no range specified, defaults to entire range */
}

@font-face {
  font-family: 'Farro';
  src: url('fonts/linbiolimum.woff2') format('woff2'),
       url('fonts/linbiolimum.woff') format('woff');
  unicode-range: U+0400–U+04FF; /* Unicode range for Cyrillic characters */
}

Toggle font highlighter tool from about:config

Go to about:config from your address bar

Search for fonthighlighter and double-click it to change its value to true

CSS font properties

`font-size`	Indicates the desired height of the glyphs. Takes absolute or relative values.
`font-weight`	Specifies the weight of the glyphs in the font. Can use keywords or numerical values.
`font-style`	Allows italic or oblique faces to be selected.
`font-stretch`	Selects a normal, condensed or expanded face from a font family. Range spans over 9 keywords.
`font-size-adjust`	Adjusts the font-size to preserve the x-height of the first choice font.
`font-synthesis`	Controls whether user agents are allowed to synthesize bold or oblique font faces when missing.

`font-synthesis`

Image credit: Piotr Grochowski

Font feature properties

`font-kerning`	`font-variant-position`	`font-variant-position-ligatures`
`font-variant-numeric`	`font-variant-caps`	`font-variant-alternates`

`font-variant-east-asian`

https://wakamaifondue.com/

Variable fonts

OpenType Variable font axes — Image credit: John Hudson

Mandy Michael's variable font demo showcase

See the Pen Grassy Text with Variable fonts. by Mandy Michael (@mandymichael) on CodePen.

The magic of Writing Modes

CSS Writing Modes Level 3 defines CSS features to support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).

So I want to introduce the writing-mode property, which deals specifically with vertical text.

You can make your browser literally turn on its side from left-to-right.

🙃

Or make it read from right-to-left.

🙂

Vertical text is fun!

You literally turn the browser on its side. Some people might be saying, no big deal, we can do that with transforms too. Not exactly. Changing the writing-mode affects an elements box alignment axes.

`writing-mode` property

horizontal-tb	从1987到现在
vertical-rl	从1987到现在
vertical-lr	从1987到现在
sideways-rl*	从1987到现在
sideways-lr*	从1987到现在

Properties marked with * have been deferred to Writing Modes Level 4.

This is what happens to your text when the different values of writing-mode are applied. The default is horizontal, top-to-bottom. To change the direction to vertical, we use vertical-rl or vertical-lr.

`text-orientation` property

从1987到现在

mixed

从1987到现在

upright

从1987到现在

sideways

`text-combine-upright` property

民國107年5月25日

none

民國107年5月25日

all

民國107年5月25日

digits <integer>*

Codepen example for text-combine-upright

The last property in this set is the text-combine-upright property, which address the issue of numerals and abbreviations in vertical text. For example, if your text contains dates. This property lets us fit all the digits into the width of one character and display them upright.

古巴Cuba

白俄罗斯共和国Belarus

列支敦斯登Liechtenstein

Typography suggestions

Use and declare the correct font-family

Image credit: Tetsuhiro Ueda

Make sure the font-size is large enough

白俄罗斯 Belarus

Set larger line-height for sufficient breathing room

世界上的事就是怪，不想发生的事偏发生了。我把那位迟到的学生带到办公室了解情况。原来他家离学校有二十多里路，他如果要准时到校的话，早晨五点钟就得起床，还要摸黑走上十几里山路。🙅

世界上的事就是怪，不想发生的事偏发生了。我把那位迟到的学生带到办公室了解情况。原来他家离学校有二十多里路，他如果要准时到校的话，早晨五点钟就得起床，还要摸黑走上十几里山路。👍

Set appropriate margins between paragraphs

我问他想不想走出大山。他说，想。我说，要走出大山就得好好读书。他抹着眼泪点点头。我说，相信老师，老师会帮你的。

这个冬天，每天早晨等上课铃响过后，我和另一位老师轮换着去查他的被褥。如果是湿的，我们就悄悄拿到自己的寝室里烘干。

Use text-align: justify

课外活动时，我尝试着给他们读一些脍炙人口的诗篇：风雨沉沉的夜里，前面一片荒郊，走尽荒郊，便是人们的道，呀﹗黑暗里歧路万千，教我怎样走好，上帝﹗快给我些光明吧，让我向前跑，上帝慌着说：光明，我没处给你找，你要光明，你自己去造。🙅

课外活动时，我尝试着给他们读一些脍炙人口的诗篇：风雨沉沉的夜里，前面一片荒郊，走尽荒郊，便是人们的道，呀﹗黑暗里歧路万千，教我怎样走好，上帝﹗快给我些光明吧，让我向前跑，上帝慌着说：光明，我没处给你找，你要光明，你自己去造。👍

Yayoi Kusama

A vital part of New York’s avant-garde art scene from the late 1950s to the early 1970s, Yayoi Kusama developed a distinctive style utilizing approaches associated with Abstract Expressionism, Minimalism, Pop art, Feminist art, and Institutional Critique—but she always defined herself in her own terms. “I am an obsessional artist,” she once said. “People may call me otherwise, but…I consider myself a heretic of the art world.”

Kusama was born in 1929 into a well-off but dysfunctional family in Nagano, Japan. Largely shielded from the horrors of World War II, she was, as she has claimed, nevertheless scarred by her mother’s cruelty, her father’s infidelities, and her family’s discouragement of her interest in art making. She started painting at the age of 10 when she began experiencing the visual and aural hallucinations that would plague her, while also fueling her creativity, for the rest of her life. She has maintained that her “artwork is an expression of my life, particularly of my mental disease.”

Logical directions

That's why we have a CSS Logical Properties specification. So instead of left or right, we use properties like block-start and block-end or inline-start and inline-end. So these directions continue to make sense, even if the writing mode of the document changes.

CSS Logical Properties

Increment navigation and menu — https://increment.com by Stripe

Vertical text with CSS — Bookshelf-style design with vertical text

Responsive vertical to horizontal layout

Vertical mobile navigation

Broken flexbox layout — https://www.chenhuijing.com/blog/vertical-typesetting-revisited

Statistically, there aren't that many sites which use the writing-mode property. When I tried to use Flexbox with vertical writing-mode, I broke my browser.

💩

Frequency of major browser releases

Raising bugs for Firefox — Bugzilla@Mozilla

Raising bugs for Webkit — Webkit Bugzilla

Raising bugs for Edge — EdgeHTML issue tracker

A long list of references

Internet World Stats
Language Diversity Index Tracks Global Loss of Mother Tongues
The Internet Is Killing Most Languages
After decades of Russian dominance, Belarus begins to reclaim its language
The Endangered Languages Project
Source Han Serif / Noto Serif CJK History & Development
Chinese Fonts & Related Issues
Variable fonts, a new kind of font for flexible design
Introducing OpenType Variable Fonts
fvar — Font Variations Table
Variable Fonts on the Web
Getting started with variable fonts
全球首款! 文鼎晶熙黑體支援可變式字體格式
Creative text effects with CSS by Mandy Michael (video)
W3C Internationalization & Text Layout Requirements
Best Practices for Chinese Layout
Brokaw, C. & Reed, C. A. (2010). From woodblocks to the Internet: Chinese publishing and print culture in transition, circa 1800 to 2008. Leiden: Brill.
Tsien T. (2011). Collected writings on Chinese culture. Hong Kong: The Chinese University Press.
Tsien, T. & Shaughnessy, E. L. (2013). Written on bamboo & silk: the beginnings of Chinese books & inscriptions. Chicago: The University of Chicago Press.
Houston, K. (2016). The book: a cover-to-cover exploration of the most powerful object of our time. New York: W.W. Norton & Company.
Haralambous, Y., & Horne, P. S. (2007). Fonts & encodings.

Web awards for vertical writing — http://tategaki.github.io/awards/

Jen Simmons' experimental layout lab — http://labs.jensimmons.com/

Дзякуй

https://www.chenhuijing.com

@hj_chen

@huijing

Font used is Farro, by Grayscale

Typesetting East Asian languages on the web

(and how it can inspire alternative web layouts)

Phoenician alphabet

甲骨文

Distribution of content languages on the web

Let's talk about CSS

Web fonts

What is a font?

And what are glyphs?

Font formats for web use

@font-face

Anatomy of an @font-face rule

CSS font properties

font-synthesis

Font feature properties

font-variant-east-asian

Variable fonts

The magic of Writing Modes

writing-mode property

text-orientation property

text-combine-upright property

Typography suggestions

Yayoi Kusama

Logical directions

CSS Logical Properties

Frequency of major browser releases

A long list of references

Дзякуй

Anatomy of an `@font-face` rule

`font-synthesis`

`font-variant-east-asian`

`writing-mode` property

`text-orientation` property

`text-combine-upright` property