CSS and East Asian typographic elements in web & video game

While I was researching on system fonts for East Asian text, it just so happens that I’m playing a video game. It’s a game translated from Japanese to Traditional Chinese which make use of various typographic elements in their dialogues such as ruby annotation, punctuations and emphasis mark for text decoration. I was very intrigued and decided to experiment on that matter using CSS.

In the game—Trails in the Dark 黎の軌跡(Kuro no Kiseki), the dialogues are quite intensive and a bit expressive at times. With the helps of different typographic elements, the dialogue scenes are more dynamic and fun to read. They plays a lot on the “tone of voices” for each lines depends on the character’s mood. I couldn’t resist myself to try to implement those elements using HTML and CSS.

Ruby Annotation

Japanese had their unique way on making game’s dialogue fun and engaging. Text adventure games such as Phoenix Wright: Ace Attorney 逆転(Gyakuten)裁判(Saiban) was very well-known for their text treatment for simulating speech in text dialogue. I love it so very much.

While I was playing Dark, there’re so many lines of dialogue even for an NPC. Basically all of the text were translated from Japanese. The text treatment and punctuations also inherited directly into Traditional Chinese. Both languages shares a lot of similarities, for instance, some Kanji 漢字(Kanji) were identical to Hanzi—Chinese characters. Ruby is for marking pronunciation which are small sized text and are placed above characters. Japanese use Ruby characters for their Furigana 振り仮名 and Taiwanese Hokkien 臺語 also use it for Zhuyin Fuhao (Bopomofo) 注音符號.

ruby {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
}
ruby > rt {
  --font-size: calc(1em - 50%);
  --line-height: 0;
}

Using display: inline-flex to style the <rt> position, font-size and line-height. The ruby element will scale accordingly to the text size of where it was injected. As for the <rt> element, the --font-size: calc(1em - 50%) is to ensure it’s the same as its parent 1em and scale it down by - 50%. The --line-height: 0 is to prevent it from adding extra line height to the row of text. It works, sort of.

英雄伝説(eiyū densetsu) 空の軌跡(sora no kiseki)

Problem is that, you’ll need to add <ruby> element for each phrase and it’ll not “word-wrap” to next line of text, instead, the whole block will. It’ll create “rivers” in the paragraph. You may have a look on this post demonstrating East Asian text mixed in with English. In my opinion, it’s impractical to inject <ruby> for each character. So, I think I’ll have to live with that.

Emphasis Mark

The Emphasis Mark 着重號 is not commonly used in any Traditional Chinese publications such as newspapers or books. It might seem odd to westerners as it’s close to non-existence in Chinese speaking region as well as on the web. I’ve never seen it being implemented in any website, except if it’s in Japanese. As far as I know, it was only used in old textbooks or some teaching materials. A lot of punctuations were also skipped if the text’s made online. As a HongKonger, I can tell you we rarely make use of it in real life such as writing a letter or a journal, at least to my experience. The mark was meant to be used in literature back in the day, in printed materials. It’s a typographic element that being neglected by most of the Chinese people nowadays.

After reading an article Chinese web font research written by Piper Haywood, I tried the CSS property text-emphasis. I was a bit surprised a westerner is more researched than most Chinese did on Chinese web font. To be frank, I inspected a lot of main stream commercial Traditional Chinese website, no one seems to do that amount of work on a site in terms of typography. If anyone who want to see how Chinese web font being implemented or into Chinese typography in general, have a look here TheType, they’re considered to be the “top tier leadership” in this field. The articles were all written in Chinese but they’re based in London.

You can style the text-emphasis style, color and position. This is something similar to the list-style property, you have limited control over it. So, I created my own version of it. If you’re interested in :lang() and text-emphasis, have a look at this piece by Hui Jing, Chen. She explained everything thoroughly.

/* styles for <em> */
em:where(:lang(ja), :lang(zh-HK)) {
  --font-size: 1em;
  /* reset the font-size same to its parent */
  --line-height: 1;
  position: relative;
  white-space: nowrap;
}
em:where(:lang(ja), :lang(zh-HK))::after {
  position: absolute;
  top: -.5625em;
  left: 0;
  width: 100%;
  overflow: hidden;
  content: ’\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB’;
}

I’ll be using a CSS only approach. Using pseudo element ::after and apply position: absolute with content: "\30FB". The Unicode \30FB is a monospace glyph “・” middle dot, named as “Interpunct” which is exactly the same size compared to a Japanese / Chinese character. In order words, an “Fullwidth 全形” size character. You may refer to the code snippet above. I repeat the dot eight times and that’s more than enough as you won’t have the needs to place emphasis mark on more than eight words, I presume. With overflow: hidden to hide it if the text is less than eight characters. I’m adding the --font-size: 1em to reset the font-size on <em> as it will inherit the styles that applied on its parent :lang().

It kind of works but there are downside of that. Firstly, you’ll have to add a class to the <em>. Update: The code snippet is updated. Secondly, the pseudo element is absolute-positioned which means we’ll have to add white-space: nowrap to prevent “word-wrap” in case the text inside <em> block being wrap to next line of text. I’m aware the emphasis mark is placed under the text in Chinese but I prefer to place it above like Japanese. Suppose you’ve multiple lines of Chinese or Japanese text and want to use the <em> for a few words, the line-height for the text will need adjustment as the emphasis marks may get too close to the text above it.

原來我非不快樂，只我一人未發覺

Adjust the browser window width to see how the text wrap. You can inspect the above example to see it for yourself or have a look at this: “原來我非不快樂，只我一人未發覺”. I’m still experimenting on it to see if there’s an alternative way to style it. Please do let me know if I’m wrong.

Fullwidth Punctuations

First and foremost, please note that you’ll have to decide a primary language of the document and a secondary one for a multilingual website. It is because the line-height for non-latin based languages, which is Chinese and Japanese in this case, are different than Roman characters. Furthermore, punctuations for CJK is usually set in “Fullwidth 全形”. But if the primary language is, say in English, punctuations has to be using the language originally intended and vice versa. Please be aware.

I intent to simplify everything and make it easier to understand. “Fullwidth 全形” and “Halfwidth 半形” is equivalent to an em and en in western typography.

I created the table above to make it simpler. Will update it later and to add in more info.

Text Decoration in Kuro no Kiseki

Let’s have a quick look on the game’s text treatment. The game was translated by Clouded Leopard and they did a very good job at that. The game made use of various punctuations in their lines of dialogue. Here’s a few of them being used. The screenshot below showing “Fullwidth 全形” punctuations such as “Title Marks 書名號”, “Ruby” and “Em Dash 破折號”.

The font they’re using is either Minchō 明朝体 from Japanese or Songti 宋體 in Chinese. I don’t have illustrator or PhotoShop installed on this mac I’ll need to fact check it later. The font is a nice choice overall and easy to read on a TV. However, the Ruby text rendering was very aliased and jagged. Those characters are too complex as they have a lot of strokes and is hard to read in such a small size. Maybe that’s something to do with the resolution, for which I’ve no idea.

And for the Emphasis Mark, the line-height was affected and the row of text gets pushed down. But of course they’re not using CSS to style the text. Or were they? I’m very glad that those elements were implemented which stayed true to the original and conveyed the same as Japanese does.

Summing Up

It took me a while to write this up. There’s a lot of stuff to digest even for myself. It’s cool to have a look on a Japanese game and how they implement text decoration with such attention to details. I think I’d probably write more on the topic later.

---

• Reply via Email: [email protected]
• Comment on Mastodon