Hosting Web Pages in Hindi using embedded fonts with WEFT

Introduction

With Indian language computing gaining popularity and the penetration of the Internet into the interior regions of the country, web content in Indian languages, with the common populace as the target, is becoming increasingly common. The majority of this target audience accesses the Web from cyber cafes, which typically run Windows 98/NT, which currently does not support the Indic packages. In addition to this, even in scenarios where the OS is able to run the Indic packages, the connectivity and speed is usually not conducive to downloading the entire package. Compatibility between different fonts used also poses a problem in a number of instances. The major challenge to web content developers, is then to host pages in such a manner that the maximum number of users is able to access it with the minimum amount of effort.

The majority of web browsers support what is called the UTF (UCS Transformation Format). UCS stands for Universal Character Set, and is now an ISO standard for fonts. Microsoft’s Indic also uses the UTF format to handle character sets in languages other than English. However, in order to be able to view UTF content properly, simply having UTF enabled on the machine is not always enough. One also needs to have a copy of the font used. With download speeds being what they are, it is not usually feasible to have the user wait for the download to complete before the content can be viewed. One solution to this is to embed the fonts used into the page. The purpose of this tutorial is to elucidate the procedure of embedding fonts into a page and hosting it on a site.

Embedded Fonts Basics

The embedded font method uses a file format called EOT (Embedded Open Type). Using this format, a font used in a page can be embedded into the source of the page, thereby making it possible to view the page without explicitly downloading either the font or a language package. In order to create the page however, a system that has the Indic language packages will be required. To embed a font using the EOT format, a converter is required to translate the font into an EOT file. One of the best packages for this purpose is a free and easy to use application called WEFT. WEFT (Web Embedding Fonts Tool) lets Web authors create 'font objects' that are linked to their Web pages so that when an Internet Explorer user views the pages they'll see them displayed in the font style contained within the font object. WEFT takes a specified web page as an input; analyses the fonts used, and converts them into the EOT format. The resulting files carry the .EOT extension and can be uploaded directly to the directory containing the web pages.

Creating the Web Page

For the purpose of this tutorial, we’ll be using the most basic of web page editors, the MS Word application. For more advanced pages, any editor which supports the UTF format, can be used. To create a web page in Word, open a New Word Document by right clicking anywhere on the desktop, follow the ‘New’ tab and select ‘Word Document’ from the popup menu.

Managed Resource Editor

Generating the resource automatically can lead to a problem of duplication. Because each Web form owns it own .resx file, some data in the .resx files may be repeated. To overcome this duplication problem, you can create shared resources. These resource files will be placed under the Resources sub-directory (automatically created by VS.NET) of the application’s root directory.

Enter the following text into the document. In order to enter the Hindi text, please see the tutorial on using the Hindi IME here.

Save the file in the UTF HTML format. You can do this by choosing ‘Save As’ from the file menu. Choose the ‘Web Page’ option from the File Type drop down menu in the dialog box that opens up. Save the file in a new folder.

Using WEFT to analyze the page for fonts

Download the WEFT installation executable from here. Run it and follow the on-screen instructions to install WEFT of your system. Run the WEFT program. The program will scan your system to build a database of installed fonts. You should now be seeing a screen like this:

Click next, and enter your name and e-mail address. Click next again to specify which pages to scan for fonts to be embedded.

The program will now analyze the pages selected by you for the fonts used. After the analysis, the .EOT files will be generated. When you click ‘Next’ to start the analysis for pages containing Hindi text, the program will give a warning, saying that the page contains characters that may not be viewable on all systems. This is perfectly all right. Proceed to the next screen to generate the required files.

At this point you will be able to see the list of fonts used in your page. When you click ‘Next’, the .EOT files will be generated in the same folder as your selected web page.

Embedding fonts requires some Cascading Style Sheet classes to be created on the page. If you are not familiar with CSS, WEFT modifies your pages for you to incorporate the necessary code. It is recommended that this feature be used. However, it is also a good idea to back up your content, since your original pages will be overwritten.

At this point, you will be asked to enter the URL of the root folder where your page will be hosted. This is in order to facilitate direct creation of embedded fonts on the server. However, at the time of writing, there seemed to be a problem with the direct upload functionality. It is therefore recommended that the upload be done manually. When asked for the URL, simply cancel the dialog and proceed to the next screen. Your modified pages will be saved in the same directory as the original pages.

The changes you made can be stored in a project file. This is a good idea, since later modifications can be made directly using the saved files. Finish the wizard and exit the program. You should now have the .EOT files in the folder along with the modified page. Confirm this. As shown below, a different EOT file should now represent each of the fonts in your page. You are now ready to begin uploading pages to your server.

Uploading the page

For the purpose of this tutorial, we will consider the pages to be hosted on a system running the Microsoft IIS Web Server. The installation of the IIS Web Server is beyond the scope of this tutorial. Once IIS is installed, you will have a folder named ‘Inetpub’ on the drive on which Windows is installed (usually C:). Inside the Inetpub folder, you will find the ‘wwwroot’ folder. Create a new folder in the ‘wwwroot’ folder. This is the folder that you will be storing the web pages in. For the purpose of the tutorial, the folder path was ‘C:\Inetpub\wwwroot\hindi’. Copy all the pages you wish to host, along with the EOT files to this folder. Your web page can now be accessed from any Unicode supporting web browser, on a Unicode enabled system. To test the page, open an Internet Explorer window, and type the URL ‘http:://localhost/hindi/hindi.html. You should now see your web page. Once you are comfortable with this procedure, you can try experimenting with multiple fonts, and multiple languages on the same page.

Trouble shooting

If you followed the above procedure, but you still don’t see your web page as you expected, run through the following checklist Did you save the file in ANSI format by mistake? If you used another editor (instead of MS Word), confirm that you saved the file in the UTF-8 format. Were all the fonts you used in the page Unicode fonts? This method works only for Unicode based fonts. Were the EOT files generated for the Hindi fonts (usually Mangal)? Check the original folder where you saved the pages for EOT files related to your font. Sometimes, if the file is saved in a format that WEFT does not recognize, the EOTs may not have been created. A workaround to this problem is to type all your text in MS Word and then copy it via the clipboard to your page. Did you copy all the files (pages and EOTs) to the correct folder on your Web server? The EOT files should be in the same folder as the pages. IS the Web server running properly? Ludicrous as this may seem, the server may not be running at all sometimes. Also check the path you typed in the URL. MS Word saves the web page with a .HTM extension (not .HTML) Do note that the Operating System you’re viewing the pages is Unicode enabled

If you’ve done all this and the page still does not display properly, please post a query on the discussion forums here at BhashaIndia.