CSS Box Model Hack

Why Do We Need a Box Model Hack?

The CSS box model defines the width and height of a box created with CSS as the width or height of the content area of said box. If the width property is left off, then the box is as wide as the content within it. The same goes for the height. If padding, borders, or margins are added to the box, they are added outside of the content width or height.
However, versions of Internet Explorer before IE6 strict don't work this way. In their DOM, the width of the box is the width of the content plus any border or padding. Thus, a 100px box with 0 padding and 0 border would render the same in IE as in Mozilla. However, if 5px padding is added, the Mozilla box (including content and padding) would be 110px wide, while the IE box would still be 100px. If a 10px border is also added, the Mozilla box (including content, padding and border) would be 130px wide, while the IE box would still be 100px. Finally, if you added 10px margin on all sides, the Mozilla box would be 150px while the IE box would then grow to 120px (100px for the content, padding, and border, and 20 for the margins on left and right).

Internet Explorer does not render the box model correctly. If you want your Web pages to look the same no matter what browser views them, then you have to do something to offset this incorrect rendering of the box model.

What is the Box Model Hack

In basic terms, the box model hack uses bugs in Internet Explorer to force it to use CSS tags that other browsers will ignore.

If you have a div like this:
div {
width: 100px;
padding: 10px;
border: 10px solid #000;
}
It will be 140px wide in valid browsers, and 100px wide in Internet Explorer.

To fix this you need to set up two div selectors, one which defines the width for compliant browsers at 100px and one for IE at 140px.

div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}

The first line "width: 100px;" is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property "\width: 140px;" is for IE 5 and 6/quirks mode. The final line "w\idth: 100px;" will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px. The problem here is that Netscape 4 crashes when it sees escape characters in the property names, so this isn't done yet.

The Tan Hack


The Tan Hack or StarHTMLHack relies on a quirk of IE 5 and 6 (quirks mode). IE believes that the html tag is not the root element of a document. There is an extra element outside of the html element which IE considers to be the root. By selecting for that element, you can force IE to read your CSS, while other browsers, including Netscape 4, ignore the style completely:

div {
width: 100px;
padding: 10px;
border: 10px solid #000;
}
* html div {
width: 140px; /* for IE5 and IE6 in quirks mode */
width: 100px; /* for IE6 in standards mode */
}

So the next time you build a Web page for both Netscape and IE you can insure that your page displays correctly with these simple hacks. And hopefully, IE will eventually render CSS according to the standards.

Google Transliteration Ajax API to create a Multi-language text editor

Introduction

This article will give a brief description of how to create a multi-language text editor which will convert the word typed in English into desired language using Google Transliteration API. It will not only show text into the translated language, but will also submit the exact Unicode values corresponding to that language.



Google Transliteration API

Google Transliteration API service is an API service provided from Google labs which helps to transliterate the text. It provides AJAX API interfaces to interact with the service. We can translate between many languages including more than 70 international languages. It translate word by word, not the whole sentence.



The "Hello, World" of the Google AJAX Language API



Including the AJAX Language API on Your Page

To include the AJAX Language API in your page, utilize the Google AJAX API loader. The common loader allows you to load all of the AJAX APIs that you need, including the language API. You need to include both the Google AJAX APIs script tag and call google.load("language", "1"):

The first script tag loads the google.load function, which lets you load individual Google APIs.
google.load("language", "1") loads Version 1 of the Language API. Currently, the AJAX Language API is in Version 1, but new versions may be available in the future. See the versioning discussion below for more information.

Language Translation
Use google.language.translate method translate a English text string to some other language:

google.language.translate("Hello world", "en", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});


Here in the translate method, first argument is the string in English that needs to be translated. Second is the source language code. Here it is “en” which signifies English. Third is the destination language “es” which is Spanish. For a complete list of supported languages and codes, please refer to http://code.google.com/apis/ajaxlanguage/documentation/referenceTransliteration.html. Fourth argument is the callback function with will be called as soon as we get response from Google. Here result is the response.

More examples

Transliterate text area

The following example enables transliteration in a textarea with language as Hindi, so that users can type in Hindi using an English keyboard. For information on selecting a different language, see the API class reference in http://code.google.com/apis/ajaxlanguage/documentation/referenceTransliteration.html#LanguageCode