Published on <a href="http://ift.tt/2pSCvxx">| Prototyping: From UX to Front End &mdash; Medium</a> Rachel Simone Weil <img alt="" src="http://ift.tt/2pGUbdl">
If you’ve ever made an English-language website that contains a bit of Japanese (or other non-Roman) text, you might have run into difficulties getting the text to display beautifully across browsers and platforms. Below, I’ll share a few tips for working with English and Japanese type together on the web.
The tl;dr is: Always declare &lt;meta charset=&#8221;utf-8&#8243; /&gt; right after the opening &lt;head&gt; tag in your HTML document, set site-wide and element-level lang attributes, and use a rich, cross-platform font stack that will not mix serif, sans-serif, and monospace typography when English and Japanese appear together. (Spoilers: Google has an interesting solution in the works.)
OK now, on with the show…
<h3>Specifying character encoding</h3>
<a href="http://ift.tt/19Luzkx">The W3C recommends</a> adding a charset declaration to all websites immediately after the opening &lt;head&gt; tag for security and to ensure proper character display:
<pre>&lt;!doctype HTML&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt;</pre>
<pre>...</pre>
You might not notice any difference on fully-English pages, but this line is necessary for displaying Japanese text properly. Otherwise, the browser will do a series of checks to guess the encoding type, and it will most likely make the wrong guess, causing a simple paragraph text block like &lt;p&gt;sans-serif ひらがな、カタカナ、漢字&lt;/p&gt; to render like this:
<img alt="" src="http://ift.tt/2pHgeRb">
Adding &lt;meta charset=&#8221;utf-8&#8243; /&gt; enables the proper display of all Unicode characters, including those in Chinese-Japanese-Korean (CJK) scripts. (Note: You should also be sure that the HTML file you created is saved with UTF-8 encoding. This is usually the default for web development IDEs, but you can check your IDE settings to confirm. If you have access to it, you can also check encoding settings on the web server.)
<h3>Setting document and element lang attributes</h3>
Setting &lt;meta charset=&#8221;utf-8&#8243; /&gt; allows the browser to properly render Japanese characters because it&#8217;s setting the character set to basically all Unicode characters. But there&#8217;s nothing here that would actually tell the browser which languages are displayed. You can—and should—do this by setting a lang attribute on the entire page (html) and, optionally, on specific elements. For example:
<pre>&lt;!doctype HTML&gt; &lt;html lang="ja-jp" /&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;日本語&lt;/h1&gt;</pre>
<pre>...</pre>
or
<pre>&lt;!doctype HTML&gt; &lt;html lang="en-us" /&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;/head&gt; &lt;body&gt; &lt;h1 lang="ja-jp"&gt;日本語&lt;/h1&gt;</pre>
<pre>...</pre>
The lang declaration is made up of two parts: the language (ja for Japanese) and the region (jp for Japan). Regions are more meaningful for languages that differ across geographic regions, such as American English (en-us) and Australian English (en-au). Note that you can&#8217;t string together multiple languages in a single lang declaration.
If Japanese characters are encoded properly without it, why bother including the lang attribute at all?
Firstly, depending on the user’s browsers, OS, and settings, the value of lang may trigger the browser to offer better translation and search functionality. For example, declaring an html lang may prompt users&#8217; browsers to initiate convenient translation options on page load.
Also, for mixed-language pages, you may want to offer different CSS rules for different character sets. You can set lang styles in CSS that apply to any element with a matching lang value. For example, a &lt;h1 lang=&#8221;ja-jp&#8221;&gt; could be styled by CSS like this: :lang(ja-jp) { font-family: Arial, sans-serif; line-height: 1.5rem; } This is a more syntactically-pleasant solution than, say, creating a CSS class and marking up the header as &lt;h1 class=&#8221;japaneseText&#8221;&gt;.
For Japanese in particular, some browsers are a little confused by Unicode characters that appear both in Japanese and Chinese. As a result, the default font the browser uses for rendering Japanese text can change mid-sentence (or even mid-word)! As it turns out, this is reeeeally distracting. I’ll talk about a bit more later.
Once again, the W3C has <a href="http://ift.tt/1I67FPt">detailed guidelines and best practices</a> for a variety of situations as well as a great <a href="http://ift.tt/2arXxcH">CSS-specific guide to languages</a> that covers advanced features like style inheritance for languages, style settings specific to Asian languages, and more.
So we’re in agreement that lang attributes are good! But, for an English website with some Japanese text, do you really need element-level rules? After all, setting &lt;html lang=&#8221;ja-jp&#8221; \&gt; will render Roman and Japanese character sets quite nicely, and it&#8217;s less code!
While it works, I wouldn’t recommend it. If you’re designing an English-language website with some Japanese text, you should use &lt;html lang=&#8221;en-us&#8221; /&gt;. html lang is best used to identify the site&#8217;s native overall language: the language used for links, navigational aids, copyright notices, profile, contact information, etc. Element-level lang attributes and styles should be used for the Japanese content. I&#8217;ll explain the benefits of doing it this way with a quick example.
I maintain the website for <a href="http://www.femicom.org/">FEMICOM Museum</a>, an archive of old video games and software. Many of the games described on the website are Japanese, so I have a need to display some Japanese language content on my site. I’ve also conducted interviews with Japanese game developers, and I’ve made these interviews available in both English and Japanese.
<img alt="" src="http://ift.tt/2q0Ekcm">
Even though it would be less work to just set &lt;html lang=&#8221;ja-jp&#8221; /&gt; and get the benefit of proper Japanese text rendering throughout the site, there would be significant drawbacks. First of all, my website would show up for Japanese users as being a &#8220;Japanese-language website,&#8221; and thus the browser would likely not automatically offer them English-to-Japanese translation for navigating the site. Browser functionality for English-language users might be limited, too. Finally, setting &lt;html lang=&#8221;ja-jp&#8221; /&gt; may limit my website&#8217;s discoverability in English-language web searches. So, it&#8217;s best if I set html lang to en-us and then mark specific blocks of text such as interviews with Japanese-language styling via the element-level lang attribute.
As W3C notes, what browsers actually do with lang data varies. It is seen as an area of growth, meaning browsers may offer more features and support around lang attributes in the future.
<h3>Styling Japanese text across browsers and platforms</h3>
Even if you don’t fancy yourself much of a typography nerd, it’s worth your while to give some thought to text styling in websites that have both Roman and Japanese characters. I learned this the hard way when I zoomed in on some Japanese text in Chrome and noticed something aesthetically… distressing. Here’s a portion of the Japanese interview text shown above as viewed in Chrome on a PC. The orange underlines are added for emphasis.
<img alt="" src="http://ift.tt/2pHhGDb">
Do you see how the majority of the characters have a consistently thick stroke width (as if written with a felt-tip marker) but then a few don’t? See how the underlined characters have varying stroke width (thin horizontals and thicker verticals) and a calligraphy look? Or are those… serifs?!
After a bit of research, it seems like this is due to a bug in Chrome (for PC) that has been around for over 5 years. If Japanese isn’t specified as the document’s language, and if you haven’t applied specific styling for a block of Japanese text, Chrome will interpret Japanese kanji (characters borrowed from Chinese) as Chinese-language text, which is by default rendered in a serif font. And this disconcerting result will occur.
If you aren’t familiar with Japanese text, the image might not seem so weird. So, I’ve made an analogous version in Roman text, showing the eye-bleedingness of text that has capital letters in a serif font and lowercase letters in a sans-serif font.
<img alt="" src="http://ift.tt/2q0FcOv">
So, let this example remind you to think about Japanese text when you’re CSSing! 🙂
Just like the Roman letters used in English, Japanese text can be assigned font-family stacks. Most named fonts and font families that we&#8217;re familiar with for Western languages do not also have an associated Japanese character set. Instead, if you assign a specific font in CSS, the browser will try to be smart and choose a matching default serif, sans-serif, or monospace font to render the Japanese characters. However, it might not make the right choice. So, it&#8217;s best to specify a serif, sans-serif, or monospace fallback. Here is some markup showing different generic font families and how they look in the Chrome, Safari, and Edge.
<pre>&lt;style&gt; h1, h1:lang(ja-jp) { font-family: serif; font-size: 24px; font-weight: normal; } h2, h2:lang(ja-jp) { font-family: sans-serif; font-size: 24px; font-weight: normal; } h3, h3:lang(ja-jp) { font-family: cursive; font-size: 24px; font-weight: normal; } &lt;/style&gt;</pre>
<img alt="" src="http://ift.tt/2pHhS54"><img alt="" src="http://ift.tt/2q0OBW2">
Interestingly, the cursive fallback for Japanese text differs depending on whether the user is on a PC or a Mac. For PCs, cursive falls back to Comic Sans, which is a sans-serif font. Thus, the Japanese text is also sans-serif. On a Mac, cursive falls back to Apple Chancery, which is a calligraphic font that more closely matches the generic Japanese serif font.
There are two other font fallback categories: monospace and fantasy. monospace will give us a monospace Japanese font, while fantasy may give us serif, sans-serif, or monospace, depending on the browser and platform. (Another font category called system-ui is a draft spec as of current writing.)
In the end, unfortunately, we only get three Japanese fonts to play with: system-default serif, system-default sans-serif, and system-default monospace. However, we can bring in more interesting typography with a little extra effort.
With a little experimentation, you can add other Japanese system fonts to existing web-safe CSS font stacks. PCs and Macs have their own sets of Japanese fonts that can be named in a font-family list. Because user distribution of these fonts isn&#8217;t going to be incredibly high, these fonts should be incorporated with plenty of fallbacks. On a Mac, the Hiragino Kaku family meshes well with the Arials, while Microsoft&#8217;s Yu Gothic fits right in with Segoe. If you go this route, <a href="http://ift.tt/1FrWLDq">CSS Font Stack</a> could be a useful resource.
<a href="http://ift.tt/1XUNYIu">Google Fonts</a> offers an interesting alternative. It includes several Japanese fonts as part of a new <a href="http://ift.tt/2bQjupi">early access web font program</a>. Some of these are third-party Japanese fonts. However, more notable is Google’s Noto project: an effort to create an all-in-one font for all major character sets at multiple weights, including the CJK languages. As Google puts it, “Noto fonts are intended to be visually harmonious across multiple languages, with compatible heights and stroke thicknesses.” Noto has both serif and sans-serif options for Japanese text, and they’re both quite pleasant. At the present time, the <a href="http://ift.tt/1fPwXLV">Noto project’s GitHub repository</a> shows CJK and emoji as the only unreleased web fonts, but again, you can <a href="http://ift.tt/2bQjupi">grab them in early access</a>. Personally, I am really looking forward to trying this out. Here’s Noto Serif (CJK) in 900-weight:
<img alt="" src="http://ift.tt/2q0HgpB">
Well, I hope this has been helpful to you! There’s a lot more to know about displaying Japanese text. Setting up vertical type, &lt;ruby&gt; tags for <a href="http://ift.tt/1LiQ7Bu">furigana</a>&#8230; the list goes on! But hopefully this is a good start. If you have any other best practices or tips for working with CJK + English text on the web, feel free to leave &#8217;em in the comments. Happy HTMLing! じゃあね。
Originally published at <a href="http://ift.tt/2q0IFws">nobadmemories.com</a>.
<img src="http://ift.tt/2pHaTcx" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qNZ9oK">Better together: Displaying Japanese and English text on the web</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Better together: Displaying Japanese and English text on the web

Top Stories