1 / 30

CSS Internationalization: Text Direction, Fonts, and Alignment for Multilingual Web Content

Learn about the importance of CSS in presenting multilingual web content, including text direction, font selection, and alignment. Explore the challenges and solutions for languages like Hindi, Punjabi, and more.

jonesgloria
Download Presentation

CSS Internationalization: Text Direction, Fonts, and Alignment for Multilingual Web Content

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Web Content internationalization & E-Publication Presentation by :Prashant Verma, W3C India E-mail : vermaprashant1@gmail.com

  2. History • Proposed in 1994 by Hakon Wiem Lie. • Standardized in 1996. • W3C Recommendation in 1998. • Revised spec, CSS 2.1 agreed upon in 2001. • Presently working on CSS level 3.

  3. Usage of CSS • To explain the presentation of a document written in a markup language • Separation of content and presentation allows • Adaptation to viewing environment, special devices, users • Better management of web sites (makes it cheaper, too...) • CSS is implemented by all major browsers

  4. CSS in web Technology • HTML/XHTML • marks the content up into different structural types, like paragraphs, blocks, lists, images, tables, forms, comments etc. • CSS • Tells the browser how each type of element should be displayed, which may vary for different media (like screen, print or handheld device) • JavaScript • Tells the browser how to change the web page in response to events that happen (like clicking on something, or changing the value in a form input

  5. CSS Internationalization Lists Text direction Fonts Ruby Selectors Internationalization of CSS Language declarations Character encoding Line-breaking Text-transform Baseline alignment White space

  6. Issues in CSS Vertical & Horizontal Alignment arrangements of characters Presentation / Styling issues: Vertical arrangement of characters If some string is written in vertical mode, then writing each character on a new line may not be suitable, In case of horizontal alignment of characters, the space is given between the every character in case of English. But in case of Indian language like Bangla, Assamese etc the space may given not in every character but after some portion of the character sequence as in above figure.

  7. Underlining of the characters There is some examples of Indian languages in which Matra’s are not readable due to underlining of characters : • Hindi - अन्य भाषाओं में भी अनुवाद • Punjabi ਗੁਰੂ • Bengali :তাই পুরোনো আর্কাইভ একটু ওলট পালট। • Guajarati - સરદાર ગુર્જરી • Marathi- मराठी मुला मुलींची नावे p {text-decoration: underline;font-size:15px;} // http://www.w3.org/TR/CSS2/text.html 16.3.1 Hindi Punjabi

  8. Over lining of the characters Issues with respect to languages like Hindi, bangle, Punjabi, Malayalam, Tamil, Oriya p {text-decoration: overline;font-size:15px;} //http://www.w3.org/TR/CSS2/text.html 16.3.1

  9. line-through of the characters Issues finds in language like Punjabi, Guajarati, Malayalam, Kannada p {text-decoration: line-through; font-size:15px;} //http://www.w3.org/TR/CSS2/text.html 16.3.1 In Hindi it is showing properly but in Punjabi the line is coming in the bottom of characters Hindi Punjabi

  10. first letter pseudo-element Hindi Punjabi Telugu Malayalam p:first-letter { font-size: 3em; font-weight: normal } // www.w3.org/TR/CSS2/selector.html 5.12.2

  11. EPUBLISHING

  12. Relationship of Open Publication Structure (OPS) with W3C Standards W3C Open Publication Structure (idpf) CSS XML SVG XHTML Unicode

  13. Relationship with CSS The CSS-based style sheet constructs in this specification define required rendering functionality. To minimize the burden on Reading System developers and device manufacturers, not all CSS 2 properties are included. A few additional properties and values have been added to support page layout, headers, and footers. • Style sheets may be associated with an OEBPS Document in several ways: • by style elements within the XHTML header; • by an external style sheet identified on a link elements in the XHTML head; and/or • by an external style sheet identified via the processing instruction xml-stylesheet

  14. Minimal Requirements on EPUB for Hindi Text Layout • Support of Unicode 6.0 and CLDR • UNICODE : is the Universal character encoding standard, used for representing text for information processing. Unicode encodes all of the individual characters used for all the written languages of the world. • Common Locale Data Repository : is the largest standard repository of locale data in the world. It is a part of the W3C and Unicode Standard. It provides locale data like Date formats, time zones, Number formats, Measurements system, currency etc in an XML format for use in computer applications. 2. Fonts • Open Type Fonts :Open Type fonts convert the Unicode code numbers to their glyphs on the display interface. • SVG Fonts :The purpose of SVG fonts is to allow for delivery of glyph outlines in display-only environments. • WOFF (Web Open font format):This format was designed to provide lightweight, easy-to-implement compression of the font data, suitable for use in conjunction with the @font-face CSS declaration.

  15. Page Text Layout Requirement • Arrangement of Running Heads and Page Numbers Positioning of all running heads and page numbers in the same book should be consistent. The following ways might be used for positioning running heads and page numbers in horizontal writing system:

  16. Positioning of Consecutive Opening Brackets, Closing Brackets, Commas, Purna virama etc. • Vertical writing and horizontal writing • Mixed Text Composition in Horizontal Writing Mode, e.g. मेरा India महान

  17. Mixed Text Composition in Vertical Writing Mode, e.g. मे रा I n d I a म हा न • Paragraph Adjustment Rules • Line Head Indent at the Beginning of Paragraphs • Widow Adjustment of Paragraphs

  18. CSS Embedded fonts:

  19. CSS Speech Module Requirements • The CSS Speech module provides properties that enable authors to declaratively control presentational aspects of the aural dimension (e.g. TTS voice, pitch, rate, and volume levels). These style sheet properties can be used together with visual properties (mixed media) or as a complete aural alternative to a visual presentation. • Examples are in-car use of an e-book reader, industrial and medical documentation systems, home entertainment, helping users to learn reading, or supporting users who have reading difficulties (print disabilities).

  20. Properties • Voice-Volume • Voice-Balance • Speak • Speak-as • Pause-Properties • Rest-Properties • Cue-Properties • Voice Characteristic Properties • voice-family • voice-rate • voice-pitch • voice-range • voice-stress • voice-duration

  21. Proposed solution: Modification in Unicode Standard Annex. • UAX29 Unicode Text Segmentation • UAX14 Unicode Line Breaking Algorithm • UAX13 Unicode Newline Guidelines. • UAX9 Unicode Bidirectional Algorithm • UAX21 Case Mappings • UAX31 Unicode Identifier and Pattern Syntax Review is in process We Have reviewed all this technical report and trying to make changes in all this annexure for resolving the styling issues of Indian languages. As some of the above issues are Browser dependent so we need to examine each issue in detail and find out the appropriate solution.

  22. Solution for Styling of first letter pseudo-element Akshara : Definition of ABNF Valid Segmentation to overcome the limitation of some of the CSS Issues

  23. Cont…

  24. NEED OF REVIEW OF CSS FOR EPUBLISHING IN INDIAN LANGUAHES

  25. Need to form Community Group of E-Pub in Indian languages Aim and Objectives of Community group • The level of awareness and need of local language applications or software(s) among Publication & e-publication industry. • To gather the information about the page text layout used by E-publishers for 12 major Indian languages (Hindi, Bangla, Punjabi, Gujarati, Marathi, Malayalam, Tamil, Telugu, Assamese, Oriya, Kannada, and Manipuri) • The level and type of usage among these entities

  26. Aim and Objectives of Community group (Contd…) • Identify applications and areas are being used where new applications are required and there exists a large un-met need. • To define the promotion and proliferation of w3c standards in publication industries. • Identification of following Styling issues occur in E-Pub for Indian languages: • -CSS • -CSS Mobile • -CSS Speech

  27. W3C Japanese Layout Task Force -Similar group working for Japanese text layout for E-Publication • Japanese Layout Task Force already produced a W3C recommendation contains requirements for Japanese text layout. This Task Force has discussed many issues and harmonized the requirements from user communities and solutions from technological experts. http://www.w3.org/TR/2011/WD-jlreq-20111129/

  28. Survey Questionnaire • W3C India prepared a questionnaire. Survey forms shall be collected from different organizations for 12 major languages (Hindi, Bangla, Punjabi, Gujarati, Marathi, Malayalam, Tamil, Telugu, Assamese, Oriya, Kannada, and Manipuri) and other remaining languages data as per the availability shall be collected. • Final report should be prepared to clearly bring out an objective and concrete outcomes so as to use the same for future actions.

  29. W3C India welcomes your participation in this activity.

  30. Thanks

More Related