Consonant Characters and Inherent Vowels

1
Créer des pages XHTML/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/Inte
rnational/articles/inline-bidi-markup/ Authoring
Techniques for XHTML HTML Internationalization
1.0, Bidirectional text http//www.w3.org/Internat
ional/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-indexbidi
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

• Utilisez l'attribut dir de la balise lthtmlgt

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml
1/DTD/xhtml1-transitional.dtd"gt lthtml dir"rlt"
lang"ar" xmllang"ar" xmlns"http//www.w3
.org/1999/xhtml"gt ltheadgt ltmeta
http-equiv"Content-Type" content"text/html
charsetutf-8" /gt lttitlegt?????lt/titlegt
.
Déclarer la directionalité du document
8

• Utilisez l'attribut dir de la balise lthtmlgt

Déclarer la directionalité du document
9

• N'oubliez pas d'également déclarer la langue sur
  la balise lthtmlgt.
• Mais n'utilisez pas d'attribut lang pour déclarer
  la directionalité !

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml
1/DTD/xhtml1-transitional.dtd"gt lthtml dir"rlt"
lang"ar" xmllang"ar" xmlns"http//www.w3
.org/1999/xhtml"gt ltheadgt ltmeta
http-equiv"Content-Type" content"text/html
charsetutf-8" /gt lttitlegt?????lt/titlegt
.
Déclarer la directionalité du document
lang"ar" xmllang"ar"
10

• Résultat avec IE après avoir déclaré la
  directionalité dans la balise lthtmlgt

Déclarer la directionalité du document
11
Be logical, not visual
12

• Logical visual contrasted

?????? ???????, W3C
Be logical, not visual
? ? ? ? ? ? ? ? ? ? ? ? ? , W 3 C
W 3 C , ? ? ? ? ? ? ? ? ? ? ? ? ?
13

• An example of visual code

Be logical, not visual
Requires a visual encoding, eg. ISO 8859-8
14

• Problems with visual encoding

• Hebrew typed backwards
• To add text, need to readjust all following
  linebreaks

• Lots of code
• Link text or

Be logical, not visual

• emphasized text that spans a line needs to be
  marked up twice
• Fragile code, difficult to maintain

15

• Si vous déclarez un codage ISO

• ISO 8859-8 Visuel !
• ISO 8859-8-i Logique

Soyez logique, pas visuel
16
Ne soyez pas dingue de balises
17

• Profitez de l'héritage de la balise lthtmlgt

lth2 dir"rtl"gt???????lt/h2gt ltdlgt
ltdt dir"rtl"gt????????lt/dtgt ltdd
dir"rtl"gt????? ???? ????? ?? ??? ?????? ????
?????? ?? ??????? . lt/ddgt ltdt
dir"rtl"gt?????? ???????lt/dtgt ltdd
dir"rtl"gt ?? "???????????" ???? ???????? ??
??????? ???? ???. ??? ???? ??????? ???????? ??
??????? ltspan dir"ltr"gtHTMLlt/spangt ? ???? ??
?????? ?????? ????? ltspan dir"ltr"gtW3Clt/spangt
lt/ddgt ltdt dir"rtl"gt????????lt/dtgt
ltdd dir"rtl"gt ????? ????? ???? ? ?????
??? ???????? ????? ???????? ? ????????????? ?
????????? ????????. lt/ddgt lt/dlgt
Ne soyez pas dingue de balises
18

• Profitez de l'héritage de la balise lthtmlgt

lth2gt???????lt/h2gt ltdlgt
ltdtgt????????lt/dtgt ltddgt????? ???? ????? ??
??? ?????? ???? ?????? ?? ??????? . lt/ddgt
ltdtgt?????? ???????lt/dtgt ltddgt ??
"???????????" ???? ???????? ?? ??????? ???? ???.
??? ???? ??????? ???????? ?? ??????? ? HTML ????
?? ?????? ?????? ????? W3C lt/ddgt
ltdtgt????????lt/dtgt ltddgt ????? ????? ????
? ????? ??? ???????? ????? ????????
? ????????????? ? ????????? ????????.
lt/ddgt lt/dlgt
Ne soyez pas dingue de balises
19
Caractères Unicode ou balises ?
20

• Sauf si c'est impossible, utilisez le balisage

Caractères Unicode ou balises ?
21

• Où employer des caractères Unicode

• Dans des éléments qui n'acceptent que du texte
  (par ex. lttitlegt )

Caractères Unicode ou balises ?
22

• Où employer des caractères Unicode

• Text only elements (eg. lttitlegt )
• Le texte des attributs

Caractères Unicode ou balises ?
ltimg src"logo.png" alt"?????? ???????, W3C" /gt
23

• Où employer des caractères Unicode

• Text only elements (eg. lttitlegt )
• 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/Internatio
nal/questions/qa-bidi-controls.html
24

• 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
25

• Ajoutez un attribut dir aux contenants de bloc

Changer la directionalité d'un bloc
ltp dir"ltr"gt???? W3C ???????lt/pgt
26

• 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
27
Les bases de l'algorithme bidi
28

• Le typage directionnel des caractères

é
LTR
Les bases de l'algorithme bidi
29

• Le typage directionnel des caractères

ég
LTR
Les bases de l'algorithme bidi
30

• Le typage directionnel des caractères

égy
LTR
Les bases de l'algorithme bidi
31

• Le typage directionnel des caractères

égyp
LTR
Les bases de l'algorithme bidi
32

• Le typage directionnel des caractères

égypt
LTR
Les bases de l'algorithme bidi
33

• Le typage directionnel des caractères

égypte
LTR
Les bases de l'algorithme bidi
34

• Le typage directionnel des caractères

égypte
LTR
Les bases de l'algorithme bidi
?
RTL
35

• Le typage directionnel des caractères

égypte
LTR
Les bases de l'algorithme bidi
??
RTL
36

• Le typage directionnel des caractères

égypte
LTR
Les bases de l'algorithme bidi
???
RTL
37

• Passages directionnels

bahraïn ??? koweit
Les bases de l'algorithme bidi
38

• Passages directionnels

LTR
bahraïn ??? koweit
1
2
3
Les bases de l'algorithme bidi
39

• 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.
40

• Chiffres

un deux ????? 1234 ???
Les bases de l'algorithme bidi
un deux ????? ???? ???
41
Neutres situés entre deux passages de
directionalités différentes
42

• 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.
43

• Utilisez du balisage pour déclarer un nouveau
  niveau d'emboîtement directionnel

Neutres entre deux passages différents
Le titre est "????? ?????? ?????!" en arabe.
"ltspan dir"rtl" lang"ar" xmllang"ar"gt!??????
????????????lt/spangt"
44

• ou des caractères RLM ou LRM.

Neutres entre deux passages différents
Le titre est "????? ?????? ?????!" en arabe.
45
Neutres situés entre deux passages de
directionalité identique
46

• 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
47

• Utilisez un RLM ou un LRM. Pas du balisage.

The names of these states in Arabicare ???,
??????? and ?????? respectively.
Neutres entre deux passages identiques
48

• Utilisez un RLM ou un LRM. Pas du balisage.

(W3C (World Wide Web Consortium????? ?? ??????
????? ??????? ? -
.ERCIM?
Neutres entre deux passages identiques
49
Caractères miroités
50

• L'apparence des caractères miroités est
  déterminée par le contexte.

(W3C (World Wide Web Consortium????? ?? ??????
????? ??????? ? -
.ERCIM?
Caractères miroités
51

• 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
52
Emboîtement de passages directionnels
53

• Utilisez une balise pour déclarer un nouveau
  niveau d'emboîtement

Le titre est "?????? ???????, W3C" en hébreu.
Emboîtement de passages directionnels
54
Le phénomène de l' "espace manquante"
55

• 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"
56

• 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"
Consultez GEO FAQ Bidi space loss http//www.w3.o
rg/International/questions/qa-bidi-space
57

• 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
58

• Utilisez l'élément ltbdogt

Dans la phrase "W3C ,?????? ???????", l'ordre des
caractères en mémoire est le suivant
??????????? ??????????????, W?3?C?
Désactiver l'algorithme
59

• Utilisez l'élément ltbdogt

Dans la phrase "W3C ,?????? ???????", l'ordre des
caractères en mémoire est le suivant
??????????? ??????????????, W?3?C?
Désactiver l'algorithme
En XHTML 2.0, l'élément ltbdogt sera probablement
remplacé par les valeurs rlo et lro ajoutés à
l'attribut dir.
60

• 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

Outline
61
HTML et XHTML renvoyé comme du text/html
62

• 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 !

HTML et XHTML text/html
63
XHTML renvoyé comme du XML
64

• 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
XHTML renvoyé comme du XML
Consulter GEO FAQ CSS vs. markup for bidi
support http//www.w3.org/International/questions/
qa-bidi-css-markup.html
65

• 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
66
Merci
http//www.w3.org/International/
http//www.w3.org/2004/Talks/0925-ishida-ircam/bid
i.pdf