Html For Displaying Tibetan

THL Toolbox > Developers' Zone > Web-development > Making Web Pages In Tibetan Unicode > HTML for Tibetan Fonts

HTML for Tibetan Fonts

Contributor(s): Nathaniel Grove

Creating HTML pages that display Unicode Tibetan font is fairly straightforward provided that the viewing computer is properly set up. For Windows machines this means that they must have XP or later, have a suitable version of Uniscribe (usp10.dll — which is standard these days), and have the Tibetan Machine Uni font, Jomolhari font, or some other OpenType Unicode font. For more information on view Tibetan online, see external link: THL’s Tibetan, Scripts, and Fonts Page.

The HTML code that is needed can be done in one of two ways, using THL styles or using in-line styles. Using THL Styles

Any THL page that uses the external link: http://www.thlib.org/global/css/thdl-style.css as all THL pages must can simply use the .tib class style. This is done by adding a class="tib" attribute to whatever element contains the Tibetan. It should contain only Tibetan script as the style changes the font to Tibetan Machine Uni at a larger size so English will look strange. To select just the Tibetan text within a mixed language paragraph use the <span> element. An example is:

  • <span class="tib">འདིར་བོད་སྐད་འབྲི། (Tibetan here)</span>

Note: Most browsers/systems do not presently recognize the Tibetan tsek, or intersyllabic dot, as a line-breaking point. For this reason, when producing the Unicode Tibetan for inclusion in HTML pages, to induce proper line-breaking, each tsek should be replaced by a tsek followed by a zero-width space. In Unicode, this would mean replacing each occurrence of U+0F0B with U+0F0B U+200B.

Using In-Line Styles

The in-line style to achieve the same thing uses the style attribute on whatever element one one's to appear in Tibetan. To effect this you must set the font-family to "Tibetan Machine Uni" and "XenoType Tibetan New", set the font-size to 16pt or larger, set the line-height to 20pt or larger, and set the text-align to left. If the text align is not set to left, the characters may not properly stack in some browsers but will be stretched out over the line with the subscribed dotted-circles. The example for this markup will also use a span tag.

  • <span style="font-family: 'Jomolhari-ID','Tibetan Machine Uni'!important; font-size: 14pt; text-align: left;">Tibetan here</span>

An example using this is (view code to see it):

འདིར་བོད་སྐད་འབྲི།

Common Problems

The Tibetan displays in the browser but it does not stack properly. Each stacked character appears in its own space with a dotted circle. Something like this:

འདིར་བོད་སྐད་འབྲི། This is because the font is being justified. Add "text-align: left;" to the style attribute of the element. If necessary, use the "important" declaration, i.e. "text-align: left!important;".

The Tibetan appears fine in browsers on Windows but not on Macs

This is because there is no declaration of the Xeno type font in the style. The Xeno type font must be declared first as in the above example. Windows will ignore it and use the second font, but somehow Macs don't do the same thing.

Provided for unrestricted use by the external link: Tibetan and Himalayan Library