Thư viện tri thức trực tuyến
Kho tài liệu với 50,000+ tài liệu học thuật
© 2023 Siêu thị PDF - Kho tài liệu học thuật hàng đầu Việt Nam
Tài liệu Sams Teach Yourself CSS in 24 Hours- P9 ppt
Nội dung xem thử
Mô tả chi tiết
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 language 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 languages 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 document 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, numbers, or letters, but what about languages that don’t use the same alphabet? A list of additional 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 language 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 property 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 regulations 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 display 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/) features 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.