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.
Ουδέν κακόν αμιγές καλού.
Other than font-feature CSS properties, other text-related CSS properties also have ‘language awareness’, and include values that perhaps most folks aren't aware of.
Most of the time we use
text-transform for case adjustments and capitalisation. But it actually does take into account numerous language-specific case mapping rules. For example, the German Eszett ß becomes SS in uppercase, or the Greek vowels lose their accent when the entire word is uppercase. Stuff like that.
full-size-kana converts all small Kana characters to their equivalent full-size Kana, mostly used for ruby annotations.
italics to emphasise words in English, 但是中文则是用. 着重号
italics to emphasise words in English, 但是中文则是用. 着重号
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.
CSS has this
:lang pseudo-class that will recognises the language of the content of an element. So we can use it to identify and apply this property only to Chinese text.
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
match-parent are assigned to
text-align-all and reset
Selects the justification method used when a line’s alignment is set to justify
text-justify: auto | none | inter-word | inter-character
Text justification is also fairly tricky on the web. Whether we realise it or not, most of us would have encountered 2 major justification algorithms.
The Greedy algorithm, which analyses only a single line, and the much more advanced Knuth/Plass algorithm which analyses every line in a paragraph. Design software with advanced typesetting capabilities like InDesign use Knuth/Plass. But browsers, sadly, use the simple one. Probably for performance reasons, maybe? I'm not sure.
Although we don't have a robust justification algorithm, CSS Text Level 3 does include the
text-justify property to allow some further tweaking of justified text.
If I search for “text justify web” on Google, the top result is titled
Don't use fully justified text alignment on your website, and the next one is Justify text with HTML/CSS? Don't do it!. It seems that justified text has a bad rap on the web.
Text alignment and justification
This might be true for Latin-based scripts but not so for Chinese characters, which are also known as square characters. Each character is composed within a uniform square and Chinese texts can be typeset into neat rows and columns. In fact, it is ideal to do so.
But when there are both Latin-based alphabets and Chinese characters, it's impossible for everything to line up both vertically and horizontally. The next best thing is to ensure the start and end of every line is aligned well.
And we can make adjustments between adjacent typography character units in Chinese texts with
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 systems are also not limited a horizontal, top-to-bottom direction. Traditionally, East Asian languages were all written vertically. Arabic and Hebrew are written from right-to-left. But broad support for vertical writing on the web was a relatively recent development, somewhere around 2015 or so.
从1987到现在 Properties marked with * have been deferred to Writing Modes Level 4.
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-lr. There's a sideways option that's formally been moved to Level 4 but Firefox has it implemented.
从 1987到现在 upright
Rotating lines of texts also affects the individual characters within the line.
Browsers are smart enough to tell that Chinese characters, which are dual-direction, will always be displayed upright. While horizontal-only languages, will have their characters rotated when vertical.
text-orientation property can be used to make all the characters upright or sideways, depending on what you want.
民國 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.
The last value there, called digits, has yet to be implemented in any browser, but it really makes sense to have some sort of a limit on this.
列支敦斯登 Liechtenstein I mean, 4 digits is probably the maximum you can push such a tiny space. 9 looks very uncomfortable. 13 is just ridiculous.
Not just for East Asian text
“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
Vertical text may be better suited for East Asian languages when it comes to full length body copy, but that doesn't mean other languages can't get in on the fun. We see vertically set text in print all the time.
Headers or short runs of text are relatively safe to typeset vertically, and can add some typographic variety to your web layouts. We can also combine
writing-mode with transforms or other CSS properties.
Everything is a box on the web
Even though the web can display all sorts of content, dynamic or otherwise, everything is essentially rectangles. Or we can call them boxes. There are many different kinds of boxes, that interact with each other in different ways, but fundamentally, the web is boxes.
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?
Here we have 5 inline boxes. For now there is enough room so all 5 boxes fit into a single line box. But when there isn't enough room, inline boxes will be broken across line boxes. The break is known as a line break.
If content wrapping is enabled, the user agent has to minimise the amount of content overflowing a line by wrapping the line at a soft wrap opportunity if one exists.
For most writing systems, soft wrap opportunities occur at word boundaries, where spaces or punctuation are used to explicitly separate words.
CSS for controlling line breaks
allows choosing various levels of “strictness” for line breaking restrictions
controls what types of letters are glommed together to form unbreakable “words”, causing CJK characters to behave like non-CJK text or vice versa
controls whether automatic hyphenation is allowed to break words in scripts that hyphenate
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
CSS allocates leading based on the line-height by subtracting the ascent and descent from the specified line-height, then splitting the remainder in half, giving each half to the top and bottom.
Doing so allows us to get decently even line-spacing, but mostly if the paragraph of text is of the same font. When we have different font families on the same line, things don't line up as well because different fonts have different ideas of what 1em should be.
What CSS does now is guaranteeing content never overlaps at the expense of aesthetics. But the CSSWG is trying to come up with a new algorithm to calculate the optimal line size.
The interruption problem
Strict vertical rhythm tends to go out the window when we're trying to layout many different types of content, but it is important when it comes to things like multi-column layouts with content side-by-side.
One of the proposed new properties is called
block-step-size, which sets the height of the line to be a multiple of the value you define. But again, where should any extra space go?
The CSS rhythmic sizing specification is currently sourcing for feedback.
CSS Line Layout and Vertical Rhythm
More granular details about this topic, I recommend watching this talk by Elika Etemad, AKA Fantasai, as she is the editor for many of the specifications I listed above.
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?
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
Font smoothing, anti-aliasing, and sub-pixel rendering
Laissez-faire Font Smoothing and Anti-aliasing
A Closer Look At Font Rendering That being said, I'm glad that there are active efforts in improving the support of more languages and writing systems in the digital realm. Hopefully this provides greater opportunities for people from different backgrounds and cultures to share their perspectives and have their voices heard on a bigger scale than before.