East Asian Writing Systems
unicode encoded

Mongolian Script Home >
|| envelope

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 add them to 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 shows 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 server along with everything else.

2. CSS for 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 two main functions:

1. It allows your webpage to access your embedded fonts (the fonts you have placed in your folder).
2. It imports a second style sheet containing styling information for your fonts (see below).

The following CSS is for four separate fonts: Mongolian White, Mongolian Writing, Mongolian Art, and Mongolian Title. Note that the order -- aat above otf -- is important for some browsers in Macs.

@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');
}

As you can see, this sets your character set to UTF-8, imports styling for each font from a second style sheet, and accesses the four embedded fonts.

In the head section of your page, you need to link to stylea.css. (This is in addition to the main style sheet, which I generally call style.css).

stylea.css will automatically import styling for your fonts from a third style sheet, which I will call stylemn.css (see below).

3. Rendering and styling the fonts

Styling for Mongolian fonts is contained in stylemn.css. The styling 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.

Parameters can be varied as desired, including margins and padding around content, font size, justification, etc. If something doesn't work as you like it, experiment. (This styling is from the Mongolfont website itself.)

.bichig {
margin: 4px;
padding: 4px;
font-family: 'Mongolian White';
font-size : 23px;
-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;
}
.bichigw {
margin: 4px;
padding: 4px;
font-family: 'Mongolian Writing';
font-size : 23px;
-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;
}
.bichiga {
margin: 4px;
padding: 4px;
font-family: 'Mongolian Art';
font-size : 23px;
-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;
}
.bichigt {
margin: 4px;
padding: 4px;
font-family: 'Mongolian Title';
font-size : 23px;
-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;
}

To all intents and purposes this is enough for any browser to render Mongolian traditional font without any problems. Where your Mongolian traditional font is just a fragment of text inside a text in another language, or is just a word or two inside a table, this method works perfectly. For example, to put Mongolian White font inside a line of Englihs, you simply enclose it inside a span:

"The best known Chinese-Mongolian dictionary is called ᠬᠢᠲᠠᠳ
ᠮᠣᠩᠭᠣᠯ
ᠲᠣᠯᠢ
ᠪᠢᠴᠢᠭ
(Хятад монгол толь бичиг)." Here we have simply placed the text inside <span class="bichig"> and inserted breaks (<br /> in order to break the line up.

If you want to contain Mongol bichig within a fixed-height container (a div) that goes across the web page from left to right, the script sits peaceably inside that container within the set margins. The preferred height of the div is about 430px, since that is about the height of the window in smartphones. For a large body of continuous Mongolian text, you simply enclose the text inside a div with a height of approx. 430 px. Thus:

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

where the class "mongoliantext" is defined as having a height of 430 px.

Unfortunately, there appears to be one exception to this ideal behaviour: Internet Explorer. In my experience, IE does not keep the text neatly within a fixed-height div. Instead, the line of text simply runs out of the container down the page until it ends. A long line of text could extend way, way down the page, past the rest of the content. To prevent this, a height needs to be set directly for the Mongolian text itself. One way to do this is to set specific classes for continuous text, as follows:

.bichigband {
height:420px;
margin: 4px;
padding: 4px;
font-family: 'Mongolian White';
font-size : 23px;
-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;
font-family: 'Mongolian Writing';
font-size : 23px;
-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;
font-family: 'Mongolian Art';
font-size : 23px;
-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;
font-family: 'Mongolian Title';
font-size : 23px;
-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;
}

For continuous text across the page, the span class used for Mongolian White is thus bichigband rather than bichig.

Having separate classes for short snippets of text and long pieces of continuous text is clumsy and inelegant. I do not know how it can be avoided; a CSS professional might have a few suggestions.

It is in the nature of the Mongolian traditional script that it runs right across the page and doesn't stop when it gets to the edge. The user is forced to keep scrolling to the right until the text finishes. It is, of course, possible to artificially terminate the progress of the text by the simple expedient of starting a new div. It may also be possible to induce word wrap with responsive designs but I have not personally attempted this.

4. Results

The results on the web page should be as follows (for snippets of text):

Mongolian White

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

Mongolian Writing

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

Mongolian Art

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

Mongol Title

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

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

ᠣᠢᠷ᠎ᠠ ᠵᠢᠨ ᠡᠳᠦᠷ᠂ ᠦᠪᠦᠷ ᠮᠣᠩᠭᠣᠯ ᠦᠨ ᠰᠢᠯᠢ ᠵᠢᠨ ᠭᠣᠣᠯ ᠠᠢᠮᠠᠭ ᠦᠨ ᠰᠢᠯᠣᠭᠣᠨ ᠬᠦᠬᠡ ᠬᠣᠰᠢᠭᠣᠨ ᠦ ᠰᠢᠭᠦᠬᠦ ᠬᠣᠷᠢᠶ᠎ᠠ ᠨᠢᠭᠡᠨ ᠬᠦᠴᠦᠷᠬᠡᠭᠯᠡᠨ ᠨᠦᠵᠢᠳᠯᠡᠭᠰᠡᠨ ᠶᠠᠯᠠᠲᠣ ᠬᠡᠷᠡᠭ ᠲᠦ ᠰᠢᠭᠦᠯᠲᠡ ᠬᠢᠪᠡ᠃ ᠰᠢᠭᠦᠨ ᠲᠠᠰᠣᠯᠣᠯᠳᠠ ᠪᠠᠷ᠂ ᠵᠠᠭᠠᠯᠳᠣᠭᠳᠠᠭᠴᠢ ᠡᠷᠬᠢᠮᠲᠦ ᠵᠢ ᠬᠦᠴᠦᠷᠭᠡᠭᠯᠡᠨ᠂ ᠨᠦᠵᠢᠳᠯᠡᠭᠰᠡᠨ ᠶᠡᠯ᠎ᠡ ᠪᠡᠷ ᠭᠣᠷᠪᠠᠨ ᠵᠢᠯ ᠦᠨ ᠬᠣᠭᠣᠴᠠᠭ᠎ᠠ ᠲᠠᠢ ᠬᠣᠷᠢᠬᠣ ᠡᠷᠡᠭᠦᠦ ᠪᠡᠷ ᠰᠢᠳᠬᠡᠭᠰᠡᠨ ᠪᠠᠢᠨ᠎ᠠ᠃

ᠵᠠᠭᠠᠯᠳᠣᠭᠳᠠᠭᠴᠢ ᠡᠷᠬᠢᠮᠲᠦ ᠪᠣᠯ ᠰᠢᠯᠢ ᠵᠢᠨ ᠭᠣᠣᠯ ᠠᠢᠮᠠᠭ ᠦᠨ ᠰᠢᠯᠣᠭᠣᠨ ᠬᠦᠬᠡ ᠬᠣᠰᠢᠭᠣᠨ ᠦ ᠬᠦᠮᠦᠨ᠂ ᠨᠢᠭᠡᠨ ᠡᠳᠦᠷ ᠲᠡᠭᠦᠨ ᠦ ᠪᠡᠭᠡᠵᠢᠩ ᠳᠤ ᠠᠵᠢᠯᠯᠠᠵᠤ ᠪᠠᠢᠭ᠎ᠠ ᠨᠠᠢᠵᠠ ᠴᠣᠯᠮᠣᠨ ᠨᠢ ᠠᠮᠠᠷᠠᠯᠲᠠ ᠪᠠᠷ ᠵᠣᠭᠠᠴᠠᠷ᠎ᠠ ᠢᠷᠡᠵᠡᠢ᠃ ᠬᠠᠮᠲᠣ ᠢᠷᠡᠭᠰᠡᠨ ᠨᠢ ᠪᠠᠰᠠ ᠴᠣᠯᠮᠣᠨ ᠦ ᠡᠮᠡᠭᠲᠡᠢ ᠨᠠᠢᠵᠠ ᠰᠠᠷᠠᠨ᠎ᠠ ᠪᠠᠢᠵᠠᠢ᠃ ᠡᠷᠬᠢᠮᠲᠦ ᠨᠠᠢᠵᠠ ᠴᠣᠯᠮᠣᠨ᠂ ᠰᠠᠷᠠᠨ᠎ᠠ ᠬᠣᠶᠠᠷ ᠢ ᠲᠣᠰ ᠬᠣᠰᠢᠭᠣᠨ ᠦ ᠨᠢᠭᠡᠨ ᠵᠣᠭᠠᠴᠠᠯ ᠦᠨ ᠭᠠᠵᠠᠷ ᠳᠠᠭᠠᠭᠣᠯᠣᠨ ᠬᠦᠷᠴᠦ᠂ ᠮᠣᠩᠭᠣᠯ ᠭᠡᠷ ᠲᠦ ᠠᠷᠢᠬᠢ ᠮᠢᠬ᠎ᠠ ᠭᠠᠷᠠᠭᠠᠨ ᠵᠣᠴᠢᠯᠠᠵᠤ ᠳᠡᠢᠯᠡᠵᠦ ᠬᠠᠷᠠᠩᠭᠣᠢ ᠪᠣᠯᠬᠣ ᠳᠤ᠂ ᠰᠠᠷᠠᠨ᠎ᠠ ᠪᠠᠬᠠᠨ ᠰᠣᠭᠳᠣᠭᠰᠠᠨ ᠪᠣᠯᠬᠣᠷ᠂ ᠬᠠᠵᠠᠭᠣ ᠵᠢᠨ ᠮᠣᠩᠭᠣᠯ ᠭᠡᠷ ᠲᠦ ᠣᠷᠣᠵᠣ ᠣᠨᠲᠠᠭᠰᠠᠨ ᠪᠠᠢᠨ᠎ᠠ᠃ ᠡᠷᠬᠢᠮᠲᠦ ᠪᠠ ᠴᠣᠯᠮᠣᠨ ᠬᠣᠶᠠᠭᠣᠯᠠ ᠪᠠᠬᠠᠨ ᠠᠷᠢᠬᠢ ᠣᠣᠭᠣᠵᠣ ᠪᠠᠢᠭᠠᠳ᠂ ᠡᠷᠬᠢᠮᠲᠦ ᠪᠡᠶ᠎ᠡ ᠵᠠᠰᠠᠬᠤ  ᠪᠠᠷ ᠭᠠᠷᠴᠣ ᠢᠷᠡᠭᠡᠳ᠂ ᠬᠠᠵᠠᠭᠣ ᠵᠢᠨ ᠮᠣᠩᠭᠣᠯ ᠭᠡᠷ ᠲᠦ ᠰᠢᠷᠭᠣᠨ ᠣᠷᠣᠭᠠᠳ ᠦᠭᠡ ᠳᠠᠭᠣᠨ ᠦᠭᠡᠢ ᠪᠡᠷ ᠰᠢᠭᠣᠳ ᠣᠨᠲᠠᠵᠤ ᠪᠠᠢᠭᠰᠠᠨ ᠰᠠᠷᠠᠨ᠎ᠠ ᠲᠠᠢ ᠪᠡᠯᠭᠡ ᠵᠢᠨ ᠠᠵᠢᠯᠯᠠᠭ᠎ᠠ ᠬᠢᠵᠦ ᠡᠬᠢᠯᠡᠵᠡᠢ᠃ ᠮᠣᠩᠭᠣᠯ ᠭᠡᠷ ᠲᠦ ᠳ᠋ᠧᠩ ᠦᠭᠡᠢ ᠬᠠᠷᠠᠩᠭᠣᠢ ᠪᠠᠢᠭᠰᠠᠨ ᠪᠣᠯᠬᠣᠷ᠂ ᠰᠠᠷᠠᠨ᠎ᠠ ᠦᠪᠡᠷ ᠦᠨ ᠡᠷᠡᠭᠲᠡᠢ ᠨᠠᠢᠵᠠ ᠴᠣᠯᠮᠣᠨ ᠭᠡᠵᠦ ᠡᠨᠳᠡᠭᠦᠷᠡᠭᠡᠳ ᠳᠣᠣᠭᠠᠷᠣᠭᠰᠠᠨ ᠦᠭᠡᠢ᠂ ᠭᠡᠨᠡᠳᠲᠡ ᠭᠠᠷ ᠲᠣ ᠨᠢ ᠣᠷᠲᠣ ᠰᠢᠭ ᠦᠰᠦᠲᠡᠢ ᠬᠦᠮᠦᠨ ᠲᠡᠮᠲᠡᠷᠢᠭᠳᠡᠵᠦ᠂ ᠴᠣᠯᠮᠣᠨ ᠪᠣᠯ ᠣᠬᠣᠷ ᠦᠰᠦᠲᠡᠢ ᠲᠣᠯᠠ ᠰᠠᠷᠠᠨ᠎ᠠ ᠰᠠᠨᠳᠣᠷᠣᠨ ᠬᠠᠰᠬᠢᠷᠣᠭᠰᠠᠨ ᠳᠤ᠂ ᠴᠣᠯᠮᠣᠨ ᠬᠠᠵᠠᠭᠣ ᠵᠢᠨ ᠮᠣᠩᠭᠣᠯ ᠭᠡᠷ ᠡᠴᠡ ᠣᠷᠣᠵᠣ ᠢᠷᠡᠭᠡᠳ᠂ ᠳᠠᠷᠣᠢ ᠬᠡᠷᠡᠭ ᠮᠡᠳᠡᠭᠦᠯᠦᠭᠰᠡᠨ ᠪᠠᠢᠨ᠎ᠠ᠃

ᠮᠠᠨ ᠦ ᠣᠯᠣᠰ ᠦᠨ ᠡᠷᠡᠭᠦᠦ ᠵᠢᠨ ᠬᠠᠣᠯᠢ ᠵᠢᠨ ᠲᠣᠭᠲᠠᠭᠠᠯ ᠵᠢᠡᠷ᠂ ᠬᠦᠴᠦᠷᠬᠡᠭᠯᠡᠨ ᠨᠦᠵᠢᠳᠯᠡᠭᠰᠡᠨ ᠶᠠᠯ᠎ᠠ ᠭᠡᠳᠡᠭ ᠨᠢ ᠡᠮᠡᠭᠲᠡᠢ ᠵᠢᠨ ᠵᠣᠷᠢᠭ ᠰᠠᠨᠠᠭᠠᠨ ᠡᠴᠡ ᠵᠦᠷᠢᠴᠡᠨ ᠂ ᠬᠦᠴᠦᠷᠬᠡᠭᠯᠡᠯ᠂ ᠰᠦᠷᠳᠡᠭᠦᠯᠦᠯ ᠪᠣᠶᠣ ᠪᠣᠰᠣᠳ ᠠᠷᠭ᠎ᠠ ᠪᠠᠷᠢᠯ ᠵᠢᠡᠷ ᠡᠮᠡᠭᠲᠡᠢ ᠲᠡᠢ ᠪᠡᠯᠭᠡ ᠵᠢᠨ ᠬᠠᠷᠢᠴᠠᠭ᠎ᠠ ᠡᠭᠦᠰᠬᠦ ᠠᠵᠢᠯᠯᠠᠭ᠎ᠠ ᠵᠢ ᠵᠢᠭᠠᠵᠤ ᠪᠣᠢ᠃ ᠲᠣᠰ ᠬᠡᠷᠡᠭ ᠲᠦ᠂ ᠵᠠᠭᠠᠯᠳᠣᠭᠳᠠᠭᠴᠢ ᠡᠷᠬᠢᠮᠲᠦ ᠰᠠᠷᠠᠨ᠎ᠠ ᠵᠢᠨ ᠠᠷᠢᠬᠢ ᠣᠣᠭᠣᠭᠰᠠᠨ ᠦ ᠳᠠᠷᠠᠭ᠎ᠠ᠂ ᠣᠶᠣᠨ ᠰᠡᠷᠡᠯ ᠪᠠᠯᠠᠷᠠᠬᠠᠢ ᠪᠠᠢᠳᠠᠯ ᠢ ᠵᠠᠪᠰᠢᠨ ᠪᠡᠯᠭᠡ ᠵᠢᠨ ᠬᠠᠷᠢᠴᠠᠭ᠎ᠠ ᠡᠭᠦᠰᠦᠭᠰᠡᠨ ᠨᠢ ᠶᠠᠯ᠎ᠠ ᠪᠦᠷᠢᠯᠳᠦᠬᠦ ᠨᠦᠬᠦᠴᠡᠯ ᠳᠡᠬᠢ ᠪᠣᠰᠣᠳ ᠠᠷᠭ᠎ᠠ ᠪᠠᠷᠢᠯ ᠳᠤ ᠬᠠᠷᠠᠭᠠᠯᠵᠠᠭᠰᠠᠨ ᠪᠦᠭᠡᠳ ᠰᠠᠷᠠᠨ᠎ᠠ ᠦᠪᠡᠷ ᠦᠨ ᠡᠷᠡᠭᠲᠡᠢ ᠨᠠᠢᠵᠠ ᠪᠢᠰᠢ ᠭᠡᠳᠡᠭ ᠢ ᠮᠡᠳᠡᠭᠰᠡᠨ ᠦ ᠳᠠᠷᠠᠭ᠎ᠠ ᠳᠠᠷᠣᠢ ᠬᠠᠰᠬᠢᠷᠣᠭᠰᠠᠨ ᠨᠢ ᠡᠮᠡᠭᠲᠡᠢ ᠵᠢᠨ ᠵᠣᠷᠢᠭ ᠰᠠᠨᠠᠭᠠᠨ ᠡᠴᠡ ᠵᠦᠷᠢᠴᠡᠪᠡ ᠭᠡᠳᠡᠭ ᠢ ᠬᠦᠢᠴᠡᠳ ᠬᠠᠷᠠᠭᠣᠯᠵᠣ ᠪᠢᠢᠨ᠎ᠠ᠃

Regrettably Mongolian script that extends across to the right can wreak havoc with page widths, especially on handheld devices. Mongolian text sets the standard for page width and the rest of the text spreads out to take advantage of this. I do not know how to deal with this problem, except by the rather forced hack of putting the rest of the text inside a div that restricts page width. Here I use

.rigidwidth {
max-width: 300px;
}

as a default, restricting the width of the page on handheld devices to 300px, and

.rigidwidth {
max-width: 700px;
}

for pages with a minimum width of 400px.

5. Going Further

Once you have the hang of it, more is possible. For example, keeping in mind the problems of IE, containers of various sizes can be created. A container that is 100px in height with a minimum width of 70 px floated to the right can be created as follows:

.bichigsquare {
height:100px;
min-width: 70px;
float:right;
clear:both;
font-family: 'Mongolian White';
font-size : 120%;
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 non-Mongolian-language environment.

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 quite different.

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

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.

Good luck!

Back to Top