Putting Mongolfont's Traditional Mongolian Script (Unicode) on your Website

If you are a professional website developer, putting the Traditional Mongolian Script (vertical script) from Mongolfont on your website might be easy. If you are like me, however, trying to get it to work right can be an exercise in futility and frustration. Here I want to share my own personal method for incorporating this amazing script in my websites.

A few points before we begin:

1. This is a method of putting Unicode-compatible fonts on your website. There are other proprietary methods for representing the traditional script. In China, Menksoft is far more popular than Unicode. However, it is available only for Windows and there is no prospect of a Mac or iPhone version becoming available.

2. The method I outline might not be the way that a technical expert would do it. There may be more sophisticated methods. But in the main it seems to work reasonably well. (There are times when it works even though browser updates have broken the Mongolfont site itself.)

3. Mongolian traditional fonts are notoriously fragile. They break for mysterious reasons and do not work in all environments. On some Windows browsers and some Android phones they simply don't work. Sometimes browser and OS updates break them. Other times they break for no discernible reason. Do not try to be too ambitious. Sometimes you are lucky just to get them to work.

4. You will need to learn how to input the Mongolian script. For tips on doing this, see my page on Inputting Mongolian script using Mongolfont. Do not take shortcuts. Be patient. Sometimes it can take a bit of trial and error to input the letters properly.

By following this method you should be able to display Mongolian Traditional Script on Windows computers, Macintosh computers, iPhones, and Android phones. As noted, however, some Android devices and even some versions of Windows (or Windows browsers) do not render the script properly. I do not know whether this will work on Linux or not.

There are three steps in getting the fonts to work:

1. Download the fonts required and put them in the correct location.

2. Add font-embedding instructions to your CSS.

3. Add CSS specifications for rendering and styling the fonts.

1. Download the fonts you require and place them in the folder involved

Mongolfont has four fonts available. The plain-vanilla font is Mongolian White font.

There are two types of font. Windows systems use an open-type font (otf); Mac uses AAT fonts. Both types must be downloaded. They can be downloaded at the following pages:

Mongolian White Font: Windows, Mac ('Mongolian White')

Mongolian Writing Font: Windows, Mac ('Mongolian Writing')

Mongolian Art Font: Windows, Mac ('Mongolian Art')

Mongolian Title Font: Windows, Mac ('Mongolian Title')

Place the downloaded fonts in the same folder as the documents that are going to use them. Of course, they will also work if they are placed in a different folder, but it is essential to make sure that the CSS indicates the correct path. But believe me, debugging is much easier if you have both the fonts and the CSS in the same folder as your web pages.

When uploading your content, the embedded fonts should be uploaded to your webhost along with everything else.

2. CSS to import embedded fonts

To allow your page to access embedded fonts you'll need to work with style sheets.

Here I am going to suggest two EXTRA style sheets in addition to your standard style sheet. The reason is simply that this seems to work with the least trouble and makes troubleshooting easier. It is, of course, also possible to incorporate these in your main style sheet.

First, a style sheet for embedding the fonts. I'm going to call it stylea.css. This style sheet has three functions:

1. It sets your character set to UTF-8 (not so important)

2. It imports the four embedded fonts: Mongolian White, Mongolian Writing, Mongolian Art, and Mongolian Title (which you have already placed in your folder).

3. It imports a third style sheet, which I will call stylemn.css, containing styling information for your fonts (covered below).

CSS

@charset "UTF-8";

@import "stylemn.css";

@font-face {
font-family: 'Mongolian White';
src:local('Mongolian White'), url('mnglwhiteaat.ttf') format('truetype');
src:local('Mongolian White'), url('mnglwhiteotf.ttf') format('truetype');
}

@font-face {
font-family: 'Mongolian Writing';
src:local('Mongolian Writing'), url('mnglwritingaat.ttf') format('truetype');
src:local('Mongolian Writing'), url('mnglwritingotf.ttf') format('truetype');
}

@font-face {
font-family: 'Mongolian Art';
src:local('Mongolian Art'), url('mnglartaat.ttf') format('truetype');
src:local('Mongolian Art'), url('mnglartotf.ttf') format('truetype');
}

@font-face {
font-family: 'Mongolian Title';
src:local('Mongolian Title'), url('mngltitleaat.ttf') format('truetype');
src:local('Mongolian Title'), url('mngltitleotf.ttf') format('truetype');
}

Note that the order -- aat above otf -- is important for some browsers in Macs.

In the head section of your html, make sure to link to two style sheets: your standard style sheet (style.css), and the second style sheet (stylea.css), using the following code, which assumes you have your style sheets in the same folder as your web page:

<link href="style.css" rel="stylesheet" type="text/css">
<link href="stylea.css" rel="stylesheet" type="text/css">

stylea.css will automatically import the third style sheet, stylemn.css, which specifies the styling for your Mongolian text.

3. CSS for rendering and styling fonts

The following covers CSS for the third style sheet, stylemn.css

Snippets of text

The following CSS is fine for rendering short snippets of Mongolian in your text or inside a table.

It sets the orientation of the script (vertical, left to right) and assigns each font to a separate class. In my naming, I use bichig for Mongolian White, bichigw for Mongolian Writing, bichiga for Mongolian Art, and bichigt for Mongolian Title. You are, of course, free to choose whatever class names you like.

CSS

.bichig {
margin: 2px 1px 0px 1px;
padding: 0px;
font-family: 'Mongolian White';
font-size : 20px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:right;
}

.bichigw {
margin: 2px 1px 0px 1px;
padding: 0px;
font-family: 'Mongolian Writing';
font-size : 20px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:right;
}

.bichiga {
margin: 2px 1px 0px 1px;
padding: 0px;
font-family: 'Mongolian Art';
font-size : 20px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:right;
}

.bichigt {
margin: 2px 1px 0px 1px;
padding: 0px;
font-family: 'Mongolian Title';
font-size : 25px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:right;
}

Parameters can be varied as desired, including margins and padding around content, font size, justification, etc. The text alignment used here is text-align: right, which, you will note, ensures that the text is bottom-aligned. If something doesn't work as you like, experiment.

The results are as follows:

Mongolian White

ᠰᠠᠢᠨ ᠪᠠᠢᠨ᠎ᠠ ᠣ᠋ᠣ?

Mongolian Writing

ᠰᠠᠢᠨ ᠪᠠᠢᠨ᠎ᠠ ᠣ᠋ᠣ?

Mongolian Art

ᠰᠠᠢᠨ ᠪᠠᠢᠨ᠎ᠠ ᠣ᠋ᠣ?

Mongol Title

ᠰᠠᠢᠨ ᠪᠠᠢᠨ᠎ᠠ ᠣ᠋ᠣ?

If you want to insert Mongolian text into a line of English, simply enclose it in a span (such as <span class="bichig">):

The best known Chinese-Mongolian dictionary published in China is the ᠬᠢᠲᠠᠳ
ᠮᠣᠩᠭᠣᠯ
ᠲᠣᠯᠢ
ᠪᠢᠴᠢᠭ (Хятад монгол толь бичиг).

The code for the inserted text is:

<span class="bichig">ᠬᠢᠲᠠᠳ<br /> ᠮᠣᠩᠭᠣᠯ<br /> ᠲᠣᠯᠢ<br /> ᠪᠢᠴᠢᠭ</span>.

Line breaks (<br />) have been inserted in order to break the Mongolian text up into shorter pieces (words).

Fixed-height container across the page

If you want a page written largely or completely in Mongolian script, you will want to contain continuous text within a fixed-height container. The text will sit peaceably inside the container and march right across the page until it stops. Theoretically, in order to do this, all you need to do is to enclose the entire Mongolian text in a div setting the height. The preferred div height is about 430px, which is about the height of the window in smartphones. The CSS of the div is:

CSS

.mongoliantext {height:430px;}

The html will look like this:

HTML

<div class="mongoliantext"><span class="bichig">Your Mongolian text, however long</span></div>

However, unfortunately there is one browser that does not always work like this: Internet Explorer. In my experience, IE fails to keep the text within a fixed-height band. Instead, it spills out of the container and keeps going down the page until it stops, obscuring any further text that might be below it. A long line of text could extend far down the page, well past the rest of the content. To prevent this, a height needs to be set directly on the CSS for the Mongolian text div itself. Separate classes have been set up for the four different fonts. I've named the styling for Mongolian White bichigband. The classes for other fonts are bichigwband, bichigaband, and bichigtband.

CSS

.bichigband {
height:420px;
margin: 4px;
padding: 4px;
overflow: auto;
font-family: 'Mongolian White';
font-size: 20px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:justify;
}

.bichigwband {
height:420px;
margin: 4px;
padding: 4px;
overflow: auto;
font-family: 'Mongolian Writing';
font-size: 20px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:justify;
}

.bichigaband {
height:420px;
margin: 4px;
padding: 4px;
overflow: auto;
font-family: 'Mongolian Art';
font-size: 20px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:justify;
}

.bichigtband {
height:420px;
margin: 4px;
padding: 4px;
overflow: auto;
font-family: 'Mongolian Title';
font-size: 25px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:justify;
}

It is in the nature of Mongolian traditional text that it runs right across the page and doesn't stop at the edge. It keeps going until the text finishes, which could be many browser widths to the right. The user reads the text by scrolling continuously to the right. If you wish you can, of course, artificially break the text into shorter segments by starting a new div for each section, but this does not sit well with responsive layouts.

The fact that Mongolian script extends far beyond the right edge of the screen can wreak havoc with page widths, especially on handheld devices. Since the Mongolian text has set the page width, any other text on the page will also spread out to the same width as the Mongolian text. This is solved by using "overflow: auto" on the container (see CSS above).

The following is an example of continuous text (Mongolian White):

The HTML is:

<div class="bichigband">
<p>First paragraph of Mongolian text</p>
<p>Second paragraph of Mongolian text</p>
<p>Third paragraph of Mongolian text</p>....
</div>

Text boxes

It is also possible to create boxes of text. A textbox 100px in height with a minimum width of 70 px floated to the right can be created as follows:

CSS

.bichigsquare {
height:100px;
min-width: 70px;
float:right;
clear:both;
font-family: 'Mongolian White';
font-size : 22px;
margin-top:0px;
margin-left:15px;
margin-bottom:30px;
padding:3px;
background-color: #fff2e6;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
}

The result is a container (here with pink background) that floats to the right and expands to accommodate texts of varying lengths. This particular layout works fine for placing short snippets of Mongolian text in a box.

HTML

<div class="bichigsquare">Mongolian text</div>

For more complex layouts in a fully Mongolian-language page, the reader is advised to refer to Mongolian-language sites on the Internet. A collection of links to such sites can be found here. Many of them are based on other rendering systems, but the layout principles should be the same.

When putting Mongolian traditional font in tables, try to avoid putting the class (bichig, bichigw, etc.) on the <td> tag as it could result in the text rendering horizontally.

Always try with one font first before going on to add others. It is easier to find problems if you are only dealing with one font.

It's important to test with various browsers and systems since behaviour can be different.

Some pages where I have included Mongolian traditional font on my websites are:

• Mongolian passages
• Inputting the Mongolian script
• Individual pages in Crystallising Mongolian Grammar
• Mongolian: Not a Sinoxenic Language
• International Organisations in Mongolian
• Days of the Week in Mongolian
• Lists of Mongolian birds at sibagu.com

Not all of these pages consistently use the same method. The method I outline above is the one that seems safest following the many difficulties I've experienced.

Troubleshooting

Troubleshooting is tedious. Whatever you do, try to keep it simple. This will help when you need to troubleshoot. Some problems you may encounter include:

1. Check whether the fonts you require have all been placed in the right folder, both locally and on your host server. If some are missing, problems will occur.

2. Check that you have linked to all necessary style sheets in the header of your web page.

3. If you are making modifications to a live file on the host server, do not trust the browser refresh function. Some browsers will keep the original css sheet settings no matter how many times you refresh the page. Try a different browser.

4. Try your site on as many different systems and browsers as you can. Sometimes the problem is with the browser, not with your site.

If you do put Mongolian Traditional Script on your site, let me know and I will link to you if have any substantial content!

Good luck!