HTML5: Developing web pages in Bengali

Hi all
In response to few questions about how to develop a website with Bangla texts, I have written down the following accounts.
Updated version of this article can be found at http://www.joomla-bd.org.

Creating Bangla Webpages
As in creating webpage in English, one can use software tools like Frontpage or choose to write the basic html codes. However, such webpages are known to be what is called static. Dynamic webpages are produced by programs (mostly in PHP or ASP these days) run on server. The output of such program is of course is a HTML file.

Bengali characters can be put in a HTML page in mainly two different ways: the old way, and new UNICODE way.

Bengali- the old way:
To create a webpage this way, you have to choose a Bengali font (and an encoding, as there is no agreed upon standard on that) and pick an editor that would allow typing Bengali characters. You may also need a program (often called keyboard mapper) to input Bengali characters. To be very specific, you may choose Shutonny font (from Ananda Computers), the Frontpage editor and Bijoy Keyboard manager. All these are very common in use. If you have any experience in writing English webpage, then you shouldnt have any problems in doing the same in Bengali.

Now the question of enabling the end users or viewers view the Bengali texts you have written. The viewer MUST have the Bengali font you have used in writing the pages or a compatible one to see the pages. The font must be installed and functional on the operating system in use. In the event of not having the font, there are few things you can help viewers.

1. Host the font file on the webserver and ask the viewer to download and install it. It would require you have the appropriate permissions from the font vendor. Also, the viewer must have the priviledge from the operating system of the computer in use to install a new font. This technique is well enough and in use on many websites.

2. You can publish the font as an integral part of the HTML file. This is so called font embedding or dynamic font. The only prodcts line that support such font embedding is Microsoft. You would create the webpage as said and then process the font with a program called WEFT (free to download). Once done, you need to host the webpage along with the processed font with the hope that when the browser wont find the specified font on the client coputer it would download it from the server automatically. The sad thing of this technique is that only IE at the moment support such font embedding. Also, the embedded font can only used to view texts. Inputting, editings are not supported. Before the WEF, there was another similar technology from Bitstream. 

Problems
Apart from the adherence to IE the biggest problem of this technique is its inablity to be meaningful to a search engine. If you have a website that google does not know about, then do not expect many visitors to your website. Search engines would consider such webpages as English  but wont be able to find any meaningful word or phrase to index on. Though you can have keywords in metadata, but search engine like google tends to ignore or ill-consider them.

Examples-

• Boishakhi is found to be best Bengali font for webpage thanks to its outstanding screen quality at small sizes. Luckily it is free and can be distributed also. 
• Bijoy is the most popular for typing Bengali text using their own fonts. For a compatible keyboard program for Boishakhi, please try http://www.akshor.com/ (it's expired when writing this)
• http://www.bhorerkagoj.net/  is an example of Bengali website using fonts from Bijoy and forcing the viewers to download and install the font to view the pages.
• http://www.prothom-alo.com/ is an example of Bengali website using dynamic fonts. But as said, you can view only with IE.
• http://www.somewhereinblog.net/ is a site that came up on google when searched for Boishakhi.

Bengali- the UNICODE way:
Writing Bengali in a particular font has many problems not to mention less compatibility accorss different operating systems and browsers. UNICODE seems to solve the problem by defining a standard for characters and other symbols of all different languages and  rules for writing. But as you can guess, you need to have support from the browser, the operating systems and lot of ther things to get the UNICODE working fully. Luckily, the support is getting better and there has never been a better time to write a Bengali website using UNICODE.

To write texts in UNICODE, you need a font that has to be UNICODE compliant (commonly called OTF though OTF can be non-UNICODE as well). The viewer also has to have some font that supports the UNICODE and has Bengali characters in it. The good thing is, both the fonts not necesarily have to be the same as long as they both conform to UNICODE and have Bengali characters in them. (An OTF font may contain charcters of more than one language.) So the viewers are unlikely to have any problems in viewing Bengali pages al long as they have at least one Bengali OTF. The good news is, the Windows XP SP2 and later has Vrinda as the Bengali font. There may be similar on Linux and other platforms (I dont have much knowledge about them.)

To edit UNICODE texts (be it any language including bangla) you would need a text editor (Notepad can do), or can go for full functional HTML editor like Frontpage. Frontapge/notepad would allow you enter texts in any language if your system is configured properly and has got a required font. Inputting character of non-English languages needs a keyboard mappers as usual. There are heaps of tools to choose from for this. The UNICODE website http://www.unicode.org/ lists the sources of such programs. For Bengali and Assamese, Avro (http://www.omicronlab.com/)  seems the winner at the moment.

Example and sources
Here are a few examples of Bengali websites emplying UNICODE.

• http://www.apona-bd.com/ 
• http://www.joomla-bd.org/ (well the Bangla joomla demo site!)
• http://www.stat.wisc.edu/~deepayan/Beng ... html  

The strange thing that you may not know is that you can search google in Bengali. Get any of Bangla inputting software like Avro and type some Bangla texts in the search box. Hit the seach button and then see.

Pros and Cons of old and new ways
Coming

HTML5: How to embed a custom font into HTML or CSS

Embed custom fonts on your website with the @font-face property

By Ryan Boudreaux in Web Designer, July 12, 2012, 1:24 AM PST

• Email Alert
• RSS

Ryan Boudreaux shows you how to get custom fonts into a usable form for your website designs by employing the @font-face property. 

My last post on getting font inspiration from film and television pointed out several custom fonts that were created based on the opening credit titles for films such as Men In Black and Back To The Future and television series such as I Dream of Jeannie and Gilligan's Island. In this second part, I will show you how to embed these custom fonts into your websites, enabling users to view and appreciate the nifty fonts no matter the browser or device.

Viewing custom fonts from your website

Now that you have downloaded a collection of nifty film and television true type fonts, you may be wondering how you get them to a useful state on your website. Unless your users have the same fonts installed on their local devices, they will not be able to view your clever custom fonts. Luckily, there is a way to get these customs fonts onto your user's devices using several options; the first is to employ a graphic image editor, and the second is to incorporate the@font-face property in your CSS.

One alternative to solving the problem becomes the task of creating titles, logos, or headings from your favorite graphic image editor, presuming that you have already installed the font on the local PC, then all you need to do is create the textual content utilizing the particular custom font. Similar steps for creating titles in this manner are described in the tutorial, "Create a minimalist web design layout using Photoshop," in particular, the part which describes creating the header section in the post. A portion of the process is shown with the "Web Site Name" text in Figure Abelow. However, this process means that your website titles and headings will give up some SEO recognition, since text displayed as images will not register in most search engine scans.

Figure A

A better option entails pushing the custom fonts to a central directory on your web sever, and then creating a set of CSS style properties to call them as defined. For instance, you might place all your web fonts in a directory such as /htdocs/web/fonts.

In this example I will use the Back to the Future font for first level headings, the I Dream of Jeannie font for the second level headings, and the Gilligan's Island font for paragraphs. This might not be the best use of typography for a web page; however, this is for demonstration purposes only. I downloaded and copied the three *.ttf files to my font directory, and then created the index.html file along with CSS file styles.css.

Utilizing the @font-face property in the CSS allows you to call any custom fonts and ensures that they will be displayed for any user. You can add an unlimited number of @font-face property declarations as you wish; as in this case, I have three as displayed in the CSS code snippet below:

@font-face {

    font-family: bttf_font;

    src: local(bttf_font), url('fonts/bttf.ttf') format('opentype');

}

@font-face {

    font-family: jeannie_font;

    src: local(jeannie_font), url('fonts/jeannie.ttf') format('opentype');

}

@font-face {

    font-family: gilligan_font;

    src: local(gilligan_font), url('fonts/gilligan.ttf') format('opentype');

}

Then the font-family is assigned to the individual elements:

h1 {

        font-family:bttf_font;

        font-size:32px;

        font-stretch:extra-expanded;

}

h2 {

        font-family:jeannie_font;

        font-size:24px;

        font-stretch:extra-expanded;

}

p {

    font-family: gilligan_font;

        font-size:18px;

}

Internet Explorer

There is a known issue with older versions of Internet Explorer that do not render *.ttf file types, and they must be converted to an *.eot file type. In these cases, you would need to convert the *.ttf file to an *.eot file and then add that to your @font-face property. In the case of the Back to the Future font, it would appear first in the font stack:

@font-face {

    font-family: bttf_font;

    src: url('bttf.eot');

    src: local(bttf_font), url('fonts/bttf.ttf') format('opentype');

}

Check out the MSDN Library on About Font Embedding for more information on creating the *.eot files for your custom font stack.

The demonstration files are available for download, and the demo page is displayed in Figure Bas shown in Chrome 20.0.1.

Figure B

Do you use any custom fonts for your websites? If so, tell us which fonts you use and how you have implemented them.

HTML: Add URL link in CSS Background Image?

I have a CSS entry that looks like this:

.header {
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
    border-bottom:1px solid #eaeaea;


}

How can I add the link to the the background image in that CSS?

The full CSS can be found here and the html that uses is there.

Try wrapping the spans in an anchor tag and apply the background image to that.

HTML:

<div class="header">
    <a href="/">
        <span class="header-title">My gray sea design</span><br />
        <span class="header-title-two">A beautiful design</span>
    </a>
</div>

CSS:

.header {
    border-bottom:1px solid #eaeaea;
}

.header a {
    display: block;
    background-image: url("./images/embouchure.jpg");
    background-repeat: no-repeat;
    height:160px;
    padding-left:280px;
    padding-top:50px;
    width:470px;
    color: #eaeaea;
}

Padding and margins around image links are clickable. How do I set only the image as the link?

I believe the best way to solve this problem would be to contain each image in a div that is sized appropriately.  Put the margins and padding on the div.  Put the links on the images.  The divs will need to be floated to get them on the same horizontal line.