How to develop a website in Hindi

How to develop a website in Hindi 17Feb, 2010

You can develop a website in Hindi – or any other language – by embedding custom dynamic fonts. Although, embedding custom fonts has always been a painful experience for web developers and designers, but the latest trends in web design brought the idea back to life with new techniques. In this article you’ll find the modern techniques that may help you with the topic at hand, however, one must note that no particular technique is perfectly compatible with every browser and each has its pros and cons.

SIFR
sIFR (Scalable Inman Flash Replacement) is a technique that replaces text elements on screen with Flash equivalents. Needless to say that website visitors must have Adobe Flash Player installed to see the custom fonts, otherwise default fonts will be used. Also, the current stable sIFR release (2.0.7) has some drawbacks, i.e. you can’t use CSS styling, applying custom fonts to links is hardly possible and the developer needs an Adobe Flash editor to generate .swf files for each custom font.

CUFON
Cufon is a fast and pure Javascript replacement to sIFR. The font files need to be converted into VML path, that can be made only with Cufon’s font generator. In addition to this there is another JS file that needs to be included. Advantage of this technique is that it works not only with TrueType (TTF) but also with OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts. And it is also possible to style elements with CSS.

TYPEFACE.JS
Typeface is quite similar to Cufon – a JS file is to be included in the webpage, and their online generator needs to be used to generate fonts. It is also easy to use on a webpage, just type the CSS directive “font-family: YourFont” and you get it embedded. Two main limitations are that only TTF fonts can be used with Typeface.js, and it sometimes cuts characters in the end and the phrases becomes incomplete – for some unknown reason.

FONTJAZZ
FontJazz is a tiny typographic engine written in JavaScript, enabling web designers and developers to use any typeface on a website. Solution is a bit similar to Cufon and Typeface.js. With FontJazz you need to generate font file on their website (single .gif file and js-map array) then Javascript library will use it as a sprite image (solution is similar to CSS sprites).

FLIR
FLIR (Facelift Image Replacement) is an image replacement script that dynamically generates image representations of the text label and automatically inserts it using Javascript into the webpage. FLIR has PHP-based server-side part that can be a big disadvantage not only for ASP.NET, Java, Ruby, Python developers but also for the HTML slicers/coders.

 

Below are the details on using Cufón (the technique recommended at this time).

Step 1 – Getting Cufon
It is highly recommended that you always use the YUI-compressed version of Cufon, available at the Cufon website. Should you experience problems with the compressed version, you may also use the uncompressed version.

Step 2 – Generate the font
Use the font generator at Cufón website to generate the required font file.

Step 3 – Replacing text
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
</body>
</html>

First, we include the YUI compressed version of cufon.

Then we include the font that we converted in Step 2. Nothing special here, you include it just like you would any other JavaScript file.

Then we get to part where we implement the font to the elements in the document. And that’s exactly what you tell Cufón to do, with Cufon.replace('h1'). Nothing else is needed, Cufón will use the CSS rules associated with the elements and determine what to do.

Step 4 – Making Internet Explorer behave
Unfortunately one problem remains with Internet Explorer. In most cases, there is a short but visible delay before the text is replaced. You can avoid this issue by inserting the following snippet right before the closing </body> tag (or before any external scripts such as Google Analytics):
  <script type="text/javascript"> Cufon.now(); </script>

Using multiple fonts
To use multiple fonts you only need to specify which font you want to use and you’re set:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Vegur' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
<h2>This text will be shown in Myriad Pro.</h2>
</body>
</html>

If not specified, Cufon will use the font that was loaded last (in this case it would be Myriad Pro), which is why there was no need to specify the font in the first example.

Posted by: Aman Brar / In: CSS, Fonts, HTML and Tagged , , ,
Cam

One thought on “How to develop a website in Hindi”

  1. Hi, I’m very interested in Linux but Im a Super Newbie and I’m having trouble deciding on the right distribution for me (Havent you heard this a million times?) anyway here is my problem, I need a distribution that can switch between reading and writing in English and Japanese (Japanese Language Support) with out restarting the operating system.

Comments are closed.