Cr éer des pages XHTML/HTML bidi

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

http://www.w3.org/International/articles/inline-bidi-markup/

http://www.w3.org/International/geo/html-tech/t

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


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

PDF

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


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


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)

http://www.w3.org/International/questions/qa-bidi-controls.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


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


égy LTR

Les

base

s de

l'al

gorit

hme

bidi

Les

base

s de

l'al

gorit

hme


égyp LTR

Les

base

s de

l'al

gorit

hme

bidi

Les

base

s de

l'al

gorit

hme


égypt LTR

Les

base

s de

l'al

gorit

hme

bidi

Les

base

s de

l'al

gorit

hme


égypte LTR

Les

base

s de

l'al

gorit

hme

bidi

Les

base

s de

l'al

gorit

hme


égypte

م

LTR

RTL

Les

base

s de

l'al

gorit

hme

bidi

Les

base

s de

l'al

gorit

hme


مص

LTR

RTL

égypte

Leمصرs

base

s de

l'al

gorit

hme

bidi

Les

base

s de

l'al

gorit

hme


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…


✗


✓

"&rlm;!

الويب

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.


✗


✓

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.

✗


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.


are البحرين, مصر and الكويت respectively.


are البحرين ,مصر and الكويت respectively.

✓

✗

W3C &rlm;(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 מעביר את -שירותי הארחה באירופה ל


.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 מעביר את -שירותי הארחה באירופה ל


.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

http://www.w3.org/International/questions/qa-bidi-space

Out

line

Out

line


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


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

http://www.w3.org/International/questions/qa-bidi-css-markup.html

Out

line

Out

line



MerciMerci

http://www.w3.org/International/

http://www.w3.org/2004/Talks/0925-ishida-ircam/bidi.pdf

http://www.w3.org/International/

http://www.w3.org/2004/Talks/

Documents

Cr éer des pages XHTML/HTML bidi