Towards the Promised Land: Globalization Developments in Web - - PowerPoint PPT Presentation

▶
towards the promised land
SMART_READER_LITE
LIVE PREVIEW

Towards the Promised Land: Globalization Developments in Web - - PowerPoint PPT Presentation

May 10, 2023 776 likes •1.48k views

Towards the Promised Land: Globalization Developments in Web Standards Richard Ishida and Addison Phillips W3C Internationalization Activity Vastly improved or room for improvement? Why the promised land? The promise of a

slide-1
SLIDE 1 Richard Ishida and Addison Phillips W3C Internationalization Activity

Towards the Promised Land:

Globalization Developments in Web Standards

slide-2
SLIDE 2

Vastly improved or room for improvement?

  • Why “the promised land”?

The promise of a multilingual Web is being realized and new W3C specifications help demonstrate that. … but we’ve been waiting a long time.

  • Why only “towards”

Many features we’ll talk about today are not implemented yet or are partially implemented. Many features are implemented.

slide-3
SLIDE 3
  • What issues are more or less solved on the

Web?

  • What are we doing to address the remaining

problems?

  • How can you influence the outcomes?
slide-4
SLIDE 4

What do we mean by "HTML5"

slide-5
SLIDE 5

Characters

Language Date & time Bidirectional text CSS3: Global ready presentation JavaScript Widgets and Web apps Best practices
slide-6
SLIDE 6

اقح ةّيملاع ةّيملاعلا بيولا ةكبش لعج!

بو ﯽﺎﮫ ار ﯽ ﯽﺎﮫ ﻢزﺎﺳ! انبانببب یاع پ ر ی ق یق و بیبو یاع Համաշխարհային ցանցն իրոք համաշխարհային դարձնելը ᑖᑦᓱᒪ ᐃᑭᐊᖅᑭᕕᒃ ᓯᓚᕐᔪᐊᓕᒫᒥᒃ ᓈᕆᑎᑉᐹ. "Дүниежүзілік торды" нағыз дүниежүзілік етеміз! वल्ड वाई् वेबलाई यथाथड्म ववयााप बनाउने ! የዓለም አቀፉን ድር በእውነት አለም አቀፍ ማድረግ! Κάνοντας τον Παγκόσμιο Ιστό πραγματικά Παγκόσμιο ਵਰਡ ਵਾਈਡ ਵੈਬ ਨ ਵਾਵਈ ਈਵਿਵ-ਈਵਆਪੀ ਬਨਾਉਣਾ ! 缔造真正全球通行的万维网 תמאב תימלוע ללכ תשר תשרהמ רוציל! ˈmeɪkɪŋ ðə wɜːld waɪd wɛb ˈtruːlɪ ˈwɜːldˈwaɪd ワールド・ワイド・ウェッブを世界中に広げましょう េធឲ្េេល វ េេ វ វ៉បមានទូទំទេិភទលភពិ្ប! 전세계의 월드 와이드 웹으로 만들기! Gwneud y we fyd-eang yn wirioneddol fyd-eang! การทําให World Wide Web แพรหลายไปทั่วโลกอยางแทจริง འཛམ་ིང་ཡོངས་འེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་ིང་ཡོངས་་བ་གསཔ་བཟོ་བ།

"The Path W3C follows to making text on the Web truly global is Unicode."

Tim Berners-Lee Unicode
slide-7
SLIDE 7

اقح ةّيملاع ةّيملاعلا بيولا ةكبش لعج!

بو ﯽﺎﮫ ار ﯽ ﯽﺎﮫ ﻢزﺎﺳ! انبانببب یاع پ ر ی ق یق و بیبو یاع Համաշխարհային ցանցն իրոք համաշխարհային դարձնելը ᑖᑦᓱᒪ ᐃᑭᐊᖅᑭᕕᒃ ᓯᓚᕐᔪᐊᓕᒫᒥᒃ ᓈᕆᑎᑉᐹ. "Дүниежүзілік торды" нағыз дүниежүзілік етеміз! वल्ड वाई् वेबलाई यथाथड्म ववयााप बनाउने ! የዓለም አቀፉን ድር በእውነት አለም አቀፍ ማድረግ! Κάνοντας τον Παγκόσμιο Ιστό πραγματικά Παγκόσμιο ਵਰਡ ਵਾਈਡ ਵੈਬ ਨ ਵਾਵਈ ਈਵਿਵ-ਈਵਆਪੀ ਬਨਾਉਣਾ ! 缔造真正全球通行的万维网 תמאב תימלוע ללכ תשר תשרהמ רוציל! ˈmeɪkɪŋ ðə wɜːld waɪd wɛb ˈtruːlɪ ˈwɜːldˈwaɪd ワールド・ワイド・ウェッブを世界中に広げましょう េធឲ្េេល វ េេ វ វ៉បមានទូទំទេិភទលភពិ្ប! 전세계의 월드 와이드 웹으로 만들기! Gwneud y we fyd-eang yn wirioneddol fyd-eang! การทําให World Wide Web แพรหลายไปทั่วโลกอยางแทจริง འཛམ་ིང་ཡོངས་འེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་ིང་ཡོངས་་བ་གསཔ་བཟོ་བ། Unicode on the Web Other UTF-8 ASCI I
slide-8
SLIDE 8 Encoding declarations < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> < html lang= 'en'> < head> < meta http-equiv= "Content-Type" content= "text/html; charset= utf-8" /> < /head> ... < DOCTYPE html> < html> < head> < meta charset= utf-8> < /head> ...
  • Strong encouragement to use UTF-8.
  • New meta charset declaration. Either
approach will work, but check you don't have both.
  • Must be completely within the first 1024
bytes of the file.
slide-9
SLIDE 9

Polyglot documents

< ?xml version= "1.0" encoding= "utf-8"?> < !DOCTYPE html> < html lang= "en" xml:lang= "en" xmlns= "http://www.w3.org/1999/xhtml"> < head> < meta charset= "utf-8" /> < /head> ...
  • Strong encouragement to use UTF-8.
  • New meta charset declaration. Either
approach will work, but check you don't have both.
  • Must be completely within the first 1024
bytes of the file.
  • Polyglot documents use UTF-8 only, but
no XML declaration.

✘

slide-10
SLIDE 10

UTF-16 documents

< DOCTYPE html> < html> < head> < meta charset= utf-16> < /head> ...
  • Strong encouragement to use UTF-8.
  • New meta charset declaration. Either
approach will work, but check you don't have both.
  • Must be completely within the first 1024
bytes of the file.
  • Polyglot documents use UTF-8 only, but
no XML declaration.
  • Must NOT use this for UTF-16. HTML5
will rely on the byte-order mark.

✘

slide-11
SLIDE 11

charset attributes

  • Not well supported by browsers.
  • Hard to ensure it continues to be
correct.
  • There are better ways to do it.
  • Do not use with link or a elements.
  • Ok for script element.
< link rel= "stylesheet" charset= "Windows-1251" href= "mystyles.css" type= "text/css"> See our < a href= "/mysite/mydoc.html" charset= "ISO-8859-1"> list
  • f publications< /a> .

✘ ✘

slide-12
SLIDE 12

<h2><a id="რჩეული"> რჩეული ფოტოსურათი< /a></h1> <p><a href="/wiki/ჭიამაია" title="ჭიამაია" class="mw-redirect">ჭიამაია< /a> (Coccinellidae), ხოჭოების ოჯახს ეკუთვნის. აქვს ამობურცული, მომრგვალო ან ოვალური სხეული. ზურგზე ღია ფონზე შავი ლაქები აყრია, იშვიათად

... Unicode versions and ids

slide-13
SLIDE 13

I◌́zeli◌́to◌̋u◌̈l

NFD

Ízelítőül

NFC

Ha a világ beszélni akarna, Unicode-ul szólalna meg. Regisztráljon már most a Tizedik Nemzetközi Unicode Konferenciára, melyet 1997. március 10-12-én rendeznek Meinz-ban, Németországban. Ezen a konferencián az iparág több neves szakértője is résztvesz. Ízelítőül a témákból: a világháló és a Unicode nemzetközisítése és lokalizálása, a Unicode alkalmazása működő rendszerekben és alkalmazásokban, szövegelrendezésnél, és többnyelvű számítógépeken.

Normalization

slide-14
SLIDE 14

Character Model for the World Wide Web

✘

slide-15
SLIDE 15

http://JP納豆.例.jp/dir1/引き割り.html Scheme Domain name Path

IDN

xn--jp-cd2fp15c.xn--fsq.jp

Web resource identifiers

slide-16
SLIDE 16

IDN

Al-Saudiah Emarat Misr

ﺔﻳﺩﻮﻌﺴﻟﺍ ﺕﺍﺭﺎﻣﺍ رصم

Web resource identifiers

http://ﺮﺼﻣ.ﺕﻻﺎﺼﺗﻷﺍ-ﺓﺭﺍﺯﻭ

slide-17
SLIDE 17

http://JP納豆.例.jp/dir1/引き割り.html Scheme Domain name Path

/dir1/%E5%BC%95%E3%81%8D%E5%89%B2%E3%82%8A.html

IRI

Web resource identifiers

slide-18
SLIDE 18 Characters

Language

Date & time Bidirectional text CSS3: Global ready presentation JavaScript Widgets and Web apps
slide-19
SLIDE 19 < DOCTYPE html> < html lang= it> < head> < meta http-equiv= Content-Language content= "en, it"> < /head> ...
  • Attributes indicate the language of text
inside that element for text processors. Only one language value allowed.
  • Meta elements indicate the language of
the expected readership. Multiple languages are ok.
  • Attributes override other declarations.

Language declarations

slide-20
SLIDE 20 < DOCTYPE html> < html lang= it> < head> < meta http-equiv= Content-Language content= "en, it"> < /head> ...
  • Attributes indicate the language of text
inside that element for text processors. Only one language value allowed.
  • Meta elements indicate the language of
the expected readership. Multiple languages are ok.
  • Attributes override other declarations.
  • The meta element with Content-
Language is now non-conforming.

✘

Language declarations

slide-21
SLIDE 21
  • Basis for Java7, JavaScript, PHP, .Net and other

locales

  • -u- extension

– Unicode Locales (RFC 6067)

  • :lang pseudo-attribute

– CSS selection

  • -t- extension

– Transliterations and transformations (Internet-Draft in Last Call)

BCP 47 improvements

slide-22
SLIDE 22 Characters Language

Date & time

Bidirectional text CSS3: Global ready presentation JavaScript Widgets and Web apps Best practices
slide-23
SLIDE 23 < time datetime= "2004-08-08">8 สิงหาคม ๒๕๔๗< /time> < form> < input type= "date"> < /form>

New to HTML5

slide-24
SLIDE 24

Locale sensitivity

  • Still an issue for the Web

– Date pickers not locale or language sensitive – No markup-based control over format – Time zone support is spotty

slide-25
SLIDE 25 Characters Language Date & time

Bidirectional text

CSS3: Global ready presentation JavaScript Widgets and Web apps Best practices
slide-26
SLIDE 26

،ليودتلا طاشنW3C

W3C ،ليودتلا طاشن

✘ ✔

< description dir= "rtl">W3C ،ليودتلا طاشن</description>

Bidirectional text support

slide-27
SLIDE 27

Bidi isolation for inserted text

✘

< span dir= rtl>תיליל</span> - 5 reviews

slide-28
SLIDE 28
  • CSS3 added the “isolate” value to the unicode-
bidi property.
  • HTML5 adds a new < bdi> element, with unicode-
bidi:isolate in the default stylesheet.
  • (The < output> element behaves the same way.)

< p> < bdi>תיליל</bdi> - 5 reviews< /p> Bidi isolation for inserted text

slide-29
SLIDE 29

Determining direction at run time

✗

slide-30
SLIDE 30

✓ ✗

Determining direction at run time

✗

slide-31
SLIDE 31
  • HTML5 adds new “auto” value for
the dir attribute.
  • dir= auto sets the unicode-bidi CSS
property to to “isolate”.
  • CSS3 adds a “plaintext” value to the
unicode-bidi property to allow per- paragraph auto-direction, primarily for use on < textarea> and < pre> elements.
  • It estimates a direction according to
the UBA method. < p> Your search - < span class= booktitle dir= auto> ה צ ה ר ו ת ק י ד ו ד ת ו ו י C S S < /span>
  • did not match any documents.< /p>

Determining direction at run time

slide-32
SLIDE 32
  • Reporting the chosen direction of < input>
and < textarea> in form submissions
  • < br> should should serve as a bidi
separator
  • Block elements as bidi separators
  • < title> should support the dir attribute
  • < option> should support the dir attribute
and be displayed accordingly both in the dropdown and after being chosen
  • ...

Other bidi changes

slide-33
SLIDE 33 Characters Language Date & time Bidirectional text

CSS3: Global ready presentation

JavaScript Widgets and Web apps Best practices
slide-34
SLIDE 34 Implementers of user agents need to be prodded by the public to support the developing marketplace !

A ক

国

hanging alphabetic ideographic

CSS3

slide-35
SLIDE 35

Writing Mode

CSS3 has a new module for “writing mode” that supports vertical text. http:/ / www.w3.org/ TR/ css3-writing-modes/
slide-36
SLIDE 36

Vertical text

slide-37
SLIDE 37

Vertical text

slide-38
SLIDE 38

Vertical text

slide-39
SLIDE 39

Ruby annotation

slide-40
SLIDE 40 < ruby> 凝< rt> ぎょう< /rt> 視< rt> し< /rt> < /ruby> < ruby< rb> 凝< /rb> < rt> ぎょう< /rt> < /ruby> < ruby> < rb> 視< /rb> < rt> し< /rt> < /ruby> < ruby> < rbc> < rb> 凝< /rb> < rb> 視< /rb> < /rbc> < rtc> < rt> ぎょう< /rt> < rt> し< /rt> < /rtc> < /ruby>

Ruby annotation

slide-41
SLIDE 41

Requirements for Japanese Layout

slide-42
SLIDE 42

ལ་ིར་བར་བའི་ལས་དོན།

នរជ‌តូននិយកម

انبانببب یاع پ ر ی ق ی ق و ب

െതാര്

Web fonts

slide-43
SLIDE 43 @font-face { font-family: 'battambang-woff'; font-style: normal; font-weight: normal; src: url(fonts/khmerosbbang.woff); } :lang(kh) { font-family: 'battambang-woff'; font-size: 100% ; }
  • Rendering detail for complex fonts.
  • Subsetting capability may be needed.
  • Can only be used for fonts with an
appropriate licence. Issues

Web fonts

slide-44
SLIDE 44

OpenType feature support by language

slide-45
SLIDE 45

Zusätzlich erleichtert PLS die Eingrenzung von Anwendungen, indem es Aussprachebelang e von anderen Teilen der Anwendung abtrennt.

* { hyphens: auto; }

Zusätzlich er- leichtert PLS die Eingrenzung von Anwendungen, in- dem es Aussprac- hebelange von an- deren Teilen der Anwendung ab- trennt. Hyphenation

slide-46
SLIDE 46

Hyphenation

  • Hyphenation support is

starting to become available. – Still works best with embedded (server-side) hinting – Language support??

Still in flux… development needed
slide-47
SLIDE 47

The q element < p> Some Norwegian text < q> More Norwegian< q> still more Norwegian< /q> < /q> .< /p>

Some Norwegian text «More norwegian "more norwegian"».

:lang(en) > * { quotes: '"' '"' "'" "'"; } :lang(no) > * { quotes: "«" "»" '"' '"' }
slide-48
SLIDE 48

The q element < p> Some Norwegian text < q> More Norwegian< q> still more Norwegian< /q> < /q> .< /p>

Some English text "Some norwegian «more norwegian»".

:lang(en) > * { quotes: '"' '"' "'" "'"; } :lang(no) > * { quotes: "«" "»" '"' '"' }
slide-49
SLIDE 49 Characters Language Date & time Bidirectional text CSS3: Global ready presentation

JavaScript

Widgets and Web apps Best practices
slide-50
SLIDE 50

JS-I18N extension work – Locales based on BCP 47 language tags – Date, number formatting – Collation – and more…

http:/ / wiki.ecmascript.org/ doku.php?id= strawman:i18n_api

Javascript gets a 'locale

slide-51
SLIDE 51

Examples (Kindle Touch browser)

slide-52
SLIDE 52 Characters Language Date & time Bidirectional text CSS3: Global ready presentation JavaScript

Widgets and Web apps

Best practices
slide-53
SLIDE 53
  • Various technologies that make Web-based

applications possible are under development. Some samples:

– IDL – Web sockets, Web storage, Web workers – XHR – Widgets – Selectors – File APIs – DOM

Webapps at W3C

slide-54
SLIDE 54

The Widget Spec

  • Widget containers deliver “apps” cross-platform based on HTML5

– Extensive localization model – Ability to set base locale

<wi dge t xm l ns =ht t p: / / www. w3. or g/ ns / wi dge t s de f a ul t l oc a l e =“ e n” > <na m e s hor t =" W e a t he r " > W e a t he r ! a t ot a l l y a we s om e a ppl i c a t i on! </ na m e > <na m e s hor t ="ﺍﻮﻫ ﻭ ﺏﺁ " xm l : l a ng=" f a " di r =" r t l " > <s pa n di r =" l t r " xm l : l a ng=" e n" >W e a t he r ! </ s pa n> ﻪﻣﺎﻧﺮﺑ ﺎﻌﻗﺍﻭ گﺭﺰﺑ </ na m e > </ wi dge t >
slide-55
SLIDE 55

Webapps

A standard HTML5/ CSS3 Widget using P&C
slide-56
SLIDE 56 Characters Language Date & time Bidirectional text CSS3: Global ready presentation JavaScript Widgets and Web apps

Best practices

slide-57
SLIDE 57 markup for bidirectional text normalization working with case sensitivity more information about date & time

Capturing guidance for spec developers and implementers (and you)

slide-58
SLIDE 58

Tests

slide-59
SLIDE 59 Articles Tutorials Technical notes Tests Talks Tools Reviews

http://www.w3.org/International/ Internationalization resources

slide-60
SLIDE 60

Creating HTML & CSS

I18n resources

slide-61
SLIDE 61

Language

I18n resources

slide-62
SLIDE 62

Choosing language values

I18n resources

slide-63
SLIDE 63

I18n resources

slide-64
SLIDE 64

I18n resources

slide-65
SLIDE 65

http://validator.w3.org/i18n-checker/

1. Discover 2. Check

Checker tool

slide-66
SLIDE 66

Getting involved…

slide-67
SLIDE 67

Getting involved

  • Follow the discussions on the i18n mailing lists (eg. www-
international@w3.org), and track other technologies for internationally relevant topics. Follow our RSS feeds and twitter channels (@webi18n and @multilingweb)
  • Read and review specifications (http://www.w3.org/TR/tr-
technology-drafts) and send comments to the i18n list or direct to the Working Group.
  • Discuss local requirements for the Multilingual Web, and if you
identify missing features, find ways to coordinate proposals.
  • Use features needed for non-Latin script support and push
implementers to include more in browsers and authoring tools.
slide-68
SLIDE 68

The Web needs your help

this is your Web – not the W3C's we need You to make the Web worldwide get involved

Thank you http://www.w3.org/International/talks/1101-iuc35 /