Créer des pages XHTML/HTML bidi Richard Ishida W3C Créer des pages qui prennent en charge l'arabe et l'hébreu.

Présentation au sujet: "Créer des pages XHTML/HTML bidi Richard Ishida W3C Créer des pages qui prennent en charge l'arabe et l'hébreu."— Transcription de la présentation:

1 Créer des pages XHTML/HTML bidi Richard Ishida W3C Créer des pages qui prennent en charge l'arabe et l'hébreu

2 Objectifs Expliquer comment créer des pages XHTML et HTML qui contiennent du texte écrit dans l'écriture arabe ou l'écriture hébraïque

3 Sources / notes Article: What you need to know about the bidi algorithm and inline markup http://www.w3.org/International/articles/inline-bidi-markup/ Authoring Techniques for XHTML & HTML Internationalization 1.0, Bidirectional text http://www.w3.org/International/geo/html-tech/tech-bidi.html Ressources d'internationalisation du web produites par le groupe i18n du W3C (en anglais) http://www.w3.org/International/resource-index#bidi

4 Plan Premières approches Premières approches Changer la directionalité d'un bloc Changer la directionalité d'un bloc Mélanger la directionalité au sein d'un paragraphe Mélanger la directionalité au sein d'un paragraphe Désactiver l'algorithme Désactiver l'algorithme Et CSS alors ? Et CSS alors ?

5 Plan Premières approches Premières approches Déclarer la directionalité du document Ne soyez pas dingue de balises Caractères Unicode ou balises ? Changer la directionalité d'un bloc Changer la directionalité d'un bloc Mélanger la directionalité au sein d'un paragraphe Mélanger la directionalité au sein d'un paragraphe Désactiver l'algorithme Désactiver l'algorithme Et CSS alors ? Et CSS alors ?

6 Déclarer la directionalité du document

7 dir="rtl" Déclarer la directionalité du document Utilisez l'attribut dir de la balise إتصال ….

8 Déclarer la directionalité du document Utilisez l'attribut dir de la balise

9 lang="ar" xml:lang="ar" Déclarer la directionalité du document N'oubliez pas d'également déclarer la langue sur la balise. Mais n'utilisez pas d'attribut lang pour déclarer la directionalité ! إتصال ….

10 Déclarer la directionalité du document Résultat avec IE après avoir déclaré la directionalité dans la balise

11 Be logical, not visual

12 Logical & visual contrasted פעילות הבינאום, W3C W 3 C, ם ו א נ י ב ה ת ו ל י ע פ פ ע י ל ו ת ה ב י נ א ו ם, W 3 C 1 2

13 Be logical, not visual An example of visual code Requires a visual encoding, eg. ISO 8859-8

14 Hebrew typed backwards To add text, need to readjust all following linebreaks Be logical, not visual Problems with visual encoding Lots of code Link text or emphasized text that spans a line needs to be marked up twice Fragile code, difficult to maintain

15 ISO 8859-8Visuel ! ISO 8859-8-iLogique Soyez logique, pas visuel Si vous déclarez un codage ISO…

16 Ne soyez pas dingue de balises

17 Profitez de l'héritage de la balise القاموس المنالية سهولة منال للويب من قبل الجميع بصرف النّظر عن إعاقةهم. برنامج التصديق أو " الفاليديتور " أداة للتّحقّق من صلاحيّة صفحة ويب. على سبيل المثال، للتّحقّق من صلاحيّة HTML ، يمكن أن تستخدم بزنامج تصديق W3C التّدويل تدويل الويب يسمح و يجعله سهل لاستخدام موقعك باللّغات و السّيناريوهات و الثّقافات المختلفة.

18 Ne soyez pas dingue de balises Profitez de l'héritage de la balise القاموس المنالية سهولة منال للويب من قبل الجميع بصرف النّظر عن إعاقةهم. برنامج التصديق أو " الفاليديتور " أداة للتّحقّق من صلاحيّة صفحة ويب. على سبيل المثال، للتّحقّق من صلاحيّة ، HTML يمكن أن تستخدم بزنامج تصديق W3C التّدويل تدويل الويب يسمح و يجعله سهل لاستخدام موقعك باللّغات و السّيناريوهات و الثّقافات المختلفة.

19 Caractères Unicode ou balises ?

20 Sauf si c'est impossible, utilisez le balisage RLE LRE Caractère RLO LRO PDF U+202A U+202B Code U+202E U+202D U+202C dir = "rtl" dir = "ltr" Balisage équivalent rien

21 Caractères Unicode ou balises ? Où employer des caractères Unicode Dans des éléments qui n'acceptent que du texte (par ex. )

22 Caractères Unicode ou balises ? Où employer des caractères Unicode Text only elements (eg. ) Le texte des attributs

23 Caractères Unicode ou balises ? Où employer des caractères Unicode Consulter GEO FAQ: Bidi formatting codes vs. markup for XHTML/HTML http://www.w3.org/International/questions/qa-bidi-controls.html Text only elements (eg. ) Le texte des attributs (Remarque : ce genre de problèmes disparaîtra probablement dans XHTML 2.0)

24 Outline Premières approches Premières approches Changer la directionalité d'un bloc Changer la directionalité d'un bloc Mélanger la directionalité au sein d'un paragraphe Mélanger la directionalité au sein d'un paragraphe Désactiver l'algorithme Désactiver l'algorithme Et CSS alors ? Et CSS alors ?

25 Changer la directionalité d'un bloc Ajoutez un attribut dir aux contenants de bloc مكتب W3C הישראלי

26 Outline Premières approches Premières approches Changer la directionalité d'un bloc Changer la directionalité d'un bloc Mélanger la directionalité au sein d'un paragraphe Mélanger la directionalité au sein d'un paragraphe Les bases de l'algorithme bidi Neutres situés entre deux passages de directionalités différentes Neutres situés entre deux passages de directionalité identique Emboîtement de passages directionnels Le phénomène de l' "espace manquante" Désactiver l'algorithme Désactiver l'algorithme Et CSS alors ? Et CSS alors ?

27 Les bases de l'algorithme bidi

28 Le typage directionnel des caractères é LTR

29 Les bases de l'algorithme bidi Le typage directionnel des caractères égég LTR

30 Les bases de l'algorithme bidi Le typage directionnel des caractères égy LTR

31 Les bases de l'algorithme bidi Le typage directionnel des caractères égyp LTR

32 Les bases de l'algorithme bidi Le typage directionnel des caractères égypt LTR

33 Les bases de l'algorithme bidi Le typage directionnel des caractères égypte LTR

34 Les bases de l'algorithme bidi Le typage directionnel des caractères égypte م LTR RTL

35 Les bases de l'algorithme bidi Le typage directionnel des caractères مص LTR RTL égypte

36 مصر Les bases de l'algorithme bidi Le typage directionnel des caractères LTR RTL égypte

37 Les bases de l'algorithme bidi Passages directionnels bahraïn مصر koweit

38 Les bases de l'algorithme bidi Passages directionnels bahraïn مصر koweit LTR 123 bahraïn مصر koweit RTL 321

39 Les bases de l'algorithme bidi Caractères neutres Le titre est مفتاح معايير الويب en arabe. Entre 2 caractères de type fort différent : directionalité du contexte. Entre 2 caractères de même type fort : même directionalité.

40 Les bases de l'algorithme bidi Chiffres un deux ثلاثة 1234 خمس un deux ثلاثة ١٢٣٤ خمس

41 Neutres situés entre deux passages de directionalités différentes

42 Neutres entre deux passages différents Les neutres situés entre deux passages directionnels peuvent être affichés à la mauvaise place. Le titre est " مفتاح معايير الويب !" en arabe. Le titre est "! مفتاح معايير الويب" en arabe.

43 " !مفتاح معاييرالويب " Neutres entre deux passages différents Utilisez du balisage pour déclarer un nouveau niveau d'emboîtement directionnel… Le titre est " مفتاح معايير الويب !" en arabe. Le titre est "!مفتاح معايير الويب" en arabe.

44 "‏!الويب Neutres entre deux passages différents … ou des caractères RLM ou LRM. Le titre est " مفتاح معايير الويب !" en arabe. Le titre est "!مفتاح معايير الويب" en arabe.

45 Neutres situés entre deux passages de directionalité identique

46 Neutres entre deux passages identiques Des neutres entre deux passages directionnels de directionalité identique peuvent être interprétés de manière erronée comme un seul passage directionnel. The names of these states in Arabic are مصر, البحرين and الكويت respectively. The names of these states in Arabic are مصر, البحرين and الكويت respectively.

47 مصر,‎ البحرين Neutres entre deux passages identiques Utilisez un RLM ou un LRM. Pas du balisage. The names of these states in Arabic are مصر, البحرين and الكويت respectively.

48 W3C ‏(World Neutres entre deux passages identiques Utilisez un RLM ou un LRM. Pas du balisage. (W3C (World Wide Web Consortium מעביר את שירותי הארחה באירופה ל -.ERCIM W3C (World Wide Web Consortium) מעביר את שירותי הארחה באירופה ל -.ERCIM

49 Caractères miroités

50 L'apparence des caractères miroités est déterminée par le contexte. (W3C (World Wide Web Consortium מעביר את שירותי הארחה באירופה ל - W3C (World Wide Web Consortium) מעביר את שירותי הארחה באירופה ל -.ERCIM

51 Caractères miroités L'apparence des caractères miroités est déterminée par le contexte. Traitez la PARENTHESE GAUCHE comme une PARENTHESE OUVRANTE, etc. (W3C (World Wide Web Consortium מעביר את שירותי הארחה באירופה ל - W3C (World Wide Web Consortium) מעביר את שירותי הארחה באירופה ל -.ERCIM

52 Emboîtement de passages directionnels

53 " W3C, פעילות הבינאום " Emboîtement de passages directionnels Utilisez une balise pour déclarer un nouveau niveau d'emboîtement The title says " פעילות הבינאום,W3C " in Hebrew. Le titre est " פעילות הבינאום, W3C" en hébreu.

54 Le phénomène de l' "espace manquante"

55 פעילות הבינאום in Hebrew. Le phénomène de l' "espace manquante" Ne laissez pas d'espace devant la balise fermante des éléments qui changent la directionalité The title says פעילות הבינאום in Hebrew. The title says פעילות הבינאום in Hebrew.

56 Le phénomène de l' "espace manquante" Ne laissez pas d'espace devant la balise fermante des éléments qui changent la directionalité The title says פעילות הבינאום in Hebrew. The title says פעילות הבינאום in Hebrew. Consultez GEO FAQ: Bidi space loss http://www.w3.org/International/questions/qa-bidi-space

57 Outline Premières approches Premières approches Changer la directionalité d'un bloc Changer la directionalité d'un bloc Mélanger la directionalité au sein d'un paragraphe Mélanger la directionalité au sein d'un paragraphe Désactiver l'algorithme Désactiver l'algorithme Et CSS alors ? Et CSS alors ?

58 W3C,פעילות הבינאום Désactiver l'algorithme Utilisez l'élément פעילות הבינאום, W3C Dans la phrase "W3C,פעילות הבינאום", l'ordre des caractères en mémoire est le suivant :

59 Désactiver l'algorithme Utilisez l'élément פעילות הבינאום, W3C Dans la phrase "W3C,פעילות הבינאום", l'ordre des caractères en mémoire est le suivant : En XHTML 2.0, l'élément sera probablement remplacé par les valeurs rlo et lro ajoutés à l'attribut dir.

60 Outline Premières approches Premières approches Changer la directionalité d'un bloc Changer la directionalité d'un bloc Mélanger la directionalité au sein d'un paragraphe Mélanger la directionalité au sein d'un paragraphe Désactiver l'algorithme Désactiver l'algorithme Et CSS alors ? Et CSS alors ? HTML et XHTML renvoyé comme du text/html XHTML renvoyé comme du XML

61 HTML et XHTML renvoyé comme du text/html

62 HTML et XHTML text/html N'utilisez que du balisage ! La spec HTML définit le comportement que doivent adopter les clients à l'égard du balisage bidi La spec CSS recommande l'utilisation de balises et précise que les clients HTML conformes peuvent même ignorer les propriétés bidi CSS N'utilisez donc pas du tout les propriétés bidi de CSS !

63 XHTML renvoyé comme du XML

64 N'utilisez que le balisage bidi et définissez les propriétés CSS suivantes … *[dir="ltr"] { unicode-bidi: embed; direction: ltr} *[dir="rtl"] { unicode-bidi: embed; direction: rtl} bdo [dir="ltr"] { unicode-bidi: bidi-override; direction: ltr} bdo [dir="rtl"] { unicode-bidi: bidi-override; direction: rtl} Consulter GEO FAQ: CSS vs. markup for bidi support http://www.w3.org/International/questions/qa-bidi-css-markup.html

65 Outline Premières approches Premières approches Changer la directionalité d'un bloc Changer la directionalité d'un bloc Mélanger la directionalité au sein d'un paragraphe Mélanger la directionalité au sein d'un paragraphe Désactiver l'algorithme Désactiver l'algorithme Et CSS alors ? Et CSS alors ?

66 Merci http://www.w3.org/International/ http://www.w3.org/2004/Talks/0925-ishida-ircam/bidi.pdf