Spécifications CSS


9 Le modèle de mise en forme visuel

Contenu

9.1 Introduction au modèle de mise en forme visuel

Ce chapitre 9 et le suivant décrivent le modèle de mise en forme visuel : l'interprétation par un agent utilisateur de l'arbre du document et du rendu de celui-ci par un média visuel .

Dans ce mod√®le, chaque √©l√©ment de l'arbre produit z√©ro ou plusieurs bo√ģtes selon le mod√®le de la bo√ģte. La construction de ces bo√ģtes est gouvern√©e par¬†:

Les propriétés définies dans ce chapitre et le suivant concernent les médias continus et les médias paginés. Cependant, les propriétés de marge ont une signification particulière pour les médias paginés (voir le modèle de la page pour les détails).

Le modèle de mise en forme visuel ne précise pas tous les aspects de la mise en forme (ex. il ne spécifie pas d'algorithme pour l'interlettrage). Les agents utilisateurs conformes peuvent se comporter différemment pour les points de formatage qui ne sont pas abordés dans cette spécification.

9.1.1 La zone de visualisation

Les agents utilisateurs pour m√©dias continus offrent g√©n√©ralement une zone de visualisation (une fen√™tre ou une autre zone d'affichage sur un √©cran) gr√Ęce auquel les utilisateurs peuvent consulter un document. Les agents utilisateurs peuvent changer l'affichage du document quand cet espace est redimensionn√© (voir le bloc conteneur initial). Si la zone de visualisation est plus petite que le bloc conteneur initial, l'agent utilisateur devrait proposer un m√©canisme de d√©filement. Dans un canevas, il ne peut y avoir plus d'une zone de visualisation, les agents utilisateurs pouvant n√©anmoins rendre plusieurs canevas (c.√†.d, pr√©senter des vues diff√©rentes du m√™me document).

9.1.2 Les blocs conteneurs

En CSS2, les positions et les tailles d'un grand nombre de bo√ģtes sont calcul√©es en fonction des bords d'une bo√ģte rectangulaire¬†; on l'appelle un bloc conteneur. La plupart des bo√ģtes g√©n√©r√©es se comportent comme des blocs conteneurs pour les bo√ģtes qui en sont les descendantes¬†: on dit que la bo√ģte "√©tablit" le bloc conteneur de ses descendants. L'expression "le bloc conteneur d'une bo√ģte" signifie "le bloc conteneur dans lequel se trouve la bo√ģte", et non la propre bo√ģte que celle-ci g√©n√®re.

Chaque bo√ģte se voit attribuer une position vis-√†-vis de son bloc conteneur, celle-ci n'est pas forc√©ment confin√©e √† l'int√©rieur de ce conteneur et peut en d√©border.

La racine de l'arbre du document g√©n√®re une bo√ģte qui fait office de bloc conteneur initial pour les constructions subs√©quentes.

On peut spécifier la largeur du bloc conteneur initial de l'élément racine avec la propriété 'width'. Quand celle-ci a la valeur 'auto', c'est l'agent utilisateur qui fournit cette largeur initiale (par exemple en utilisant la largeur effective de la zone de visualisation).

On peut aussi spécifier la hauteur du bloc conteneur initial de l'élément racine avec la propriété 'height'. Quand celle-ci a la valeur 'auto', la hauteur du bloc conteneur va s'allonger pour prendre en compte le contenu du document.

Le bloc conteneur initial ne peut pas être positionné ou être flottant (c.à.d., les agents utilisateurs ignorent les propriétés 'position' et 'float' de l'élément racine).

Les détails concernant la méthode de calcul des dimensions d'un bloc conteneur sont abordés dans le chapitre 10 suivant.

9.2 Le contr√īle de la g√©n√©ration de la bo√ģte

Les paragraphes suivants d√©crivent les types de bo√ģtes susceptibles d'√™tre g√©n√©r√©es en CSS2. Le type d'une bo√ģte affecte en partie son comportement dans le mod√®le de mise en forme visuel. La propri√©t√© 'display', d√©crite plus loin, sp√©cifie le type d'une bo√ģte.

9.2.1¬†Les √©l√©ments de type bloc et leurs bo√ģtes

Les √©l√©ments de type bloc sont ceux des √©l√©ments du document source dont le rendu visuel forme un bloc (ex. les paragraphes). La propri√©t√© 'display' admet des valeurs qui conf√®rent un type bloc √† un √©l√©ment¬†: 'block', 'list-item', 'compact' et 'run-in' (dans certains cas¬†; voir les passages traitant des bo√ģtes compactes et des bo√ģtes en enfilade), et 'table'.

Les √©l√©ments de type bloc g√©n√®rent une bo√ģte de bloc principale qui ne contient que des bo√ģtes de bloc. La bo√ģte de bloc principale √©tablit le bloc conteneur des bo√ģtes des descendants et du contenu g√©n√©r√©, c'est aussi elle qui intervient dans le sch√©ma de positionnement. La bo√ģte de bloc principale participe au contexte de mise en forme de type bloc.

D'autres √©l√©ments de type bloc g√©n√®rent des bo√ģtes suppl√©mentaires hors de la bo√ģte principale¬†: ceux des √©l√©ments qui ont une valeur 'list-item' et ceux qui ont des marqueurs. Ces bo√ģtes se positionnent en fonction de la bo√ģte principale.

Les bo√ģtes de bloc anonymes

Dans un document tel que celui-ci :

<DIV>
  Du texte
  <P>Plus de texte
</DIV>
√Ä supposer que les √©l√©ments DIV et P aient tous deux la valeur 'display: block', l'√©l√©ment DIV accueille √† la fois un contenu de type en-ligne et un contenu de type bloc. Pour illustrer leur formatage, nous consid√©rons que "Du texte" est contenu dans une bo√ģte de bloc anonyme.

diagram showing the three boxes for the example above   [D]

Sch√©ma montrant trois bo√ģtes, l'une d'entre elles est anonyme.

Autrement dit, quand une bo√ģte de bloc (comme ici celle produite par l'√©l√©ment DIV) contient une autre bo√ģte de bloc (comme l'√©l√©ment P), alors on la contraint √† n'avoir que des bo√ģtes de bloc, les √©l√©ments de type en-ligne √©tant emball√©s dans une bo√ģte de bloc anonyme.

Exemple(s) :

Ce modèle s'appliquerait à l'exemple suivant :

/* Note : les agents utilisateurs en HTML peuvent ne pas respecter ces règles */
BODY { display: inline }
P    { display: block }

Ces règles étant appliquées à ce document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Un texte anonyme interrompu par un bloc</TITLE>
</HEAD>
<BODY>
Voici un texte anonyme avant le P.
<P>Ceci est le contenu de P.</P>
Voici un texte anonyme après le P.
</BODY>

L'√©l√©ment BODY contient un morceau (not√© C1) de texte anonyme suivi par un √©l√©ment de type bloc, suivi encore par un autre morceau (C2) de texte anonyme. La mise en forme finale aboutirait √† une bo√ģte de bloc anonyme pour l'√©l√©ment BODY, celle-ci contiendrait une bo√ģte de bloc anonyme enveloppant C1, la bo√ģte de bloc de l'√©l√©ment P et une autre bo√ģte de bloc anonyme pour C2.

Les propri√©t√©s des bo√ģtes anonymes h√©ritent des valeurs des propri√©t√©s de la bo√ģte non-anonyme qui les contient (par exemple dans le sch√©ma au-dessus, celle de l'√©l√©ment DIV). Les propri√©t√©s qui ne sont pas h√©rit√©es conservent leur valeur initiale. Par exemple dans le sch√©ma, la bo√ģte anonyme h√©rite de la police de l'√©l√©ment DIV mais ses marges auront une valeur de 0.

9.2.2¬†Les √©l√©ments de type en-ligne et leurs bo√ģtes

Les √©l√©ments de type en-ligne sont ceux des √©l√©ments du document source qui n'ont pas la forme de nouveaux blocs de contenu¬†; ce contenu est distribu√© en lignes (ex. des parties de texte mises en exergue au sein d'un paragraphe, des images dans une ligne, etc.). La propri√©t√© 'display' admet des valeurs qui conf√®rent un type en-ligne √† un √©l√©ment¬†: 'inline', 'inline-table', 'compact' et 'run-in' (dans certains cas, voir les passages traitant des bo√ģtes compactes et des bo√ģtes en enfilade). Les √©l√©ments de type en-ligne g√©n√®rent des bo√ģtes en-ligne.

Les bo√ģtes en-ligne peuvent participer √† plusieurs contextes de mise en forme¬†:

  • Dans une bo√ģte de bloc, celle-ci r√©pond √† un contexte de mise en forme en-ligne¬†;
  • Quand c'est une bo√ģte en-ligne compacte, elle se positionne dans la marge d'une bo√ģte de bloc¬†;
  • Les bo√ģtes des marqueurs se positionnent aussi en dehors d'une bo√ģte de bloc.

Les bo√ģtes en-ligne anonymes

Dans cet extrait de document :

<P>Du texte <EM>accentué</em> en exemple</P>

L'√©l√©ment P g√©n√®re une bo√ģte de bloc contenant plusieurs bo√ģtes en-ligne. Une bo√ģte en-ligne pour "accentu√©" est produite par l'√©l√©ment de type en-ligne (EM), mais c'est un √©l√©ment de type bloc (P) qui g√©n√®re les autres bo√ģtes en-ligne pour "Du texte" et "en exemple". Ces derni√®res sont appel√©es bo√ģtes en-ligne anonymes, car elles ne sont pas associ√©es √† un √©l√©ment en-ligne.

Les bo√ģtes de ce genre h√©ritent des propri√©t√©s de celles de leur parent de type bloc. Les propri√©t√©s non transmissibles conservent leur valeur initiale. Dans l'exemple pr√©c√©dent, la couleur des bo√ģtes anonymes en-ligne initiales est h√©rit√©e de l'√©l√©ment P, mais leurs fonds restent transparents.

Pour cette sp√©cification, on emploiera simplement l'expression bo√ģte anonyme pour d√©signer les bo√ģtes anonymes de type en-ligne ou bloc, quand le contexte d√©termine sans ambigu√Įt√© leur type.

D'autres types de bo√ģtes anonymes sont produites lors de la mise en forme des tables.

9.2.3 Les bo√ģtes compactes

Le comportement d'une bo√ģte compacte se d√©finit ainsi¬†:

  • Quand une bo√ģte de bloc (celle-ci n'√©tant pas flottante ni n'ayant un positionnement absolu) suit une bo√ģte compacte, celle-ci prend la forme d'une bo√ģte en-ligne sur une ligne. La largeur de la bo√ģte r√©sultante est compar√©e √† l'une des marges lat√©rales de la bo√ģte de bloc. On d√©termine laquelle des marges gauche ou droite employer selon la valeur de la propri√©t√© 'direction' de l'√©l√©ment qui g√©n√®re le bloc conteneur de la bo√ģte compacte et des suivantes. Si la largeur de la bo√ģte en-ligne est inf√©rieure ou √©gale √† celle de la marge, celle-ci est positionn√©e dans la marge de la fa√ßon d√©crite juste apr√®s.
  • Autrement, la bo√ģte compacte devient une bo√ģte de bloc.

La position de la bo√ģte compacte dans la marge est la suivante¬†: elle se trouve en dehors (√† droite ou √† gauche) de la premi√®re bo√ģte de ligne du bloc, et elle en affecte le calcul de la hauteur. La propri√©t√© 'vertical-align' de la bo√ģte compacte d√©termine sa position verticale en fonction de cette bo√ģte de ligne. La bo√ģte compacte a toujours une position horizontale dans la marge de la bo√ģte de bloc.

Un √©l√©ment dont le formatage ne tient pas sur une ligne ne peut pas se trouver dans la marge de l'√©l√©ment qui le suit. Par exemple en HTML, un √©l√©ment avec une valeur 'compact' et qui contient un √©l√©ment BR aura toujours un type de bo√ģte bloc (en consid√©rant que le comportement par d√©faut de BR consiste en l'insertion d'un caract√®re de mise √† la ligne). Pour le placement d'un texte sur plusieurs lignes dans la marge, la propri√©t√© 'float' est souvent plus appropri√©e.

Voici l'illustration d'une bo√ģte compacte¬†:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Un exemple de bo√ģte compacte</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Court
        <DD><P>Ici une description.
      <DT>Trop long pour tenir dans la marge
        <DD><P>Ici une autre description.
    </DL>
  </BODY>
</HTML>

Cet exemple pourrait être rendu ainsi :

Court    Ici une description.

Trop long pour la marge
         Ici une autre description.

On peut utiliser la propriété 'text-align' pour aligner l'élément compacte dans la marge : contre le bord gauche de la marge (avec la valeur 'left'), contre le bord droit ('right') ou au centre ('center'). La valeur 'justify' ne s'applique pas, celle-ci sera considérée comme étant 'left' ou 'right', selon la valeur de la propriété 'direction' de l'élément de type bloc dans les marges duquel l'élément compact se trouve (si la valeur de la propriété 'direction' est 'ltr', ce sera 'left', si c'est 'rtl', ce sera 'right').

Consulter le chapitre traitant du contenu g√©n√©r√© pour des informations sur l'interaction entre les bo√ģtes compactes et le contenu g√©n√©r√©.

9.2.4 Les bo√ģtes en enfilade

Le comportement d'une bo√ģte en enfilade se d√©finit ainsi¬†:

  • Quand une bo√ģte de bloc (celle-ci n'√©tant pas flottante ni n'ayant un positionnement absolu) suit la bo√ģte en enfilade, cette derni√®re devient la premi√®re bo√ģte en-ligne de la bo√ģte de bloc¬†;
  • Autrement, la bo√ģte en enfilade devient une bo√ģte de bloc.

Une bo√ģte en enfilade pr√©sente un int√©r√™t pour les titres en enfilade, ainsi cet exemple¬†:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Un exemple de bo√ģte en enfilade</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
    <H3>Un titre en enfilade.</H3>
    <P>Et un paragraphe qui le suit.
  </BODY>
</HTML>

Cet exemple pourrait être rendu ainsi :

  Un titre en enfilade. Et un
  paragraphe qui le suit.

Les propri√©t√©s de l'√©l√©ment en enfilade sont h√©rit√©es de son parent dans la source, et non de celles de la bo√ģte de bloc dont il fait visuellement partie.

Consulter le chapitre traitant du contenu g√©n√©r√© pour des informations sur l'interaction entre les bo√ģtes en enfilade et le contenu g√©n√©r√©.

9.2.5 La propriété 'display'

'display'
Valeur :  inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initiale :  inline
S'applique à :  tous les éléments
Héritée :  non
Pourcentage :  sans objet
Médias :  all

Les valeurs de cette propriété ont le sens suivant :

block
induit un √©l√©ment √† g√©n√©rer une bo√ģte de bloc principale¬†;
inline
induit un √©l√©ment √† g√©n√©rer une ou plusieurs bo√ģtes en-ligne¬†;
list-item
induit un √©l√©ment (ex. l'√©l√©ment LI en HTML) √† g√©n√©rer une bo√ģte de bloc principale et une bo√ģte en-ligne pour un item de liste¬†; Consulter la partie traitant des listes pour des informations et des exemples de mise en forme de celles-ci¬†;
marker
Cette valeur pr√©cise la qualit√© de marqueur du contenu g√©n√©r√© apparaissant avant ou apr√®s une bo√ģte. Elle ne devrait √™tre employ√©e qu'avec les pseudo-√©l√©ments¬†:before et¬†:after li√©s √† des √©l√©ments de type bloc. Dans certains cas, cette valeur est interpr√©t√©e comme 'inline'. Consulter le chapitre sur les marqueurs pour plus d'informations¬†;
none
cette valeur fait qu'aucune bo√ģte n'est g√©n√©r√©e par l'√©l√©ment dans la structure de formatage (c.√†.d., cet √©l√©ment n'a pas d'influence sur la mise en forme du document). Les √©l√©ments qui en descendent ne g√©n√®rent pas de bo√ģtes non plus¬†; on ne peut plus modifier leur comportement avec la propri√©t√© 'display'.

Noter qu'une valeur 'none' ne cr√©e pas de bo√ģte invisible, elle ne cr√©e pas de bo√ģte du tout. CSS comprend des m√©canismes permettant la g√©n√©ration de bo√ģtes dans la structure de formatage, bo√ģtes qui influencent la mise en forme mais qui ne sont pas visibles. Consulter la partie traitant de la visibilit√© pour les d√©tails¬†;

run-in et compact
ces valeurs cr√©ent une bo√ģte de bloc ou en-ligne, selon le contexte. Les propri√©t√©s s'appliquent aux bo√ģtes compactes ou en enfilade en fonction de leur statut final (types bloc ou en-ligne). Par exemple, la propri√©t√© 'white-space' ne s'applique que si la bo√ģte a un type bloc¬†;
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell et table-caption
ces valeurs donnent à un élément le comportement de celui d'une table (avec les restrictions décrites au chapitre sur les tables).

Noter que, malgré la valeur initiale 'inline' de la propriété 'display', les règles de la feuille de style par défaut de l'agent utilisateur peuvent surclasser celle-ci. Voir dans l'annexe traitant de la proposition de feuille de style pour HTML 4.0.

Exemple(s) :

Voici des exemples pour la propriété 'display' :

P   { display: block }
EM  { display: inline }
LI  { display: list-item } 
IMG { display: none }      /* Les images ne sont pas affichées */

Les agents utilisateurs conformes pour HTML peuvent ignorer la propriété 'display'.

9.3 Les schémas de positionnement

En CSS2, trois sch√©mas de positionnement peuvent d√©terminer l'emplacement d'une bo√ģte¬†:

  1. Le flux normal. En CSS2, celui-ci inclus le formatage en bloc des bo√ģtes de bloc, le formatage en-ligne des bo√ģtes en-ligne, le positionnement relatif des bo√ģtes de bloc ou en-ligne, et le positionnement des bo√ģtes compactes et en enfilade¬†;
  2. Les flottants. Dans ce mod√®le, une bo√ģte est d'abord positionn√©e selon le flux normal, puis elle en est extirp√©e et repouss√©e le plus possible vers la droite ou la gauche. Le contenu peut s'√©couler le long d'un flottant.
  3. Le positionnement absolue. Dans ce mod√®le, une bo√ģte est compl√®tement retir√©e du flux normal (elle n'a pas d'influence sur les √©l√©ments de m√™me degr√© de parent√© survenant apr√®s elle), et est positionn√©e en fonction d'un bloc conteneur.
Remarque : Les schémas de positionnement CSS2 aident les auteurs à rendre leurs documents plus accessibles, leur évitant de tricher avec le balisage pour obtenir des effets de mise en page (ex. les images transparentes).

9.3.1 Le choix d'un schéma de positionnement : la propriété 'position'

Les propri√©t√©s 'position' et 'float' d√©terminent lequel des algorithmes de positionnement employer pour le calcul de l'emplacement d'une bo√ģte.

'position'
Valeur :  static | relative | absolute | fixed | inherit
Initiale :  static
S'applique à :  tous les éléments, sauf à un contenu généré
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Les valeurs de cette propriété ont le sens suivant :

static
La bo√ģte est normale, plac√©e selon le flux normal. Les propri√©t√©s 'left', 'top', 'right' et 'bottom' ne s'y appliquent pas¬†;
relative
L'emplacement de la bo√ģte est calcul√© selon le flux normal (ce qu'on appelle la position dans le flux normal). Ensuite la bo√ģte est d√©plac√©e relativement √† cette position dans le flux normal. Quand une bo√ģte B a une position relative, l'emplacement de la bo√ģte suivante est calcul√© comme si B n'avait pas √©t√© d√©plac√©e¬†;
absolute
L'emplacement de la bo√ģte (et √©ventuellement sa taille) est d√©termin√© par les propri√©t√©s 'left', 'right', 'top', et 'bottom'. Celles-ci sp√©cifient les d√©placements en fonction du bloc conteneur. Les bo√ģtes en position absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres √©l√©ments de m√™me degr√© de parent√©. Bien que les bo√ģtes en position absolue aient √©galement des marges, celles-ci ne fusionnent pas avec d'autres marges¬†;
fixed
L'emplacement de la bo√ģte est calcul√© comme pour 'absolute', mais la bo√ģte est en plus fixe par rapport √† une r√©f√©rence donn√©e. Pour les m√©dias continus, par rapport √† la zone de visualisation (la bo√ģte ne bouge pas lors d'un d√©filement). Pour les m√©dias pagin√©s, par rapport √† la page, m√™me si celle-ci appara√ģt dans une zone de visualisation (par exemple lors d'un aper√ßu avant impression). Les auteurs peuvent souhaiter un tel comportement en fonction d'un m√©dia donn√©. Par exemple, une bo√ģte qui reste fixe en haut d'une zone de visualisation sur un √©cran, mais pas en haut de chaque page imprim√©e. Ils peuvent indiquer des sp√©cifications s√©par√©es √† l'aide d'une r√®gle @media comme ceci¬†:

Exemple(s) :

   
@media screen { 
  H1#first { position: fixed } 
}
@media print { 
  H1#first { position: static }
}

9.3.2 Les d√©calages des bo√ģtes¬†: les propri√©t√©s 'top', 'right', 'bottom', 'left'

¬ę¬†errata¬†: Voir la proposition pour la nouvelle valeur 'static-position'¬†¬Ľ

On dit qu'un √©l√©ment est positionn√© quand la valeur de sa propri√©t√© 'position' est autre que 'static'. Ces √©l√©ments g√©n√®rent des bo√ģtes positionn√©es qui sont dispos√©es selon les quatre propri√©t√©s suivantes¬†:

'top'
Valeur :  <longueur> | <pourcentage> | auto | inherit
Initiale :  auto
S'applique à :  ceux des éléments positionnés
Héritée :  non
Pourcentage :  se rapporte à la hauteur du bloc conteneur
Médias :  visuel

Cette propri√©t√© d√©finit le d√©calage du bord haut du contenu de la marge d'une bo√ģte sous le bord haut de la bo√ģte du bloc conteneur.

'right'
Valeur :  <longueur> | <pourcentage> | auto | inherit
Initiale :  auto
S'applique à :  ceux des éléments positionnés
Héritée :  non
Pourcentage :  se rapporte à la largeur du bloc conteneur
Médias :  visuel

Cette propri√©t√© d√©finit le d√©calage du bord droit du contenu de la marge d'une bo√ģte √† gauche du bord droit de la bo√ģte du bloc conteneur.

'bottom'
Valeur :  <longueur> | <pourcentage> | auto | inherit
Initiale :  auto
S'applique à :  ceux des éléments positionnés
Héritée :  non
Pourcentage :  se rapporte à la hauteur du bloc conteneur
Médias :  visuel

Cette propri√©t√© d√©finit le d√©calage du bord bas du contenu de la marge d'une bo√ģte au-dessus du bord bas de la bo√ģte du bloc conteneur.

'left'
Valeur :  <longueur> | <pourcentage> | auto | inherit
Initiale :  auto
S'applique à :  ceux des éléments positionnés
Héritée :  non
Pourcentage :  se rapporte à la largeur du bloc conteneur
Médias :  visuel

Cette propri√©t√© d√©finit le d√©calage du bord gauche du contenu de la marge d'une bo√ģte √† droite du bord gauche de la bo√ģte du bloc conteneur.

Les significations des valeurs de ces quatre propriétés sont :

<longueur>
Le décalage est représenté par une distance fixe à partir du bord de référence ;
<pourcentage>
Le décalage est représenté par un pourcentage de la largeur du bloc conteneur (pour les propriétés 'left' et 'right') ou la hauteur de celui-ci (pour les propriétés 'top' et 'bottom'). Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (par exemple celle-ci dépendant de la hauteur du contenu), les propriétés 'top' et 'bottom' sont censées avoir la valeur 'auto' ;
auto
L'effet de cette valeur dépend des propriétés associées, lesquelles ont aussi cette même valeur 'auto'. Voir les passages traitant de la largeur et de la hauteur des éléments non-remplacés en position absolue.

Pour les bo√ģtes en position absolue, les d√©calages sont d√©termin√©s par rapport √† la bo√ģte du bloc conteneur. Pour les bo√ģtes en position relative, ils sont d√©termin√©s par rapport aux bords externes de la bo√ģte elle-m√™me (c.√†.d., la bo√ģte re√ßoit un emplacement dans le flux normal, puis elle est d√©cal√©e de cet emplacement en fonction des valeurs des propri√©t√©s de position).

9.4 Le flux normal

Les bo√ģtes dans un flux normal appartiennent √† un contexte de mise en forme, bloc ou en-ligne, mais pas les deux en m√™me temps. Les bo√ģtes de bloc participent √† un contexte de mise en forme bloc, les bo√ģtes en-ligne √† un contexte de mise en forme en-ligne.

9.4.1 Le contexte de mise en forme bloc

Dans un contexte de mise en forme bloc, les bo√ģtes sont plac√©es l'une apr√®s l'autre, verticalement, en commen√ßant en haut du bloc conteneur. Les propri√©t√©s de marge r√©gissent la distance verticale entre deux blocs successifs. Dans ce contexte de mise en forme, les marges verticales de deux bo√ģtes de bloc adjacentes fusionnent.

En contexte bloc, le bord externe gauche de chaque bo√ģte touche le bord gauche de son bloc conteneur (c'est le bord droit dans un formatage de droite √† gauche). Ceci reste vrai en pr√©sence de flottants (bien que le contenu de l'aire de la bo√ģte puissent r√©tr√©cir de ce fait).

Pour des informations au sujet des fins de page avec les médias paginés, consulter le passage traitant des fins de page admises.

9.4.2 Le contexte de mise en forme en-ligne

Dans un contexte de mise en forme en-ligne, les bo√ģtes sont plac√©es horizontalement, l'une apr√®s l'autre, en commen√ßant en haut du bloc conteneur. Les marges, bordures et espacements sont conserv√©es entre celles-ci. Les bo√ģtes peuvent √™tre align√©es verticalement de diff√©rentes fa√ßons¬†: selon leurs hauts ou leurs bas, ou selon les lignes de base du texte qui y est contenu. On appelle l'aire rectangulaire, qui contient les bo√ģtes sur une ligne, une bo√ģte de ligne.

La largeur d'une bo√ģte de ligne d√©pend de son bloc conteneur. La hauteur d'une bo√ģte de ligne est d√©termin√©e en fonction des r√®gles pr√©cis√©es au chapitre sur les calculs de la hauteur de ligne. La hauteur d'une bo√ģte de ligne est toujours suffisante pour chacune des bo√ģtes que celle-ci contient. Cependant, elle peut √™tre plus grande que la plus haute des bo√ģtes contenues (quand, par exemple, celles-ci sont align√©es selon leur ligne de base). L'alignement vertical d'une bo√ģte dont la hauteur est inf√©rieure √† celle de sa bo√ģte de ligne, est d√©termin√© par la propri√©t√© 'vertical-align'.

Quand des bo√ģtes en-ligne ne peuvent pas tenir dans une seule bo√ģte de ligne, celles-ci se r√©partissent sur deux ou plusieurs bo√ģtes de ligne empil√©es verticalement. Ainsi, un paragraphe consiste en un empilement vertical de bo√ģtes de ligne. Ces bo√ģtes de ligne s'empilent les unes sur les autres, sans s√©paration entre elles, et elles ne se chevauchent jamais.

En g√©n√©ral, le bord gauche d'une bo√ģte de ligne touche celui de son bloc conteneur. Cependant, il peut se trouver des bo√ģtes flottantes entre le bord du bloc conteneur et celui de la bo√ģte de ligne. Ainsi, bien que, dans le m√™me contexte de mise en forme en-ligne, les bo√ģtes de ligne aient la plupart du temps la m√™me largeur, celle-ci peut varier si l'espace horizontal disponible se r√©duit du fait de la pr√©sence de ces flottants. Par contre, les bo√ģtes de ligne varient g√©n√©ralement en hauteur dans le m√™me contexte de mise en forme en-ligne (par exemple une ligne peut contenir une image de grande hauteur, les autres ne contenant que du texte).

Quand la largeur totale des bo√ģtes en-ligne est inf√©rieure √† celle de la bo√ģte de ligne qui les contient, leur distribution horizontale dans celle-ci est d√©termin√©e par la propri√©t√© 'text-align'. Si cette propri√©t√© a la valeur 'justify', l'agent utilisateur peut √©tirer les bo√ģtes en-ligne en cons√©quence.

La largeur d'une bo√ģte en-ligne ne pouvant exc√©der celle d'une bo√ģte de ligne, celles qui sont trop longues sont d√©coup√©es en plusieurs bo√ģtes qui sont r√©parties sur plusieurs bo√ģtes de ligne. Quand une bo√ģte en ligne est d√©coup√©e, les marges, les bordures et l'espacement n'ont pas de repr√©sentation visuelle √† l'endroit o√Ļ la coupure intervient. Les marges, bordures et espacements n'ont pas de repr√©sentation visuelle √† l'endroit o√Ļ ces coupures interviennent. Les formatages des marges, bordures et espacements peuvent ne pas √™tre enti√®rement d√©finis si la coupure intervient dans une imbrication bi-directionnelle.

Les bo√ģtes en-ligne peuvent aussi √™tre d√©coup√©es √† l'int√©rieur d'une m√™me bo√ģte de ligne du fait du traitement bi-directionnel du texte.

Voici un exemple d'assemblage de bo√ģte en-ligne. Le paragraphe suivant (produit par l'√©l√©ment HTML de type bloc P) contient un texte anonyme parsem√© d'√©l√©ments EM et STRONG¬†:

<P>Plusieurs <EM>mots accentués</EM> apparaissent
<STRONG>dans cette</STRONG> phrase.</P>

L'√©l√©ment P g√©n√®re une bo√ģte de bloc qui contient cinq bo√ģtes en-ligne, dont trois sont anonymes¬†:

  • Anonyme¬†: "Plusieurs"
  • EM¬†: "mots accentu√©s"
  • Anonyme¬†: "apparaissent"
  • STRONG¬†: "dans cette"
  • Anonyme¬†: "phrase."

Pour la mise en forme du paragraphe, l'agent utilisateur fait glisser les cinq bo√ģtes dans des bo√ģtes de ligne. Ici, la bo√ģte g√©n√©r√©e par l'√©l√©ment P √©tablit le bloc conteneur pour les bo√ģtes de ligne. Si celui-ci est suffisamment grand, toutes les bo√ģtes de ligne vont pouvoir tenir dans une seule bo√ģte¬†:

 Plusieurs mots accentués apparaissent dans cette phrase.

Dans le cas contraire, les bo√ģtes en-ligne seront d√©coup√©es et r√©parties sur plusieurs bo√ģtes de ligne. Le paragraphe pr√©c√©dent pourrait √™tre d√©coup√© comme ceci¬†:

Plusieurs mots accentués apparaissent
dans cette phrase.
ou comme cela :
Plusieurs mots  
accentués apparaissent dans cette 
phrase.

Dans ce dernier exemple, la bo√ģte de l'√©l√©ment EM a √©t√© d√©coup√©e en deux bo√ģtes EM (appelons-les "morceau1" et "morceau2"). Les marges, bordures, espacements ou encore les ornements de texte ne produisent aucun effet visible apr√®s "morceau1" ou avant "morceau2".

Voyons cet exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemple de flot en-ligne sur plusieurs lignes</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Il y a plusieurs <EM>mots accentués</EM> ici.</P>
  </BODY>
</HTML>

D√©pendant de la largeur de l'√©l√©ment P, les bo√ģtes pourraient √™tre r√©parties comme ceci¬†:

Image montrant l'effet d'un saut de ligne sur l'affichage des marges, bordures et espacement.   [D]

  • La marge s'ins√®re avant "mots" et apr√®s "accentu√©s".
  • L'espacement s'ins√®re √† gauche, en haut et en bas de "mots", et en haut, √† droite et en bas de "accentu√©s". Une bordure en tirets est trac√©es sur les trois c√īt√©s cit√©s dans chaque cas.

9.4.3 Le positionnement relatif

Une fois l'emplacement d'une bo√ģte d√©termin√©, conform√©ment au flux normal ou flottant, cette bo√ģte peut √™tre d√©plac√©e relativement √† cette position. C'est ce qu'on appelle le positionnement relatif. Le d√©calage d'une bo√ģte (B1) de cette mani√®re n'a pas d'influence sur la bo√ģte (B2) qui la suit¬†: la bo√ģte B2 re√ßoit un emplacement comme si la bo√ģte B1 n'avait pas √©t√© d√©cal√©e, et l'emplacement de B2 sera rest√© le m√™me apr√®s l'application du d√©calage sur B1. Ainsi, le positionnement relatif peut impliquer le chevauchement des bo√ģtes.

Une bo√ģte en position relative conserve la taille qu'elle avait dans le flux normal, ainsi que les retours √† la ligne et la superficie originale qui lui √©tait r√©serv√©e. Elle √©tablit un nouveau bloc conteneur pour ses enfants dans le flux normal et les descendants positionn√©s. Le chapitre sur les blocs conteneurs pr√©cise les cas o√Ļ une bo√ģte en position relative √©tablit un nouveau bloc conteneur.

Un √©l√©ment g√©n√®re une bo√ģte en position relative quand la valeur de sa propri√©t√© 'position' est 'relative'. Son d√©calage est d√©fini par les propri√©t√©s 'top', 'bottom', 'left' et 'right'.

Les propri√©t√©s 'left' et 'right' d√©placent la bo√ģte (ou les bo√ģtes) horizontalement, sans changer sa taille (ou leur taille). Le d√©placement se fait vers la droite pour la propri√©t√© 'left' et vers la gauche pour 'right'. Les bo√ģtes n'√©tant ni d√©coup√©es ni √©tir√©es par ces propri√©t√©s, les valeurs calcul√©es pour le d√©placement v√©rifient toujours l'√©galit√©¬†: d√©placement¬†gauche¬†=¬†-¬†d√©placement¬†droit.

Quand les propri√©t√©s 'left' et 'right' ont la valeur 'auto' (qui est leur valeur initiale), les valeurs calcul√©es pour le d√©placement sont √©gales √† "0" (c.√†.d. que les bo√ģtes restent √† leur emplacement original).

Quand la propri√©t√© 'left' a la valeur 'auto', sa valeur calcul√©e devient celle n√©gative de la propri√©t√© 'right' (c.√†.d. que les bo√ģtes se d√©placent vers la gauche de la quantit√© de cette valeur).

Et inversement, quand la propriété 'right' a la valeur 'auto'.

Quand aucune des propri√©t√©s 'left' et 'right' n'a la valeur 'auto', la position de la bo√ģte se trouve sous l'effet d'une double contrainte, et une des deux propri√©t√©s sera ignor√©e. Cela d√©pend de la valeur de la propri√©t√© 'direction'¬†; lorsqu'elle a la valeur 'ltr', c'est la valeur de la propri√©t√© 'left' qui est retenue, celle de la propri√©t√© 'right' devenant la valeur n√©gative de 'left', et inversement, lorsque la propri√©t√© 'direction' a la valeur 'rtl'.

Par exemple, ces deux feuilles de style sont équivalentes :

DIV.a8 { position: relative; left: -1em; right: auto }

DIV.a8 { position: relative; left: auto; right: 1em }

Les propri√©t√©s 'top' et 'bottom' g√®rent le d√©placement vertical des bo√ģtes en position relative. Ces propri√©t√©s doivent √©galement avoir des valeurs en opposition. Quand toutes deux ont la valeur 'auto', leurs valeurs calcul√©es deviennent "0". Quand l'une d'elles a la valeur 'auto', celle-ci prend la valeur oppos√©e de l'autre. Quand aucune des deux n'a la valeur 'auto', la valeur de la propri√©t√© 'bottom' sera ignor√©e (c.√†.d. que la valeur calcul√©e pour la propri√©t√© 'bottom' devient le n√©gatif de celle de la propri√©t√© 'top').

Le mouvement dynamique des bo√ģtes en position relative peut produire un effet d'animation dans une utilisation conjointe avec des scripts (voir √©galement la propri√©t√© 'visibility'). On peut aussi employer le positionnement relatif comme une forme g√©n√©rale pour l'√©criture en exposant ou en indice¬†; toutefois la hauteur de ligne n'est pas automatiquement ajust√©e pour tenir compte du positionnement. Voir les calculs des hauteurs de ligne pour des pr√©cisions.

D'autres exemples de positionnement relatif apparaissent dans le chapitre traitant de la comparaison entre le flux normal, les flottants et le positionnement absolu.

9.5 Les flottants

Une bo√ģte flottante est d√©plac√©e vers la gauche ou la droite sur la ligne courante. La caract√©ristique la plus int√©ressante d'un flottant (ou bo√ģte "flott√©e" ou "flottante") r√©side dans le fait que le contenu peut s'√©couler le long de ses flancs (on peut emp√™cher ce comportement avec la propri√©t√© 'clear'). Ce contenu descend le long du flanc droit d'une bo√ģte flottante √† gauche et le long du flanc gauche pour celle flottante √† droite. Voici une introduction au positionnement flottant et √† l'√©coulement du contenu¬†; la description de la propri√©t√© 'float' donne les r√®gles pr√©cises r√©gissant ce comportement.

Une bo√ģte flottante doit avoir une largeur explicite (sp√©cifi√©e par la propri√©t√© 'width' ou la largeur intrins√®que pour les √©l√©ments remplac√©s). Ces bo√ģtes deviennent des bo√ģtes de bloc qui sont mues vers la gauche ou la droite et qui vont buter sur le bord du bloc conteneur ou sur le bord externe d'un autre flottant. Leur haut s'aligne sur le haut de la bo√ģte de ligne concern√©e (ou, quand il n'y a pas de bo√ģte de ligne, sur le bas de la bo√ģte de bloc pr√©c√©dente). Quand il n'y a pas assez de place pour le flottant dans la largeur de la ligne, celui-ci se d√©place vers le bas, d'une ligne √† l'autre, jusqu'√† en trouver une suffisamment large.

Une bo√ģte flottante se trouvant hors du flux normal, les bo√ģtes de bloc non positionn√©es, cr√©es avant et apr√®s elle, s'√©coulent verticalement comme si celle-ci n'existait pas. Cependant, les bo√ģtes de lignes, cr√©es juste apr√®s la bo√ģte flottante, se r√©duisent pour laisser de la place √† celle-ci. Le contenu de la ligne, celui avant la bo√ģte flott√©e, se r√©pand dans la premi√®re ligne disponible contre l'autre bord de cette bo√ģte.

Plusieurs flottants peuvent être adjacents, ce modèle s'applique aussi aux flottants adjacents dans la même ligne.

Exemple(s) :

La r√®gle suivante fait flotter √† gauche toutes les bo√ģtes des √©l√©ments IMG qui ont un attribut class="icon" (et leur applique une valeur de marge gauche de '0')¬†:

IMG.icon { 
  float: left;
  margin-left: 0;
}

Considérons la source HTML et la feuille de style suivantes :

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemple de flottants</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="Cette image pour illustrer les flottants.">
       Un échantillon de texte qui n'a pas...
  </BODY>
</HTML>

La bo√ģte de l'√©l√©ment IMG flotte √† gauche. Le contenu qui le suit vient contre la droite du flottant, commen√ßant sur la m√™me ligne que celui-ci. Les bo√ģtes de ligne se trouvant √† droite du flottant sont raccourcies pour tenir compte de sa pr√©sence, celles-ci reprennent leur largeur "normale" (celle du bloc conteneur √©tabli par l'√©l√©ment P) apr√®s le flottant. Ce document pourrait appara√ģtre ainsi¬†:

Illustration de l'interaction des bo√ģtes flottantes avec les marges.¬†¬†¬†[D]

La mise en forme aurait été exactement la même si ce document avait été :

<BODY>
  <P>Un échantillon de texte
  <IMG src=img.gif alt="Cette image pour illustrer les flottants.">
           qui n'a pas...
</BODY>

car le contenu se trouvant à gauche du flottant est déplacé par celui-ci et reformaté le long de son flanc droit.

Les marges des bo√ģtes flottantes ne fusionnent jamais avec celles des bo√ģtes adjacentes. Ainsi, dans l'exemple pr√©c√©dent, les marges verticales entre la bo√ģte de P et la bo√ģte flott√©e de IMG n'ont pas fusionn√©.

Un flottant peut chevaucher sur les autres bo√ģtes du flux normal (par exemple quand une bo√ģte proche de celui-ci a des marges n√©gatives). Quand une bo√ģte en-ligne d√©borde sur un flottant, le contenu, l'arri√®re-plan et les bordures de celle-ci apparaissent sur le flottant. Quand c'est une bo√ģte de bloc, l'arri√®re-plan et les bordures de celle-ci apparaissent derri√®re le flottant, ceux-ci n'√©tant visibles qu'aux endroits o√Ļ le flottant est transparent. Par contre, le contenu de la bo√ģte de bloc passe avant le flottant.

Exemple(s) :

Voici une autre illustration d'un flottant qui déborde sur les bordures d'éléments dans le flux normal.

Une image flottante qui recouvre les bordures de deux paragraphes, les bordures s'interrompent à cet endroit.   [D]

Une image flottante qui cache les bordures des bo√ģtes de bloc qu'elle chevauche.

L'exemple suivant démontre l'usage de la propriété 'clear' pour empêcher l'écoulement d'un contenu le long d'un flottant.

Exemple(s) :

Supposons une règle telle que :

P { clear: left }

une mise en forme pourrait en être :

Une image flottante et l'effet de clear:left sur les deux paragraphes.   [D]

La propri√©t√© 'clear: left' s'appliquant aux deux paragraphes, le second est "pouss√© en dessous" du flottant, la marge du haut de ce paragraphe va cro√ģtre pour accomplir cet effet (voir la propri√©t√© 'clear').

9.5.1 Le positionnement des flottants : la propriété 'float'

'float'
Valeur :  left | right | none | inherit
Initiale :  none
S'applique à :  tous les éléments, sauf ceux positionnés et ceux dont le contenu est généré
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Cette propri√©t√© sp√©cifie le flottement d'une bo√ģte √† gauche, √† droite ou pas du tout. On peut l'employer pour des √©l√©ments g√©n√©rant des bo√ģtes qui ne sont pas en position absolue. Voici la signification des valeurs que celle-ci admet¬†:

left
L'√©l√©ment g√©n√®re une bo√ģte de bloc qui flotte √† gauche. Le contenu s'√©coule sur son flanc droit en commen√ßant en haut (en fonction de la valeur de la propri√©t√© 'clear'). En ignorant la valeur de la propri√©t√© 'display', sauf si cette valeur est 'none'¬†;
right
Identique à 'left', mais en inversant la gauche de la droite ;
none
La bo√ģte ne flotte pas.

Voici les règles précises qui gouvernent le comportement des flottants :

  1. Le bord externe gauche d'une bo√ģte flottant √† gauche ne peut pas se trouver au-del√† du bord gauche de bloc conteneur. Pour des bo√ģtes flottant √† droite, les r√®gles sont les m√™mes, mais invers√©es¬†;
  2. Pour une bo√ģte donn√©e flottant √† gauche, celle ci suivant dans la source un √©l√©ment ayant d√©j√† g√©n√©r√© une autre bo√ģte flottant √† gauche, le bord externe gauche de cette bo√ģte doit venir √† droite du bord externe droit de la bo√ģte pr√©c√©dente, ou, sinon, son sommet doit venir en dessous du bas de la bo√ģte pr√©c√©dente. Inversement et de la m√™me fa√ßon pour des bo√ģtes flottant √† droite¬†;
  3. Le bord externe droit d'une bo√ģte flottant √† gauche ne peut pas √™tre plac√© √† la droite d'un bord externe gauche d'une quelconque bo√ģte flottant √† sa droite. Pour des bo√ģtes flottant √† droite, les r√®gles sont les m√™mes, mais invers√©es¬†;
  4. Le sommet externe d'une bo√ģte flottante ne peut pas se trouver au-dessus de celui de son bloc conteneur¬†;
  5. Le sommet externe d'une bo√ģte flottante ne peut pas se trouver au-dessus d'une bo√ģte de bloc ou flottante, g√©n√©r√©e par un √©l√©ment pr√©c√©dent dans le document source¬†;
  6. Le sommet externe d'une bo√ģte flottante ne peut pas se trouver au-dessus du sommet d'une bo√ģte de ligne qui contient une bo√ģte g√©n√©r√©e par un √©l√©ment survenu plus t√īt dans le document source¬†;
  7. Une bo√ģte flottant √† gauche, ayant une autre bo√ģte de m√™me type √† sa gauche, ne devrait pas avoir son bord externe droit au-del√† du bord droit de son bloc conteneur. (Plus librement, un flottant √† gauche ne devrait pas d√©passer le bord droit, √† moins d'√™tre d√©j√† au maximum √† gauche). Pour des bo√ģtes flottant √† droite, les r√®gles sont les m√™mes, mais invers√©es¬†;
  8. Une bo√ģte flottante doit se trouver aussi haut que possible¬†;
  9. Une bo√ģte flottant √† gauche doit aller au maximum vers la gauche et, au maximum vers la droite pour celle flottant √† droite. Une position plus haute est pr√©f√©r√©e √† celle qui est plus √† gauche ou √† droite.

9.5.2 Le contr√īle du flux autour des flottants¬†: la propri√©t√© 'clear'

'clear'
Valeur :  none | left | right | both | inherit
Initiale :  none
S'applique à :  ceux des éléments de type bloc
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Cette propri√©t√© indique quels c√īt√©s d'une ou des bo√ģtes d'un √©l√©ment ne doivent pas √™tre adjacents √† une bo√ģte flottante pr√©c√©dente. (Il peut arriver que l'√©l√©ment lui-m√™me ait des descendants flottants, la propri√©t√© 'clear' n'a alors aucun effet sur eux).

Cette propri√©t√© ne peut s'appliquer qu'aux √©l√©ment de type bloc (dont les flottants). Dans le cas des bo√ģtes compactes et en enfilade, la propri√©t√© s'applique √† la bo√ģte de bloc finale √† laquelle celles-ci appartiennent.

Voici la signification des valeurs admises par la propri√©t√© quand on l'applique aux bo√ģtes de bloc non flottantes¬†:

left
La marge haute de la bo√ģte g√©n√©r√©e est augment√©e juste assez pour que le bord haut de sa bordure soit sous le bord externe bas d'une bo√ģte flottant √† gauche issue d'un √©l√©ment pr√©c√©dent du document source¬†;
right
Reprendre le précédent en inversant gauche et droite ;
both
La bo√ģte g√©n√©r√©e se d√©place sous chacune des bo√ģtes flottantes qui sont issues d'√©l√©ments pr√©c√©dents du document source¬†;
none
La bo√ģte ne subit aucune contrainte de position vis-√†-vis des flottants.

Quand on applique cette propriétés aux éléments flottants, une modification des règles de leur positionnement intervient. On ajoute une contrainte supplémentaire (la dixième) :

  • Le sommet du bord externe de cette bo√ģte flottante doit se trouver en dessous de toutes bo√ģtes pr√©c√©dentes qui flottent √† gauche (pour la valeur 'clear:left'), ou qui flottent √† droite (pour la valeur 'clear: right'), ou toutes celles qui flottent (pour la valeur 'clear: both').

9.6 Le positionnement absolu

Avec le mod√®le de positionnement absolu, une bo√ģte est positionn√©e par rapport √† son bloc conteneur. Celle-ci est enti√®rement retir√©e du flux normal (elle n'a aucune influence sur les √©l√©ments de m√™me niveau de parent√© survenant apr√®s). Les bo√ģtes en position absolue √©tablissent un nouveau bloc conteneur pour leurs descendants, ceux qui suivent le flux normal et ou ceux qui sont positionn√©s. Cependant, leurs contenus ne s'√©coulent pas autour d'autres bo√ģtes. Ces contenus peuvent, ou non, cacher ceux des autres bo√ģtes, selon leur situation dans l'empilement des bo√ģtes et leur chevauchement.

Dans cette sp√©cification, quand on se r√©f√®re √† un √©l√©ment en position absolue (ou sa bo√ģte), cela signifie que la propri√©t√© 'position' de celui-ci a les valeurs 'absolute' ou 'fixed'.

9.6.1 Le positionnement fixe

Le positionnement fixe est une variante du positionnement absolu. La seule diff√©rence est que le bloc conteneur d'une bo√ģte en position fixe est √©tabli par la zone de visualisation. Pour les m√©dias continus, les bo√ģtes en position fixe ne bougent pas quand on fait d√©filer le document. Sous cet angle, celles-ci ont un comportement similaire √† celui des images d'arri√®re-plan fixes. Pour les m√©dias pagin√©s, ces bo√ģtes se r√©p√®tent sur chaque page. Par exemple, ceci peut pr√©senter un int√©r√™t pour placer une signature en bas de chacune d'entre elles

Les auteurs peuvent utiliser le positionnement fixe pour des présentations comme avec des cadres. Soit la mise en page suivante :

Illustration d'une disposition comme un cadre avec position:fixed.   [D]

Ceci pourrait être réalisé avec ce document HTML et ces règles de style :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Un document avec des cadres en CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* Nécessaire pour les hauteurs en pourcentage plus bas */
      #entete {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #cote {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #corps {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #pied {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="entete"> ...  </DIV>
    <DIV id="cote"> ...  </DIV>
    <DIV id="corps"> ...  </DIV>
    <DIV id="pied"> ...  </DIV>
  </BODY>
</HTML>

9.7 Les relations entre les propriétés 'display', 'position' et 'float'

Ces trois propri√©t√©s, 'display', 'position' et 'float', qui affectent la g√©n√©ration des bo√ģtes et le positionnement, interagissent ainsi¬†:

  1. Quand la valeur de la propri√©t√© 'display' est 'none', les agents utilisateurs doivent ignorer les propri√©t√©s 'position' et 'float'. L'√©l√©ment ne g√©n√®re pas de bo√ģte dans ce cas¬†;
  2. Autrement, quand la valeur de la propri√©t√© 'position' est 'absolute' ou 'fixed', la propri√©t√© 'display' prend la valeur 'block' et la propri√©t√© 'float' la valeur 'none'. L'emplacement de la bo√ģte sera d√©termin√© selon ses propri√©t√©s 'top', 'right', 'bottom' et 'left' ainsi que par son bloc conteneur¬†;
  3. Autrement, quand la valeur de la propri√©t√© 'float' est autre que 'none', la propri√©t√© 'display' prend la valeur 'block' et la bo√ģte est flottante et la valeur de la propri√©t√© 'display' se d√©termine selon le tableau suivant¬†:
    Valeur spécifiéeValeur calculée
    inline-tabletable
    inline, run-in, compact, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-captionblock
    autrespareille à la valeur spécifiée
  4. Autrement, les autres valeurs de la propriété 'display' s'appliquent comme spécifiées.

Remarque : CSS2 ne spécifie pas de processus de mise en forme quand les valeurs de ces propriétés sont modifiées par le biais de scripts. Par exemple, que se passe-t-il pour un élément, dont la propriété 'width' a la valeur 'auto', quand il est repositionné ? Est-ce que l'écoulement des contenus est recommencé, ou est-ce que ceux-ci conservent leur formatage original ? La réponse ne se trouve pas dans ce document, les premières implémentations de CSS2 sont certainement divergentes sur ce point.

9.8 Comparaison entre les positionnements en flux normal, flottant et absolu

L'illustration des différences entre les positionnements en flux normal, relatif et absolu se fera à partir d'exemples basés sur cet extrait de document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Comparaison entre les schémas de positionnement</TITLE>
  </HEAD>
  <BODY>
    <P>Début du corps du contenu.
      <SPAN id="Externe"> Début du contenu d'Externe.
      <SPAN id="Interne"> Contenu d'Interne.</SPAN>
      Fin du contenu d'Externe.</SPAN>
      Fin du corps du contenu.
    </P>
  </BODY>
</HTML>

Avec ce document, nous supposerons les règles suivantes :

BODY { display: block; line-height: 200%; 
       width: 400px; height: 400px }
P    { display: block }
SPAN { display: inline }

Pour chacun des exemples, les emplacements finaux des bo√ģtes g√©n√©r√©es par les √©l√©ments Externe et Interne seront variables. Dans les dessins, les nombres √† gauche indiquent la position des lignes en flux normal, celles-ci √©tant agrandies pour plus de clart√©. Note¬†: les √©chelles verticales et horizontales diff√®rent selon les illustrations.

9.8.1 Le flux normal

Consid√©rons les d√©clarations CSS pour les IDs Externe et Interne, celles-ci ne modifiant pas le flux normal des bo√ģtes¬†:

#Externe { color: red }
#Interne { color: blue }

L'élément P ne contient que des éléments en-ligne, c.à.d. du texte anonyme en-ligne et deux éléments SPAN. Ainsi, tout le contenu est dans un contexte de mise en forme en-ligne, à l'intérieur d'un bloc conteneur établit par l'élément P lui-même, comme ceci :

Illustration du flux normal du texte entre les bo√ģtes du parent et de ses enfants. ¬†¬†¬†[D]

9.8.2 Le positionnement relatif

Pour illustrer l'effet du positionnement relatif, spécifions :

#Externe { position: relative; top: -12px; color: red }
#Interne { position: relative; top: 12px; color: blue }

Le texte suit un cours normal jusqu'√† l'√©l√©ment Externe. Celui-ci s'√©coule alors pour occuper son volume dans le flux normal et prend ses marques, l'une √©tant repr√©sent√©e par la fin de la ligne 1. Ensuite, l'ensemble, constitu√© des bo√ģtes en-ligne contenant le texte (qui est r√©parti sur trois lignes), est d√©plac√© de la valeur '-12px' (vers le haut).

L'élément Interne, étant un enfant de Externe, devrait normalement voir son contenu poursuivre dans le flux après les mots "contenu d'Externe" (entre la ligne 1 et 2). Cependant, celui-ci étant lui-même placé relativement au contenu de Externe d'une valeur de '12px' (vers le bas), il va se retrouver à sa position de départ sur la ligne 2.

Noter que le contenu qui suit celui de l'élément Externe n'est pas affecté par le positionnement relatif de ce dernier.

Illustration des effets du positionnement relatif sur le contenu d'une bo√ģte.¬†¬†¬†[D]

Noter que si le décalage de l'élément Externe avait été '-24px', le texte de celui-ci et le texte du corps du contenu se seraient chevauchés.

9.8.3¬†Faire flotter une bo√ģte

Voyons maintenant l'effet d'un flottement à droite sur le texte de l'élément Interne avec cette règle :

#Externe { color: red }
#Interne { float: right; width: 130px; color: blue }

Le texte suit le flux normal jusqu'√† la bo√ģte d'Interne, celle-ci √©tant hors du flot et flottant vers la marge droite (la propri√©t√© 'width' de la bo√ģte est explicite). Les bo√ģtes de ligne sur la gauche du flottant ont √©t√© r√©duites, le reste du texte du document se r√©partissant entre elles.

Illustration des effets du flottement sur une bo√ģte.¬†¬†¬†[D]

¬ę¬†errata 2002-10-29 section¬†9.8.3¬†¬Ľ

9.8.4 Le positionnement absolu

Voyons enfin, l'effet d'un positionnement absolu. Considérons les déclarations CSS suivantes pour Externe et Interne :

#Externe { 
    position: absolute; 
    top: 200px; left: 200px; 
    width: 200px; 
    color: red;
}
#Interne { color: blue }

ce qui positionne le sommet de la bo√ģte d'Externe en fonction de son bloc conteneur. Celui-ci, pour une bo√ģte positionn√©e donn√©e, est √©tabli par l'anc√™tre positionn√© de cette bo√ģte qui est le plus proche (ou, s'il n'y en a pas, par le bloc conteneur initial, comme dans l'exemple qui suit). Le haut de la bo√ģte d'Externe se trouve √† '200px' en dessous du haut du bloc conteneur, et la gauche de sa bo√ģte √† '200px' du c√īt√© gauche de celui-ci. La bo√ģte de l'√©l√©ment enfant d'Externe suit le flot normal par rapport son parent.

Illustration des effets du positionnement absolu sur une bo√ģte.¬†¬†¬†[D]

Dans l'exemple suivant, nous avons une bo√ģte en position absolue qui est un enfant d'une bo√ģte en position relative. Bien que la bo√ģte du parent, Externe, ne soit pas en r√©alit√© d√©plac√©e, le fait de sp√©cifier la valeur 'relative' pour sa propri√©t√© 'position' lui permet d'√™tre un bloc conteneur pour des descendants positionn√©s. Comme la bo√ģte en-ligne d'Externe est d√©coup√©e en morceaux r√©partis sur plusieurs lignes, les bords du haut et de gauche du premier d'entre eux (repr√©sent√©s en tirets √©pais dans le dessin) servent de r√©f√©rences pour les d√©calages produits par les propri√©t√©s 'top' et 'left'.

#Externe { 
  position: relative; 
  color: red 
}
#Interne { 
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

Ce qui donnerait le résultat suivant :

Illustration des effets du positionnement absolu d'une bo√ģte en fonction de son bloc conteneur.¬†¬†¬†[D]

Si on ne positionne pas la bo√ģte d'Externe¬†:

#Externe { color: red }
#Interne {
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

Le bloc conteneur d'Interne devient le bloc conteneur initial (dans l'exemple). Voici dans ce cas o√Ļ se placerait la bo√ģte d'Interne¬†:

Illustration des effets du positionnement absolu d'une bo√ģte en fonction du bloc conteneur √©tabli par un parent dans le flux normal.¬†¬†¬†[D]

On peut employer le positionnement relatif ou absolu pour réaliser une marque de changement, comme dans l'exemple suivant. Ainsi avec ce document :

<P style="position: relative; margin-right: 10px; left: 10px;"> J'emploie deux tirets
en rouge comme marque de changement. Ceux-ci vont "flotter" à gauche de la ligne
contenant CE <SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>mot.</P>

Cet extrait pourrait être représenté ainsi :

Illustration de l'emploi de flottants pour créer un effet de signet.   [D]

Premi√®rement, le paragraphe (dont les c√īt√©s du bloc conteneur sont trac√©s) suit le flux normal. Ce paragraphe est ensuite d√©plac√© de '10px' √† partir du bord gauche de celui-ci (c'est pourquoi on a laiss√© une marge de '10px' sur la droite, en pr√©vision du d√©calage). Les deux tirets qui marquent le changement sont retir√©s du flux normal, puis plac√©s sur la ligne concern√©e (en raison de 'top: auto'), et √† '-1em' du bord gauche du bloc conteneur (celui √©tabli par l'√©l√©ment P √† son emplacement final). En r√©sultat, la marque de changement semble "flotter" √† gauche de ladite ligne.

9.9 La présentation en couches

Dans les passages suivants, l'expression "devant" signifie au plus proche du spectateur qui regarde l'écran.

En CSS2, chaque bo√ģte re√ßoit un emplacement selon trois dimensions. En plus de leurs positions horizontales et verticales, les bo√ģtes s'√©chelonnent le long d'un "axe-z" et s'empilent les unes au-dessus des autres dans la mise en forme. Les positions sur l'axe-z sont particuli√®rement importantes lors des chevauchements visuels des bo√ģtes. Cette partie traite de la fa√ßon dont celles-ci peuvent se positionner sur l'axe-z.

Chaque bo√ģte participe d'un contexte d'empilement. Dans un contexte d'empilement donn√©, chacune des bo√ģtes re√ßoit un entier pour son niveau dans l'empilement, cet entier repr√©sentant la position de la bo√ģte sur l'axe-z, en rapport avec les autres bo√ģtes de ce contexte. La valeur du niveau dans l'empilement d'une bo√ģte peut √™tre n√©gative. Pour les bo√ģtes situ√©es au m√™me niveau d'un contexte d'empilement, celles-ci s'empilent en partant du fond vers l'avant, en fonction de leur ordre dans l'arbre du document.

L'√©l√©ment racine cr√©e un contexte d'empilement racine, mais d'autres √©l√©ments peuvent √©tablir des contextes d'empilement locaux. Les contextes d'empilement sont h√©rit√©s. Un contexte d'empilement local est atomique, les bo√ģtes d'autres contextes d'empilement ne pouvant interf√©rer dans l'empilement des bo√ģtes de celui-ci.

Un √©l√©ment, √©tablissant un contexte d'empilement local, g√©n√®re une bo√ģte avec deux ordres d'empilement¬†: l'un pour le contexte d'empilement que lui-m√™me cr√©e (toujours √©gal √† '0') et l'autre pour celui dont il fait lui-m√™me partie (donn√© par la propri√©t√© 'z-index').

La bo√ģte d'un √©l√©ment occupe le m√™me niveau dans l'empilement que celle de son parent, √† moins que la propri√©t√© 'z-index' ne la contraigne √† un autre niveau.

9.9.1 La spécification du niveau dans l'empilement : la propriété 'z-index'

'z-index'
Valeur :  auto | <entier> | inherit
Initiale :  auto
S'applique à :  ceux des éléments positionnés
Héritée :  non
Pourcentage :  sans objet
Médias :  visuel

Pour une bo√ģte positionn√©e, la propri√©t√© 'z-index' sp√©cifie¬†:

  1. Le niveau dans l'empilement pour une bo√ģte dans un contexte d'empilement donn√©¬†;
  2. L'√©tablissement par une bo√ģte d'un contexte d'empilement local.

Voici les significations des valeurs :

<entier>
Cet entier correspond au niveau dans l'empilement d'une bo√ģte g√©n√©r√©e dans un contexte d'empilement donn√©. Cette bo√ģte √©tablit √©galement un contexte d'empilement local dans lequel la valeur de son niveau est '0'¬†;
auto
Le niveau d'empilement de la bo√ģte g√©n√©r√©e dans un contexte d'empilement donn√© est le m√™me que celui de la bo√ģte de son parent. Cette bo√ģte n'√©tablit pas un nouveau contexte d'empilement local.

Dans l'exemple suivant, les niveaux dans l'empilement des bo√ģtes (nomm√©es √† partir de leur attribut "id") sont¬†: "texte2"=0, "image"=1, "texte3"=2 et "texte1"=3. Le contexte d'empilement de "texte2" est h√©rit√© de la bo√ģte racine. Les niveaux des autres bo√ģtes √©tant sp√©cifi√©s par la propri√©t√© 'z-index'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Positionnement selon l'axe-z</TITLE>
    <STYLE type="text/css">
      .pile { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="image" class="pile" 
           src="butterfly.gif" alt="L'image d'un papillon"
           style="z-index: 1">

    <DIV id="texte1" class="pile" 
         style="z-index: 3">
      Ce texte se surimposera à l'image du papillon.
    </DIV>

    <DIV id="texte2">
      Ce texte sera en-dessous de tout.
    </DIV>

    <DIV id="texte3" class="pile" 
         style="z-index: 2">
      Ce texte se trouvera sous texte1, mais se surimposera à l'image du papillon.
    </DIV>
  </BODY>
</HTML>

Cet exemple illustre la notion de transparence. Par d√©faut, une bo√ģte laisse voir celles situ√©es en arri√®re √† travers les zones transparentes de son contenu. Ici, chacune des bo√ģtes vient recouvrir celles en dessous de fa√ßon transparente. On peut annuler ce comportement en employant l'une des propri√©t√©s d'arri√®re-plan.

9.10 Le sens du texte : les propriétés 'direction' et 'unicode-bidi'

Les caract√®res de certaines √©critures s'√©crivent de droite √† gauche. Dans certains documents, notamment ceux en arabe ou en h√©breu, et ceux avec un contexte de langues mixtes, plusieurs sens de lecture peuvent appara√ģtre dans le texte d'un bloc (visuel) particulier. On appelle ce ph√©nom√®ne bi-directionnalit√©, ou "bidi" pour faire court.

Le standard Unicode ([UNICODE], chapitre 3.11), d√©finit un algorithme complexe pour d√©terminer la directionalit√© d'un texte. Cet algorithme comporte une partie implicite, bas√©e sur les propri√©t√©s des caract√®res, et des contr√īles explicites, portant sur leurs incorporations et leurs contraintes. CSS2 s'appuie sur celui-ci pour atteindre un rendu bi-directionnel convenable. Les propri√©t√©s 'direction' et 'unicode-bidi' permettent aux auteurs de sp√©cifier une ad√©quation des √©l√©ments et attributs d'un document avec cet algorithme.

Quand un document contient des caractères allant de droite à gauche, et si l'agent utilisateur peut afficher ces caractères (dans les glyphes appropriés, et non pas avec des substituts arbitraires comme des points d'interrogation, un code hexadécimal, un carré noir, etc.), l'agent utilisateur doit utiliser l'algorithme bi-directionnel. Les agents utilisateurs ne sont pas obligés d'appliquer l'algorithme bi-directionnel aux documents qui ne contiennent que des caractères écrits de gauche à droite. Cette obligation est en apparence univoque et, bien que les textes des documents en hébreu ou en arabe ne contiennent pas tous des parties bi-directionnelles, ceux-ci sont plus enclins à en contenir (par exemple des nombres, des extraits en d'autres langues) que ceux des documents écrits de gauche à droite ne contiendraient de parties écrites de droite à gauche.

Comme le sens de lecture d'un texte dépend de la structure et de la sémantique du langage du document, ces propriétés ne devraient la plupart du temps être utilisées que par les auteurs de définitions de type de document (DTD) ou d'autres documents spéciaux. Lorsqu'une feuille de style par défaut spécifie ces propriétés, les auteurs et les utilisateurs ne devraient pas spécifier de règles pour les surclasser. Une exception typique : la suppression du comportement bidi d'un agent utilisateur, et sa transcription du yiddish (habituellement en caractères hébreux) en caractères latins pour répondre à une requête de l'utilisateur.

La sp√©cification HTML¬†4.0 ([HTML40], chapitre 8.2) d√©finit le comportement bi-directionnel des √©l√©ments HTML. Les agents utilisateurs conformes pour HTML peuvent ignorer les propri√©t√©s 'direction' et 'unicode-bidi' des feuilles de style des auteurs et des utilisateurs. Le mot "ignorer" signifie ici que, si une valeur des propri√©t√©s 'unicode-bidi' ou 'direction' entrait en conflit avec l'attribut HTML¬†4.0 "dir", c'est la valeur de ce dernier que les agents utilisateurs peuvent choisir d'honorer. Ceux-ci ne sont pas tenus de reconna√ģtre les propri√©t√© 'direction' et 'unicode-bidi' pour √™tre conformes √† CSS2, √† moins d'√™tre capables de repr√©senter du texte bi-directionnel (hormis le cas de HTML¬†4.0 comme indiqu√© pr√©c√©demment).

Les règles de style pour obtenir le comportement bidi, tel que défini dans [HTML40], sont intégrées dans l'exemple de feuille de style. Voir aussi la spécification HTML 4.0 pour d'autres questions liées à la bi-directionnalité.

'direction'
Valeur :  ltr | rtl | inherit
Initiale :  ltr
S'applique à :  tous les éléments, mais voir les explications au-dessus
Héritée :  oui
Pourcentage :  sans objet
Médias :  visuel

Cette propriété spécifie le sens d'écriture principal des blocs et le sens des incorporations et contraintes (voir 'unicode-bidi') pour l'algorithme bi-directionnel Unicode. En outre, elle spécifie le sens de mise en forme des colonnes des tables, le sens du débordement horizontal et l'emplacement d'une dernière ligne incomplète quand la propriété 'text-align' a pour valeur 'justify'.

Les valeurs de cette propriété ont la signification suivante :

ltr
Sens de gauche à droite (N.D.T. left-to-right) ;
rtl
Sens de droite à gauche (N.D.T. right-to-left).

La propriété 'unicode-bidi' doit avoir les valeurs 'embed' ou 'override' pour que la propriété 'direction' puisse agir sur les éléments de type en-ligne.

Remarque : Quand la propriété 'direction' est spécifiée pour les éléments des colonnes d'une table, celle-ci n'est pas héritée par les cellules des colonnes, les colonnes n'apparaissant pas dans l'arbre du document. Ainsi, on ne peut pas adresser facilement les règles d'héritage de l'attribut "dir", telles que décrites dans la spécification [HTML40], chapitre 11.3.2.1.

'unicode-bidi'
Valeur :  normal | embed | bidi-override | inherit
Initiale :  normal
S'applique à :  tous les éléments, mais voir les explications au-dessus
Inherited:  non
Pourcentage :  N/A
Médias :  visuel

Les valeurs de cette propriété ont la signification suivante :

normal
L'élément n'ouvre pas un niveau supplémentaire d'incorporation en fonction de l'algorithme bi-directionnel. Pour les éléments de type en-ligne, un réajustement implicite s'effectue au-delà des limites de l'élément ;
embed
Quand il s'agit d'un élément de type en-ligne, cette valeur ouvre un niveau supplémentaire d'incorporation en fonction de l'algorithme bi-directionnel. La propriété 'direction' donne le sens du niveau d'incorporation. Le réordonnancement s'effectue implicitement à l'intérieur de l'élément. Celui-ci correspond à l'insertion des caractères LRE (U+202A pour 'direction: ltr') ou RLE (U+202B pour 'direction: rtl') au début de l'élément et du caractère PDF à la fin de celui-ci ;
bidi-override
Quand il s'agit d'un élément de type en-ligne, ou bloc, ne contenant à son tour que des éléments de type en-ligne, ceci crée une contrainte. Cela signifie que le réordonnancement à l'intérieur de l'élément s'effectue strictement dans l'ordre de la propriété 'direction', la partie implicite de l'algorithme étant ignorée. Le réordonnancement correspond à l'insertion des caractères LRO (U+202D pour 'direction: ltr') ou RLO (U+202E pour 'direction: rtl') au début de l'élément et du caractère PDF (U+202C) à la fin de celui-ci.

L'ordonnancement final des caract√®res de chaque √©l√©ment de type bloc est le m√™me que celui d√©crit ci-dessus, comme si les caract√®res de contr√īle bidi avaient √©t√© ajout√©s, le balisage retir√© et la succession de caract√®res qui en r√©sulte, transmise √† une impl√©mentation de l'algorithme bi-directionnel Unicode comme du texte brut qui produirait les m√™mes retours √† la ligne que du texte styl√©. Dans ce processus, les entit√©s non textuelles, comme les images, sont trait√©es comme des caract√®res neutres, √† moins que leur propri√©t√© 'unicode-bidi' n'ait une valeur autre que 'normal', auquel cas ces entit√©s seraient consid√©r√©es comme ayant une importance pour le sens indiqu√© par la propri√©t√© 'direction'.

Noter que pour autoriser l'√©coulement de bo√ģtes en-ligne dans une direction uniforme (soit enti√®rement de gauche √† droite, ou inversement), plusieurs autres de ces bo√ģtes en-ligne (dont des bo√ģtes en-ligne anonymes) pourraient devoir √™tre cr√©√©es, et certaines d'entre elles devoir √™tre d√©coup√©es et r√©-arrang√©es avant l'√©coulement.

Du fait d'une limitation de l'algorithme Unicode √† 15¬†niveaux d'incorporation, l'utilisation d'une autre valeur que 'normal' avec la propri√©t√© 'unicode-bidi' ne devrait se faire que de fa√ßon appropri√©e. Plus particuli√®rement, la valeur 'inherit' devrait faire l'objet d'une extr√™me prudence. Cependant, pour ceux des √©l√©ments destin√©s habituellement √† un rendu en bloc (visuel), on pr√©f√®rera la sp√©cification 'unicode-bidi: embed', pour conserver leur coh√©sion, dans le cas o√Ļ leur propri√©t√© 'display' prendrait la valeur 'inline' (voir l'exemple plus loin).

Voici l'exemple d'un document XML contenant du texte bi-directionnel, qui illustre un principe de construction important : les auteurs de DTD devraient prendre en compte les questions bidi tant dans les éléments et attributs du langage concerné que dans les feuilles de style qui accompagnent le document. Celles-ci devraient être construites en distinguant les règles bidi des autres règles. Les règles bidi ne devraient pas être surclassées par d'autres feuilles de style, de manière à préserver les comportements bidi du langage du document ou du DTD.

Exemple(s) :

Pour cet exemple, les lettres en minuscules représentent des caractères lus de façon inhérente de gauche à droite, et les lettres en majuscules, ceux de droite à gauche :

<HEBREU>
  <PAR>H√ČBREU1¬†H√ČBREU2 anglais3¬†H√ČBREU4¬†H√ČBREU5</PAR>
  <PAR>H√ČBREU6 <EMPH>H√ČBREU7</EMPH> H√ČBREU8</PAR>
</HEBREU>
<ANGLAIS>
  <PAR>anglais9 anglais10 anglais11¬†H√ČBREU12¬†H√ČBREU13</PAR>
  <PAR>anglais14 anglais15 anglais16</PAR>
  <PAR>anglais17 <HE-QUO>H√ČBREU18 anglais19¬†H√ČBREU20</HE-QUO></PAR>
</ANGLAIS>

S'agissant d'un document XML, c'est la feuille de style qui indique le sens d'écriture. Voici celle-ci :

/* Règles bidi */
HEBREW, HE-QUO  {direction: rtl; unicode-bidi: embed}
ANGLAIS         {direction: ltr; unicode-bidi: embed} 

/* Règles de présentation */
HEBREW, ANGLAIS, PAR  {display: block}
EMPH                  {font-weight: bold}

L'élément HEBREU forme un bloc avec un sens de lecture de droite à gauche, l'élément ANGLAIS un bloc avec un sens de lecture de gauche à droite. Les éléments PAR sont des blocs qui héritent du sens de lecture de leurs parents, Ainsi, les deux premiers sont lus en commençant en haut à droite, et les trois derniers en commençant en haut à gauche. Noter que les noms des éléments HEBREU et ANGLAIS ont été choisis exprès pour la démonstration ; en général, ceux-ci devraient l'être pour refléter la structure du document, sans référence à la langue employée.

L'élément EMPH, de type en-ligne, dont la propriété 'unicode-bidi' a la valeur 'normal' (la valeur par défaut), celui-ci n'a pas d'effet sur l'ordonnancement du texte. Par contre, l'élément HE-QUO crée une incorporation.

Quand la ligne a une grande longueur, la mise en forme de ce texte pourrait ressembler à ceci :

               5UERB√ČH 4UERB√ČH anglais3 2UERB√ČH 1UERB√ČH

                                8UERB√ČH 7UERB√ČH 6UERB√ČH

anglais9 anglais10 anglais11 13UERB√ČH 12UERB√ČH

anglais14 anglais15 anglais16

anglais17 20UERB√ČH anglais19 18UERB√ČH

Noter que l'incorporation de HE-QUO am√®ne H√ČBREU18 √† se trouver √† droite de anglais19.

Si les lignes devaient être découpées, cela pourrait ressembler à :

       2UERB√ČH 1UERB√ČH
  -√ČH 4UERB√ČH anglais3
                 5UERB

   -√ČH 7UERB√ČH 6UERB√ČH
                 8UERB

anglais9 anglais10 an-
glais11 12UERB√ČH
13UERB√ČH

anglais14 anglais15
anglais16

anglais17 18UERB√ČH
20UERB√ČH anglais19

H√ČBREU18 devant √™tre lu avant anglais 19, il se trouve dans la ligne au-dessus d'anglais19. Un simple d√©coupage de la longue ligne de la mise en forme pr√©c√©dente n'aurait pas √©t√© correct. Noter aussi que la premi√®re syllabe de anglais19 aurait pu tenir sur la ligne d'avant, bien que, pour les mots lus de gauche √† droite dans un contexte de lecture de droite √† gauche, et vice versa, leurs c√©sures soient g√©n√©ralement supprim√©es pour √©viter l'affichage d'un tiret en plein milieu d'une ligne.


 

Document créé le 12/08/06 22:37, dernière modification le 04/04/18 12:13
Source du document imprimé : https://www.gaudry.be/css-rf-visuren.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Références

  1. document html Langue du document: fr Traduction des normes CSS : http://www.yoyodesign.org/doc/w3c/css2/visuren.html, yoyodesign
  2. document html Langue du document: fr Traduction des normes CSS : http://www.yoyodesign.org/doc/w3c/css2/cover.html, yoyodesign

Ces références et liens indiquent des documents consultés lors de la rédaction de cette page, ou qui peuvent apporter un complément d'information, mais les auteurs de ces sources ne peuvent être tenus responsables du contenu de cette page.
L'auteur de ce site est seul responsable de la manière dont sont présentés ici les différents concepts, et des libertés qui sont prises avec les ouvrages de référence. N'oubliez pas que vous devez croiser les informations de sources multiples afin de diminuer les risques d'erreurs.