html5-img
1 / 61

Cr éer des pages XHTML/HTML bidi

Cr éer des pages XHTML/HTML bidi. Créer des pages qui prennent en charge l'arabe et l'hébreu. Richard Ishida W3C. Expliquer comment créer des pages XHTML et HTML qui contiennent du texte écrit dans l'écriture arabe ou l'écriture hébraïque. Objectifs.

fruma
Download Presentation

Cr éer des pages XHTML/HTML bidi

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. Créer des pagesXHTML/HTML bidi Créer des pages qui prennent en charge l'arabe et l'hébreu Richard Ishida W3C

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

  3. 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 Sources / notes

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

  5. 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 • Mélanger la directionalité au sein d'un paragraphe • Désactiver l'algorithme • Et CSS alors ? Plan

  6. Déclarer la directionalité du document

  7. dir="rtl" • Utilisez l'attribut dir de la balise <html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="rlt" lang="ar" xml:lang="ar" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>إتصال</title> …. Déclarer la directionalité du document

  8. Utilisez l'attribut dir de la balise <html> Déclarer la directionalité du document

  9. N'oubliez pas d'également déclarer la langue sur la balise <html>. • Mais n'utilisez pas d'attribut lang pour déclarer la directionalité ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="rlt" lang="ar" xml:lang="ar" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>إتصال</title> …. Déclarer la directionalité du document lang="ar" xml:lang="ar"

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

  11. Ne soyez pas dingue de balises

  12. Profitez de l'héritage de la balise <html> <h2 dir="rtl">القاموس</h2> <dl> <dt dir="rtl">المنالية</dt> <dd dir="rtl">سهولة منال للويب من قبل الجميع بصرف النّظر عن إعاقةهم . </dd> <dt dir="rtl">برنامج التصديق</dt> <dd dir="rtl"> أو "الفاليديتور" أداة للتّحقّق من صلاحيّة صفحة ويب. على سبيل المثال، للتّحقّق من صلاحيّة<span dir="ltr">HTML</span> ، يمكن أن تستخدمبزنامج تصديق<span dir="ltr">W3C</span> </dd> <dt dir="rtl">التّدويل</dt> <dd dir="rtl"> تدويل الويب يسمح و يجعله سهل لاستخدام موقعك باللّغات و السّيناريوهات و الثّقافات المختلفة. </dd> </dl> Ne soyez pas dingue de balises

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

  14. Caractères Unicode ou balises ?

  15. Caractère Balisage équivalent Code RLE dir = "rtl" U+202A LRE dir = "ltr" U+202B RLO <bdo dir = "rtl"> U+202E LRO <bdo dir = "ltr"> U+202D PDF rien U+202C </bdo> • Sauf si c'est impossible, utilisez le balisage Caractères Unicode ou balises ?

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

  17. Où employer des caractères Unicode • Text only elements (eg. <title> ) • Le texte des attributs Caractères Unicode ou balises ? <img src="logo.png" alt="פעילות הבינאום, W3C" />

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

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

  20. Ajoutez un attribut dir aux contenants de bloc Changer la directionalité d'un bloc <p dir="ltr">مكتب W3C הישראלי</p>

  21. Premières approches • Changer la directionalité d'un bloc • 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 • Et CSS alors ? Outline

  22. Les bases de l'algorithme bidi

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

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

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

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

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

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

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

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

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

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

  33. RTL bahraïnمصر koweit 3 2 1 • Passages directionnels LTR bahraïn مصر koweit 1 2 3 Les bases de l'algorithme bidi

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

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

  36. Neutres situés entre deux passages de directionalités différentes

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

  38. ✗ ✓ Le titre est "!‏مفتاح معايير الويب‏" en arabe. • Utilisez du balisage pour déclarer un nouveau niveau d'emboîtement directionnel… Neutres entre deux passages différents Le titre est "مفتاح معايير الويب!" en arabe. "<span dir="rtl" lang="ar" xml:lang="ar">!‏مفتاحمعاييرالويب‏</span>"

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

  40. Neutres situés entre deux passages de directionalité identique

  41. ✗ ✓ The names of these states in Arabic are مصر,‎ البحرين and الكويت respectively. • 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. Neutres entre deux passages identiques

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

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

  44. Caractères miroités

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

  46. W3C‏ (World Wide Web Consortium) מעביר את שירותי הארחה באירופה ל -‏ .ERCIM‏ • 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מעביר את שירותי הארחה באירופה ל - .ERCIM‏ Caractères miroités

  47. Emboîtement de passages directionnels

  48. ✗ ✓ The title says " פעילות הבינאום,W3C " in Hebrew. "<span dir="rtl">W3C ,פעילות הבינאום</span>" • Utilisez une balise pour déclarer un nouveau niveau d'emboîtement Le titre est "פעילות הבינאום, W3C" en hébreu. Emboîtement de passages directionnels

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

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

More Related