9 Modello di formattazione visuale

Sommario

9.1 Introduzione al modello di formattazione visuale

Questo capitolo ed il seguente descrivono il modello di formattazione visuale: come i programmi utente elaborano [process] l'albero del documento per i media visuali.

Nel modello di formattazione visuale, ogni elemento nell'albero del documento genera zero o più riquadrati [boxes] secondo il modello per riquadrati [box model]. La rappresentazione [layout] di questi riquadrati è regolata da:

Le proprietà definite in questo capitolo e nel prossimo si applicano ai media continui e media a pagine. Tuttavia, il significato delle proprietà dei margini varia quando viene applicato ai media a pagine (si veda il modello di pagina per i dettagli).

Il modello di formattazione visuale non specifica tutti gli aspetti della formattazione (per esempio, non specifica un algoritmo per la spaziatura delle lettere). I programmi utente conformi possono comportarsi in modo differente per quelle problematiche di formattazione non coperte da queste specifiche.

9.1.1 La finestra di visualizzazione

I programmi utente per i media continui generalmente offrono agli utenti una finestra di visualizzazione [viewport] (un riquadro on un'altra area di visualizzazione sullo schermo) attraverso cui gli utenti consultano un documento. I programmi utente possono cambiare la rappresentazione di un documento quando la finestra di visualizzazione viene ridimensionata (si veda il blocco contenitore iniziale). Quando la finestra di visualizzazione è più piccola del blocco contenitore iniziale del documento, il programma utente dovrebbe offrire un meccanismo di scorrimento [scrolling]. Vi è al massimo una finestra di visualizzazione per canovaccio [canvas, che alla lettera indica una superficie su cui è rappresentato qualcosa], ma i programmi utente possono rendere [render] più di un canovaccio (ossia fornire differenti vedute dello stesso documento).

9.1.2 Blocchi contenitori

Nei CSS2, molte posizioni e dimensioni dei riquadrati sono calcolate rispetto ai limiti di un riquadrato rettangolare chiamato blocco contenitore. In generale, i riquadrati generati si comportano come blocchi contenitori per i riquadrati discendenti; diciamo che un riquadrato "stabilisce" il blocco contenitore per i suoi discendenti. La frase "un blocco contenitore di un riquadrato" significa "il blocco contenitore in cui il riquadrato vive," non quello che genera.

A ogni riquadrato è data una posizione rispetto al suo blocco contenitore, ma non è confinato dal suo blocco contenitore; può eccedere [overflow, lett. "straripare" o "strabordare"].

La radice dell'albero del documento genera un riquadrato che funge da blocco contenitore iniziale per la successiva rappresentazione [layout].

La larghezza del blocco contenitore iniziale può essere specificata con la proprietà 'width' per l'elemento radice. Se questa proprietà ha il valore 'auto', il programma utente fornisce la larghezza iniziale (per esempio, il programma utente usa la larghezza corrente della finestra di visualizzazione).

L'altezza del blocco contenitore iniziale può essere specificata con la proprietà 'height' per l'elemento radice. Se questa proprietà ha il valore 'auto', l'altezza del blocco contenitore aumenterà per adattarsi al contenuto del documento.

Il blocco contenitore iniziale non può essere posizionato o flottato [floated] (ossia i programmi utente ignorano le proprietà 'position' e 'float' per l'elemento radice).

I dettagli su come le dimensioni di un blocco contenitore sono calcolate, vengono descritti nel prossimo capitolo.

9.2 Controllare la generazione dei riquadrati

Le sezioni che seguono descrivono i tipi di riquadrati [boxes] che possono essere generati nei CSS2. Il tipo di riquadrato [box] influenza in parte il suo comportamento nel modello di formattazione visuale. La proprietà 'display', descritta di seguito, specifica un tipo di riquadrato.

9.2.1 Elementi a livello di blocco e riquadrati a blocco

Gli elementi a livello di blocco sono quegli elementi del sorgente del documento che sono formattati visivamente come blocchi (per esempio i paragrafi). Diversi valori della proprietà 'display' rendono un elemento a livello di blocco: 'block', 'list-item', 'compact', 'run-in' (parte delle volte; si veda riquadrati compatti [compact] e incorporati [run-in]), e 'table'.

Gli elementi a livello di blocco generano un riquadrato principale a blocco che contiene solo riquadrati a blocco. Il riquadrato principale a blocco stabilisce il blocco contenitore per i riquadrati discendenti ed i contenuti generati, ed è anche il riquadrato coinvolto in ogni schema di posizionamento. I riquadrati principali a blocco partecipano ad un contesto di formattazione di blocco.

Alcuni elementi a livello di blocco generano riquadrati aggiuntivi al di fuori del riquadrato principale: elementi 'list-item' e quelli con indicatori [markers]. Questi riquadrati aggiuntivi sono posizionati rispetto al riquadrato principale.

Riquadrati anonimi a blocco

In un documento come questo:

<DIV>
  Some text
  <P>More text
</DIV>
(e presupponendo che il DIV e il P abbiano entrambi 'display: block'), il DIV sembra avere sia contenuto in riga [inline] che contenuto di blocco [block]. Per rendere più facile definire la formattazione, presupponiamo che vi sia un riquadrato anonimo a blocco intorno a "Some text".

Diagramma che mostra i tre
riquadrati per l'esempio di sopra   [D]

Diagramma che mostra i tre riquadrati per l'esempio di sopra, dei quali uno è anonimo.

In altre parole: se un riquadrato a blocco (come quello generato per il DIV di sopra) ha un altro riquadrato a blocco al suo interno (come il P di sopra), allora lo forziamo ad avere solo riquadrati a blocco al suo interno, inserendo ogni riquadrato in riga [inline boxes] in un riquadrato anonimo a blocco.

Esempi(o):

Questo modello si applicherebbe nel seguente esempio se le seguenti regole:

/* Nota: i programmi utente HTML possono non rispettare queste regole */
BODY { display: inline }
P    { display: block }

fossero usate in questo documento HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
This is anonymous text before the P.
<P>This is the content of P.</>
This is anonymous text after the P.
</BODY>

L'elemento BODY contiene uno spezzone (C1) di testo anonimo seguito da un elemento a livello di blocco seguito da un altro spezzone (C2) di testo anonimo. I riquadrati risultanti sarebbero un riquadrato anonimo a blocco per BODY, contenente un riquadrato anonimo a blocco intorno a C1, il riquadrato a blocco P, e un altro riquadrato anonimo a blocco intorno a C2.

Le proprietà dei riquadrati anonimi vengono ereditate dai riquadrati non anonimi che li racchiudono (nell'esempio: quella per DIV). Le proprietà non ereditate hanno il loro valore iniziale. Per esempio, il font [carattere] del riquadrato anonimo è ereditato dal DIV, ma i margini saranno 0.

9.2.2 Elementi a livello di riga e riquadrati in riga

Gli elementi a livello di riga [inline-level] sono quegli elementi del documento sorgente che non formano nuovi blocchi di contenuto; il contenuto è distribuito in righe (per esempio, parti enfatizzate di testo dentro un paragrafo, immagini in riga, ecc.). Diversi valori della proprietà 'display' rendono un elemento in riga [inline]: 'inline', 'inline-table', 'compact' ae 'run-in' (parte delle volte; si veda riquadrati compatti e incorporati [run-in]). Elementi a livello di riga generano riquadrati in riga.

I riquadrati in riga possono partecipare in diversi contesti di formattazione:

Riquadrati anonimi in riga

In un documento come questo:

<P>Some <EM>emphasized</em> text</P>

P genera un riquadrato a blocco, con diversi riquadrati in riga al suo interno. Il riquadrato di "emphasized" è un riquadrato in riga generato da un elemento in riga (EM), ma gli altri riquadrati ("Some" e "text") sono riquadrati in riga generati da un elemento a livello di blocco (P). Questi ultimi sono chiamati riquadrati anonimi in riga, poichè non hanno associato un elemento a livello di riga.

Tali riquadrati anonimi in riga ereditano le proprietà ereditabili dal loro riquadrato a blocco genitore. Le proprietà non ereditate hanno il loro valore iniziale. Nell'esempio, il colore dei riquadrati anonimi iniziali è ereditato da P, ma lo sfondo è trasparente.

Se è chiaro dal contesto a quale tipi di riquadrati anonimi ci si riferisce, sia i riquadrati anonimi in riga che quelli a blocco sono chiamati semplicemente riquadrati anonimi in queste specifiche.

Vi sono più tipi di riquadrati anonimi che si generano quando si formattano le tabelle.

9.2.3 Riquadrati compatti

Un riquadrato compatto [compact box] si comporta come segue:

Al riquadrato compatto viene data una posizione nel margine come segue: è all'esterno (a destra o a sinistra) del primo riquadrato in riga del blocco, ma influenza il calcolo dell'altezza di riga del riquadrato. La proprietà 'vertical-align' del riquadrato compatto determina la posizione verticale del riquadrato compatto in relazione a quel riquadrato in riga. La posizione orizzontale del riquadrato compatto è sempre nel margine del riquadrato a blocco.

Un elemento che non può essere formattato su una riga non può essere posizionato nel margine del blocco che segue. Per esempio, un elemento 'compact' in HTML che contiene un elemento BR sarà sempre formattato come un riquadrato a blocco (presupponendo lo stile predefinito di BR, che inserisce una nuova riga). Per posizionare testi su più righe nel margine, la proprietà 'float' è spesso più appropriata.

Il seguente esempio illustra un riquadrato compatto.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A compact box example</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Short
        <DD><P>Description goes here.
      <DT>too long for the margin
        <DD><P>Description goes here.
    </DL>
  </BODY>
</HTML>

Questo esempio potrebbe essere formattato come:

short    Description goes here

too long for the margin
         Description goes here

La proprietà 'text-align' può essere usata per allineare l'elemento compatto dentro il margine: contro il limite sinistro del margine ('left'), contro il limite destro del margine ('right'), o centrato nel margine ('center'). Il valore 'justify' non si applica, ed è gestito come 'left' o 'right', a seconda della 'direction' dell'elemento a livello di blocco, nel cui margine l'elemento compatto è formattato. ('left' se la direzione è 'ltr' [left-to-right, da sinistra a destra], 'right' se è 'rtl' [right-to-left, da destra a sinistra].)

Si prega di consultare la sezione sui contenuti generati per informazioni su come i riquadrati compatti interagiscono coi contenuti generati.

9.2.4 Riquadrati incorporati [run-in]

Un riquadrato incorporato [run-in] si comporta come segue:

Un riquadrato 'run-in' è utile per intestazioni incorporate, come in questo esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A run-in box example</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
    <H3>A run-in heading.</H3>
    <P>And a paragraph of text that
       follows it.
  </BODY>
</HTML>

Questo esempio potrebbe essere formattato come:

  A run-in heading. And a
  paragraph of text that 
  follows it.

Le proprietà dell'elemento incorporato sono ereditate dal suo genitore nell'albero sorgente, non dal riquadrato a blocco di cui diviene visivamente parte.

Si prega di consultare la sezione sui contenuti generati per informazioni su come i riquadrati incorporati interagiscono coi contenuti generati.

9.2.5 La proprietà 'display'

'display'
Valore:  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
Iniziale:  inline
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  tutti

I valori di questa proprietà hanno i seguenti significati:

block
Questo valore fa si che un elemento generi un riquadrato principale a blocco.
inline
Questo valore fa si che un elemento generi uno o più riquadrati in riga.
list-item
Questo valore fa si che un elemento (per esempio LI in HTML) generi un riquadrato principale a blocco ed un riquadrato in riga a voce di elenco [list-item]. Per informazioni sugli elenchi ed esempi di formattazione di elenchi, si prega di consultare la sezione sugli elenchi.
marker
Questo valore dichiara che i contenuti generati prima o dopo un riquadrato siano indicatori [marker]. Questo valore dovrebbe essere usato solo con gli pseudo-elementi :before e :after inseriti negli elementi a livello di blocco. In altri casi, questo valore è interpretato come 'inline'. Si prega di consultare la sezione sugli indicatori per ulteriori informazioni.
none
Questo valore fa si che un elemento non generi riquadrati nella struttura di formattazione (ossia l'elemento non ha effetto sulla rappresentazione). Neppure gli elementi discendenti generano alcun riquadrato; questo comportamento non può essere sovrascritto impostando la proprietà 'display' per i discendenti.

Si prega di notare che un valore di 'none' non crea un riquadrato invisibile; esso non crea alcun riquadrato. I CSS includono meccanismi che mettono in condizione un elemento di generare riquadrati nella struttura di formattazione che influenzano la formattazione ma che non sono essi stessi visibili. Si prega di consultare la sezione sulla visibilità per i dettagli.

run-in e compact
Questi valori creano riquadrati a blocco o in riga, a seconda del contesto. Le proprietà che si applicano ai riquadrati incorporati [run-in] e compatti [compact] si basano sul loro stato finale (a livello di riga o di blocco). Per esempio, la proprietà 'white-space' si applica solo se il riquadrato diventa un riquadrato a blocco.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
Questi valori fanno si che un elemento si comporti come un elemento di tabella (soggetto alle restrizioni descritte nel capitolo tabelle).

Si noti che sebbene il valore iniziale di 'display' sia 'inline', le regole nel foglio di stile predefinito del programma utente possono sovrascrivere questo valore. Si veda il foglio di stile esemplificativo per HTML 4.0 nell'appendice.

Esempi(o):

Ecco alcuni esempi della proprietà 'display':

P   { display: block }
EM  { display: inline }
LI  { display: list-item } 
IMG { display: none }      /* Don't display images */

I programmi utenti HTML conformi possono ignorare la proprietà 'display'.

9.3 Schemi di posizionamento

Nei CSS2, un riquadrato può essere rappresentato secondo tre schemi di posizionamento:

  1. Flusso normale. Nei CSS2, il flusso normale include la formattazione a blocchi di riquadrati di blocco, la formattazione in riga di riquadrati in riga, il posizionamento relativo di riquadrati in riga o a blocco, e il posizionamento di riquadrati compatti e incorporati.
  2. Flottanti [floats]. Nel modello flottante [float], un riquadrato è prima rappresentato secondo il flusso normale, poi estratto fuori dal flusso e spostato a sinistra e destra, il più lontano possibile. Il contenuto può fluire lungo il lato di un flottante [float].
  3. Posizionamento assoluto. Nel modello di posizionamento assoluto, un riquadrato è rimosso dal flusso normale completamente (non ha impatto sugli elementi contigui) e gli viene assegnata una posizione rispetto al blocco contenitore.
Nota. Gli schemi di posizionamento dei CSS2 aiutano gli autori a rendere i loro documenti più accessibili, facendogli evitare trucchi di marcatura (per esempio, immagini invisibili) usati come effetti per le rappresentazioni dei documenti [layout].

9.3.1 Scegliere uno schema di posizionamento: la proprietà 'position'

Le proprietà 'position' e 'float' determinano quale degli algoritmi di posizionamento dei CSS2 viene usato per calcolare la posizione di un riquadrato.

'position'
Valore:  static | relative | absolute | fixed | inherit
Iniziale:  static
Si applica a:  tutti gli elementi, ma non ai contenuti generati
Ereditata:  no
Percentuali:  N/A
Media:  visuale

I valori di questa proprietà hanno i seguenti significati:

static
Il riquadrato è un riquadrato normale, rappresentato secondo il flusso normale. Le proprietà 'left' e 'top' non si applicano.
relative
La posizione del riquadrato è calcolata secondo il flusso normale (questa è detta "posizione" nel flusso normale). Poi il riquadrato è spostato in modo relativo alla sua posizione normale. Quando un riquadrato B è posizionato in modo relativo, la posizione del riquadrato che segue è calcolata come se B non fosse spostato.
absolute
La posizione del riquadrato (e possibimente anche la misura) è specificata con le proprietà 'left', 'right', 'top', e 'bottom'. Queste proprietà specificano gli spostamenti rispetto al blocco contenitore del riquadrato. I riquadrati posizionati in modo assoluto sono estratti dal flusso normale. Ciò significa che non hanno alcun impatto sulla rappresentazione degli elementi circostanti. Ancora: sebbene i riquadrati posizionati in modo assoluto hanno margini, questi non collassano con ogni altro margine.
fixed
La posizione del riquadrato è calcolata secondo il modello 'absolute', ma in aggiunta il riquadrato è fisso [fixed] rispetto ad un punto di riferimento. Nel caso dei media continui, il riquadrato è fisso rispetto alla finestra di visualizzazione [viewport] (e non si muove quando viene scrollato). Nel caso dei media a pagine, il riquadrato è fisso rispetto alla pagina, anche se la pagina è vista attraverso una finestra di visualizzazione (nel caso di un'anteprima di stampa, ad esempio). Gli autori possono voler specificare 'fixed' in un modo dipendente dal media. Per esempio, un autore può volere che un riquadrato resti nella parte superiore della finestra di visualizzazione sullo schermo, ma non sulla parte superiore di ogni pagina stampata. Le due specifiche possono essere separate usando una regola @media, come in:

Esempi(o):

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

9.3.2 Spostamento di riquadrati: 'top', 'right', 'bottom', 'left'

Si dice che un elemento è posizionato se la sua proprietà 'position' ha un valore diverso da 'static'. Gli elementi posizionati generano riquadrati posizionati, rappresentati secondo quattro proprietà:

'top'
Valore:  <length> | <percentage> | auto | inherit
Iniziale:  auto
Si applica a:  elementi posizionati
Ereditata:  no
Percentuali:  in riferimento all'altezza del blocco contenitore
Media:  visuale

Questa proprietà specifica di quanto il limite superiore del contenuto di un riquadrato è spostato sotto il limite superiore del blocco contenitore del riquadrato.

'right'
Valore:  <length> | <percentage> | auto | inherit
Iniziale:  auto
Si applica a:  elementi posizionati
Ereditata:  no
Percentages:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

Questa proprietà specifica di quanto il limite destro del contenuto di un riquadrato è spostato alla sinistra del limite destro del blocco contenitore del riquadrato.

'bottom'
Valore:  <length> | <percentage> | auto | inherit
Iniziale:  auto
Si applica a:  elementi posizionati
Ereditata:  no
Percentuali:  in riferimento all'altezza del blocco contenitore
Media:  visuale

Questa proprietà specifica di quanto il limite inferiore del contenuto di un riquadrato è spostato sopra la parte inferiore del blocco contenitore del riquadrato.

'left'
Valore:  <length> | <percentage> | auto | inherit
Iniziale:  auto
Si applica a:  elementi posizionati
Ereditata:  no
Percentuali:  in riferimento alla larghezza del blocco contenitore
Media:  visuale

Questa proprietà specifica di quanto il limite sinistro del contenuto di un riquadrato è spostato alla destra del limite sinistro del blocco contenitore del riquadrato.

I valori per le quattro proprietà hanno i seguenti significati:

<length>
La spostamento è una distanza fissa dal limite di riferimento.
<percentage>
Lo spostamento è una percentuale della larghezza del blocco contenitore (per 'left' o 'right') o dell'altezza (per 'top' e 'bottom'). Per 'top' e 'bottom', se l'altezza del blocco contenitore non è specificata esplicitamente (ossia dipende dall'altezza del contenuto), il valore percentuale è interpretato come 'auto'.
auto
L'effetto di questo valore dipende da quale delle proprietà correlate ha il valore di 'auto'. Si vedano le sezioni sulla larghezza e sull'altezza degli elementi posizionati in modo assoluto e non rimpiazzati per i dettagli.

Per i riquadrati posizionati in modo assoluto, gli spostamenti sono rispetto al blocco contenitore del riquadrato. Per i riquadrati posizionati in modo relativo, gli spostamenti sono rispetto ai limiti esterni del riquadrato stesso (ossia, al riquadrato viene data una posizione nel flusso normale, e poi viene spostato da questa posizione secondo queste proprietà).

9.4 Il flusso normale

I riquadrati nel flusso normale appartengono ad un contesto di formattazione, che può essere a blocchi o in riga, ma non entrambi contemporaneamente. Riquadrati a blocco partecipano ad un contesto di formattazione a blocchi. Riquadrati in riga partecipano ad un contesto di formattazione in riga.

9.4.1 Contesto di formattazione a blocchi

In un contesto di formattazione a blocchi, i riquadrati sono rappresentati uno dietro l'altro, verticalmente, cominciando dalla parte superiore di un blocco contenitore. La distanza verticale fra due riquadrati fratelli [sibling], che condividono lo stesso genitore] è determinata dalle proprietà 'margin'. I margini verticali fra riquadrati adiacenti a blocco in un contesto di formattazione a blocchi collassano.

In un contesto di formattazione a blocchi, ogni limite esterno sinistro di un riquadrato tocca il limite sinistro del blocco contenitore (per la formattazione da destra a sinistra, si tocca il limite destro). Questo è vero anche in presenza dei flottanti [floats] (sebbene l'area di contenuto di un riquadrato può restringersi a causa dei flottanti).

Per informazioni sulle interruzioni di pagina nei media a pagine, si prega di consultare la sezione sulle interruzioni di pagina consentite.

9.4.2 Contesto di formattazione in riga

In un contesto di formattazione in riga, i riquadrati sono rappresentati orizzontalmente, uno dopo l'altro, cominciando dalla parte superiore di un blocco contenitore. I margini orizzontali, i bordi ed il cuscinetto [padding] sono rispettati fra questi riquadrati. I riquadrati possono essere allineati verticalmente in diversi modi: le loro parti inferiori o superiori possono essere allineate, o può essere allineata la riga di base del testo al loro interno. L'area rettangolare che contiene i riquadrati che formano una riga è chiamata riquadrato di riga.

La larghezza di un riquadrato di riga è determinata dal blocco contenitore. L'altezza di un riquadrato di riga è determinato dalle regole date nella sezione sui calcoli dell'altezza di riga. Un riquadrato di riga è è sempre alto abbastanza per tutti i riquadrati che contiene. Tuttavia, può essere più alto del riquadrato più alto che contiene (se per esempio i riquadrati sono allineati in modo tale che le righe di base sono allineate). Quando l'altezza di un riquadrato B è minore dell'altezza di un riquadrato in riga che lo contiene, l'allineamento verticale di B all'interno del riquadrato in riga è determinato dalla proprietà 'vertical-align'.

Quando diversi riquadrati in riga non possono stare orizzontalmente all'interno di un singolo riquadrato in riga, essi sono distribuiti fra due o più riquadrati in riga stratificati verticalmente. Così un paragrafo è uno strato verticale di riquadrati in riga. I riquadrati in riga vengono stratificati senza separazione verticale e non si sovrappongono mai.

In generale, il limite sinistro di un riquadrato in riga tocca il limite sinistro del suo blocco contenitore e il limite destro tocca il limite destro del suo blocco contenitore. Tuttavia, i riquadrati flottanti possono porsi fra il limite del blocco contenitore ed il limite del riquadrato in riga. Così, sebbene i riquadrati in riga nel medesimo contesto di formattazione in riga generalmente hanno la stessa larghezza (quella del blocco contenitore), essi possono variare in larghezza se lo spazio orizzontale disponibile è ridotto a causa dei flottanti. I riquadrati in riga nel medesimo contesto di formattazione in riga generalmente variano in altezza (ossia una riga potrebbe contenere un'immagine alta mentre gli altri solo testo).

Quando la larghezza totale dei riquadrati in riga su una riga è minore della larghezza del riquadrato di riga che li contiene, la loro distribuzione orizzontale all'interno del riquadrato di riga è determinata dalla proprietà 'text-align'. Se tale proprietà ha il valore 'justify', il programma utente può anche allungare i riquadrati in riga.

Poichè un riquadrato in riga non può superare la larghezza di un riquadrato di riga, i riquadrati in riga lunghi vengono divisi in diversi riquadrati e tali riquadrati sono distribuiti su diversi riquadrati di riga. Quando un riquadrato in riga viene diviso, i margini, i bordi e il cuscinetto [padding] non hanno effetti visuali nel punto in cui ricorre la separazione. La formattazione dei margini, dei bordi e del cuscinetto possono non essere pienamente definiti se la separazione ricorre all'interno di un inserimento [embedding] bidirezionale.

I riquadrati in riga possono anche essere divisi in diversi riquadrati all'interno del medesimo riquadrato di riga a causa dell'elaborazione del testo bidirezionale.

Ecco un esempio di costruzione di riquadrato in riga. Il seguente paragrafo (creato dall'elemento HTML a livello di blocco P) contiene del testo anonimo inframezzato dagli elementi EM e STRONG:

<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>

L'elemento P genera un riquadrato a blocco che contiene cinque riquadrati in riga, tre dei quali sono anonimi:

Per formare il paragrafo, il programma utente fa fluire i cinque riquadrati nei riquadrati di riga. In questo esempio, il riquadrato generato per l'elemento P stabilisce il blocco contenitore per i riquadrati di riga. Se il blocco contenitore è sufficientemente ampio, tutti i riquadrati in riga si troveranno in un singolo riquadrato di riga:

 Several emphasized words appear in this sentence, dear.

Altrimenti, i riquadrati in riga saranno divisi e distribuiti lungo diversi riquadrati di riga. Il precedente paragrafo potrebbe essere diviso come segue:

Several emphasized words appear
in this sentence, dear.
o così:
Several emphasized  
words appear in this 
sentence, dear.

Nel precedente esempio, il riquadrato EM è stato diviso in due riquadrati EM (che chiamiamo "split1" e "split2"). I margini, i bordi e il cuscinetto [padding], o la decorazione del testo non hanno effetto visibile dopo split1 o prima split2.

Si consideri il seguente esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Example of inline flow on several lines</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>
</HTML>

A seconda della larghezza di P, i riquadrati possono essere distribuiti come segue:

Immagine che illustra l'effetto dell'interruzione di riga sulla
visualizzazione dei margini, dei bordi, e del cuscinetto.   [D]

9.4.3 Posizionamento relativo

Una volta che un riquadrato è stato rappresentato secondo il flusso normale, può essere spostato in relazione a tale posizione. Questo viene chiamato posizionamento relativo. Spostare un riquadrato (B1) in questo modo non ha effetto sul riquadrato (B2) che segue: a B2 è data una posizione come se B1 non fosse spostato e B2 non è ri-posizionato dopo che lo spostamento di B1 è stato applicato. Questo implica che il posizionamento relativo può far sovrapporre i riquadrati.

I riquadrati posizionati in modo relativo mantengono la loro normale dimensione di flusso, inclusi interruzioni di riga e lo spazio in origine a loro riservato. Un riquadrato posizionato in modo relativo stabilisce un nuovo blocco contenitore per i figli con flusso normale e i discendenti posizionati.

Un riquadrato posizionato in modo relativo è generato quando la proprietà 'position' per un elemento ha il valore 'relative'. Lo spostamento è specificato dalle proprietà 'top', 'bottom', 'left', e 'right'.

Il movimento dinamico dei riquadrati posizionati in modo relativo può produrre effetti di animazione negli ambienti di scripting (si veda anche la proprietà 'visibility'). Il posizionamento relativo può anche essere usato come una forma generale di scrittura di esponenti [superscripting, anche "apici". vedi elemento <sup>] e di deponenti [subscripting, anche "pedici". vedi elemento <sub>], tranne quando l'altezza di riga non è aggiustata automaticamente per prendere in considerazione il posizionamento. Si veda la descrizione dei calcoli dell'altezza di riga per maggiori informazioni.

Esempi di posizionamento relativo vengono forniti nella sezione comparazione tra flusso normale, flottanti e posizionamento assoluto.

9.5 Flottanti [floats]

Un flottante [float] è un riquadrato che viene spostato a sinistra o a destra sulla riga corrente. La caratteristica più interessante di un flottante [float] (o riquadrato "flottato" [floated] o "che flotta" [floating]) è che il contenuto puà scorrere lungo il suo lato (o può essere impedito dal farlo dalla proprietà 'clear'). Il contenuto scorre giù lungo il lato destro di un riquadrato flottato a sinistra è giù lungo il lato sinistro di un riquadrato flottato a destra. Quello che segue è un introduzione al posizionamento tramite float e al flusso del contenuto; le regole esatte che governano il comportamento flottante sono date nella descrizione della proprietà 'float'.

Un riquadrato flottato deve avere una larghezza esplicita (assegnata con la proprietà 'width', o la sua larghezza intrinseca nel caso degli elementi rimpiazzati). Ogni riquadrato flottato diviene un riquadrato a blocco che è spostato a sinistra o a destra finchè il suo limite esterno tocca il limite del blocco contenitore o il limite esterno di un altro flottante. La parte superiore del riquadrato flottato è allineata con la parte superiore del riquadrato corrente di riga (o con la parte inferiore del precedente riquadrato a blocco se il riquadrato di riga non esiste). Se non vi è abbastanza spazio orizzontale sulla riga corrente per il flottante, esso viene spostato in basso, riga dopo riga, finchè una riga ha abbastanza spazio per lui.

Poichè un flottante non è nel flusso, i riquadrati a blocco non posizionati creati prima e dopo il riquadrato flottante fluiscono verticalmente come se il flottante non esistesse. Tuttavia, i riquadrati di riga creati vicino al flottante vengono accorciati per fare spazio al riquadrato flottato. Qualunque contenuto nella riga corrente prima di un riquadrato flottato viene fatto rifluire sulla prima riga disponibile sull'altro lato del flottante.

Diversi flottanti possono essere adiacenti, e questo modello si applica anche ai flottanti adiacenti nella medesima riga.

Esempio(o):

La seguente regola fa flottare tutti i riquadrati IMG con class="icon" a sinistra (e imposta il margine sinistro a '0'):

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

Si consideri il seguente sorgente HTML e il foglio di stile:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Float example</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="This image will illustrate floats">
       Some sample text that has no other...
  </BODY>
</HTML>

Il riquadrato IMG è flottato a sinistra. Il contenuto che segue è formattato alla destra del flottante, iniziando dalla stessa riga del flottante. I riquadrati di riga alla destra del flottante sono accorciati a causa della presenza del flottante, ma riassumono la loro larghezza "normale" (quella del blocco contenitore stabilito dall'elemento P) dopo il flottante. Questo documento potrebbe essere formattato come:

Immagine che illustra come i riquadrati flottanti interagiscono con i
margini.   [D]

La formattazione sarebbe stata la stessa come se il documento fosse stato:

<BODY>
  <P>Some sample text 
  <IMG src=img.gif alt="This image will illustrate floats">
           that has no other...
</BODY>

poichè il contenuto alla sinistra del flottante è spostato dal flottante e fatto rifluire giù lungo il suo lato destro.

I margini dei riquadrati flottanti non collassano mai con i margini dei riquadrati adiacenti. Così, nel precedente esempio, i margini verticali non collassano fra il riquadrato P e il riquadrato IMG flottato.

Un flottante può sovrapporsi ad altri riquadrati nel flusso normale (per esempio quando un riquadrato normale vicino al flottante nel flusso ha margini negativi). Quando un riquadrato in riga si sovrappone ad un flottante, il contenuto, lo sfondo e i bordi del riquadrato in riga sono resi davanti al flottante. Quando si sovrappone un riquadrato a blocco, lo sfondo e i bordi del riquadrato a blocco sono resi dietro il flottante e sono visibili solo dove il riquadrato è trasparente. Il contenuto del riquadrato a blocco è reso davanti al flottante.

Esempi(o):

Ecco un'altra illustrazione, che mostra cosa succede quando un flottante si sovrappone ai bordi degli elementi nel flusso normale.

Immagine che mostra un'immagine flottante
che si sovrappone ai bordi di due paragrafi: i bordi
sono interrotti dall'immagine.   [D]

Un'immagine flottante oscura i bordi dei riquadrati a blocco a cui si sovrappone.

Il seguente esempio illustra l'uso della proprietà 'clear' per impedire al contenuto di fluire vicino ad un flottante.

Esempi(o):

Presupponendo una regola come questa:

P { clear: left }

la formattazione potrebbe apparire come:

Immagine che mostra
un'immagine flottante e l'effetto del 'clear: left' sui due paragrafi.   [D]

Entrambi i paragrafi hanno 'clear: left' impostato, che fa si che il secondo paragrafo sia "abbassato" fino a posizionarsi sotto il flottante -- il suo margine superiore si espande per assecondare questo comportamento (si veda la proprietà 'clear').

9.5.1 Posizionare il flottante: la proprietà 'float'

'float'
Valore:  left | right | none | inherit
Iniziale:  none
Si applica a:  tutti gli elementi, eccetto gli elementi posizionati e i contenuti generati
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica se un riquadrato debba flottare a sinistra, a destra, o non flottare affatto. Può essere impostata per gli elementi che generano riquadrati che non siano posizionati in modo assoluto. I valori di questa proprietà hanno i seguenti significati:

left
L'elemento genera un riquadrato a blocco che è flottato a sinistra. Il contenuto fluisce sul lato destro del riquadrato, cominciando dalla parte superiore (soggetto alla proprietà 'clear'). La proprietà 'display' è ignorata, a meno che non abbia valore 'none'.
right
Lo stesso che 'left', ma il contenuto fluisce sul lato sinistro del riquadrato, cominciando dalla parte superiore.
none
Il riquadrato non è flottato.

Qui vi sono le regole precise che governano il comportamento dei flottanti:

  1. Il limite esterno sinistro di un riquadrato che flotta a sinistra non può essere alla sinistra del limite sinistro del suo blocco contenitore. Un analoga regola si osserva per gli elementi che flottano a destra.
  2. Se il riquadrato corrente flotta a sinistra, e vi sono altri riquadrati flottanti a sinistra generati da elementi precedenti nel documento sorgente, allora per ciascuno di questi riquadrati precedenti, o il limite esterno sinistro del riquadrato corrente deve essere alla destra del limite esterno destro del riquadrato precedente, o la sua parte superiore deve essere più bassa della parte inferiore del riquadrato precedente. Analoghe regole si applicano per i riquadrati che flottano a destra.
  3. Il limite esterno destro di un riquadrato flottante a sinistra non può essere alla destra del limite esterno sinistro di qualunque riquadrato flottante a destra che si trovi alla destra di esso. Analoghe regole si applicano per gli elementi che flottano a destra.
  4. La parte superiore esterna di un riquadrato flottante non può essere più alta della parte superiore del suo blocco contenitore.
  5. La parte superiore esterna di un riquadrato flottante non può essere più alta della parte superiore esterna di qualunque blocco o riquadrato flottato generato da un elemento precedente nel documento sorgente.
  6. La parte superiore esterna di un riquadrato flottante di un elemento non può essere più alta della parte superiore di qualunque riquadrato di riga che contiene un riquadrato generato da un elemento precedente nel documento sorgente.
  7. Un riquadrato flottante a sinistra che ha un altro riquadrato flottante alla sua sinistra non può avere il suo limite esterno destro alla destra del limite destro del suo blocco contenitore. (Liberamente: un flottante a sinistra non può sporgere fuori dal limite destro, a meno che non sia già il più a sinistra possibile.) Un analoga regola si applica per gli elementi flottanti a destra.
  8. Un riquadrato flottante deve essere posizionato il più in alto possibile.
  9. Un riquadrato flottante a sinistra deve essere posto il più a sinistra possibile, e un riquadrato flottante a destra il più a destra possibile. Una posizione più elevata è da preferire a una che è maggiormente a destra o a sinistra.

9.5.2 Controllare il flusso nei pressi di flottanti: la proprietà 'clear'

'clear'
Valore:  none | left | right | both | inherit
Iniziale:  none
Si applica a:  elementi a livello di blocco
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Questa proprietà indica quali lati del(i) riquadrato(i) di un elemento non possono essere adiacenti ad un precedente riquadrato flottante. (Può essere che l'elemento stesso abbia discendenti flottanti; la proprietà 'clear' non ha effetto su questi.)

Queste proprietà può essere specificata solo per elementi a livello di blocco (inclusi i flottanti). Per i riquadrati compatti e incorporati, questa proprietà si applica al riquadrato a blocco finale a cui il riquadrato compatto o incorporato appartiene.

I valori hanno i seguenti significati quando applicati a riquadrati a blocco non flottanti:

left
Il margine superiore del riquadrato generato è incrementato quanto basta perchè il limite del bordo superiore sia sotto il limite inferiore esterno di tutti i riquadrati flottanti a sinistra risultanti dagli elementi precedenti nel documento sorgente.
right
Il margine superiore del riquadrato generato è incrementato quanto basta perchè il il limite del bordo superiore sia sotto il limite inferiore esterno di tutti i riqaudrati flottanti a destra risultanti dagli elementi precedenti nel documento sorgente.
both
Il riquadrato generato è mosso sotto tutti i riquadrati flottanti dei precedenti elementi nel documento sorgente..
none
Non vi è restrizione alla posizione del riquadrato rispetto ai flottanti.

Quando la proprietà è impostata sugli elementi flottanti, ne risulta una modifica delle regole per il posizionamento dei flottanti. Viene aggiunta una restrizione (#10) extra:

9.6 Posizionamento assoluto

Nel modello di posizionamento assoluto, un riquadrato è esplicitamente spostato [offset. nella traduzione della guida di Eric Meyer troviamo i termini "scostato" e "scostamento"] rispetto al suo blocco contenitore. Il riquadrato è rimosso dal flusso normale interamente (non ha impatto sui successivi fratelli). Un riquadrato posizionato in modo assoluto stabilisce un nuovo blocco contenitore per i figli nel flusso normale e i discedenti posizionati. Tuttavia, i contenuti di un elemento posizionato in modo assoluto non fluiscono intorno agli altri riquadrati. Essi possono o meno oscurare i contenuti di un altro riquadrato, a seconda dei livelli di strato [stack levels] dei riquadrati cui si sovrappongono.

I riferimenti in queste specifiche ad un elemento posizionato in modo asoluto (o al suo riquadrato) implicano che la proprietà 'position' dell'elemento abbia valore 'absolute' o 'fixed'.

9.6.1 Posizionamento fisso

Il posizionamento fisso è una sottocategoria del posizionamento assoluto. La sola differenza è che per un riquadrato posizionato in modo fisso, il blocco contenitore è stabilito dalla finestra di visualizzazione. Per i media continui, i riquadrati fissi non si muovono quando il documento è scrollato [scrolled, ossia quando si usano le barre di scorrimento laterali.]. In un tale ambito, essi sono simili alle immagini di sfondo fisse. Per i media a pagine, i riquadrati con posizioni fisse sono ripetuti su ogni pagina. Questo si rivela utile per posizionare, ad esempio, una firma nella parte inferiore di ogni pagina.

Gli autori possono usare il posizionamento fisso per creare presentazioni simili ai frame. Si consideri la seguente rappresentazione a frame:

Immagine che illustra una rappresentazione simile ai frame con position='fixed'.   [D]

Ciò può essere ottenuto con il seguente documento HTML e le seguenti regole di stile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A frame document with CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* Required for percentage heights below */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header"> ...  </DIV>
    <DIV id="sidebar"> ...  </DIV>
    <DIV id="main"> ...  </DIV>
    <DIV id="footer"> ...  </DIV>
  </BODY>
</HTML>

9.7 Relazioni fra 'display', 'position', e 'float'

Le tre proprietà che influenzano la generazione dei riquadrati e la rappresentazione [layout] -- 'display', 'position', e 'float' -- interagiscono come segue:

  1. Se 'display' ha il valore 'none', i programmi utente devono ignorare 'position' e 'float'. In questo caso, l'elemento non genera alcun riquadrato.
  2. Altrimenti, se 'position' ha il valore 'absolute' or 'fixed', 'display' è impostato su 'block' e 'float' su 'none'. La posizione del riquadrato sarà determinata dalle proprietà 'top', 'right', 'bottom' e 'left', e dal blocco contenitore del riquadrato.
  3. Altrimenti, se 'float' ha un valore diverso da 'none', 'display' è impostato su 'block' e il riquadrato è flottato.
  4. Altrimenti, le rimanenti proprietà 'display' si applicano come specificato.

Nota. I CSS2 non specificano il comportamento della rappresentazione quando i valori per queste proprietà vengono cambiati dagli script. Per esempio, cosa succede quando un elemento che ha 'width: auto' è ri-posizionato? I contenuti vengono risistemati oppure mantengono la loro formattazione originale? La risposta è al di là dell'ambito di questo documento, e un tale comportamento è probabile che differisca nelle implementazioni iniziali dei CSS2.

9.8 Comparazione tra flusso normale, flottanti e posizionamento assoluto

Per illustrare le differenze tra flusso normale, posizionamento relativo, flottanti e posizionamento assoluto, forniamo una serie di esempi basati sul seguente frammento HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Comparison of positioning schemes</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id="outer"> Start of outer contents.
      <SPAN id="inner"> Inner contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

In questo documento, presupponiamo le seguenti regole:

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

Le posizioni finali dei riquadrati generati dagli elementi outer e inner variano in ogni esempio. In ogni illustrazione, i numeri alla sinistra dell'illustrazione indicano la posizione nel flusso normale delle righe a spaziatura doppia (per chiarezza). (Nota: le illustrazioni utilizzano differenti scale orizzontali e verticali.)

9.8.1 Flusso normale

Si considerino le seguenti dichiarazioni CSS per outer e inner che non alterano il flusso normale dei riquadrati:

#outer { color: red }
#inner { color: blue }

L'elemento P contiene tutto il contenuto in riga: testo anonimo in riga e due elementi SPAN. Pertanto, tutto il contenuto sarà rappresentato in un contesto di formattazione in riga, all'interno di un blocco contenitore stabilito dall'elemento P, che produce qualcosa come:

Immagine che illustra il flusso normale di testo fra riquadrati genitori e fratelli.   [D]

9.8.2 Posizionamento relativo

Per vedere l'effetto del posizionamento relativo, specifichiamo:

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

Il testo fluisce normalmente fino all'elemento outer. Il testo di outer viene quindi fatto fluire nella sua normale posizione di flusso e dimensione alla fine della riga 1. Poi, i riquadrati in riga che contengono il testo (distribuito su tre righe) sono spostati (verso l'alto) di'-12px'.

I contenuti di inner, come figlio di outer, sarebbero normalmente fluiti immediatamente dopo le parole "of outer contents" (sulla riga 1.5). Tuttavia, i contenuti di inner sono essi stessi spostati in relazione ai contenuti di outer di '12px' (verso il basso), fino alla loro posizione originale sulla riga 2.

Si noti che il contenuto che segue outer non è influenzato dal posizionamento relativo di outer.

Immagine che illustra gli effetti del posizionamento relativo sul contenuto di un
riquadrato.   [D]

Si noti anche che se lo spostamento di outer fosse stato di '-24px', il testo di outer e il testo del corpo [body] si sarebbero sovrapposti.

9.8.3 Far flottare un riquadrato

Si consideri ora l'effetto di far flottare il testo dell'elemento inner a destra, secondo le seguenti regole:

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

Il testo fluisce normalmente fino al riquadrato inner, che è staccato dal flusso e flottato sul margine destro (la sua 'width' è stata assegnata esplicitamente). I riquadrati di riga a sinistra del flottante sono accorciati, e il testo rimanente del documento vi fluisce.

Immagine che illustra gli effetti del far flottare un riquadrato.   [D]

Per mostrare l'effetto della proprietà 'clear', aggiungiamo un elemento sibling [sibling, letteralmente significa "fratello", ossia che divide con un altro il medesimo genitore] all'esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Comparison of positioning schemes II</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id=outer> Start of outer contents.
      <SPAN id=inner> Inner contents.</SPAN>
      <SPAN id=sibling> Sibling contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

Le seguenti regole:

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }

fanno in modo che il riquadrato inner flotti a destra come prima e che il rimanente testo del documento fluisca nello spazio lasciato vuoto:

Immagine che illustra gli effetti del far flottare un riquadrato senza impostare
la proprietà 'clear' per controllare il flusso del testo attorno al riquadrato.   [D]

Tuttavia, se la proprietà 'clear' sull'elemento sibling è impostata su 'right' (ossia il riquadrato sibling generato non accetterà una posizione vicina ai riquadrati flottanti alla sua destra), il contenuto di sibling comincia a fluire sotto il flottante:

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }

Immagine che illustra gli effetti del far flottare un elemento impostando la proprietà 'clear' per controllare il flusso del testo intorno all'elemento.   [D]

9.8.4 Posizionamento assoluto

Infine, consideriamo l'effetto del posizionamento assoluto. Si considerino le seguenti dichiarazioni CSS per outer e inner:

#outer { 
    position: absolute; 
    top: 200px; left: 200px; 
    width: 200px; 
    color: red;
}
#inner { color: blue }

che fa in modo che la parte superiore del riquadrato outer sia posizionata rispetto al suo blocco contenitore. Il blocco contenitore per un riquadrato posizionato è stabilito dall'antenato posizionato più prossimo (oppure, se non esiste, dal blocco contenitore iniziale, come nel nostro esempio). Il lato superiore del riquadrato outer è '200px' sotto la parte superiore del blocco contenitore e il lato sinistro è '200px' dal lato sinistro. Il riquadrato figlio di outer fluisce normalmente rispetto al suo genitore.

Immagine che illustra gli effetti del posizionamento assoluto di un riquadrato.   [D]

Il seguente esempio mostra un riquadrato posizionato in modo assoluto che è figlio di un riquadrato posizionato in modo relativo. Sebbene il riquadrato genitore outer non sia realmente spostato, impostare la sua proprietà 'position' su 'relative' fa si che il suo riquadrato possa servire come blocco contenitore per i discendenti posizionati. Poichè il riquadrato outer è un riquadrato in riga diviso su diverse righe, i primi limiti superiore e sinistro del riquadrato in riga (raffigurati nell'illustrazione di sotto con linee spesse tratteggiate) servono come riferimenti per gli spostamenti [offsets, anche "scostamenti", come nella traduzione italiana di Cascading Style Sheets. La guida completa di Eric A. Meyer, edizioni HOPS] 'top' e 'left'.

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

Il risultato è come il seguente:

Immagine che illustra gli effetti del posizionamento assoluto di un riquadrato rispetto ad un 
blocco contenitore.   [D]

Se non posizioniamo il riquadrato outer:

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

il blocco contenitore per inner diventa il blocco contenitore iniziale (nel nostro esempio). La seguente illustrazione mostra il punto in cui il riquadrato inner andrÓ a finire in questo caso.

Immagine che illustra gli effetti del posizionamento assoluto di un riquadrato rispetto al blocco contenitore stabilito da un genitore posizionato normalmente.   [D]

Il posizionamento relativo ed assoluto possono essere usati per implementare barre di sostituzione, come mostrato nel seguente esempio. Il seguente documento:

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>

potrebbe risultare come:

Immagine che illustra l'uso dei flottanti per creare un effetto da barre di sostituzione.   [D]

Per prima cosa, il paragrafo (i cui lati del blocco contenitore sono mostrati nell'illustrazione) viene fatto fluire normalmente. Poi è spostato di '10px' dal limite sinistro del blocco contenitore (così, un margine destro di '10px' è stato mantenuto prevedendo lo spostamento). I due trattini che fungono da barre di sostituzione sono estratti dal flusso e posizionati sulla riga corrente (questo è dovuto a 'top: auto'), '-1em' dal limite sinistro del proprio blocco contenitore (stabilito da P nella sua posizione finale). Il risultato: le barre di sostituzione sembrano "flottare" alla sinistra del riga corrente.

9.9 Presentazione a strati

Nelle seguenti sezioni, l'espressione "davanti a" significa più vicino all'utente rispetto a come l'utente si pone davanti allo schermo.

Nei CSS2, ogni riquadrato ha una posizione su tre dimensioni. In aggiunta alle loro posizioni orizzontali e verticali, i riquadrati si trovano lungo un "asse-z" e sono formattati uno in cima all'altro. Le posizioni sull'asse-z sono di particolare rilievo quando i riquadrati si sovrappongono visivamente. Questa sezione discute il modo in cui i riquadrati possono essere posizionati lungo l'asse-z.

Ogni riquadrato appartiene ad un contesto di stratificazione. Ogni riquadrato in un dato contesto di stratificazione ha un livello di strato intero, che è la sua posizione sull'asse-z in relazione ad altri riquadrati nel medesimo contesto di stratificazione. I riquadrati con livelli di strato più grandi sono sempre formattati davanti ai riquadrati con livelli di strato più bassi. I riquadrati possono avere livelli di strato negativi. I riquadrati con il medesimo livello di strato in un contesto di stratificazione vengono stratificati dal basso in alto, secondo l'ordine dell'albero del documento.

L'elemento radice crea un contesto di stratificazione radice, ma altri elementi possono stabilire contesti di stratificazione locale. I contesti di stratificazione sono ereditati. Un contesto di stratificazione locale è atomico; i riquadrati in altri contesti di stratificazione non possono ricorrere in alcuno dei suoi riquadrati.

Un elemento che stabilisce un contesto di stratificazione locale genera un riquadrato che ha due livelli di strato: uno per il livello di strato che crea (sempre '0') ed uno per il contesto di stratificazione cui appartiene (dato dalla proprietà 'z-index').

Un riquadrato di un elemento ha lo stesso livello di strato del suo riquadrato genitore a meno che non venga dato un differente livello di strato con la proprietà 'z-index'.

9.9.1 Specificare il livello di strato: la proprietà 'z-index'

'z-index'
Valore:  auto | <integer> | inherit
Iniziale:  auto
Si applica a:  elementi posizionati
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Per un riquadrato posizionato, la proprietà 'z-index' specifica:

  1. Il livello di strato del riquadrato nel contesto di stratificazione corrente.
  2. Se il riquadrato stabilisce un contesto di stratificazione locale.

I valori hanno i seguenti significati:

<integer>
Questo intero è il livello di strato del riquadrato generato nel contesto di stratificazione corrente. Il riquadrato stabilisce anche un contesto di stratificazione locale in cui il suo livello di strato è '0'.
auto
Il livello di strato del riquadrato generato nel contesto di stratificazione corrente è lo stesso del suo riquadrato genitore. Il riquadrato non stabilisce un nuovo contesto di stratificazione locale.

Nel seguente esempio, i livelli di strato dei riquadrati (nominati con i loro atributi "id") sono: "text2"=0, "image"=1, "text3"=2, and "text1"=3. Il livello di strato di "text2" è ereditato dal riquadrato radice. Gli altri sono specificati con la proprietà 'z-index'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Z-order positioning</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="A butterfly image"
           style="z-index: 1">

    <DIV id="text1" class="pile" 
         style="z-index: 3">
      This text will overlay the butterfly image.
    </DIV>

    <DIV id="text2">
      This text will be beneath everything.
    </DIV>

    <DIV id="text3" class="pile" 
         style="z-index: 2">
      This text will underlay text1, but overlay the butterfly image
    </DIV>
  </BODY>
</HTML>

Questo esempio dimostra la nozione di transparenza. Il comportamento predefinito di un riquadrato è di consentire ai riquadrati dietro di lui di essere visibili attraverso aree trasparenti del suo contenuto. Nell'esempio, ogni riquadrato, in modo trasparente, ricopre i riquadrati sotto di lui. Questo comportamemto può essere sovrascritto usando una delle proprietà dello sfondo esistenti.

9.10 Direzione del testo: le proprietà 'direction' e 'unicode-bidi'

I caratteri in alcuni tipi di scrittura sono scritti da destra a sinistra. In alcuni documenti, in particolare in quelli scritti con la scrittura araba o ebraica, ed in alcuni contesti a linguaggio misto, il testo in un singolo riquadrato (mostrato visivamente) può apparire con direzionalità mista. Questo fenomeno è chiamato bidirezionalità, o "bidi" in breve.

Lo standard Unicode ([UNICODE], sezione 3.11) definisce un complesso algoritmo per determinare la giusta direzionalità del testo. L'algoritmo consiste di una parte implicita basata sulle proprietà dei caratteri, così come di controlli espliciti per le sovrascritture e gli inserimenti [embeddings da to embed, letteralmente "incastrare, incastonare"]. I CSS2 fanno riferimento a questo algoritmo per ottenere la giusta resa bidirezionale. Le proprietà 'direction' e 'unicode-bidi' consentono agli autori di specificare come gli elementi e gli attributi del linguaggio di un documento si correlino con questo algoritmo.

Se un documento contiene caratteri da destra a sinistra, e il programma utente visualizza questi caratteri (con simboli appropriati, non sostituti arbitrari come punti interrogativi, codici esadecimali, un quadrato nero, ecc.), il programma utente deve applicare l'algoritmo bidirezionale. Questo requisito apparentemente unilaterale riflette il fatto che, sebbene non tutti i documenti ebraici o arabi contengano testo a direzionalità mista, è molto più probabile che tali documenti contengano testo da sinistra a destra (per esempio numeri, testo preso da altre lingue) piuttosto che siano scritti in lingue da sinistra a destra.

Poichè la direzionalità di un testo dipende dalla struttura e dalla semantica del linguaggio del documento, queste proprietà dovrebbero nella maggior parte dei casi essere usate solo dagli sviluppatori di DTD [Document Type Description] o dagli autori di documenti speciali. Se un foglio di stile predefinito specifica queste proprietà, gli autori e gli utenti non dovrebbero specificare regole per sovrascriverle. Una tipica eccezione sarebbe sovrascrivere un comportamento bidirezionale in un programma utente se tale programma utente translittera lo Yiddish (di solito scritto in lettere ebraiche) in lettere latine alla richiesta dell'utente.

Le specifiche HTML 4.0 ([HTML40], sezione 8.2) definiscono il comportamento della bidirezionalità per gli elementi HTML. I programmi utente HTML conformi possono perciò ignorare le proprietà 'direction' e 'unicode-bidi' nei fogli di stile dell'autore e dell'utente. Le regole del foglio di stile che otterrebbero il comportamento bidirezionale specificato in [HTML40] sono date nel foglio di stile esemplificativo. Le specifiche HTML 4.0 contengono anche ulteriori informazioni sui problemi della bidirezionalità.

'direction'
Valore:  ltr | rtl | inherit
Iniziale:  ltr
Si applica a:  tutti gli elementi, ma si veda il testo
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica la direzione di base di scrittura dei riquadrati e e la direzione degli inserimenti e delle sovrascritture (si veda 'unicode-bidi') per l'algoritmo bidirezionale Unicode. In aggiunta, specifica la direzione della rappresentazione di colonna di una tabella, la direzione dell'eccedenza orizzontale, e la posizione dell'ultima riga incompleta in un riquadrato nel caso di 'text-align: justify'.

I valori per questa proprietà hanno i seguenti significati:

ltr
Direzione da sinistra a destra [left-to-right].
rtl
Direzione da destra a sinistra [right-to-left].

Affinchè la proprietà 'direction' abbia effetto su elementi a livello di riga, il valore della proprietà 'unicode-bidi' deve essere 'embed' o 'override'.

Nota. La proprietà 'direction', quando specificata per elementi di colonna di tabella, non è ereditata dalle celle nella colonna poichè le colonne non esistono nell'albero del documento. Così, i CSS non possono facilmente catturare le regole di eredità dell'attributo "dir" descritte in [HTML40], sezione 11.3.2.1.

'unicode-bidi'
Valore:  normal | embed | bidi-override | inherit
Iniziale:  normal
Si applica a:  tutti gli elementi, ma si veda il testo
Ereditata:  no
Percentuali:  N/A
Media:  visuale

I valori per questa proprietà hanno i seguenti significati:

normal
L'elemento non apre un livello addizionale di inserimento rispetto all'algoritmo bidirezionale. Per gli elementi a livello di riga, il riordinamento impliclito funziona lungo i confini dell'element.
embed
Se l'elemento è a livello di riga, questo valore apre un livello addizionale di inserimento rispetto all'algoritmo bidirezionale. La direzione di questo livello di inserimento è data dalla proprietà 'direction'. All'interno dell'elemento, il riodinamento è eseguito implicitamente. Questo corrisponde all'aggiunta di LRE (U+202A; per 'direction: ltr') o RLE (U+202B; per 'direction: rtl') all'inizio dell'elemento e PDF (U+202C) alla fine dell'elemento.
bidi-override
Se l'elemento è a livello di riga o è un elemento a livello di blocco che contiene solo elementi a livello di riga, questo crea una sovrascrittura. Ciò significa che all'interno dell'elemento, il riordinamento è strettamente in sequenza secondo la proprietà 'direction'; la parte implicita dell'algoritmo bidirezionale è ignorata. Questo corrisponde all'aggiunta di LRO (U+202D; per 'direction: ltr') o RLO (U+202E; per 'direction: rtl') all'inizio dell'elemento e di PDF (U+202C) alla fine dell'elemento.

L'ordine finale dei caratteri in ogni elemento a livello di blocco è lo stesso di quello che si sarebbe avuto se i codici di controllo bidirezionali fossero stati aggiunti come descritto sopra, se la marcatura fosse stata tolta, e la risultante sequenza di caratteri fosse passata ad un implementazione dell'algoritmo bidirezionale Unicode per il testo semplice che producesse le medesime interruzioni di riga del testo con lo stile applicato. In tale processo, le entità non testuali come le immagini vengono trattate come caratteri neutrali, a meno che la loro proprietà 'unicode-bidi' abbia un valore diverso da 'normal', nel qual caso vengono trattate come caratteri forti nella 'direction' specificata per l'elemento.

Si prega di notare che per fare in modo che i riquadrati in riga fluiscano in una direzione uniforme (interamente da sinistra a destra o da destra a sinistra), si può essere costretti a creare più riquadrati in riga (inclusi riquadrati in riga anonimi), e a dividere alcuni riquadrati in riga e riordinarli prima di farli fluire.

Poichè l'algoritmo Unicode ha un limite di 15 livelli di inserimento, si dovrebbe fare attenzione a non usare 'unicode-bidi' con un valore diverso da 'normal' se non in modo appropriato. In particolare, un valore di 'inherit' dovrebbe essere usato con estrema cautela. Tuttavia, per quelli elementi che, in generale, si vuole visualizzare come blocchi, l'impostazione di 'unicode-bidi: embed' è da preferire per mantenere l'elemento unito in caso si voglia visualizzare come in riga (si veda l'esempio di sotto).

Il seguente esempio mostra un documento XML con testo bidirezionale. Illustra un importante principio di progettazione: gli sviluppatori diDTD dovrebbero tener conto della bidirezionalità sia nel linguaggio in quanto tale (elementi ed attributi) che in ogni foglio di stile che lo accompagna. I fogli di stile dovrebbero essere progettati in modo tale che le regole di bidirezionalità siano separate dalle altre regole di stile. Le regole di bidirezionalità non dovrebbero essere sovrascritte da altri fogli di stile, cosicchè il linguaggio del documento o il comportamento bidirezionale della DTD siano preservati.

Esempi(o):

In questo esempio le lettere minuscole stanno per i caratteri inerenti da sinistra a destra, e le lettere maiuscole rappresentano i caratteri inerenti da destra a sinistra:

<HEBREW>
  <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
  <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
</HEBREW>
<ENGLISH>
  <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
  <PAR>english14 english15 english16</PAR>
  <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
</ENGLISH>

Poichè questo è XML, il foglio di stile è responsabile dell'impostazione della direzione di scrittura. Questo è il foglio di stile:

/* Rules for bidi */
HEBREW, HE-QUO  {direction: rtl; unicode-bidi: embed}
ENGLISH         {direction: ltr; unicode-bidi: embed} 

/* Rules for presentation */
HEBREW, ENGLISH, PAR  {display: block}
EMPH                  {font-weight: bold}

L'elemento HEBREW è un blocco con una direzione di base da destra a sinistra, mentre l'elemento ENGLISH è un blocco con una direzione di base da sinistra a destra. I PAR sono blocchi che ereditano la direzione di base dai loro genitori. Così, i primi due PAR vengono letti partendo dalla parte superiore destra, gli ultimi tre dalla parte superiore sinistra. Si prega di notare che HEBREW e ENGLISH sono stati scelti come nome di elemento solo per chiarezza; in generale, i nomi di elemento dovrebbero recare struttura senza riferimento alla lingua.

L'elemento EMPH è a livello di riga, e poichè il suo valore per 'unicode-bidi' è 'normal' (il valore iniziale), non ha effetto sull'ordinamento del testo. L'elemento HE-QUO, d'altro canto, crea un inserimento.

La formattazione di questo testo potrebbe apparire così se la lunghezza di riga è lunga:

               5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

                                8WERBEH 7WERBEH 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 20WERBEH english19 18WERBEH

Si noti che l'inserimento HE-QUO fa in modo che HEBREW18 sia alla destra di english19.

Se le righe devono essere interrotte, potrebbe apparire più come:

       2WERBEH 1WERBEH
  -EH 4WERBEH english3
                 5WERB

   -EH 7WERBEH 6WERBEH
                 8WERB

english9 english10 en-
glish11 12WERBEH
13WERBEH

english14 english15
english16

english17 18WERBEH
20WERBEH english19

Poichè HEBREW18 deve essere letto prima di english19, è sulla riga sopra english19. Interrompere semplicemente la lunga riga della precedente formattazione non avrebbe funzionato. Si noti anche che la prima sillaba di english19 potrebbe trovar posto sulla precedente riga, ma la tratteggaitura delle parole da sinistra a destra in un contesto da destra a sinistra, e viceversa, è di solito soppressa per evitare di dover visualizzare un trattino nel mezzo di una riga.