Multilingual websites with custom fonts
Understanding character set encoding will help us create powerful application/websites in multiple languages. If you are in hurry and want to dive in to the steps of creating Multilingual Websites with custom fonts click here.
In Computer's world everything is numbers, when human wanted to have text in computer, scientist came up with mapping between number and characters. Computer will read numbers where as human will see those numbers as characters. One such earlier mapping/encoding is ASCII. ASCII can represent 128 different characters, since this was created by English scientist only English language found its place in that 128 characters. Soon it becomes the standard and most of the other computer engineers and scientist started using it. When graphics in computer improved, some artistic scientist came up with the concept of Font. Font maps the number with different style of the text.
English alone is not enough to server the entire world, so language enthusiast used Font as a tool to represent their own language. They introduced language specific fonts. That is for the same internal number each language font will have its own character. For example the sequence of number “97, 115, 100, 102” represent “a, s, d, f” in English font and “ய, ள, ன, க” in Tamil. This technique served for a short duration but it definitely has a flaw, the same number sequence in computer is read as different character sequence with different fonts. So meta data is required to identify the font, the receiver has to have the font with same encoding as used by sender to see the text properly.
To handle this problems scientist came up with new encoding UTF or Unicode which accommodate almost all languages/characters in the world. So computer become language independent, any language can be represented in computer. In fact keywords of programming languages such as Java, Python can also be non English words. Soon we may get such programming language; Scientist in your next door may be working on that project.
Steps to create Multilingual web sites
<!DOCTYPE html>
<html>
<head>
<title>Satcos-Tamil Web Pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<p>தமிழ் வலைத்தளங்கள் உருவாக்குவது சுலபம்</p>
<p>தமிழ் வலைத்தளங்கள் உருவாக்குவது சுலபம்</p>
</body>
</html>
- In order to use UTF encoding we need to specify character set meta tag in the “Head” section of the html.
- Use Azhagi+ or Keyman to get the text in your desired language, copy past it in the html document.
- Save the file as html with utf variant encoding
Custom font to display non-English character set. CSS3’s font-face enable website developers to have font files in the server and use them display the webpage. This enables rendering of webpage as it is in the client system independent of availability of the font in the client.
<!DOCTYPE html>
<html>
<head>
<title>Satcos-Tamil Web Pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
@font-face {
font-family: tamilFont1;
src:url("Uni Ila.Sundaram-01.ttf");
}
@font-face {
font-family: tamilFont2;
src:url("Uni Ila.Sundaram-02.ttf");
}
</style>
</head>
<body>
<p style="font-family: tamilFont1;">தமிழ் வலைத்தளங்கள் உருவாக்குவது சுலபம்</p>
<p style="font-family: tamilFont2;">தமிழ் வலைத்தளங்கள் உருவாக்குவது சுலபம்</p>
</body>
</html>
- Declare font face at the beginning of style sheet mentioning the name and url. W3schools tutorial for better understanding.
- Use the declared name in the font-family property of the style element
தமிழ் வலைத்தளங்கள் உருவாக்குவது சுலபம்.
தமிழ் வலைத்தளங்கள் உருவாக்குவது சுலபம்.
A full page example created with text and css3 கீதாசாரம் in tamil