a quoi sert unicode-bidi ?

**php34000** · 02/03/2010, 15h53

Bonjour

malgrès mes recherches sur le net je n'arrive pas à synthétiser les info sur l'attribut "unicode-bidi"

Il me semble avori compris que l'on peut appliquer l'attribut "dir" aux balises HTML pour définir le sens de lecture

dans la feuille de style on indique

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;

mais a quoi sert :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

unicode-bidi: embed;

quelle est la diférence avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

unicode-bidi: bidi-override;

merci pour les info @+

**thelvin** · 02/03/2010, 22h56

Question compliquée, et je ne trouve pas de bonne référence en ligne qui ne soit pas down 9 fois sur 10...

Pour commencer, il faut comprendre que l'attribut "dir" (ou la propriété CSS correspondante, "direction",) ne définit pas à proprement parler le sens de lecture, mais un simple indice supplémentaire dans le sens de lecture.

En effet, le mécanisme bidirectionnel d'Unicode se débrouille en général très bien tout seul pour afficher de droite à gauche ce qui doit l'être et de gauche à droite ce qui doit l'être...
Sauf si on mélange les deux dans le même paragraphe. Faut-il commencer en partant du principe que le paragraphe se lit de droite à gauche, ou en partant du principe qu'il se lit de gauche à droite ? L'attribut "dir" répond à cette question. Il est utile également s'il n'y a que des caractères neutres... (Là comme ça je vois pas d'exemple, comme caractères neutres je connais que la ponctuation. Si un paragraphe ne contient que de la ponctuation, l'attribut "dir" indique dans quel sens l'afficher... Hum.)

Maintenant que c'est dit, revenons à unicode-bidi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

unicode-bidi: embed;

... Ne sert en général à rien : c'est la valeur par défaut. Ça veut dire, appliquer normalement l'algorithme bidirectionnel d'Unicode.
Disons que ça sert à revenir à la normale si on a hérité d'un bidi-override.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

unicode-bidi: bidi-override;

Signifie, afficher exactement dans le sens indiqué par dir ou par direction, en ignorant l'algorithme bidirectionnel d'Unicode.
Autrement dit, si le paragraphe est "Bonjour à tous." et qu'on lui donne un direction : rtl et un unicode-bidi: bidi-override; il s'affichera ".suot à ruojnoB"

Cela peut être utile quand on tient à afficher des caractères dans un sens qui ne leur est pas naturel.

**php34000** · 03/03/2010, 10h12

Ok merci pour les info c'est deja plus clair.

Mais quel est l'interet de préciser le code suivant (cf : firefox css)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
address, blockquote, body, caption, center, col, colgroup, dd, dir, div, dl, dt,  
fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, isindex, li, listing, map,   
marquee, menu, noframes, ol, p, plaintext, pre, table, tbody, td, tfoot, th,   
thead, tr, ul, xmp {  
  unicode-bidi: embed;  
}

**thelvin** · 03/03/2010, 11h56

Bonne remarque, je me suis trompé, en fait. La valeur par défaut est en fait une 3e valeur, "normal".

Comprendre ce que veulent dire "normal" et "embed" est subtil :

http://xhtml.com/en/css/reference/unicode-bidi/

"embed" signifie, "cet élément s'ajoute à la pile des contextes bidi, et sa direction est celle indiquée par la propriété direction."

"normal" semble vouloir dire que la propriété "direction" de l'élément est ignorée, il ne crée pas de nouveau contexte bidi à ajouter à la pile, il reste dans celui qui le contient.

Personnellement, je ne vois pas l'intérêt d'utiliser "normal"... Sauf si on a des programmes qui gèrent mal le bidi, ça limite la casse.

**php34000** · 03/03/2010, 15h56

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
address, blockquote, body, caption, center, col, colgroup, dd, dir, div, dl, dt, 
fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, isindex, li, listing, map, 
marquee, menu, noframes, ol, p, plaintext, pre, table, tbody, td, tfoot, th, 
thead, tr, ul, xmp { 
unicode-bidi: embed; 
}

a donc un intéret ???

**thelvin** · 03/03/2010, 16h23

Oui : il met tous ces éléments à embed au lieu de la valeur par défaut : normal.

Si on veut indiquer la direction d'un élément, ce n'est pas pris en compte si son unicode-bidi est à normal. En le mettant à embed dans la feuille de style firefox, ça évite de devoir le refaire à chaque fois.

**php34000** · 03/03/2010, 16h48

ok mais alors pourquoi limiter cela a certaines balise la liste est elle complete ou incomplete

pourquoi ne pas mettre : q, span, b, strong, i, cite, em, var, dfn, u, ins, s, strike, del, big, small, sub, sup, nobr, abbr

????

est ce que le fait que ces balises soient des balises inlines a un inpact différent ?
(sauf span).

je rappel que c'est la feuille de style par défault de firefox, et non un choix perso lol

c'est juste pour comprendre, il y a bien une raison ...

**thelvin** · 03/03/2010, 17h37

Personnellement aucune idée, je me suis pas posé la question, ma dernière réponse était surtout littérale

.

Si je devais supposer :

Il y a une différence entre balises inlines et balises blocks : Une balise block génère obligatoirement un nouveau paragraphe, ou en tout cas un nouveau flot de texte. Ce nouveau flot génère donc son propre contexte bidi initial, il n'a pas le choix... Du moins je ne crois pas.

Une balise inline est insérée dans un flot de texte. Qu'elle soit là ou pas n'est pas obligé de faire une différence, en particulier elle n'est pas obligée de générer un nouveau contexte bidi.

Maintenant, est-ce que ça explique le pourquoi du comment, ça, il faudrait faire des tests.

(sauf span)

Pourquoi sauf span ? C'est une balise inline.

**php34000** · 08/03/2010, 15h59

une derniere précision

y a t il une différence entre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
* [dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
* [dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;

w3 utilise [dir="rtl"] dans ca feuille de style par défault alors que firefox utilise * [dir="rtl"]

**thelvin** · 08/03/2010, 16h36

Il n'y a presque pas de différence en théorie, et en pratique il n'y en a pas du tout.

Dans le premier cas, les règles s'appliquent à tous les éléments qui ont un attribut "dir".

Dans le second cas, les règles s'appliquent à tous les éléments qui ont un attribut "dir" et au moins un parent.

Autant dire que ça ne fait pas de différence, sauf pour le cas où <html> lui-même a un attribut dir.

**php34000** · 08/03/2010, 17h11

c'est a dire que si <html> à un dir il faut mieux utiliser quoi ?

**thelvin** · 08/03/2010, 18h21

J'en sais strictement rien, mais à mon avis, le premier.

**php34000** · 09/03/2010, 08h20

Autant dire que ça ne fait pas de différence, sauf pour le cas où <html> lui-même a un attribut dir.

J'en sais strictement rien, mais à mon avis, le premier.

J'ai du loupé un épisode lol

**thelvin** · 09/03/2010, 09h54

Il y a une différence entre comprendre ce que signifie une syntaxe et comprendre toutes les conséquences de sa sémantique jusqu'au dernier détail.

Mettre un attribut dir sur <html> m'a l'air assez aléatoire car ce n'est pas un élément orienté. <title> je veux bien, <body> je veux bien, <html> ça me chiffonne. En conséquence, je suis pas sûr que ça devrait arriver, et je ne sais pas quel est le style le plus approprié pour ce cas.

**php34000** · 09/03/2010, 11h05

et pour body

**thelvin** · 09/03/2010, 11h58

Pour <body> les deux sont équivalents.

Dis, si on savait où tu veux en venir avec tout ça, ce serait un peu plus simple de réfléchir à la question.

**php34000** · 09/03/2010, 14h13

je souhaite decortiqué la feuille de style CSS par défault de firefox pour créer ma propre feuille de style par défault.

Une feuille de style qui redéfinit toutes les balies pour avoir une compatibilité maximale avec les différents navigateur (plutot que de faire une resert.css).

Cela oblige a se poser toutes les questions et a ne pas laisser le navigateur interprété a ca magnière les balises.

Et puis cela est un bon exercices pour apprendre lol

**Macmillenium** · 09/03/2010, 15h35

Tu ferais mieux de commencer par lire les spécifications CSS2 ou plus récent si tu préfères.

D'autre part, il est inutile de penser à surclasser toutes les règles définies dans la feuille de style par défaut du navigateur, fais plutôt une recherche sur "reset CSS", tu comprendras certainement mieux le principe.

**Erwan31** · 09/03/2010, 18h39

Envoyé par thelvin

Il y a une différence entre balises inlines et balises blocks : Une balise block génère obligatoirement un nouveau paragraphe, ou en tout cas un nouveau flot de texte. Ce nouveau flot génère donc son propre contexte bidi initial, il n'a pas le choix... Du moins je ne crois pas.

Une balise inline est insérée dans un flot de texte. Qu'elle soit là ou pas n'est pas obligé de faire une différence, en particulier elle n'est pas obligée de générer un nouveau contexte bidi.

Salut,
tout d'abord il est plus juste de parler d'élément ici, la balise étant juste <p> ou </p> et l''élément <p>...</p> ou p selon la DTD.

Pour info et pour éviter les confusions, il n'existe pas d'élément de type block (ou inline) au sens HTML à proprement dit, mais seulement dans leur sens CSS, la spec HTML4 ayant récupérée cette désignation issues de la spec CSS1 pour pouvoir regrouper les éléments selon leur modèle de mise en forme (block ou inline).

Il faut donc entendre "élément de type block" par élément générant une boîte de bloc, c-a-d doté d'un display (via la CSS du navigateur ou son moteur de rendu) générant un retour chariot avant et après l'élément (ce qui englobe les valeur de display suivante : block, list-item, table, et run-in (qd x'est une boîte de bloc), CSS3 y ajoute les valeurs table-machin générant une boîte de bloc.

Quant au éléments inline, ceux-ci génèrent une boîte en-ligne grâce aux display : inline, inline-block, inline-table principalement.

Pour catégoriser les éléments, les DTD HTML4 regroupent les élément sous différentes entités :
Les 2 principales entités regroupant toutes les autres sont
%head.misc (tous les éléments présent dans le head) et %flow (%block + %inline), les entités %block et %inline faisant alors référence au modèle de mise en forme CSS associé.

Notons qu'HTML5 ne retient pas cette catégorisation binaire block/inline, et que "élément de type/niveau block/inline" est remplacé le plus souvent dans CSS3 par boîte de niveau inline/block sans doute pour éviter les amalgame avec les éléments HTML.

**Macmillenium** · 10/03/2010, 15h14

Hello,

Envoyé par Erwan31

on peut oublier run-in que CSS3 ne récupère pas

Ah bon ? pourtant dans le draft CSS3 run-in figure bien sur la liste des valeurs possibles pour la propriété display

Envoyé par Erwan31

qui ajoute les valeurs table-machin générant une boîte de bloc.

C'est à dire ?

Envoyé par Erwan31

Pour catégoriser les éléments, les DTD HTML4 regroupent les élément sous différentes entités :
Les 2 principales entités regroupant toutes les autres sont
%head.misc (tous les éléments présent dans le head) et %flow (%block + %inline), les entités %block et %inline faisant alors référence au modèle de mise en forme CSS associé.

Je vais juste entrer un tout petit peu dans les détails

1. Pour info, %block et %inline sont ce qu'on appelle des modèles de contenu (tu le sais déjà

) :

Envoyé par HTML4 DTD

HTML has two basic content models:
%inline; character level elements and text strings
%block; block-like elements e.g. paragraphs and lists

2. La DTD HTML4 définit les groupes d'appartenance de la manière suivante :

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

%block regroupe tous les éléments de niveau block.

3. Pour déterminer les imbrications autorisées :

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->

Veut dire que DIV peut contenir les éléments appartenant au groupe %flow => ayant un modèle de contenu %block ou %inline => tous les éléments.

Bref, la DTD s'arrête avec HTML4, cela va bientôt devenir obsolète

Envoyé par Erwan31

Notons qu'HTML5 ne retient pas cette catégorisation binaire block/inline

En effet, HTML 5 propose un nouveau schéma de structuration des données.