Continguts:

1. Introducció
1.1. El viewport
1.2. Blocs contenidors
2. Control de la generació de caixes
2.1. Elements block-level i caixes de bloc
- Caixes de bloc anònimes
2.2. Elements inline-level i caixes inline
- Caixes inline anònimes
2.3. Caixes compact
2.4. Caixes run-in
2.5. La propietat 'display'
3. Esquemes de posicionament
3.1. Triar un esquema de posicionament: la propietat 'position'
3.2. Desplaçaments de les caixes: 'top', 'right', 'bottom' i 'left'
4. Fluxe normal
4.1. Context de formatat de bloc
4.2. Context de formatat inline
4.3. Posicionament relatiu
5. Floats
5.1. Posicionar un float: la propietat 'float'
5.2. Controlar el fluxe prop del floats: la propietat 'clear'
6. Posicionament absolut
6.1. Posicionament fixe
7. Relacions entre 'display', 'position' i 'float'
8. Comparació entre el fluxe normal, els floats i el posicionament absolut
8.1. Fluxe normal
8.2. Posicionament relatiu
8.3. Flotar una caixa
8.4. Posicionament absolut
9. Presentació amb capes
9.1. Especificació del nivell d'apilament: la propietat 'z-index'
10. Sentit del text: les propietats 'direction' i 'unicode-bidi'
1. Introducció
Aquest tema i el de "Detalls del model de formatat visual" descriuen el model de formatat visual: com els agents d'usuari processen l'arbre del document per als mitjans visuals.

En el model de formatat visual cada element de l'arbre del document genera zero o més caixes d'acord amb el model de caixa. La disposició d'aquestes caixes és governada per:


Les propietats definides en aquest tema i en el de "Detalls del model de formatat visual" s'apliquen tant als mitjans continus com als paginats. No obstant, els significats de les propietats de marge varien quan s'apliquen als mitjans paginats (veieu el model de pàgina per a més detalls).

El model de formatat visual no especifica tots els aspectes del formatat (per ex., no especifica l'algorisme de l'espaiat de lletres). Els agents d'usuari conformats poden comportar-se de maneres diverses pel que fa a aquelles qüestions del formatat que no estan cobertes per l'especificació de CSS2 (i, per tant, per aquest manual).
1.1. El viewport
Els agents d'usuari pels mitjans continus generalment ofereixen als usuaris un viewport (una finestra o una altra àrea de visualització sobre la pantalla) a través del qual els usuaris consulten un document. Els agents d'usuari poden canviar la disposició dels elements gràfics i de text del document quan el viewport es canvia de tamany (veieu el bloc contenidor inicial). Quan el viewport és més petit que el bloc contenidor inicial del document, l'agent d'usuari hauria d'oferir un mecanisme d'scroll. Hi ha al menys un viewport per cada llenç, però els agents d'usuari poden presentar més d'un llenç (és a dir, proporcionar diferents vistes del mateix document).
1.2. Blocs contenidors
En CSS2, moltes posicions i mides de caixes es calculen respecte els límits d'una caixa rectangular anomenada bloc contenidor. En general, les caixes generades actuen com a blocs contenidors per a les caixes descendents; es diu que una caixa "estableix" el bloc contenidor dels seus descendents. La frase "el bloc contenidor d'una caixa" significa "el bloc contenidor en el qual es troba la caixa", no el bloc que la caixa genera.

A cada caixa se li dóna una posició respecte el seu bloc contenidor, però no està confinada a aquest bloc, pot patir un desbordament.

L'arrel de l'arbre del document genera una caixa que serveix com a bloc contenidor inicial per a la disposició subseqüent.

L'amplada del bloc contenidor inicial pot especificar-se amb la propietat width per a l'element arrel. Si aquesta propietat té el valor 'auto' l'agent d'usuari substitueix l'amplada inicial (per ex., l'agent d'usuari utilitza l'amplada actual del viewport).

L'alçada del bloc contenidor inicial pot especificar-se amb la propietat height per a l'element arrel. Si aquesta propietat té el valor 'auto' l'alçada del bloc contenidor creixerà fins a acomodar els continguts del document.

El bloc contenidor incial no pot ser posicionat o flotat (és a dir, els agents d'usuari ignoren les propietats position i float per a l'element arrel).

Els detalls de com es calculen les dimensions d'un bloc contenidor estan explicats en el tema "Detalls del model de formatat visual".
2. Control de la generació de caixes
Els següents apartats descriuen els tipus de caixes que es poden generar en CSS2. El tipus d'una caixa afecta, en part, el seu comportament dins el model de formatat visual. La propietat display especifica el tipus d'una caixa.
2.1. Elements block-level i caixes de bloc
Els elements block-level són aquells elements del document font que es formaten visualment com a blocs (per ex., paràgrafs). Diversos valors de la propietat display fan que un element sigui block-level: 'block', 'list-item', 'compact' i 'run-in' (de vegades; veieu caixes compact i run-in) i 'table'.

Els elements block-level generen una caixa de bloc principal que només conté caixes de bloc. La caixa de bloc principal estableix el bloc contenidor per a les caixes descendents i el contingut generat, i a més és la caixa que està involucrada en qualsevol esquema de posicionament. Les caixes de bloc principals participen en un context de formatat de bloc.

Alguns elements block-level generen caixes addicionals fora de la caixa principal: els elements 'list-item' i els elements amb marcadors. Aquestes caixes addicionals es situen respecte la caixa principal.


Caixes de bloc anònimes

En un document com aquest:
	<DIV>
	  Algun text  
	  <P>Més text
	</DIV>
(i suposant que tant DIV com P tenen "display: block"), el DIV resulta que té tant contingut inline com contingut de bloc. Per a fer més fàcil definir el formatat es suposa que hi ha una caixa de bloc anònima al voltant de "Algun text":



Aquest diagrama mostra les tres caixes, una de les quals és anònima, de l'exemple anterior.


En altres paraules, si una caixa de bloc (tal com la generada pel DIV de l'exemple anterior) té una altra caixa de bloc dins d'ella (com el P), aleshores es força que tingui només caixes de bloc dins seu, englobant totes les caixes inline dins una caixa de bloc anònima.

Exemple:

Aquest model s'aplicaria en el següent exemple si les següents regles:
/* Nota: Els agents d'usuari HTML és possible
   que no respectin aquestes regles */
	BODY { display: inline }
	P    { display: block }
s'utilitzessin amb aquest document HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
   <TITLE>Text anònim interromput per un bloc</TITLE>
</HEAD>
<BODY>
   Aquest és un text anònim abans de P.
   <P>Aquest és el contingut de P.</P>
   Aquest és un text anònim després de P.
</BODY>
L'element BODY conté un tros (C1) de text anònim seguit per un element block-level seguit per un altre tros (C2) de text anònim. Les caixes resultants serien una caixa de bloc anònima per a BODY, que contindria una caixa de bloc anònima al voltant de C1, la caixa de bloc de P i una altra caixa de bloc anònima al voltant de C2.

Les propietats de les caixes anònimes s'hereten de la caixa no-anònima englobadora (en l'exemple: la del DIV). Les propietats no-heretades tenen els seus valors inicials. Per exemple, la font de la caixa anònima és heretada de DIV, però els marges seran 0.
2.2. Elements inline-level i caixes inline
Els elements inline-level són aquells elements del document font que no formen nous blocs de contingut; el contingut es distribueix en línies (per ex., troços de text emfatitzat dins d'un paràgraf, imatges inline, etc.). Diversos valors de la propietat display fan que un element sigui inline: 'inline', 'inline-table', 'compact' i 'run-in' (de vegades; veieu les caixes compact i run-in). Els elements inline-level generen caixes inline.

Les caixes inline poden participar en diversos contextos de formatat:



Caixes inline anònimes

En un document com aquest:
	<P>Un <EM>ènfasi</EM> en el text</P>
el P genera una caixa de bloc, amb diverses caixes inline dins d'ella. La caixa per a "ènfasi" és una caixa inline generada per un element inline (EM), però les altres caixes ("Un" i "en el text") són caixes inline generades per un element block-level (P). Les últimes s'anomenen caixes inline anònimes, perquè no tenen associat un element inline-level.

Aquestes caixes inline anònimes hereten les propietats heretables de la seva caixa de bloc pare. Les propietats no heretades tenen els seus valors inicials. En l'exemple, el color de les caixes anònimes inicials és heretat de P, però el fons és transparent.

Pel context, es veu clar de quin tipus de caixa anònima s'està parlant, tant a les caixes anònimes inline com a les caixes anònimes de bloc se les anomena simplement caixes anònimes en l'especificació de CSS2 (i, per tant, en aquest manual).

Hi ha més tipus de caixes anònimes que sorgeixen quan es dóna format a les taules.
2.3. Caixes compact
Una caixa compact es comporta tal com segueix:


A la caixa compact se li dóna una posició en el marge tal com segueix: és fora (a l'esquerra o a la dreta) de la primera caixa de línia del bloc, però afecta el càlcul de l'alçada d'aquella caixa de línia. La propietat vertical-align de la caixa compact determina la posició vertical de la caixa compact en relació a aquella caixa de línia. La posició horitzontal de la caixa compact és sempre en el marge de la caixa de bloc.

Un element que no pot ser formatat en una línia no pot situar-se en el marge del següent bloc. Per exemple, un element 'compact' en HTML que contingui un element BR sempre estarà formatat com una caixa de bloc (suposant l'estil per defecte de BR, el qual fa que s'insereixi una nova línia). Per a situar textos multilínia en el marge, la propietat float sovint és més apropiada.

El següent exemple il·lustra una caixa compact:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemple d'una caixa compact</TITLE>
    <STYLE type="text/css">
       DT { display: compact }
       DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
       <DT>Curt
          <DD><P>La descripció va aquí.
       <DT>massa llarg pel marge
          <DD><P>La descripció va aquí.
    </DL>
  </BODY>
</HTML>
Aquest exemple hauria de donar un format així:
curt     La descripció va aquí.

massa llarg pel marge
         La descripció va aquí.

La propietat text-align pot utilitzar-se per a alinear l'element compact dins el marge: contra el límit esquerre del marge ('left'), contra el límit dret ('right') o bé centrat en el marge ('center'). El valor 'justify' no s'hi aplica, i es tracta com 'left' o 'right' depenent de la propietat direction de l'element block-level en el marge del qual es formata l'element compact. ('left' si el sentit (direction) és 'ltr', 'right' si és 'rtl'.)

Podeu consultar el tema sobre el contingut generat per a informació sobre com interactuen les caixes compact amb el contingut generat.
2.4. Caixes run-in
Una caixa run-in es comporta tal com segueix:


Una caixa 'run-in' és útil per a les capçaleres run-in, tal com en l'exemple:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemple d'una caixa run-in</TITLE>
    <STYLE type="text/css">
       H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
      <H3>Un títol run-in.</H3>
      <P>I un paràgraf de text que
         el segueix.
  </BODY>
</HTML>
Aquest exemple podria resultar en un format així:
	Un títol run-in. I un
	paràgraf de text que
	el segueix.
Les propietats de l'element run-in són heretades del seu pare en l'arbre origen, i no de la caixa de bloc de la qual visualment en forma part.

Podeu consultar el tema sobre contingut generat per a més informació sobre com interactuen les caixes run-in amb el contingut generat.
2.5. La propietat 'display'
La propietat display transforma el funcionament normal d'un element al que també li pot afegir capacitats i funcionalitats addicionals.

La propietat display pot fer que un element generi una caixa de bloc principal, que generi una o més caixes inline, que no generi cap caixa en l'estructura de formatat, etc. També pot fer que un element es comporti com un element de taula.

Els agents d'usuari HTML conformats poden ignorar aquesta propietat.

Per més informació i exemples sobre el funcionament de la propietat display consulteu en aquest manual el llistat on es troben definides totes les propietats CSS2.
3. Esquemes de posicionament
En CSS2 una caixa pot disposar-se d'acord amb tres esquemes de posicionament:

  1. Fluxe normal. En CSS2, el fluxe normal inclou el formatat de bloc de caixes de bloc, el formatat inline de caixes inline, el posicionament relatiu de caixes de bloc o inline, i el posicionament de caixes compact i run-in.
  2. Floats. En el model de float, una caixa primer es disposa d'acord amb el fluxe normal, aleshores es treu del fluxe i es canvia a l'esquerra o a la dreta com més lluny possible. El contingut pot fluir al llarg del costat d'un float.
  3. Posicionament absolut. En el model de posicionament absolut, una caixa se substrau del fluxe normal enterament (no té impacte en els germans següents) i se li assigna una posició respecte un bloc contenidor.


Nota. Els esquemes de posicionament de CSS2 ajuden els autors a fer els seus documents més accessibles permetent-los evitar trucs de programació (per ex., imatges invisibles) utilitzats per produir alguns efectes determinats en la disposició.
3.1. Triar un esquema de posicionament: la propietat 'position'
Les propieats position i float determinen quin dels algorismes de posicionament CSS2 s'utilitza per a calcular la posició d'una caixa.

Consulteu els valors que poden prendre aquestes dues propietats en el llistat d'aquest manual on es troben definides totes les propietats CSS2.
3.2. Desplaçaments de les caixes: 'top', 'right', 'bottom' i 'left'
Un element es diu que està posicionat si la seva propietat position té un valor diferent de 'static'. Els elements posicionats generen caixes posicionades, disposades d'acord amb quatre propietats: top, right, bottom i left:


Per a caixes absolutament posicionades, els desplaçaments són respecte el bloc contenidor de la caixa. Per a caixes relativament posicionades, els desplaçaments són respecte el límits exteriors de la caixa en sí (és a dir, a la caixa se li dóna una posició en el fluxe normal, i aleshores es desplaça d'aquesta posició d'acord amb aquestes propietats).
4. Fluxe normal
Les caixes en el fluxe normal pertanyen a un context de formatat, el qual pot ser de bloc o inline, però no als dos simultàniament. Les caixes de bloc participen en un context de formatat de bloc. Les caixes inline participen en un context de formatat inline.
4.1. Context de formatat de bloc
En un context de formatat de bloc, les caixes es disposen una després de l'altra, verticalment, començant al principi del bloc contenidor. La distància vertical entre dues caixes germanes es determina per les propietats de marge. Els marges verticals entre les caixes de bloc adjacents en un context de formatat de bloc es col·lapsen.

En un context de formatat de bloc, cada límit exterior esquerre de la caixa toca el límit esquerre del bloc contenidor (per al formatat de dreta a esquerra, es toquen els límits drets). Això és veritat fins i tot amb la presència de floats (encara que l'àrea de contingut de la caixa pot ser que es contragui degut als floats).

Per a més informació sobre els trencaments de pàgina en els mitjans paginats, podeu consultar l'apartat sobre trencaments de pàgina permesos del tema "Mitjans paginats".
4.2. Context de formatat inline
En un context de formatat inline, les caixes estan disposades horitzontalment, una després de l'altra, començant a la part superior del bloc contenidor.

Els marges horitzontals, les vores i el farciment es respecten entre aquestes caixes. Les caixes poden alinear-se verticalment de diferents maneres: les seves parts superiors o inferiors es poden alinear, o es poden alinear les línies base del text de dins d'elles. L'àrea rectangular que conté les caixes que formen una línia s'anomena una caixa de línia.

L'amplada d'una caixa de línia la determina un bloc contenidor. L'alçada d'una caixa de línia es determina mitjançant les regles donades en l'apartat sobre els càlculs de l'alçada de línia. Una caixa de línia sempre és suficientment alta per a totes les caixes que conté. No obstant, pot ser més alta que la caixa més alta que conté (si, per exemple, les caixes estan alineades per tal que les línies base s'alinïin). Quan l'alçada d'una caixa C és menor que l'alçada de la caixa de línia que la conté, l'alineació vertical de C dins la caixa de línia ve determinada per la propietat vertical-align.

Quan diverses caixes inline no poden cabre horitzontalment dins una sola caixa de línia, es distribueixen entre dues o més caixes de línia apilades verticalment. Així, un paràgraf és una pila vertical de caixes de línia. Les caixes de línia s'apilen sense separació vertical i mai es solapen.

En general, el límit esquerre d'una caixa de línia toca el límit esquerre del seu bloc contenidor i el límit dret toca el límit dret del seu bloc contenidor. No obstant, les caixes flotants poden anar entre el límit del bloc contenidor i el límit de la caixa de línia. Així, encara que les caixes de línia del mateix context de formatat generalment tenen la mateixa amplada (la del bloc contenidor), poden variar en l'amplada si l'espai horitzontal disponible es redueix degut als floats. Les caixes de línia del mateix context de formatat inline generalment varien en l'alçada (per ex., una línia pot contenir una imatge alta mentre que altres contenen només text).

Quan l'amplada total de les caixes inline d'una línia és menor que l'amplada de la caixa de línia que les conté, la seva distribució horitzonal dins de la caixa de línia es determina per la propietat text-align. Si aquesta propietat té el valor 'justify', l'agent d'usuari pot allargar les caixes inline també.

Com que una caixa inline és possible que no excedeixi l'amplada d'una caixa de línia, les caixes de línia llargues es divideixen en diverses caixes i aquestes caixes es distribueixen a través de diverses caixes de línia. Quan una caixa inline es divideix, els marges, les vores i el farciment no tenen cap efecte visual on té lloc la divisió (dit d'una altra manera més general, els marges, les vores i el farciment no tenen cap efecte visual on té lloc una o més divisions). El formatat dels marges, les vores i el farciment pot no estar definit totalment si la divisió té lloc dins d'una inserció bidireccional.

Les caixes inline també poden dividir-se entre diverses caixes dins de la mateixa caixa de línia degut al processament de text bidireccional.

Aquí hi ha un exemple de construcció de caixes inline. El següent paràgraf (creat per l'element block-level de l'HTML P) conté text anònim alternat amb els elements EM i STRONG:
<P>Diverses <EM>paraules emfatitzades</EM> apareixen
<STRONG>en aquesta</STRONG> frase.</P>
L'element P genera una caixa de bloc que conté cinc caixes inline, tres de les quals són anònimes:


Per a formatar el paràgraf l'agent d'usuari situa les cinc caixes dins de caixes de línia. En aquest exemple, la caixa generada per a l'element P estableix el bloc contenidor per a les caixes de línia. Si el bloc contenidor és suficientment ample, totes les caixes inline cabran dins d'una sola caixa de línia:
	Diverses paraules emfatitzades apareixen en aquesta frase.
Si no, les caixes inline seran dividides i distribuides a través de diverses caixes de línia. El paràgraf previ podria dividir-se tal com segueix:
	Diverses paraules emfatitzades apareixen
	en aquesta frase.
o així:
	Diverses paraules
	emfatitzades apareixen en
	aquesta frase.
En l'exemple previ, la caixa de EM ha esta dividida en dues caixes EM (anomenem-les "divisió1" i "divisó2"). Els marges, les vores, el farciment o les decoracions del text no tenen cap efecte visible després de divisió1 o abans de divisió2.

Considerem el següent exemple:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemple de fluxe inline en diverses línies</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Diverses <EM>paraules emfatitzades</EM> van aquí.</P>
  </BODY>
</HTML>
Depenent de l'amplada de P, les caixes poden distribuir-se així:



4.3. Posicionament relatiu
Una vegada una caixa ha estat disposada d'acord amb el fluxe normal o flotada, pot ser desplaçada relativament a aquesta posició. Això s'anomena posicionament relatiu. El fet de desplaçar una caixa (C1) d'aquesta manera no té efecte en la caixa (C2) que la segueix; a C2 se li ha donat una posició com si C1 no estigués desplaçada i C2 no es reposiciona després que el desplaçament de C1 s'hagi aplicat. Això implica que el posicionament relatiu pot causar que les caixes es solapin.

Les caixes posicionades relativament mantenen la mida que tenen en el fluxe normal, incloent-hi els trencaments de línia i l'espai originàriament reservat per a elles. Una caixa posicionada relativament estableix un nou bloc contenidor per als fills del fluxe normal i els descendents posicionats.

Una caixa posicionada relativament es genera quan la propietat position per a un element té el valor 'relative'. El desplaçament s'especifica mitjançant les propietats top, right, bottom i left:



El moviment dinàmic de les caixes posicionades relativament pot produir efectes d'animació en els entorns d'script (veieu també la propietat visibility). El posicionament relatiu pot també ser utilitzat com a una forma general de superindexació i subindexació excepte que l'alçada de la línia no s'ajusta automàticament per a prendre el posicionament en consideració. Veieu la descripció dels càlculs d'alçada de les línies per a més informació.

Els exemples de posicionament relatiu es faciliten en l'apartat "Comparació entre el fluxe normal, els floats i el posicionament absolut".
5. Floats
Un float és una caixa que s'ha desplaçat a l'esquerra o a la dreta sobre la línia actual. La característica més interessant d'un float (o caixa "flotada" o "flotant") és que el contingut pot fluir al llarg del seu costat (o pot tenir prohibit de fer-ho per la propietat clear). El contingut flueix pel costat dret d'una caixa flotada a l'esquerra i pel costat esquerre d'una caixa flotada a la dreta. El següent és una introducció al posicionament dels floats i al fluxe del contingut; les regles exactes que governen el comportament dels floats vénen donades en l'apartat sobre la propietat float.

Una caixa flotada ha de tenir una amplada explícita (assignada via la propietat width, o la seva amplada intrínseca en el cas dels elements reemplaçats). Qualsevol caixa flotada esdevé una caixa de bloc que és desplaçada a l'esquerra o a la dreta fins que el seu límit exterior toca el límit del bloc contenidor o el límit exterior d'un altre float. La part superior de la caixa flotada s'alinea amb la part superior de la caixa de línia actual (o al part inferior de la caixa de bloc precedent si no existeix cap caixa de línia). Si no hi ha espai horitzontal suficient en la línia actual per al float, aquest és desplaçat cap enrera, línia a línia, fins que una línia tingui espai per a ell.

Com que un float no es troba en el fluxe, les caixes de bloc no posicionades creades abans i després de la caixa del float es situen verticalment com si el float no existís. No obstant, les caixes de línia creades al costat del float s'escurcen per a fer espai per a la caixa flotada. Qualsevol contingut de la línia actual abans d'una caixa flotada es resitua en la primera línia disponible de l'altre costat del float.

Diversos floats poden ser adjacents, i aquest model també s'aplica a floats adjacents de la mateixa línia.

Exemple:

La següent regla flota cap a l'esquerra totes les caixes IMG amb class="icon" (i inicialitza el marge esquerre a '0'):
	IMG.icon { 
	  float: left;
	  margin-left: 0;
	}

Considerem el següent codi font HTML i el full d'estil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemple de float</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src="img.gif" alt="Aquesta imatge il·lustrarà els floats">
       Text de mostra.....
  </BODY>
</HTML>
La caixa IMG és flotada cap a l'esquerra. El contingut que segueix és formatat a la dreta del float, començant en la mateixa línia que el float. Les caixes de línia que es troben a la dreta del float s'escurcen degut a la presència del float, però continuen la seva amplada "normal" (la del bloc contenidor establert per l'element P) després del float. Aquest document podria formatar-se així:



El formatat hauria estat exactament el mateix si el document hagués estat:
   <BODY>
     <P>Text de mostra que
     <IMG src="img.gif" alt="Aquesta imatge il·lustrarà els floats">
              no té cap altre propòsit...
   </BODY>
perquè el contingut de l'esquerra del float és desplaçat pel float i resituat al seu costat dret.

Els marges de les caixes flotants mai es col·lapsen amb els marges de les caixes adjacents. Així, en l'exemple previ, els marges verticals no es col·lapsen entre la caixa P i la caixa flotada IMG.

Un float pot solapar altres caixes en el fluxe normal (per ex., quan una caixa en el fluxe normal d'aprop d'un float té marges negatius). Quan una caixa inline es solapa amb un float, el contingut, el fons i les vores de la caixa inline es presenten davant del float. Quan una caixa de bloc solapa, el fons i les vores de la caixa de bloc es presenten darrera del float i només són visibles on la caixa és transparent. El contingut de la caixa de bloc es presenta davant del float.

Exemple:

Aquí hi ha una altra il·lustració, que mostra què passa quan un float solapa les vores dels elements en el fluxe normal:



Una imatge flotant eclipsa les vores de les caixes de bloc amb les quals es solapa.


El següent exemple il·lustra l'ús de la propietat clear per a prevenir que el contingut es situï al costat d'un float.

Suposant una regla com aquesta:
	P { clear: left }
el formatat hauria de veure's així:



Tots dos paràgrafs han fixat "clear: left", la qual cosa fa que el segon paràgraf "sigui empès cap avall" a una posició sota del float -- el seu marge superior s'expandeix per a assolir això (veieu la propietat clear)
.
5.1. Posicionar un float: la propietat 'float'
La propietat float especifica si una caixa s'hauria de fer flotar cap a l'esquerra, cap a la dreta, o bé si no s'hauria de fer flotar. Aquesta propietat pot aplicar-se a elements que generin caixes que no estiguin absolutament posicionades.

Seguidament es presenten les regles precises que governen el comportament dels floats: (l'expressió "element flotant esquerre" o "caixa flotant esquerra" significa que l'element o caixa flotant en qüestió ha estat desplaçat/da cap a l'esquerra; anàlogament per al costat dret):

  1. El límit exterior esquerre d'una caixa flotant esquerra no pot estar a l'esquerra del límit esquerre del seu bloc contenidor. S'aplica una regla anàloga per als elements flotants drets.
  2. Si la caixa actual és flotant esquerra i hi ha alguna caixa flotant esquerra generada per algun element precedent en el document font, aleshores per a cada caixa d'aquestes precedent, el límit exterior esquerre de la caixa actual ha d'estar a la dreta del límit exterior dret de la caixa precedent, o bé la seva part superior ha de ser més baixa que la part inferior de la caixa precedent. S'apliquen unes regles anàlogues per a les caixes flotants dretes.
  3. El límit exterior dret d'una caixa flotant esquerra no pot trobar-se a la dreta del límit exterior esquerre de cap caixa flotant dreta que estigui a la dreta d'ella. S'apliquen unes regles anàlogues per als elements flotants drets.
  4. La part superior exterior d'una caixa flotant no pot ser més alta que la part superior del seu bloc contenidor.
  5. La part superior exterior d'una caixa flotant no pot ser més alta que la part superior exterior de cap caixa de bloc o flotada generada per un element precedent en el document font.
  6. La part superior exterior de la caixa flotant d'un element no pot ser més alta que la part superior de cap caixa de línia que contingui una caixa generada per un element precedent en el document font.
  7. Una caixa flotant esquerra que té una altra caixa flotant esquerra a la seva esquerra no pot tenir el seu límit exteriot dret a la dreta del límit dret del seu bloc contenidor. (Aproximadament: un float esquerre no pot sobresortir del límit dret, a no ser que ja es trobi tant a l'esquerra com sigui possible.) S'aplica una regla anàloga per als elements flotants drets.
  8. Una caixa flotant ha de situar-se tant amunt com sigui possible.
  9. Una caixa flotant esquerra ha d'estar situada tant a l'esquerra com sigui possible, una caixa flotant dreta ha d'estar situada tant a la dreta com sigui possible. És preferible una posició alta abans que una que es trobi més a l'esquerra/dreta.
5.2. Controlar el fluxe prop dels floats: la propietat 'clear'
La propietat clear indica quins costats de la caixa o caixes d'un element no poden ser adjacents a una caixa flotant precedent. (Pot ser que l'element en sí mateix tingui descendents flotants: la propietat clear no té cap efecte sobre aquells.)

Aquesta propietat només es pot especificar per a elements block-level (incloent-hi floats). Per a caixes compact i run-in, aquesta propietat s'aplica a l'última caixa de bloc a la qual pertany la caixa compact o run-in.

Quan la propietat està inicialitzada sobre elements flotants, resulta en una modificació de les regles per al posicionament del float. S'afegeix una restricció extra (la núm. 10):

6. Posicionament absolut
En el model de posicionament absolut una caixa es desplaça explícitament respecte el seu bloc contenidor. Se substrau totalment del fluxe normal (no té cap impacte en els germans posteriors). Una caixa absolutament posicionada estableix un nou bloc contenidor per als fills en el fluxe normal i els descendents posicionats. No obstant, els continguts d'un element absolutament posicionat no flueixen al voltant de cap altra caixa. Poden o no eclipsar els continguts d'una altra caixa, depenent dels nivells d'apilament de les caixes solapades.

Les referències que es trobin en aquest manual a un element absolutament posicionat (o a la seva caixa) impliquen que la propietat position de l'element té el valor 'absolute' o 'fixed'.
6.1. Posicionament fixe
El posicionament fixe és una subcategoria del posicionament absolut. La única diferència és que, per a una caixa posicionada de manera fixa, el bloc contenidor és establert pel viewport. Per als mitjans continus, les caixes fixes no es mouen quan el document és "desenrotllat" (amb la barra d'scroll). En aquest aspecte, són similars a les imatges de fons fixes. Per als mitjans paginats les caixes amb posicions fixes es repeteixen en cada pàgina. Això és útil per a situar, per exemple, una signatura al final de cada pàgina.

Els autors poden utilitzar el posicionament fixe per a crear presentacions similars als frames. Considerem la següent disposició de frames:



Això es podria aconseguir amb el següent document HTML i les regles d'estil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Un document de frames amb CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* Requerit per les alçades 
      #capçalera {              percentuals de més avall */
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #barralat {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #principal {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #peu {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="capçalera"> ...  </DIV>
    <DIV id="barralat"> ...  </DIV>
    <DIV id="principal"> ...  </DIV>
    <DIV id="peu"> ...  </DIV>
  </BODY>
</HTML>
7. Relacions entre 'display', 'position' i 'float'
Les tres propietats que afecten la generació i la disposició de les caixes -- display, position i float -- interactuen d'aquesta manera:


Nota. CSS2 no especifica el comportament de la disposició quan els valors per a aquestes propietats són modificades pels scripts. Per exemple, què passa quan un element que té "width: auto" és reposicionat? els continguts es resituaran o bé mantindran el seu formatat original? La resposta queda fora de l'especificació de CSS2 (i, per tant, d'aquest manual), i aquest comportament és provable que difereixi de les implementacions inicials de CSS2.
8. Comparació entre el fluxe normal, els floats i el posicionament absolut
Per a il·lustrar les diferències entre el fluxe normal, el posicionament relatiu, els floats i el posicionament absolut, es proporcionen una sèrie d'exemples basats en el següent fragment d'HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Comparació dels esquemes de posicionament</TITLE>
  </HEAD>
  <BODY>
    <P>Començament dels continguts del cos.
      <SPAN id="exterior"> Inici dels continguts exteriors.
      <SPAN id="interior"> Continguts interiors.</SPAN>
      Final dels continguts exteriors.</SPAN>
      Final dels continguts del cos.
    </P>
  </BODY>
</HTML>
En aquest document se suposen les següents regles:
	BODY { display: block; line-height: 200%; 
	       width: 400px; height: 400px }
	P    { display: block }
	SPAN { display: inline }

Les posicions finals de les caixes generades pels elements exterior i interior varien en cada exemple. En cada il·lustració, els números de l'esquerra de la il·lustració indiquen la posició del fluxe normal de les línies a doble espai (per claretat). (Nota: les il·lustacions utilitzen diferents escales horitzontals i verticals.)
8.1. Fluxe normal
Considerem les següents declaracions CSS per a exterior i interior que no alteren el fluxe normal de les caixes:
	#exterior { color: red }
	#interior { color: blue }

L'element P conté tot el contingut inline: el text inline anònim i dos elements SPAN. Per tant, tot el contingut es disposarà en un context de formatat inline, dins d'un bloc contenidor establert per l'element P, produint una disposició semblant a això:

8.2. Posicionament relatiu
Per veure l'efecte del posicionament relatiu especificarem:
	#exterior { position: relative; top: -12px; color: red }
	#interior { position: relative; top: 12px; color: blue }
El text flueix normalment fins a l'element exterior. El text exterior aleshores es transforma a la seva posició i dimensions de fluxe normal al final de la línia 1. Aleshores, les caixes inline que contenen el text (distribuit en tres línies) es traslladen '-12px' (cap amunt) com una unitat.

Els continguts de l'interior, com a fill de l'exterior, normalment fluïrien immediatament després de les paraules "continguts exteriors" (sobre la línia 1.5). No obstant, els continguts interiors són ells mateixos desplaçats '12px' (cap avall) relativament als continguts exteriors, de tornada cap a la seva posició original en la línia 2.

Cal observar que el contingut que segueix l'exterior no es troba afectat pel posicionament relatiu de l'exterior.



Cal observar també que si el desplaçament de l'exterior hagués estat de '-24px', el text de l'exterior i el text del cos s'haguessin solapat.
8.3. Flotar una caixa
Ara considerarem l'efecte de flotar el text de l'element interior cap a la dreta mitjançant les següents regles:
	#exterior { color: red }
	#interior { float: right; width: 130px; color: blue }
El text flueix normalment fins a la caixa interior, la qual és empesa fora del fluxe i flotada cap al marge dret (la seva propietat width ha estat assignada explícitament). Les caixes de línia de l'esquerra del float s'escurcen i el text restant de l'element flueix dins d'elles:



Per a mostrar l'efecte de la propietat clear afegim un element germà a l'exemple:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Comparació dels esquemes de posicionament II</TITLE>
  </HEAD>
  <BODY>
    <P>Començament del continguts del cos.
      <SPAN id=exterior> Inici dels continguts exteriors.
      <SPAN id=interior> Continguts interiors.</SPAN>
      <SPAN id=germa> Continguts del germà.</SPAN>
      Final dels continguts exteriors.</SPAN>
      Final dels continguts del cos.
    </P>
  </BODY>
</HTML>
Les següents regles:
	#interior { float: right; width: 130px; color: blue }
	#germa { color: red }
fan que la caixa interior floti cap a la dreta com abans, i que el text restant del document flueixi dins de l'espai vacant:



No obstant, si la propietat clear de l'element germà està fixada a 'right' (és a dir, la caixa generada del germà no acceptarà una posició propera a les caixes flotants de la seva dreta), el contingut del germà comença a fluir per sota del float:
	#interior { float: right; width: 130px; color: blue }
	#germa { clear: right; color: red }

8.4. Posicionament absolut
Finalment, considerarem l'efecte del posicionament absolut. Considerem les següents declaracions CSS per a exterior i interior:
	#exterior { 
	    position: absolute; 
	    top: 200px; left: 200px; 
	    width: 200px; 
	    color: red;
	}
	#interior { color: blue }
les quals faran que la part superior de la caixa exterior es posicioni respecte el seu bloc contenidor. El bloc contenidor per a una caixa posicionada és establert per l'ancestre posicionat més proper (o, si no n'existeix cap, pel bloc contenidor inicial, com en el nostre exemple). La part superior de la caixa exterior es troba '200px' per sota de la part superior del bloc contenidor i la part esquerra es troba a '200px' del costat esquerre. La caixa filla d'exterior flueix de manera normal respecte el seu pare.



El següent exemple mostra una caixa posicionada absolutament que és un fill d'una caixa posicionada relativament. Encara que la caixa exterior pare no es troba actualment desplaçada, el fet d'inicialitzar la seva propietat position a 'relative' significa que la seva caixa pot servir com a bloc contenidor per als descendents posicionats. Com que la caixa exterior és una caixa inline que es divideix a través de diverses línies, els límits superior i esquerre de la primera caixa inline (pintats amb línies discontínues gruixudes en la il·lustració de més avall) serveixen com a referències pels desplaçaments top i left:
	#exterior { 
	  position: relative; 
	  color: red 
	}
	#interior { 
	  position: absolute; 
	  top: 200px; left: -100px; 
	  height: 130px; width: 130px; 
	  color: blue;
	}
Això pot resultar en una cosa semblant a:



Si no posicionem la caixa exterior:
	#exterior { color: red }
	#interior {
	  position: absolute; 
	  top: 200px; left: -100px; 
	  height: 130px; width: 130px; 
	  color: blue;
	}	
el bloc contenidor per a interior esdevé el bloc contenidor inicial (en el nostre exemple). La següent il·lustració mostra on hauria de finalitzar la caixa interior en aquest cas:



Els posicionaments relatiu i absolut poden utilitzar-se per a implementar barres de canvi, tal com es mostra en el següent exemple:
<P style="position: relative; margin-right: 10px; left: 10px;">
   S'han usat dos guions vermells per fer de barra
   de canvi. Aquests "flotaran" cap a l'esquerra de la línia que
   conté AQUESTA <SPAN style="position: absolute;
   top: auto; left: -1em; color: red;">--  </SPAN>
   paraula.
</P>
el qual podria donar com a resultat:



Primer, el paràgraf (els laterals del bloc contenidor del qual es mostren en la il·lustració) flueix de manera normal. Aleshores es desplaça '10px' des del límit esquerre del bloc contenidor (així, un marge dret de '10px' ha estat reservat en anticipació del desplaçament). Els dos guions que actuen com a barres de canvi se substrauen del fluxe i es posicionen en la línia actual (degut a "top: auto"), i a '-1em' del límit esquerre del seu bloc contenidor (establert per P en la seva posició final). El resultat és que les barres de canvi sembla que "flotin" a l'esquerra de la línia actual.
9. Presentació amb capes
En els següents apartats, l'expressió "davant de" significa més proper a l'usuari quan l'usuari està de cara a la pantalla.

En CSS2 cada caixa té una posició en tres dimensions. A més de les seves posicions horitzontal i vertical, les caixes estan situades al llarg d'un "eix z" i estan disposades les unes sobre les altres. Les posicions de l'eix z són particularment rellevants quan les caixes es solapen visualment.

Cada caixa pertany a un context d'apilament. Cada caixa d'un context d'apilament donat té un nivell de pila enter, que és la seva posició sobre l'eix z relativa a les altres caixes del mateix context d'apilament. Les caixes amb nivells d'apilament més alts sempre estan disposades davant de les caixes amb nivells d'apilament més baixos. Les caixes poden tenir nivells d'apilament negatius. Les caixes amb el mateix nivell d'apilament dins d'un mateix context d'apilament sempre s'apilen de baix a dalt d'acord amb l'ordre de l'arbre del document.

L'element arrel crea un context d'apilament arrel, però altres elements poden establir contextos d'apilament locals. Els contextos d'apilament s'hereten. Un context local d'apilament és atòmic; les caixes d'altres contextos d'apilament no poden aparèixer entre cap de les seves caixes.

Un element que estableix un context d'apilament local genera una caixa que té dos nivells d'apilament: un pel context d'apilament que crea (sempre '0') i un pel context d'apilament al qual pertany (donat per la propietat z-index).

La caixa d'un element té el mateix nivell d'apilament que la caixa del seu pare, a no ser que se li hagi donat un nivell d'apilament diferent mitjançant la propietat z-index.
9.1. Especificació del nivell d'apilament: la propietat 'z-index'
La propietat z-index per a una caixa posicionada especifica:

  1. El nivell d'apilament de la caixa en el context d'apilament actual.
  2. Si la caixa estableix un context d'apilament local o no

En el següent exemple, els nivells d'apilament de les caixes (anomenades amb els seus atributs "id") són: "text2"=0, "imatge"=1, "text3"=2 i "text1"=3. El nivell d'apilament de "text2" és heretat de la caixa de l'arrel. Els altres s'especifiquen amb la propietat z-index:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Posicionament en Z-ordre</TITLE>
    <STYLE type="text/css">
      .pila { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="imatge" class="pila" 
           src="papallona.gif" alt="Imatge d'una papallona"
           style="z-index: 1">

    <DIV id="text1" class="pila" 
         style="z-index: 3">
      Aquest text quedarà davant de la imatge de la papallona.
    </DIV>

    <DIV id="text2">
      Aquest text quedarà darrera de tot.
    </DIV>

    <DIV id="text3" class="pile" 
         style="z-index: 2">
      Aquest text quedarà darrera del text1, però quedarà
	 davant de la imatge de la papallona.
    </DIV>
  </BODY>
</HTML>
Aquest exemple demostra la noció de transparència. El comportament per defecte d'una caixa és permetre que les caixes de darrera seu siguin visibles a través de les àrees transparents del seu contingut. En l'exemple, cada caixa es sobreposa de manera transparent a les caixes de sota seu. Aquest comportament pot ser sobreescrit utiitzant una de les propietats de fons existents.
10. Sentit del text: les propietats 'direction' i 'unicode-bidi'
Els caràcters de certes escriptures s'escriuen de dreta a esquerra. En alguns documents, en particular els que estan escrits amb escriptura aràbiga o hebrea, i en alguns contextos d'idiomes barrejats, el text d'un sol bloc (presentat visualment) pot aparèixer amb direccionalitat barrejada. Aquest fenomen s'anomena bidireccionalitat, o "bidi" per escurçar.

L'estàndard d'Unicode defineix un complex algorisme per a determinar el sentit correcte del text. L'algorisme consisteix en un componenet implícit basat en les propietats dels caràcters, a més de controls explícits per a insercions i sobreescriptures. CSS2 es basa en aquest algorisme per assolir una presentació bidireccional correcta. Les propietats direction i unicode-bidi permeten als autors especificar com els elements i els atributs d'un llenguatge de document es corresponen amb aquest algorisme.

Si un document conté caràcters de dreta a esquerra, i si l'agent d'usuari visualitza aquests caràcters (amb els glyphs apropiats, no substituts arbitraris tals com un signe d'interrogació, un codi hexadecimal, una caixa negra, etc.), l'agent d'usuari ha d'aplicar l'algorisme bidireccional. Aquest requeriment aparentment unilateral reflecteix el fet que, encara que no tots els documents en hebreu o àrab contenen text de direccionalitat barrejada, aquests documents és més provable que continguin text d'esquerra a dreta (per ex., números, text d'altres llengües (idiomes)) que no que els documents escrits en idiomes d'esquerra a dreta tinguin insercions de text escrit de dreta a esquerra.

Com que el sentit d'un text depèn de l'estructura i la semàntica del llenguatge del document, aquestes propietats haurien de ser utilitzades en la majoria dels casos només pels dissenyadors de les DTDs, o els autors de documents especials. Si un full d'estil per defecte especifica aquestes propietats, els autors i els usuaris no haurien d'especificar regles per a sobreescriure-les. Una típica excepció seria sobreescriure el comportament bidireccional en un agent d'usuari si aquest agent d'usuari translitera el jueu (usualment escrit en hebreu) a lletres llatines per petició de l'usuari.

L'especificació de l'HTML 4.0 (i aquest manual en la secció de l'HTML 4.0) defineix el comportament de la bidireccionalitat pels elements HTML. Els agents d'usuari d'HTML conformats (veieu l'especificació de l'HTML 4.0) poden per tant ignorar les propietats direction i unicode-bidi en els fulls d'estil d'autor i d'usuari. L'especificació de l'HTML 4.0 també conté més informació sobre la temàtica de la bidireccionalitat.

La propietat direction especifica el sentit bàsic d'escriptura dels blocs i el sentit de les insercions i les sobreescriptures (veieu unicode-bidi) per a l'algorisme bidireccional d'Unicode. A més, especifica el sentit de la disposició de les columnes d'una taula, el sentit del desbordament (overflow) horitzontal i la posició d'una última línia incompleta d'un bloc en cas que "text-align: justify".

Per què la propietat direction tingui algun efecte sobre els elements inline-level, el valor de la propietat unicode-bidi ha de ser 'embed' o 'override'.

Nota. La propietat direction, quan està especificada per a elements de columna d'una taula, no és heretada per les cel·les de la columna ja que les columnes no existeixen en l'arbre del document. Així, CSS no pot capturar fàcilment les regles d'herència de l'atribut "dir" descrites en l'especificació de l'HTML 4.0, en la secció 11.3.2.1.

L'ordre final dels caràcters en cada element block-level és el mateix que si s'haguessin afegit els codis de control de la bidireccionalitat, les marques de codi haguessin estat eliminades i la seqüència de caràcters resultant s'hagués passat a una implementació de l'algorisme bidireccional d'Unicode per a text simple la qual cosa hagués produit els mateixos trencaments de línia que el text amb estil. En aquest procés les entitats no textuals com les imatges es tracten com a caràcters neutrals, a no ser que la seva propietat unicode-bidi tingui un valor diferent de 'normal', en tal cas es tracten com a caràcters forts en la direction especificada per a l'element.

Cal observar que a fi de ser capaç de fer fluir les caixes inline en un sentit uniforme (bé totalment d'esquerra a dreta o bé totalment de dreta a esquerra), pot ser que s'hagin de crear més caixes inline (incloent-hi caixes inline anònimes), i algunes caixes inline poden haver de ser dividides i reordenades abans de fluir.

Com que l'algorisme d'Unicode té un límit de 15 nivells d'inserció, s'ha d'anar amb compte de no utilitzar unicode-bidi amb un valor diferent de 'normal' a no ser que sigui el més apropiat. En particular, el valor 'inherit' s'hauria d'utilitzar amb extrema precaució. No obstant, per a elements que, en general, estan fets per a ser visualitzats com a blocs, es prefereix tenir "unicode-bidi: embed" per a mantenir l'element sencer en cas que la visualització es canviï a inline (veieu l'exemple de més avall).

El següent exemple mostra un document XML amb text bidireccional. Il·lustra un important principi de disseny: els dissenyadors de DTDs haurien de tenir en compte la bidireccionalitat tant en el propi llenguatge (elements i atributs) com en qualsevol full d'estil que hi acompanyi. Els fulls d'estil s'haurien de dissenyar per tal que les regles de bidireccionalitat estiguin separades de les altres regles d'estil. Les regles de bidireccionalitat no haurien de ser sobreescrites per altres fulls d'estil per tal que el comportament bidireccional del llenguatge del document o bé de la DTD es preservi.

Exemple:

En aquest exemple, les lletres en minúscula signifiquen caràcters inherents d'esquerra a dreta i les lletres en majúscules representen els caràcters inherents de dreta a esquerra:
<HEBREU>
  <PAR>HEBREU1 HEBREU2 angles3 HEBREU4 HEBREU5</PAR>
  <PAR>HEBREU6 <EMF>HEBREU7</EMF> HEBREU8</PAR>
</HEBREU>
<ANGLES>
  <PAR>angles9 angles10 angles11 HEBREU12 HEBREU13</PAR>
  <PAR>angles14 angles15 angles16</PAR>
  <PAR>angles17 <HE-QUO>HEBREU18 angles19 HEBREU20</HE-QUO></PAR>
</ANGLES>
Com que això és XML, el full d'estil és responsable de fixar el sentit del text. Aquest és el full d'estil:
   /* Regles per a la bidireccionalitat */
   HEBREU, HE-QUO  {direction: rtl; unicode-bidi: embed}
   ANGLES          {direction: ltr; unicode-bidi: embed} 

   /* Regles per a la presentació */
   HEBREU, ANGLES, PAR  {display: block}
   EMF                  {font-weight: bold}
L'element HEBREU és un bloc amb un sentit bàsic de dreta a esquerra, l'element ANGLES és un bloc amb un sentit bàsic d'esquerra a dreta. Els PARs són blocs que hereten el sentit bàsic dels seus pares. Així, els primers dos PARs es llegeixen començant per la part superior dreta, els últims tres es llegeixen començant per la part superior esquerra. Cal observar que HEBREU i ANGLES són triats com a noms d'elements només per a ser més explícits: en general, els noms dels elements haurien d'estar més relacionats amb l'estructura que no amb l'idioma.

L'element EMF és inline-level, i com que el seu valor per a unicode-bidi és 'normal' (el valor inicial) no té cap efecte en l'ordenació del text. L'element HE-QUO, per altra banda, crea una inserció.

El format d'aquest text s'hauria d'assemblar a això, si la longitut de la línia és llarga:



Cal observar que la inserció de HE-QUO fa que HEBREU18 es trobi a la dreta de angles19.

Si les línies s'han de trencar, hauria de ser així:



Com que HEBREU18 ha de llegir-se abans que angles19, es troba en la línia de sobre de angles19. Només trencant la llarga línia des del principi el formatat no hagués funcionat. Cal remarcar també que la primera síl·laba de angles19 hauria d'encaixar en la línia prèvia, però els guions de les paraules d'esquerra a dreta en un context de dreta a esquerra, i viceversa, sovint es suprimeixen a fi d'evitar haver de visualitzar un guió enmig d'una línia.
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos