Post on 22-Jan-2016
description
CrCréer des pageséer des pages XHTML/HTML bidiXHTML/HTML bidi
Richard IshidaRichard IshidaW3CW3C
Créer des pages qui prennent en Créer des pages qui prennent en charge l'arabe et l'hébreucharge l'arabe et l'hébreu
Obj
ectif
sO
bjec
tifs
Expliquer comment créer des pages XHTML et HTML qui contiennent du texte écrit dans l'écriture arabe ou l'écriture hébraïque
Sou
rces
/ no
tes
Sou
rces
/ no
tes
Article: What you need to know about the bidi algorithm and inline markuphttp://www.w3.org/International/articles/inline-bidi-markup/
Authoring Techniques for XHTML & HTML Internationalization 1.0, Bidirectional texthttp://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
Pla
nP
lan
Premières approchesPremières approches Changer la directionalité d'un blocChanger la directionalité d'un bloc Mélanger la directionalité au sein d'un Mélanger la directionalité au sein d'un
paragrapheparagraphe Désactiver l'algorithmeDésactiver l'algorithme Et CSS alors ?Et CSS alors ?
Pla
nP
lan
Premières approchesPremières approches Déclarer la directionalité du document Ne soyez pas dingue de balises Caractères Unicode ou balises ?
Changer la directionalité d'un blocChanger la directionalité d'un bloc Mélanger la directionalité au sein d'un Mélanger la directionalité au sein d'un
paragrapheparagraphe Désactiver l'algorithmeDésactiver l'algorithme Et CSS alors ?Et CSS alors ?
Déclarer la directionalité du Déclarer la directionalité du documentdocument
dir="rtl"
Déc
lare
r la
dire
ctio
nalit
é du
doc
umen
tD
écla
rer
la d
irect
iona
lité
du d
ocum
ent 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éc
lare
r la
dire
ctio
nalit
é du
doc
umen
tD
écla
rer
la d
irect
iona
lité
du d
ocum
ent Utilisez l'attribut dir de la balise <html>
lang="ar" xml:lang="ar"
Déc
lare
r la
dire
ctio
nalit
é du
doc
umen
tD
écla
rer
la d
irect
iona
lité
du d
ocum
ent 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éc
lare
r la
dire
ctio
nalit
é du
doc
umen
tD
écla
rer
la d
irect
iona
lité
du d
ocum
ent Résultat avec IE après avoir déclaré la
directionalité dans la balise <html>
Ne soyez pas dingue de balisesNe soyez pas dingue de balises
Ne
soye
z pa
s di
ngue
de
balis
esN
e so
yez
pas
ding
ue d
e ba
lises Profitez de l'héritage de la balise <html>
<h2 dir="rtl">القاموس</h2> <dl> <dt dir="rtl">المنالية</dt> <dd dir="rtl">ظر عن إعاقةهمV . سهولة منال للويب من قبل الجميع بصرف الن</dd>
<dt dir="rtl">برنامج التصديق</dt> <dd dir="rtl">
Vة صفحة ويب "أو VحقVق من صالحي VحقVق من . الفاليديتور" أداة للت على سبيل المثال، للتVة بزنامج تصديق يمكن أن تستخدم ، >span dir="ltr">HTML</span< صالحي
>span dir="ltr">W3C</span< </dd>
<dt dir="rtl">دويلV <dt/>الت <dd dir="rtl">
Vغات و تدويل الويب يسمح و يجعله سهل الستخدام موقعك باللVقافات المختلفة يناريوهات و الث Vالس.
</dd> </dl>
Ne
soye
z pa
s di
ngue
de
balis
esN
e so
yez
pas
ding
ue d
e ba
lises Profitez de l'héritage de la balise <html>
<h2>القاموس</h2> <dl> <dt>المنالية</dt> <dd>ظر عن إعاقةهمV <dd/> . سهولة منال للويب من قبل الجميع بصرف الن
<dt>برنامج التصديق</dt> <dd>
Vة صفحة ويب "أو VحقVق من صالحي VحقVق من . الفاليديتور" أداة للت على سبيل المثال، للتVة W3C بزنامج تصديق يمكن أن تستخدم HTML ، صالحي
</dd>
<dt>دويلV <dt/>الت <dd>
Vغات و تدويل الويب يسمح و يجعله سهل الستخدام موقعك باللVقافات المختلفة يناريوهات و الث Vالس.
</dd> </dl>
Caractères Unicode ou balises ?Caractères Unicode ou balises ?
Car
actè
res
Uni
code
ou
balis
es ?
Car
actè
res
Uni
code
ou
balis
es ? Sauf si c'est impossible, utilisez le balisage
RLE
LRE
Caractère
RLO
LRO
U+202A
U+202B
Code
U+202E
U+202D
U+202C
dir = "rtl"
dir = "ltr"
Balisage équivalent
<bdo dir = "rtl">
<bdo dir = "ltr">
rien
</bdo>
Car
actè
res
Uni
code
ou
balis
es ?
Car
actè
res
Uni
code
ou
balis
es ? Où employer des caractères Unicode
Dans des éléments qui n'acceptent que du texte (par ex. <title> )
Car
actè
res
Uni
code
ou
balis
es ?
Car
actè
res
Uni
code
ou
balis
es ? Où employer des caractères Unicode
Text only elements (eg. <title> )
Le texte des attributs
<img src="logo.png" alt="פעילות הבינאום, W3C" />
Car
actè
res
Uni
code
ou
balis
es ?
Car
actè
res
Uni
code
ou
balis
es ? 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. <title> )
Le texte des attributs
(Remarque : ce genre de problèmes disparaîtra probablement dans XHTML 2.0)
Out
line
Out
line
Premières approchesPremières approches
Changer la directionalité d'un blocChanger la directionalité d'un bloc Mélanger la directionalité au sein d'un Mélanger la directionalité au sein d'un
paragrapheparagraphe Désactiver l'algorithmeDésactiver l'algorithme Et CSS alors ?Et CSS alors ?
Cha
nger
la d
irect
iona
lité
d'un
blo
cC
hang
er la
dire
ctio
nalit
é d'
un b
loc Ajoutez un attribut dir aux contenants de bloc
<p dir="ltr">مكتب W3C הישראלי</p>
Out
line
Out
line
Premières approchesPremières approches Changer la directionalité d'un blocChanger la directionalité d'un bloc
Mélanger la directionalité au sein Mélanger la directionalité au sein d'un paragraphed'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'algorithmeDésactiver l'algorithme Et CSS alors ?Et CSS alors ?
Les bases de l'algorithme bidi Les bases de l'algorithme bidi
Les
base
s de
l'al
gorit
hme
bidi
Le
s ba
ses
de l'
algo
rithm
e bi
di Le typage directionnel des caractères
é LTR
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Le typage directionnel des caractères
ég LTR
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Le typage directionnel des caractères
égy LTR
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Le typage directionnel des caractères
égyp LTR
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Le typage directionnel des caractères
égypt LTR
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Le typage directionnel des caractères
égypte LTR
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Le typage directionnel des caractères
égypte
م
LTR
RTL
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Le typage directionnel des caractères
مص
LTR
RTL
égypte
Leمصرs
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Le typage directionnel des caractères
LTR
RTL
égypte
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Passages directionnels
bahraïn مصر koweit
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Passages directionnels
bahraïn مصر koweitLTR
1 2 3
bahraïnمصر koweit RTL
3 2 1
Les
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
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
base
s de
l'al
gorit
hme
bidi
Les
base
s de
l'al
gorit
hme
bidi Chiffres
un deux خمس 1234 ثالثة
un deux خمس ١٢٣٤ ثالثة
Neutres situés entre deux Neutres situés entre deux passages de directionalités passages de directionalités
différentesdifférentes
Neu
tres
ent
re d
eux
pass
ages
diff
éren
tsN
eutr
es e
ntre
deu
x pa
ssag
es d
iffér
ents 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.
✓
"<span dir="rtl" lang="ar" xml:lang="ar">
! معاييرالويب مفتاح </span>"
Neu
tres
ent
re d
eux
pass
ages
diff
éren
tsN
eutr
es e
ntre
deu
x pa
ssag
es d
iffér
ents Utilisez du balisage pour déclarer un
nouveau niveau d'emboîtement directionnel…
Le titre est "مفتاح معايير الويب!" en arabe.
✗
Le titre est "!مفتاح معايير الويب" en arabe.
✓
"‏!
الويب
Neu
tres
ent
re d
eux
pass
ages
diff
éren
tsN
eutr
es e
ntre
deu
x pa
ssag
es d
iffér
ents … ou des caractères RLM ou LRM.
Le titre est "مفتاح معايير الويب!" en arabe.
✗
Le titre est "!مفتاح معايير الويب" en arabe.
✓
Neutres situés entre deux Neutres situés entre deux passages de directionalité passages de directionalité
identiqueidentique
Neu
tres
ent
re d
eux
pass
ages
iden
tique
sN
eutr
es e
ntre
deu
x pa
ssag
es id
entiq
ues 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.
✓
;lrm&,مصر
البحرين
Neu
tres
ent
re d
eux
pass
ages
iden
tique
sN
eutr
es e
ntre
deu
x pa
ssag
es id
entiq
ues 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.
✓
✗
W3C ‏(World
Neu
tres
ent
re d
eux
pass
ages
iden
tique
sN
eutr
es e
ntre
deu
x pa
ssag
es id
entiq
ues Utilisez un RLM ou un LRM. Pas du
balisage.
( W3C (World Wide Web Consortium מעביר אתERCIM. -שירותי הארחה באירופה ל
W3C( World Wide Web Consortium ) מעביר אתERCIM. -שירותי הארחה באירופה ל
Caractères miroitésCaractères miroités
Car
actè
res
miro
ités
Car
actè
res
miro
ité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. -שירותי הארחה באירופה ל
.ERCIM
Car
actè
res
miro
ités
Car
actè
res
miro
ité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. -שירותי הארחה באירופה ל
.ERCIM
Emboîtement de passages Emboîtement de passages directionnelsdirectionnels
"<span dir="rtl">W3C ,פעילות הבינאום</span>"
Em
boîte
men
t de
pass
ages
dire
ctio
nnel
sE
mbo
îtem
ent d
e pa
ssag
es d
irect
ionn
els 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 Le phénomène de l' "espace manquante"manquante"
.span> in Hebrew> פעילות הבינאום
Le p
héno
mèn
e de
l' "
espa
ce m
anqu
ante
"Le
phé
nom
ène
de l'
"es
pace
man
quan
te" 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 p
héno
mèn
e de
l' "
espa
ce m
anqu
ante
"Le
phé
nom
ène
de l'
"es
pace
man
quan
te" 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
Out
line
Out
line
Premières approchesPremières approches Changer la directionalité d'un blocChanger la directionalité d'un bloc Mélanger la directionalité au sein d'un Mélanger la directionalité au sein d'un
paragrapheparagraphe
Désactiver l'algorithmeDésactiver l'algorithme Et CSS alors ?Et CSS alors ?
<p><bdo dir="ltr">W3C , הבינאום פעילות</bdo></p>
Dés
activ
er l'
algo
rithm
eD
ésac
tiver
l'al
gorit
hme Utilisez l'élément <bdo>
וליעפ ה ת W3C ,םואניב
Dans la phrase "W3C , הבינאום l'ordre des ,"פעילותcaractères en mémoire est le suivant :
Dés
activ
er l'
algo
rithm
eD
ésac
tiver
l'al
gorit
hme Utilisez l'élément <bdo>
וליעפ ה ת W3C ,םואניב
Dans la phrase "W3C , הבינאום l'ordre des ,"פעילותcaractères en mémoire est le suivant :
En XHTML 2.0, l'élément <bdo> sera probablement remplacé par les valeurs rlo et lro ajoutés à l'attribut dir.
Out
line
Out
line
Premières approchesPremières approches Changer la directionalité d'un blocChanger la directionalité d'un bloc Mélanger la directionalité au sein d'un Mélanger la directionalité au sein d'un
paragrapheparagraphe Désactiver l'algorithmeDé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é HTML et XHTML renvoyé comme du text/htmlcomme du text/html
HT
ML
et X
HT
ML
text
/htm
lH
TM
L et
XH
TM
L te
xt/h
tml 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 XHTML renvoyé comme du XMLXML
XH
TM
L re
nvoy
é co
mm
e du
XM
LX
HT
ML
renv
oyé
com
me
du X
ML 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
Out
line
Out
line
Premières approchesPremières approches Changer la directionalité d'un blocChanger la directionalité d'un bloc Mélanger la directionalité au sein d'un Mélanger la directionalité au sein d'un
paragrapheparagraphe Désactiver l'algorithmeDésactiver l'algorithme Et CSS alors ?Et CSS alors ?
MerciMerci
http://www.w3.org/International/
http://www.w3.org/2004/Talks/0925-ishida-ircam/bidi.pdf