610 likes | 783 Views
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.
E N D
Créer des pagesXHTML/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
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
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
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
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
Utilisez l'attribut dir de la balise <html> Déclarer la directionalité du document
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"
Résultat avec IE après avoir déclaré la directionalité dans la balise <html> Déclarer la directionalité du document
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
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
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 ?
Où employer des caractères Unicode • Dans des éléments qui n'acceptent que du texte (par ex. <title> ) Caractères Unicode ou balises ?
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" />
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
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
Ajoutez un attribut dir aux contenants de bloc Changer la directionalité d'un bloc <p dir="ltr">مكتب W3C הישראלי</p>
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
Le typage directionnel des caractères é LTR Les bases de l'algorithme bidi
Le typage directionnel des caractères ég LTR Les bases de l'algorithme bidi
Le typage directionnel des caractères égy LTR Les bases de l'algorithme bidi
Le typage directionnel des caractères égyp LTR Les bases de l'algorithme bidi
Le typage directionnel des caractères égypt LTR Les bases de l'algorithme bidi
Le typage directionnel des caractères égypte LTR Les bases de l'algorithme bidi
Le typage directionnel des caractères égypte LTR Les bases de l'algorithme bidi م RTL
Le typage directionnel des caractères égypte LTR Les bases de l'algorithme bidi مص RTL
Le typage directionnel des caractères égypte LTR Les bases de l'algorithme bidi مصر RTL
Passages directionnels bahraïn مصر koweit Les bases de l'algorithme bidi
RTL bahraïnمصر koweit 3 2 1 • Passages directionnels LTR bahraïn مصر koweit 1 2 3 Les bases de l'algorithme bidi
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.
Chiffres un deux ثلاثة 1234 خمس Les bases de l'algorithme bidi un deux ثلاثة ١٢٣٤ خمس
Neutres situés entre deux passages de directionalités différentes
✗ ✓ 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.
✗ ✓ 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>"
✗ ✓ Le titre est "!مفتاح معايير الويب" en arabe. "‏!الويب • … ou des caractères RLM ou LRM. Neutres entre deux passages différents Le titre est "مفتاح معايير الويب!" en arabe.
Neutres situés entre deux passages de directionalité identique
✗ ✓ 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
✗ ✓ The names of these states in Arabic are مصر, البحرين and الكويت respectively. مصر,‎ البحرين • Utilisez un RLM ou un LRM. Pas du balisage. The names of these states in Arabicare مصر, البحرين and الكويت respectively. Neutres entre deux passages identiques
W3C ‏(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
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
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
✗ ✓ 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
✓ ✗ 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"