The State of CSS and Japanese Layout

It’s an open secret that Apple doesn’t really care about advanced typography, they just say they do. The laughably amateur vertical text support feature in iWork Pages makes that clear. If you have any interest in what professional Japanese typography really is, check out Nat McCully’s presentation on Japanese layout he gave at the Japanese Electronic Publishers Association meeting (JEPA). His Japanese video presentation is online and 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. I think he may also have worked on a QuickDraw GX version of ClarisWorks until GX was officially killed in 1997.

Luckily for us, 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.

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 Layout Basics: Space

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

That is fine for InDesign and print production, but web layout and typography via CSS is an entirely different world. There are 3 huge obstacles for good vertical Japanese typography 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 very difficult to achieve. It requires a massive amount of extra work dealing with CSS limitations and optimizing things deep in the lower level macOS • iOS Core Text.

Failure of Open Standards

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 at a time when Apple was spinning out of control, but the goals were, and remain, visionary and timeless. The GX vision was about breaking advanced typography out of a niche, make it standard OS feature for all writing systems, and 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 creating baseline text strings 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.

It’s an unfortunate situation, but without a vision and strong leadership, the smart people in the room run off in different directions creating 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”. Which brings us to Apple News+ and why it will never see the light of day in Japan: Japanese customers will never pay for a news subscription service that doesn’t deliver good looking vertical text content. The Apple News Format can’t pull that one off, and Apple is not going to spend the resources to do it right. The Pages vertical text support feature is certainly proof of that.