Consonant Characters and Inherent Vowels
publicité
Créer des pages
XHTML/HTML bidi
Créer des pages qui prennent en
charge l'arabe et l'hébreu
Richard Ishida
W3C
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
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
Plan
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 ?
Déclarer la directionalité du
document
Déclarer la directionalité du document
Utilisez l'attribut dir de la balise <html>
dir="rtl"
<!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>
….
lang="ar" xml:lang="ar"
Déclarer la directionalité du document
Résultat avec IE après avoir déclaré la
directionalité dans la balise <html>
Ne soyez pas dingue de balises
></h2القاموس>"<h2 dir="rtl
><dl
></dtالمنالية>"<dt dir="rtl
> . </ddسهولة منال للويب من قبل الجميع بصرف النّظر عن إعاقةهم>"<dd dir="rtl
></dtبرنامج التصديق>"<dt dir="rtl
>"<dd dir="rtl
أو" الفاليديتور" أداة للتّحقّق من صالحيّة صفحة ويب .على سبيل المثال ،للتّحقّق من صالحيّة
> ،<span dir="ltr">HTML</spanيمكن أن تستخدم بزنامج تصديق
><span dir="ltr">W3C</span
></dd
تدويل الويب يسمح و يجعله سهل الستخدام موقعك باللّغات و
السّيناريوهات و الثّقافات المختلفة.
></dtالتّدويل>"<dt dir="rtl
>"<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
> Profitez de l'héritage de la balise <html
Caractères Unicode ou balises ?
Caractères Unicode ou balises ?
Sauf si c'est impossible, utilisez le balisage
Caractère Code
Balisage équivalent
RLE
U+202A
dir = "rtl"
LRE
U+202B
dir = "ltr"
RLO
U+202E
<bdo dir = "rtl">
LRO
U+202D
<bdo dir = "ltr">
PDF
U+202C
rien
</bdo>
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
<img src="logo.png" alt="פעילות הבינאום, W3C" />
Caractères Unicode ou balises ?
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)
Consulter GEO FAQ: Bidi formatting codes vs. markup for
XHTML/HTML
http://www.w3.org/International/questions/qa-bidi-controls.html
Outline
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 ?
Changer la directionalité d'un bloc
Ajoutez un attribut dir aux contenants de bloc
<p dir="ltr"> مكتبW3C <הישראלי/p>
Outline
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 ?
Les bases de l'algorithme bidi
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
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
égypte
مص
LTR
RTL
Les bases de l'algorithme bidi
Le typage directionnel des caractères
égypte
مصر
LTR
RTL
Les bases de l'algorithme bidi
Passages directionnels
bahraïn مصرkoweit
Les bases de l'algorithme bidi
Passages directionnels
bahraïn مصرkoweit
LTR
1
2
3
koweit مصرbahraïn
RTL
3
2
1
Les bases de l'algorithme bidi
Caractères neutres
Le titre est مفتاح معايري الويبen arabe.
Entre 2 caractères de même type fort :
même directionalité.
Entre 2 caractères de type fort différent :
directionalité du contexte.
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.
"<span dir="rtl" lang="ar" xml:lang="ar">
!معايريالويب
<مفتاح/span>"
Neutres entre deux passages différents
… ou des caractères RLM ou LRM.
✗
Le titre est " "!مفتاح معايري الويبen arabe.
✓
Le titre est "! "مفتاح معايري الويبen arabe.
"&rlm;!الويب
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.
✓
The names of these states in Arabic
are مصر, البحرينand الكويتrespectively.
مصر,&lrm; البحرين
Neutres entre deux passages identiques
Utilisez un RLM ou un LRM. Pas du balisage.
W3C &rlm;(World
( מעביר אתW3C (World Wide Web Consortium
.ERCIM-שירותי הארחה באירופה ל
( מעביר אתWorld Wide Web Consortium) W3C
.ERCIM-שירותי הארחה באירופה ל
Caractères miroités
Caractères miroités
L'apparence des caractères miroités est déterminée
par le contexte.
( מעביר אתW3C (World Wide Web Consortium
.ERCIM-שירותי הארחה באירופה ל
( מעביר אתWorld Wide Web Consortium) W3C
.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
.ERCIM-שירותי הארחה באירופה ל
( מעביר אתWorld Wide Web Consortium) W3C
.ERCIM-שירותי הארחה באירופה ל
Emboîtement de passages
directionnels
Emboîtement de passages directionnels
Utilisez une balise pour déclarer un nouveau niveau
d'emboîtement
✗
Le titre est "פעילות הבינאום, W3C" en hébreu.
✓
The title says "W3C , "פעילות הבינאוםin Hebrew.
"<span dir="rtl">W3C ,<פעילות הבינאום/span>"
Le phénomène de l' "espace
manquante"
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.
< פעילות הבינאוםspan> 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
http://www.w3.org/International/questions/qa-bidi-space
Outline
Premières approches
Changer la directionalité d'un bloc
Mélanger la directionalité au sein d'un
paragraphe
Désactiver
Et CSS alors ?
l'algorithme
Désactiver l'algorithme
Utilisez l'élément <bdo>
Dans la phrase "W3C ,"פעילות הבינאום, l'ordre des
caractères en mémoire est le suivant :
םואניבה תוליעפ, W3C
<p><bdo dir="ltr">
W3C ,פעילות הבינאום
</bdo></p>
Désactiver l'algorithme
Utilisez l'élément <bdo>
Dans la phrase "W3C ,"פעילות הבינאום, l'ordre des
caractères en mémoire est le suivant :
םואניבה תוליעפ, W3C
En XHTML 2.0, l'élément <bdo> sera probablement remplacé par
les valeurs rlo et lro ajoutés à l'attribut dir.
Outline
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 ?
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
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
http://www.w3.org/International/questions/qa-bidi-css-markup.html
Outline
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 ?
Merci
http://www.w3.org/International/
http://www.w3.org/2004/Talks/0925-ishida-ircam/bidi.pdf
