Tài liệu Sams Teach Yourself CSS in 24 Hours- P9 ppt

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề	Internationalization
Trường học	Unknown
Chuyên ngành	Web Development
Thể loại	Book
Năm xuất bản	Unknown
Thành phố	Unknown

Định dạng
Số trang	50
Dung lượng	2 MB

Nội dung

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/) 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 specification allow you to do more than simply place and present content. Specific properties also allow you to directly shape the user’s experience through interaction 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 disabilities, 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