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.

Get e-business Globalization Solution Design Guide: Getting Started now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.