Working with Chinese Text in JavaScript

Previous   Contents   Next
References

Cascading Style Sheets

Cascading Style Sheets (CSS) enables HTML documents to be displayed without hard-coding style elements in the HTML mark-up. Uses in combination with JavaScript it can be used to dynamically change the appearance of a HTML page in a way resembling a traditional desktop application, including making page elements appear and disappear in response to user actions. This is sometimes referred to as dynamic HTML. Specifically, working with Chinese text it can enable display of English, Pinyin and other information to users who do not fully understand the Chinese text displayed in a page.

Taking CSS manipulation techniques further you can program animation of HTML elements. To find out more about CSS try the books The Art and Science of CSS [ADAMS], CSS, DHTML, and AJAX [TEAG], or the W3C Cascading Style Sheets Home Page [W3C2]. Other useful resources are the cssvault [CSSV], cssBeauty [CSSB], Westciv CSS Tutorial [WEST], and the CSS Zen Garden [CSSZ]

CSS styles can be associated with a HTML in one of three ways: (1) in-line with the HTML element (2) in a separate style sheet, or (3) using JavaScript. Here is an example of a style definition that is part of a separate style sheet.


h3 {
color: #005A9C;
text-align: left;
}

h3.animal {
color: red;
text-align: center;
font-size: 3em;
}

#results {
border: 1px solid blue;
padding: 15px;
}

In the first block the selector h2 selects all <h3> elements, sets the color to #005A9C, and the text alignment to left. The second block selects all <h3> tags with class animal. This a HTML tag <h2 class='animal'> would be selected.The third block selects the HTML element with id results, such as <div id='results'>. You can associate a style sheet with a HTML page with a line like this in the header:


<link rel="stylesheet" type="text/css" href="css_example.css"/>

Size, Visibility, and Position

For JavaScript programmers, the most important CSS features are the ability to control visibility, size, and position. Setting the position attribute allows a HTML element to be positioned independently of its location in the HTML text document. The page css_example.html demonstrates this. It uses the style


#mydiv {
position: absolute;
left: 100px;
top: 100px
width: 100px;
border: solid grey 1px;
text-align: center;
}

to position the top left corner of element with id mydiv 100 pixels from the top left of the page.

The offsetLeft and offsetTop properties of an element can be used to find the position of that element. Similarly, the properties offsetWidth and offsetHeight can be used to find the size. These properties were implemented by IE 4 and have been supported by other browsers.

Another important position attribute is the z-index. This specifies the stacking order for display of elements. Elements with a higher positive z-index appear on top of other elements in the same container. The default value of z-index is zero.

The display attribute determines whether and how an element is displayed, with possible values of block, inline, or none. The visibility is similar, with possible values of hidden or visible but does not affect the layout like the display attribute.

Styles set from JavaScript override the style settings in CSS style sheets and directly in the HTML document text. The page css_example2.html demonstrates manipulation of visibility in JavaScript. The script in the page that does the work is


var myDiv = document.getElementById('mydiv');
myDiv.style.visibility = 'hidden';

The code finds the HTML element with id mydiv and hides it.

English Tool Tips

A tool tip concept can be used to show English and Pinyin information about Chinese text in web pages to save the reader from searching for the term in the dictionary. The page tooltip_example.html illustrates the idea.

Enabling and Disabling Individual Style Sheets

It is possible to dynamically enable and disable individual style sheets using JavaScript. To do this use the disabled property on the HTML link and style elements. For example,


...
<link rel='stylesheet' type='text/css' href='style1.css' id='style1'/>
...
<script>
// Respond to an event
function enableStyleSheet() {
document.getElementById('style1').disabled = 'true';
}
</script>
...

 

Previous   Contents   Next
References

Copyright Alex Amies 2008. Please send comments to alex@chinesenotes.com.