The State of CSS and Japanese Typography

It’s an open secret that Apple doesn’t really care that much about advanced typography, they just say they do. The laughably amateur vertical text support feature in Pages app makes that clear. If you have any interest in what professional Japanese typography and high end vertical layout really is, check out Nat McCully’s 2019 presentation on Japanese layout he gave at the Japanese Electronic Publishers Association meeting (JEPA). His online Japanese video presentation is well worth your time.

I knew Nat back in the 1990’s when he was an engineer at Claris responsible for the development of the highly successful Japanese version of ClarisWorks. He also worked on a QuickDraw GX version of ClarisWorks until GX was officially killed in 1997. Fortunately he moved from Apple to Adobe in 1998 and put his extensive knowledge of advanced Japanese typography and programming skills to help solve a big problem: the inability to reproduce beautiful Japanese layout (kumihan) on western created layout software and fonts of that time (Quark XPress, Illustrator, InDesign 1.0, etc.). McCully explains the background and 2 year development of InDesign J at the 10:25 mark in his presentation, and the challenges of working around the limitations of baseline font metrics while developing good line break algorithms for Japanese layout, which is not only a Japanese issue, it’s an issue for all CJK and non-western text layout.

Japanese Layout Basics: Space

The result was InDesign 1.0 J which shipped in early 2001. InDesign J was the first, and only, major software application developed outside of Japan that followed the Japanese Industrial Standard (JIS) X4051 typesetting and composition specification (the kumihan “bible”) and traditional Japanese print production methods. I have covered some basics of Japanese layout before, but a review is helpful for first time readers. I’ll use a mix of my material and McCully’s presentation to explain.

Japanese culture is the only culture I know of where the core cultural value is subtraction: removing things from a space to bring out the essential natural beauty of an object. This is embodied in Ikebana, in Japanese gardens and in people too: the Kanji shitsuke 躾, inadequately rendered in English as ‘discipline’, is a Kanji character that embodies the subtraction principle and originates from Japan, not China. This is very different from the Western and Chinese central cultural value that is addition: how much humans can add to a space to create beauty.

Space an an essential composition element
Subtraction is also a central core value of traditional Japanese text composition and layout, called ‘kumihan’. Kumihan is driven by how text fits in a given space, how to balance and minutely control that space. Space is not empty, it is a essential basic element of kumihan, equal to Kanji. Kanji characters are contained in little boxes of space, known as virtual bodies, also called the grid system because the middle of each box is one center point on a grid. Everything is calculated from the center and the space surrounding that center; there is no baseline.

top image@2x
The red line is the outline of the virtual body, the blue line is the type face boundary. The standard size virtual body comes from the era of moveable type.
A virtual body Kanji with approximate baseline overlay red line.

Western created DTP layout is graphics-driven and calculated by margins and font baselines. The western baseline typography model and font metrics is how PostScript and OpenType fonts, and all layout engines evolved.

Adobe was well acquainted with the shortcomings of their own font technology and InDesign J got around the problems by adding proprietary Kanji virtual body font metrics and Japanese line break algorithms. None of this exists as an open standard that benefits everybody.

Just like the original PostScript fonts, the secret proprietary virtual font body metrics are a double edged sword: they helped Adobe lock up Japanese print production, but outside app and font developers cannot use the virtual body metrics or benefit from it. Certainly not Quark XPress who utterly lost the Japanese market to InDesign J’s superior typography.

Web layout and typography via CSS is an entirely different world but is hobbled by same lack of virtual font body metrics making high-end Japanese typography, especially vertical layout on the web is impossible.

The obstacles for good CJK typography
There are 3 huge obstacles for good Japanese (CJK) typography and vertical text composition on the web:

  • No font metrics for virtual body/em-box glyph space placement: everything has to be accomplished with baseline metrics
  • No reliable space control
  • No reliable line breaks

In the presentation McCully highlights a web post from Vincent De Oliveria that neatly summarizes basic problems of working with CSS:

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context

(summary)

-inline formatting context is really hard to understand
– vertical-align is not very reliable
a line-box’s height is computed based on its children’s line-height and vertical-align properties
we cannot easily get/set font metrics with CSS

Deep dive CSS: font metrics, line-height and vertical-align

This is further complicated by all the devices out there. A Japanese web page that looks good on iOS looks terrible on Samsung Galaxy because Samsung has a different layout engine that has a different idea of how to use space.

The end result, as McCully concludes in his presentation, is that quality Japanese vertical layout on web pages is impossible to achieve. Even mediocre quality layout requires a massive amount of extra work dealing with CSS limitations and optimizing things deep in the lower level macOS • iOS Core Text.

Long story short: web layout will never achieve quality layout, especially quality vertical layout for Japanese and many other non-western languages, as long as western-centric baseline font metrics are the only tool to work with. There needs to be an open standard for adding and using virtual body font metrics with any font regardless of the writing system. It needs to be part of OpenType.

Failure of open standards and the death of vertical text cultures

It’s helpful at this point to remember the key goals of QuickDraw GX:

  • Treat all writing systems and layout models equally in the basic OS layout architecture.
  • Make advanced typography standard across the OS and applications for developers, available to all users.

People only remember the failure of GX technology, but the goals were, and remain, visionary and timeless. The GX vision was about breaking advanced typography out of a niche, make it standard across all writing systems, equally and without favor, for all developers and users.

That vision was unfortunately forgotten in the rise of web technologies and open standards like CSS and EPUB which focused on improving web based text only from a western typography bias of forcing baseline as the only way to do layout while ignoring the Japanese typography requirement of controlling space. Vertical text layout almost didn’t make into the EPUB format until a small but vocal group of Japanese programmers argued for its inclusion. They encountered a lot of resistance along the way, which seems to be the case for any feature outside the immediate needs the western typography perspective.

What we have now are web technologies and OS text layout engines that offer advanced layout from a limited perspective for a limited set of web designer programmers. In other words, niche. We can see the same thing happening with OpenType Variable Fonts. They are mostly for the web. They will remain niche. They will remain western due to the high development costs of creating OpenType Variable fonts with huge glyph sets like Japanese.

All fonts, not just CJK, need virtual body metrics that give everybody a standard way to fine control the placement of glyphs in a given space, instead of the limitations of calculating everything from a base line. It’s an unfortunate situation, but without a vision and strong leadership, the smart people in the room run off in different directions, an animal farm of different ideas and approaches pulling in different directions. That’s what open is. Very rarely does it coalesce into a tight integrated total greater than the sum of the parts.

In the eternal words of venerable Japanese font engineer Tomihisa Uchida, “no matter what kind of fancy fonts you have, they look bad with poor typography”. As long as we only have baseline font metrics to work with, Japanese layout, all CJK and many other non-Roman based writing system layout on the web will always be bad and impossible to improve.