Thông tin tài liệu
Internationalization
Internationalization—sometimes abbreviated as i18n—“the letter i, 18 other letters, and
the letter n” —is the practice of making content available in a variety of languages, not
simply one. With a truly worldwide World Wide Web, the standards that are used on the
Web simply can’t support only the English language. The Cascading Style Sheets lan-
guage has been partially internationalized, which means it can be used, with varying
degrees of success, with many languages and local variants.
On the Web, languages are indicated by a two-letter code, sometimes followed by a dash
and an additional country code for regional versions of a language. Some of these lan-
guages are shown in Table 21.6; for a complete list, see
http://www.cssin24hours.com/
21/lang.html.
TABLE 21.6 Several Language Codes
Code Language
de German
en English
en-ca Canadian English
en-uk British English
en-us American English
fr French
jp Japanese
ru Russian
The choice of language can dictate a number of factors, including the direction of the
text, the fonts used, or even the dictionary for pronunciation used by a screenreader. The
CSS language doesn’t allow you to set the language, which must be done in the HTML
or in an HTTP header, but it does let you create rules or style sheets that apply only to
certain languages.
To set the language within an HTML document, you simply have to use the
lang
attribute on the <html> tag. Sections of a second language embedded within the docu-
ment can be indicated with the lang attribute on a <span> or any other appropriate
HTML element, such as <blockquote> or <div>.
382 Hour 21
27 0672324091 ch21 6/13/02 10:38 AM Page 382
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The :lang() Pseudo-class
The CSS Level 2 specification defines a special pseudoclass, :lang(),for indicating
rules that should be applied only to elements that match a certain language. Such a rule
is written like the following:
:lang(en-uk) { background-color: #CCCCFF; }
This would display anything written in British English with a light blue background
color. How does the browser know which parts of the text are written in British English?
It needs to be set in the HTML, like the following:
<p>He cried out in a bad Monty Python imitation,
<span lang=”en-uk”>He’s pinin’ for the fjords!</span>
</p>
By itself, :lang() is not particularly useful, but when combined with other CSS rules
and properties, it can be quite powerful. Some of those that involve generated content
will be discussed in the next hour.
List Markers
One way in which :lang() rules can be used is to set an appropriate marker for ordered
lists. You’ll recall that you can set the list marker to count using Roman numerals, num-
bers, or letters, but what about languages that don’t use the same alphabet? A list of addi-
tional values for the list-style-type property is shown in Table 21.7.
TABLE 21.7 International Values for the list-style-type Property
Value Effect
armenian Traditional Armenian numbers
cjk-ideographic Ideographic numbers (Asian languages)
georgian Traditional Georgian numbers
hebrew Traditional Hebrew numbers
hiragana Japanese hiragana numbers
hiragana-iroha Japanese hiragana-iroha numbers
katakana Japanese katakana numbers
katakana-iroha Japanese katakana-iroha numbers
lower-greek Lowercase Greek letters
Accessibility and Internationalization 383
21
27 0672324091 ch21 6/13/02 10:38 AM Page 383
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
You don’t have to use a :lang() selector to utilize these values; you could use a normal
element selector, a class or id selector, or anything else that fits your markup. Here are
two examples:
li:lang(jp) { list-style-type: hiragana; }
ul.alphabeta { list-style-type: lower-greek; }
384 Hour 21
These are supported only for those browsers and operating systems that
support these character sets and appropriate fonts. This is highly dependent
upon the specific version and language support on each computer. Although
you should feel free to use these with content in the appropriate language,
you should also expect that browsers without support for such a given lan-
guage will display these as list-style-type: decimal.
Bidirectional Text
Most languages are read in one direction—left to right, as in English, or right to left.
Some languages, such as Arabic or Hebrew, sometimes mix text direction within the
same document; this is called bidirectional text (bidi for short). In most cases, the
browser will have enough information to determine the direction based on the characters
used and the language settings.
Two CSS properties,
direction and unicode-bidi,are used to affect the calculation of
the correct direction. In most cases, you won’t need to use these properties, but if you
find yourself needing to change the direction of text, you first use the
unicode-bidi
property to create an additional level of embedding or to set up an override. Then the
value of
direction can be set to either ltr (left-to-right) or rtl (right-to-left). For more
details, see the CSS Level 2 specification. Browsers are not required to support changing
direction of HTML text using these properties.
Summary
Users with disabilities are as entitled to use the Web as anyone else, but often they are
unable to access sites due to careless Web design. Using Cascading Style Sheets is an
excellent first step toward developing a site that can be used by everyone, as style sheets
separate presentation from content.
Assistive technology devices and software can often enable access by disabled users, but
only if sites are designed in accordance with Web accessibility standards. The W3C has
produced Web Content Accessibility Guidelines that are an invaluable resource for Web
27 0672324091 ch21 6/13/02 10:38 AM Page 384
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
developers and that form the basis of the U.S. government’s Section 508 regulations for
federal agency sites.
Aural CSS properties let you determine qualities of the voice used to read content out
loud, such as the pitch, speed, and “family” of the voice. Unfortunately, almost no
browsers support aural CSS currently, thus limiting its usefulness.
In addition to users with disabilities, users in non-English-speaking countries also use the
Web. CSS is designed with internationalization in mind; for example, rules can be made
for specific languages with the
:lang() pseudo-element, and the list-style-type prop-
erty can produce a number of non-English number markers.
Browser Support Report Card
CSS Feature Grade Notes
All Aural CSS properties C- No mainstream browser support
:lang() pseudo-class selectors C Variable support
International list markers C Variable support
Bidirectional text n/a Avoid changing text direction
Q&A
Q Is Section 508 the same as the Americans with Disabilities Act (ADA)? What
are the ADA requirements for Web accessibility?
A Section 508 and the ADA are different sets of regulations. Section 508 applies
only to federal agencies, whereas the ADA is applicable to a number of private
and public sector entities. Unlike Section 508, the ADA contains no formal regu-
lations for Web accessibility; however, the ADA requires organizations to avoid
discrimination on the basis of disability when providing services. For detailed
commentary on legal requirements for accessibility, see Cynthia Waddell’s essays
on the Web site of the International Center for Disability Resources on the
Internet (
http://www.icdri.org/).
Q Can tables be made accessible? Frames? JavaScript? Java? Flash? PDF?
A Yes. Tables and frames can be made accessible by using HTML markup carefully
and by providing additional attributes or elements, such as
<noframes>. If a certain
technology or file format can’t be directly made accessible, the content within it can
be presented in an alternate, accessible format, such as a transcript or HTML version.
Accessibility and Internationalization 385
21
27 0672324091 ch21 6/13/02 10:38 AM Page 385
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Workshop
The workshop contains quiz questions and activities to help reinforce what you’ve learned
in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Quiz
1. Do the Web Content Accessibility Guidelines suggest that color should be avoided
in Web design?
2. Which of the following is NOT an aural CSS property?
(a.)
voice-family
(b.) stress
(c.) accent
(d.) speak-numeral
3. How would you write a CSS rule to make all ordered lists written in French dis-
play a numeric marker that counts in Greek letters?
Answers
1. No. This is a common misunderstanding; the restriction is on using color as the
only way to convey information. If you also provide that information in the HTML
tags or the text content, your colors are not a problem at all.
2. (c.) There is no
accent property in CSS.
3. Here is one way to write such a rule:
ol:lang(fr) { list-style-item: lower-greek; }
Activity
Expand your skills with Web development by learning more about Web accessibility.
Here are some sites you can visit to get started:
•Test your site’s accessibility at the Center for Applied Special Technology using
Bobby (
http://www.cast.org/bobby/).
•Web Accessibility in Mind (
http://www.webaim.org/) has tutorials and mailing
lists for understanding Web accessibility issues.
•Download the free A-Prompt program for Windows computers from the University
of Toronto (
http://aprompt.snow.utoronto.ca/). A-Prompt interactively locates
Web accessibility errors and corrects them for you.
•The HTML Writers Guild’s AWARE Center (
http://www.awarecenter.org/) fea-
tures essays and online courses in Web accessibility.
386 Hour 21
27 0672324091 ch21 6/13/02 10:38 AM Page 386
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
HOUR
22
User Interface and
Generated Content
The CSS properties defined in the Cascading Style Sheets Level 2 specifica-
tion allow you to do more than simply place and present content. Specific
properties also allow you to directly shape the user’s experience through inter-
action with the operating system and browser; other properties let you add to
the content of the page to build an appropriate presentation for the user.
In this hour, you’ll learn
•How you can change the appearance of the mouse pointer
•Which properties allow you to create outlines, and how an outline is
different from a border
•How to use the system colors and fonts in your design, and why you’d
want to in the first place
•How you can add additional content to a page, before or after specific
elements
•Which properties let you control the appearance of quotation marks
•How counters and markers can be used to automatically number lists
and other elements
28 0672324091 ch22 6/13/02 10:34 AM Page 387
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
User Interface Properties
The user interface (UI) of a computer program is the part that interacts with the person
using the program. This interaction includes not only the visual output, but also the
method of providing information to the program via mouse, keyboard, or other input
device.
When talking about Web content, there are several layers of user interface we’re dealing
with. The operating system—be it various versions of Windows, Mac OS, Linux running
XWindows, and so on—provides a basic graphical user interface (GUI) layer, which cre-
ates the windows, menus, and boxes onscreen. The browser’s user interface is built upon
the operating system’s UI and generally is designed to mesh with the operating system
while adding appropriate controls for Web surfing. A third layer of user interface is created
by the content itself; a Web page can be thought of as a UI for the information contained in
the markup.
CSS Level 2 has several user interface properties that we’ll examine in this part of the
hour. These are not enough to fully control all interactions with the user, but they do
allow you to alter some UI components and use information provided by the operating
system to style the page.
Changing the Cursor Appearance
A key part of the Web-user experience is showing what part of the GUI is currently being
pointed to by a pointing device, such as a mouse. The mouse cursor could be controlled
by a mouse or by another method, such as a track-ball, a joystick, or a virtual mouse via
the keyboard, for people who can’t operate a normal mouse. For users with extreme dis-
abilities, mouse control can be approximated by pointer wands attached to the head, or
even by eye-tracking sensors.
A mouse cursor is applicable only in certain contexts; in print or Braille, for example,
there is no mouse cursor. The mouse cursor is disabled or ignored by screenreaders for
blind users, and it’s also inapplicable for kiosk systems with touch panels or for small
devices with touch screens, such as Palm or Pocket PC organizers.
It’s important to keep in mind that a mouse cursor is just an indicator of potential action
and not necessarily a choice that’s been acted on; the cursor’s location corresponds to the
:hover pseudo-class in CSS, not to the :active or :focus pseudo-classes.
The CSS property
cursor can be used to change the appearance of the mouse cursor;
this change occurs whenever the mouse cursor is over the part of the page display corre-
sponding to the display rule’s selector. Because :hover is implied, it’s not necessary to
use that pseudo-class with the selector.
388 Hour 22
28 0672324091 ch22 6/13/02 10:34 AM Page 388
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
A cursor rule is written like this:
selector { cursor: cursor-type; }
The values that can be assigned to the cursor property are shown in Table 22.1. The
default value is auto, and if this value is set on a containing box, it will be inherited by
that box’s children elements.
TABLE 22.1 Values for the cursor Property
Value Effect
auto Lets the browser decide the shape of the cursor
crosshair Displays a crosshair cursor
default Displays the default cursor (usually an arrow)
e-resize Indicates that the object can be resized “eastward”
help Displays a help-available cursor (usually a question mark)
move Indicates a movable object’s cursor (usually crossed arrows)
n-resize Indicates that the object can be resized “northward”
ne-resize Indicates that the object can be diagonally resized to the northeast
nw-resize Indicates that the object can be diagonally resized to the northwest
pointer Displays a link pointer cursor (usually a pointing hand)
s-resize Indicates that the object can be resized “southward”
se-resize Indicates that the object can be diagonally resized to the southeast
sw-resize Indicates that the object can be diagonally resized to the southwest
text Displays a text editing cursor (usually an I-shaped bar)
wait Displays a waiting cursor (usually an hourglass)
w-resize Indicates the object can be resized “westward”
url(address) Displays a cursor image from a given URL
inherit Uses the cursor value for the containing box
The url() value is written in a special format; you can write as many url() values as
you like, and the browser will display the first one it is able to load and understand.
After the last url() value, you should provide a “generic” cursor value from the list in
Table 22.1, in case the url() cursors can’t be displayed; for example, if the file format
isn’t understood by the browser. The concept of a generic default is similar to that of the
font-family property and so should be familiar to you.
As there is not a universal format for cursor files, you should provide cursor images in
several file formats using multiple
url() values. For example, give a version of the
User Interface and Generated Content 389
22
28 0672324091 ch22 6/13/02 10:34 AM Page 389
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
cursor in .tiff, .cur, and .gif formats, in addition to supplying a generic value. Cursor
images should usually be small—no more than around 40 by 40 pixels, and usually
around 16 by 16.
390 Hour 22
Warnings for Opera, Internet Explorer 5, Internet Explorer
(Mac), Netscape 4, and Netscape 6
Only Internet Explorer 6 for Windows supports the url() method for speci-
fying a cursor image, so be sure to provide a backup cursor type as you
would for fonts. Current versions of Opera don’t allow you to change the
cursor appearance using CSS, nor does Netscape 4.
Listing 22.1 is an HTML file that demonstrates the various cursors available in CSS. You
can test these out yourself at http://www.CSSin24hours.com/22/cursors-22.1.html
and see how your operating system and browser display each cursor type.
LISTING 22.1 The Different Styles of Cursors
<! cursors-22.1.html >
<html>
<head>
<title>Changing Cursors</title>
<style type=”text/css”>
h3 { margin: 0.5em; padding: 0.25em;
text-align: center;
background-color: silver; color: black; }
</style>
</head>
<body>
<table width=”100%”><tr><td valign=”top”>
<h3 style=”cursor: crosshair;”>Crosshair</h3>
<h3 style=”cursor: default;”>Default</h3>
<h3 style=”cursor: help;”>Help</h3>
<h3 style=”cursor: move;”>Move</h3>
<h3 style=”cursor: pointer;”>Pointer</h3>
<h3 style=”cursor: text;”>Text</h3>
<h3 style=”cursor: wait;”>Wait</h3>
<h3 style=”cursor: url(‘maus.cur’),
url(‘maus.tiff’),
url(‘maus.gif’), auto;”>URL</a>
</td><td valign=”top”>
<h3 style=”cursor: n-resize;”>North</h3>
<h3 style=”cursor: s-resize;”>South</h3>
<h3 style=”cursor: e-resize;”>East</h3>
28 0672324091 ch22 6/13/02 10:34 AM Page 390
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<h3 style=”cursor: w-resize;”>West</h3>
<h3 style=”cursor: nw-resize;”>Northwest</h3>
<h3 style=”cursor: ne-resize;”>Northeast</h3>
<h3 style=”cursor: sw-resize;”>Southwest</h3>
<h3 style=”cursor: se-resize;”>Southeast</h3>
</td></tr></table>
</body>
</html>
The screenshot in Figure 22.1 is actually a composite of several screenshots; obviously,
only one cursor can usually be displayed at a time, so I’ve combined images together to
show you how one browser displays these cursors.
User Interface and Generated Content 391
22
FIGURE 22.1
Internet Explorer 6
on Windows displays
various cursors.
Now you know how to change the cursor, but why would you want to? In
most cases, the style of the cursor is automatically set to something sensible
by the Web browser, and it actually serves as a useful cue to the user. A
pointer finger cursor, for example, lets the user know that they are over a
link. In general, you should change the cursor appearance only if you’ve got
a very good reason. For example, if you’ve used JavaScript to create a
Dynamic HTML effect that lets you move something onscreen, you could
change the cursor to indicate this. If you’re using graphics for cursors, don’t
just set one for the whole page; create different graphics for links and input
fields, and write appropriate rules to call them.
LISTING 22.1 Continued
28 0672324091 ch22 6/13/02 10:34 AM Page 391
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... counter(name, marker-style) Inserts a counter’s value counters(name, string) Inserts a counter’s value and a string counters(name, string, marker-style) Inserts a counter’s value and a string no-close-quote Suppresses the printing of a closing quote mark no-open-quote Suppresses the printing of an opening quote mark open-quote Inserts an appropriate opening quote mark url(address) Inserts the contents of... but within a Web browser Scripts can be written that produce a wide variety of effects, from validating form input to creating animation The ones we are most concerned with in this hour are those that interact with CSS setting styles, hiding or displaying content, or positioning elements on the screen CSS and JavaScript As a programming language, JavaScript has a different feel than either CSS or HTML... this hour will show you how to use it with CSS styles Some example scripts in this hour will show you specific cases of JavaScript and style sheets working together to produce the end result In fact, there are several good books about JavaScript If you like the Sams Teach Yourself approach to learning, you’ll want to pick up Sams Teach Yourself JavaScript in 24 Hours, written by Michael G Moncur (ISBN... users in the long run Creating Content In CSS terminology, generated content consists of text or images that aren’t present in the HTML markup but are added through CSS rules The ability to generate content allows for even more flexibility in designing style sheets and alternate style sheets that effectively convey the information of the page to the user In overview, generating content depends on using... set CSS property values All of the following examples can be accessed on the Web at http://www.cssin24hours.com/23/ JavaScript and Dynamic Styles The first example of using JavaScript with CSS can be seen in Listing 23.2, which allows the user to select a theme, and then displays text using that theme A theme is simply a collection of styles CSS and JavaScript LISTING 23.2 415 A Theme Picker in JavaScript... example of counters in a style sheet can be seen in Listing 22.5 This example counts books within a series and the total numbers of books from our HTML Tolkien book list LISTING 22.5 Style Sheet for Adding Counters to the Book List margin-top: 1em; /* generated-22.5 .css */ h1:after { content: “: author index”; } div { quotes: “``” “‘’”; } continues 22 402 Hour 22 LISTING 22.5 Continued div[title] {... 22 Creating Outlines An outline is a visual line surrounding an element This sounds similar to a border, doesn’t it? Unlike a border, an outline doesn’t actually take up any space in the box model Instead, it’s laid over other elements The outline is placed just outside of the border, and thus it will be displayed over the margin or even over other content if the margin is small and the outline is wide... example) You can see this in action in Figure 23.2 or by accessing the page via the Web at http://www.cssin24hours.com/23/ picker-23.2.html CSS and JavaScript 417 FIGURE 23.2 Choosing a theme changes the page dynamically in Netscape 6 23 JavaScript and Visibility In Hour 13, “Borders and Boxes,” you learned about the visibility property, which lets you designate certain CSS boxes as visible or hidden... The text color in a caption GrayText The text color for disabled options (grayed out) Highlight The background color for selected items HighlightText The text color for selected items InactiveBorder The border color around an inactive window InactiveCaption The background color of the caption on an inactive window InactiveCaptionText The text color of the caption on an inactive window InfoBackground... the outline is set with the outline-width, outline-style, and outline-color properties, or an outline shorthand property that sets all of them at once The outline-width property can take the same types of values as the border-width property; the outline-style can accept border-style properties The outline-color value can be any normal color value, or invert, which means the outline is displayed in the . Suppresses the printing of a closing quote mark
no-open-quote Suppresses the printing of an opening quote mark
open-quote Inserts an appropriate opening quote. selected items
InactiveBorder The border color around an inactive window
InactiveCaption The background color of the caption on an inactive window
InactiveCaptionText
Ngày đăng: 26/01/2014, 14:20
Xem thêm: Tài liệu Sams Teach Yourself CSS in 24 Hours- P9 ppt, Tài liệu Sams Teach Yourself CSS in 24 Hours- P9 ppt
