Using CSS to display Peh-oe-ji correctly

Times were that I was asking everyone who visited this site to download fonts in order to view the content properly. However, growing support for web fonts (in CSS3) means that many visitors with up-to-date web browsers are able to see the fonts I choose, even if those fonts are not installed on their computers. This is great for displaying Pe̍h-ōe-jī (the Taiwanese romanization used throughout the site) and Taiwanese Phonetic Symbols (Bopomofo for Taiwanese).

The following browsers are supported:

  • Firefox 3.5 and above
  • Opera 10 and above
  • Safari 3.1 and above

Support is also available in Google’s Chrome browser, but is disabled in the current version due to a security review. The developers are aiming to to reinstate support in time for version 4.0.  To check how your browser works with Taiwanese text, visit the fonts page.

Together users of the browsers listed above made up 47% of visitors in the August to October period, so hopefully this update should make life a little bit easier for many visitors here. I would encourage users who don’t have one of the above browsers to either upgrade, or install one or more of the fonts listed on the fonts page.

For those of you interested in the technical details, this is how it works. The preliminary specifications for CSS3 include a property called @font-face. Previously web designers have always specified a list of fonts for the browser to display (example taken from the style sheet of this website):

.tw {
  font-family:"DejaVu Serif", "Linux Libertine", "DejaVu Sans",
  "Taigi Unicode", "Charis SIL", Courier, sans-serif;

This tells the browser to show all text with a class of “tw” in the web page using DejaVu Serif, if that font is installed on the user’s computer.  If it is not installed, the browser looks for the next font down the list, in this case Linux Libertine. If that’s not there either, the system standard sans-serif font will be used.

This is fine for normal English text, but Pe̍h-ōe-jī requires special fonts to display all of the correct characters. If the user doesn’t have the right font installed, the browser will default to the system font, which won’t display all the tone marks and so on. So websites like this one have resorted to asking their visitors to download and install certain fonts to ensure everything displays properly.

However, with the @font-face property, the browser can load up a font from the website and display it where appropriate.

@font-face {
  font-family: "DejaVu Serif";
  src: local("DejaVu Serif"),

This will first check to see if the user has DejaVu Serif installed, and if not, load it from the url given on this website. Naturally this can only be done legally with fonts which are freely available, like the DejaVu series.

It would be nice to see a similar solution implemented across other websites which use Pe̍h-ōe-jī.

Leave a Reply