Karen Unicode on the Web

Including Karen text in an HTML page is easy but some browsers may need some tweaking.

If a non-Unicode compliant font (such as Zawkyi) is installed your web browser may use it incorrectly. The best way around this problem (if you are the web developer) is for the web page CSS to specify which font should be used. If, however, that is not an option (you are not the web developer, and are just trying to read Karen content) you'll need to change your browser settings.

Google Fonts

Google fonts early access includes several Myanmar fonts. www.google.com/fonts/earlyaccess

Drawing Fonts on HTML Canvas Elements

If the browser is simply not able to display the text any other way, it may be possible to draw the fonts on HTML canvas elements.


I wrote a plugin for several Wordpress sites that I've worked on. Kawthulei plugin


I'm using Google's early access version of the Tharlon remote font for Unicode text on this site. For Zawgyi, I'm only using local fonts. I'll list what I've done below. This method requires the Wrap plugin to be installed.

First, create the following file:


And put the following CSS in it:

@import url(http://fonts.googleapis.com/earlyaccess/thabit.css);
.wrap_mytext {
   line-height: 150%;
   font-family: 'Tharlon', 'Padauk', serif;
   text-align: left;
.wrap_zgtext {
   font-family: 'Zawgyi-One';
   text-align: left;

(By putting our code in this file rather than a main CSS file, we avoid all our work getting overwritten when Dokuwiki or a plugin is updated.)

To use this CSS, simply tag the text in your document, like this:

<WRAP mytext :ksw>
Karen Unicode text...

<WRAP mytext :mya>
Myanmar Unicode text...

<WRAP zgtext :mya>
Myanmar pseudo-Unicode Zawgyi text...

This doesn't address line breaking. A plugin could be developed to insert U+200B Zero width spaces really easily, but I haven't done it yet. One problem is, how can the plugin know if the text is Unicode or Zawgyi? I'll work on it later. For now, manually add the spaces were appropriate.


Andrew Cunningham, 2015/06/20 15:37

The CSS rules I use, assuming I am using language tagging on the page, are:

@counter-style hyphen {

system: cyclic;
symbols: \002D;
suffix: " ";


@counter-style myanmar-parens {

system: extends myanmar;
prefix: "(";
suffix: ") ";


:lang(my) {

font-family: 'Noto Sans Myanmar', Padauk, sans-serif;


:lang(ksw) {

font-family: 'Noto Sans Myanmar', Padauk, sans-serif;
font-language-override: "ksw";
-ms-font-feature-settings: "locl";
font-feature-settings: "locl";


ul:lang(my), ul:lang(ksw) {

list-style-type: hyphen; 


ol:lang(my), ol:lang(my) {

list-style-type: myanmar-parens;


There are still many elements I need to tailor including i, cite, em, etc.

Andrew Cunningham, 2015/06/20 15:40

Last rule should be:


ol:lang(ksw) {
    list-style-type: myanmar-parens;
development/web.txt · Last modified: 2015/07/08 15:29 by ben
Public Domain
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0