East Asian typography on the modern web 网络时代的汉字排版

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

@hj_chen

Before we get into the talk proper, where we'll be looking at what current web technologies offer for typesetting in the browser, I'd like everyone to just give a think about information technology. Since we are often said to be living in the information age right now.

Information technology deals with the storage and retrieval of information, the extraction of higher levels of meaning from a collection of information and the transmission of information over large distances.

Writing is the first information technology humans ever developed. And writing was so flexible. All you needed was a surface and an implement to create marks on that surface. Vincent Steer, founder of the British Typographers' Guild, had said that the character of any alphabet is dictated by the materials used in its expression.

Cuneiform writing was made by using a wedge-shaped tool that was pressed into wet clay, the Egyptians wrote on papyrus with a reed pen, making their lines were soft and flowy. Chinese writing centred around the brush, and this too informed how Han characters evolved over time.

Technological advancement can generally be thought of as humanity's solution for producing more output for less effort. The advancement of information technology sought to reproduce writing at scale, from employing larger numbers of humans to copy scripts to the development of printing and digital technology.

But with every increase in productivity, significant trade-offs were made. The techniques that won out over the course of human civilisation shape how we live today. There are a huge number of factors that came into play but what is undeniable is that modern day digital technology suits a particular style of writing system over others.

I have no idea what an alternate history would look like because my reality is here and now. It's as if you're asking a person who has been colour-blind their whole life to imagine what green is. Science fiction writers probably do a better job of this, but I do wonder how different our lives would be if digital technology was pioneered in a different region.

Overview

Recognising the characters
Displaying the characters
Laying out the characters

Character encoding

Screenshot of FontForge — Encoding options available in FontForge

Encoding incompatibility

Declaring character encodings for the web

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
...

@charset "utf-8";
/* all the styles for your web page */

The recommendation from the W3C is to always save your pages as UTF-8, and to always declare the encoding of your document via the charset attribute on meta tags that go into your document's head element. For CSS, you would use an @charset declaration at the top of your stylesheet.

Text rendering on electronic screens

Bitmap fonts

PostScript

Structure of a Type 1 font program and dictionary structure which is created when it executes — Type 1 font program

The Font Wars by Typography.Guru

https://youtu.be/5X9Dj7tBlkg

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)

Chinese typeface design

Designing Chinese characters is significantly more challenging as compared to Latin-based alphabets or Arabic numerals for a number of reasons. Firstly, the sheer volume of glyphs required for just for daily use alone is around 7000, but there are more than 50000 in existence.

Such a monumental task, if undertaken by a single experienced designer working full time would probably take at least 3 years to complete the 6763 characters defined in the Chinese national standard. Most foundries employ a team working closely together over 3 to 5 months. However, this also increases the risk of inconsistency in structure and style across such a large volume of characters.

The structure of Chinese characters are also more complex, often having more than 10 strokes and intersection points. Quite a challenge from a rendering perspective as well.

Web fonts

Font stacks

/* This text is in Lucida Grande */
.sans { 
  font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; 
}

/* A typical Chinese font stack, declare Latin fonts first */
.zh-hans {
  font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
}

Subset fail

Subsetting gone wrong on Medium for letters beyond the basic Latin set

Subsetting gone wrong on Medium for Lithuanian characters

@font-face rule

@font-face {
  font-family: 'Bellato';
  src: url('Bellota-Regular.woff2') format('woff2'),
       url('Bellota-Regular.woff') format('woff');
}

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> #;
}

Slides for This world mixed and blended by Gao Wei.

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

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

Source Hans Serif (65,535 glyphs)

Subsetting web fonts

Screenshot of Font Squirrel website — Font Squirrel

Screenshot of FontPlop interface — FontPlop

Screenshot of FontSpider website — Font Spider

Variable fonts

Dragons

Space

Weight

Progressive Font Enrichment

to enable the ability for only the required part of the font be downloaded on any given page, and for subsequent requests for that font to dynamically ‘patch’ the original download with additional sets of glyphs as required on successive page views—even if they occur on separate sites

—Jason Pamental on Web Fonts & Typography News #11

Incremental Transfer Demo

Google Fonts’ Incremental Transfer Demo

https://rwt.io/newsletter

Typesetting on the web

Authors should language-tag their content accurately for the best typographic behaviour.

—CSS Text Module Level 3

If the medium we are operating in is the web, then our tool for the trade of typesetting is CSS. We are trying to do what folks have been doing since setting type became a thing, some underlying principles hold steadfast but our tools have changed over time.

Declaring a content language on an element is one of the most basic things we can do, because it identifies the specific written form of the language to be used in that element, AKA the content writing system.

This is important because language and writing system conventions affect lots of typographic effects like line breaking, hyphenation, justification, glyph selection and more.

For CSS, language-specific typographic tailorings are only applied when the content language is explicitly declared. So it is in our best interest to tell the browser exactly what language our content is in to ensure a higher quality typographic experience for our users.

OpenType features

aalt
abvf
abvm
abvs
afrc
akhn
blwf
blwm
blws
calt
case
ccmp
cfar
cjct
clig
cpct
cpsp
cswh
curs
cv01 – cv99
c2pc
c2sc
dist
dlig
dnom
dtls
expt
falt
fin2
fin3
fina
flac
frac
fwid
half
haln
halt
hist
hkna
hlig
hngl
hojo
hwid
init
isol
ital
jalt
jp78
jp83
jp90
jp04
kern
lfbd
liga
ljmo
lnum
locl
ltra
ltrm
mark
med2
medi
mgrk
mkmk
mset
nalt
nlck
nukt
numr
onum
opbd
ordn
ornm
palt
pcap
pkna
pnum
pref
pres
pstf
psts
pwid
qwid
rand
rclt
rkrf
rlig
rphf
rtbd
rtla
rtlm
ruby
rvrn
salt
sinf
size
smcp
smpl
ss01
ss02
ss03
ss04
ss05
ss06
ss07
ss08
ss09
ss10
ss11
ss12
ss13
ss14
ss15
ss16
ss17
ss18
ss19
ss20
ssty
stch
subs
sups
swsh
titl
tjmo
tnam
tnum
trad
twid
unic
valt
vatu
vert
vhal
vjmo
vkna
vkrn
vpal
vrt2
vrtr
zero

Font feature properties

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

Font metrics are crucial

`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

The `text-transform` property

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.

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

ァィゥェォヵㇰヶ

The `text-emphasis` property

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

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

`text-align` & `text-justify`

Sets the text-align-all and text-align-last properties
Describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box.

text-align: start | end | left | right | center | justify | match-parent | justify-all

Values other than justify-all or match-parent are assigned to text-align-all and reset text-align-last to auto.

Selects the justification method used when a line’s alignment is set to justify

text-justify: auto | none | inter-word | inter-character

Text alignment and justification

定义了CSS如何支持各种不同国际化语言的书写模式，例如拉丁（Latin）语系及印度（Indic）语系采用从左到右的书写模式，希尔伯特语（Hebrew）或阿拉伯语（Arabic）采用从右到左的书写模式，一些混合了拉丁语和阿拉伯语的文字可能采用双向书写（bidirectional），而一些东亚文字则需要竖排（从上到下）的书写模式。

Vertical text on the web

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).

`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.

The writing-mode property specifically caters for vertical writing on the web. The default is horizontal, top-to-bottom. To change the direction to vertical, we use vertical-rl or vertical-lr. There's a sideways option that's formally been moved to Level 4 but Firefox has it implemented.

`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

古巴Cuba

乌克兰Ukraine

列支敦斯登Liechtenstein

Not just for East Asian text

Magie

“Zwei Dinge sind unendlich, das Universum und die menschliche Dummheit, aber bei dem Universum bin ich mir noch nicht ganz sicher.”

Es liegt der heiße Sommer
Auf deinen Wängelein;
Es liegt der Winter, der kalte,
In deinem Herzchen klein.

Das wird sich bei dir ändern,
Du Vielgeliebte mein!
Der Winter wird auf den Wangen,
Der Sommer im Herzen sein.

Das Leben ist kein Ponyhof

Everything is a box on the web

Line breaks in 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

There is a lot of nuance 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, usually but not always. 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 property allows wrapping, for example.

Future improvements to web typography

Even though we've covered quite a bit, there is still a long way to go when it comes to web typography.

The CSS line box model was invented in the 90s, when technology was not as powerful as it is today. Typographers generally don't like the way CSS handles font sizes but the CSS Working Group is trying to fix things.

They are thinking about rhythmic sizing and how to programmatically achieve a consistent vertical rhythm on the web, where text is often interrupted by other types and sizes of content. How to deal with situations where different font families are being used. How to support typographic features in writing systems that are not alphabetic.

A lot of work is at the ideation phase because there are so many tricky problems to work out.

The leading problem

The interruption problem

CSS Line Layout and Vertical Rhythm

Imagine an alternate history…

As we close off this talk, I'd like to circle back to the idea I mentioned at the start about the origins of digital technology. Right now, we're living in a digital age. A world running on computers.

These computers were pioneered in the West, in countries that use an alphabetic, left-to-right oriented writing system. This is an irreversible first-mover advantage, because less than a century later, everyone in the world, regardless of their native writing system, is more or less used to a left-to-right, top-to-bottom orientation for digital content.

This isn't a criticism. It is simply an observation. Vertical writing systems like Chinese, Japanese and Korean went horizontal as Western science and technology prevailed. Even so, I cannot help but wonder, if somewhere along the timeline something changed, if the Islamic Golden Age prevailed or if the Ming Dynasty never closed China's doors? What kind of a world we would live in, and what systems would we be using?

References

Lunde, K. (2009). CJVK Information Processing. Beijing: O’Reilly
Haralambous, Y. (2007). Fonts & Encodings. Beijing: O’Reilly
Gillam, R. (2003). Unicode demystified: a practical programmers guide to the encoding standard. Boston, MA: Addison-Wesley.
Dyson, M. C., & Suen, C. Y. (2016). Digital fonts and reading. New Jersey: World Scientific.
The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
Choosing & applying a character encoding
Fonts and Keyboards
Type rendering on the web
Mac內建字體的故事：柊野明朝與游明朝
Font smoothing, anti-aliasing, and sub-pixel rendering
Laissez-faire Font Smoothing and Anti-aliasing
A Closer Look At Font Rendering

Thank you

https://www.chenhuijing.com

@hj_chen

@huijing

East Asian typography on the modern web 网络时代的汉字排版

Overview

Character encoding

Encoding incompatibility

Declaring character encodings for the web

Text rendering on electronic screens

Bitmap fonts

PostScript

The Font Wars by Typography.Guru

Font formats for web use

Chinese typeface design

Web fonts

Font stacks

Subset fail

@font-face rule

Anatomy of an @font-face rule

Source Hans Serif (65,535 glyphs)

Subsetting web fonts

Variable fonts

Progressive Font Enrichment

Incremental Transfer Demo

https://rwt.io/newsletter

Typesetting on the web

OpenType features

Font feature properties

Font metrics are crucial

font-variant-east-asian

font-language-override

The text-transform property

The text-emphasis property

text-align & text-justify

Text alignment and justification

Vertical text on the web

writing-mode property

text-orientation property

text-combine-upright property

Not just for East Asian text

Magie

Everything is a box on the web

Line breaks in inline boxes

CSS for controlling line breaks

Future improvements to web typography

The leading problem

The interruption problem

CSS Line Layout and Vertical Rhythm

Imagine an alternate history…

References

Thank you

Anatomy of an `@font-face` rule

`font-variant-east-asian`

`font-language-override`

The `text-transform` property

The `text-emphasis` property

`text-align` & `text-justify`

`writing-mode` property

`text-orientation` property

`text-combine-upright` property