e-business Globalization Solution Design Guide: Getting Started

Appendix C. CSS and artwork globalization 169

In this way, JSP codes can easily retrieve culture-sensitive information from these CSS fields,

as illustrated in Example C-4.

Example: C-4 Retrieving culture-sensitive information from CSS fields

<%

String localStr = “en_US” // localStr should be locale relative string, such as

de_DE,jp_JP etc.

%>

<link rel=”stylesheet” type=”text/css”

href=”/git4/Resources/<%=localStr%>/css/default.css”>

C.2 Avoid language-dependent restrictions

Textual data in images

Since image file textual data cannot be automatically translated by today's translation tools,

when textual data in one language in a Web page image is displayed in another, that image

must be re-drawn to accommodate the translated text. To avoid this kind of problem, we

recommend that your images not contain textual data so that e-business application image

files might be used in all language versions.

Tables

Table design (especially with regards to column width) can also be adversely affected by the

languages of the data contained in the table. A sentence or phrase in English can grow longer

or shorter when translated into another language, so that if a piece of data must be contained

in a single table, columns should be wide enough to contain that data in multiple language

versions. Figure C-2 shows a table cell not wide enough to hold the French translation of

“How are you.”

Figure C-2 Table with fixed column width

The CSS code producing the table in Example C-5 is shown in Example 1.

Example: C-5 Sample CSS codes producing table with fixed column width

.table {

font-family: “Arial”, “Helvetica”, “sans-serif”;

font-size: 12px;

font-weight: bold;

color: #000066;

background-color: #BCEAFE;

height: 26px;

width: 120px;

}

Since its table column width is fixed, the data in French is displayed on two lines instead of

one, making the table look awkward.

170 e-Business Globalization Solution Design Guide

To solve this problem, we can remove the width fixation from CSS as follows:

Example: C-6 Sample CSS codes producing table without fixed column width

.table {

font-family: “Arial”, “Helvetica”, “sans-serif”;

font-size: 12px;

font-weight: bold;

color: #000066;

background-color: #BCEAFE;

height: 26px;

}

As a result, the cells now appear as shown in Figure C-3.

Figure C-3 Table with flexible column width

Buttons

As with table design, a button should also be wide enough to neatly display its label.

Figure C-4 represents a bad example of button design.

Figure C-4 Button with distorted label due to fixed width

This overlap is caused by the fixed width of the button. Even in CSS, if a button width is fixed,

then a label will occupy more than one line when it exceeds that button width. This happens

frequently in e-business Web site globalization because design artists unfortunately fix button

widths according to the length of the label in their source language versions. Then when the

label is translated into other languages, its length can easily outgrow the button width.

To solve this type of problem, we recommend that in artwork design,

not to fix button widths

by employing the following CSS code:

button {width: n px; ...}

where “n” refers to a number of pixels.

Figure C-5 Button with correct label

If its width is not fixed, a button can adjust its length according to that of its label—a prime

example of how a single CSS might handle Web pages in multiple languages.