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

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

Sources / notes Article: What you need to know about the bidi algorithm and inline markup Authoring Techniques for XHTML & HTML Internationalization 1.0, Bidirectional text Ressources d'internationalisation du web produites par le groupe i18n du W3C (en anglais)

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 ?

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 ?

Déclarer la directionalité du document

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

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

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é ! إتصال ….

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

Be logical, not visual

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

Be logical, not visual An example of visual code Requires a visual encoding, eg. ISO

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

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

Ne soyez pas dingue de balises

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

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

Caractères Unicode ou balises ?

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

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

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

Caractères Unicode ou balises ? Où employer des caractères Unicode Consulter GEO FAQ: Bidi formatting codes vs. markup for XHTML/HTML Text only elements (eg. ) Le texte des attributs (Remarque : ce genre de problèmes disparaîtra probablement dans XHTML 2.0)

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 ?

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

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 ?

Les bases de l'algorithme bidi

Le typage directionnel des caractères é LTR

Les bases de l'algorithme bidi Le typage directionnel des caractères égé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 RTL

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

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

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

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

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é.

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

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

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.

" !مفتاح معاييرالويب " 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.

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

Neutres situés entre deux passages de directionalité identique

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.

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

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

Caractères miroités

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

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

Emboîtement de passages directionnels

" 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.

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

פעילות הבינאום 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.

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

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 ?

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 :

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.

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

HTML et XHTML renvoyé comme du text/html

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 !

XHTML renvoyé comme du XML

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

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 ?

Merci