Regole tipografiche personalizzate

Il testo di base

Anche il testo di base di SPIP, quello che si digita in un form senza arricchimenti, genera particolari tag HTML. In effetti, esso viene diviso in paragrafi; ad ogni paragrafo corrisponde un tag <p class="spip">. Quindi possiamo associare a questi paragrafi uno stile ben preciso, che non verrà applicato al resto della pagina.

Cominciamo con lo scegliere il font dei caratteri. A tal fine si utilizza la proprietà font-family, che prende come valore uno o più nomi di font da utilizzare. Per un corpo del testo come quello di un articolo è meglio un font con le grazie; supponiamo di decidere per un "Bookman Old Style". Aggiungiamolo quindi al nostro file miei_stili.css la regola seguente:

p.spip {
    font-family: "Bookman Old Style";
}

(è bene notare che un nome di font composto da più parole deve essere racchiuso tra virgolette...) Se il font "Bookman Old Style" non è installato sul computer del visitatore del sito può esserci un problema: ogni computer è configurato in maniera diversa, e non dimentichiamoci che i font "gratuiti" di Microsoft solo di rado sono installati su Linux e Macintosh... È quindi preferibile prevedere questi casi particolari e specificare uno o più font in sostituzione:

p.spip {
    font-family: "Bookman Old Style", "Times New Roman", serif;
}

In questo esempio specifichiamo come sostituti successi di Bookman, il classico " Times New Roman " e, come ultima risorsa "serif". "serif" non è un font in sé, ma il codice generico che indica al browser di prendere il font aggraziato di default del computer; viceversa "sans-serif" specifica il font senza grazie di default (in genere Arial o Helvetica).

È necessario ricordare una regola importante: nella proprietà font-family, conviene sempre proporre più scelte successive per adattarsi ai font installati sul computer del visitatore. Notiamo che questa regola si applica anche al tag <font face="..."> dell’HTML tradizionale.

Chiaramente, a nostra disposizione ci sono altre proprietà. Per esempio, possiamo definire la dimensione del testo con la proprietà font-size. Tuttavia dobbiamo notare che i navigatori hanno la propria impostazione predefinita per la dimensione del testo, e il testo principale delle nostre pagine non deve superare questa impostazione per ragioni di buona visibilità: è l’utente che sceglie la dimensione di base, non il webmaster.

È importante notare che gli stili che si applicano ai tag <p> si applicano ad ogni paragrafo in quanto oggetto autonomo. Ciò permette alcuni effetti interessanti, come per esempio far rientrare la prima linea dei paragrafi usando la proprietà text-indent. Di default questa proprietà ha valore zero, cioè non c’è il rientro del paragrafo. È possibile modificarla per ottenere, su ogni prima linea, una rientranza di sessanta pixel verso destra:

p.spip {
    text-indent: 60px;
}

I link ipertestuali

Chi ha già creato qualcosa in CSS sa che è possibile modificare la visualizzazione dei link in maniera globale:

a {
    color: green;
    text-decoration: none;
}

Questa regola di stile specifica che tutti i link ipertestuali (ovvero tutti i tag <a ...>, sia che abbiano un attributo class o meno) saranno mostrati in verde senza sottolineatura.

SPIP permette di andare oltre. I link ipertestuali, quando sono generati dalle scorciatoie tipografiche, utilizzano infatti più stili diversi:
-  quando il link è interno (esso rimanda a un’altra pagina del proprio sito), il tag è <a class="spip_in">;
-  quando il link è esterno (esso rimanda a un altro sito Web), il tag è <a class="spip_out">  [1];
-  infine, quando l’URL viene inserita senza titolo, il tag è <a class="spip_url">.

È quindi molto semplice dare un’immagine grafica diversa a questi tre tipi di link diversi. Pertanto:

a {
    color: green;
    text-decoration: none;
}
a.spip_in {
    color: blue;
}
a.spip_out {
    color: red;
}

visualizza i link interni in blu e quelli esterni in rosso. Tutti gli altri link, compresi quelli che non sono generati da SPIP, verranno visualizzati in verde. Inoltre, tutti i link vengono mostrati senza sottolineatura: in effetti la proprietà text-decoration, specificata nella prima regola, non è stata modificata nelle successive; ne consegue che essa si applica automaticamente a tutti gli elementi di tipo <a ...>.

Facciamo attenzione a una proprietà fondamentale dei fogli di stile: le regole grafiche si applicano nell’ordine che va dal più generico al più specifico. Ciò permette di specificare un comportamento generico, per la maggior parte degli elementi, e di modificare questo comportamento per un piccolo sottogruppo di elementi. In questa caratteristica vi è tutta la potenza dei fogli di stile.

Applicare un trattamento differenziato

Ora, invece di dilungarci sull’assortimento di stili generati automaticamente dalle scorciatoie tipografiche di SPIP, che è comunque possibile modificare a proprio piacimento (sono elencati in "SPIP e i fogli di stile"), studiamo il caso in cui si vuole applicare un aspetto grafico differente al medesimo stile, in base alla posizione che esso occupa nel modello. Questo bisogno è legittimo: per esempio, vogliamo visualizzare il corpo del testo con un font aggraziato con rientro all’inizio del paragrafo, ma il post scriptum con un font "a bastoni" (senza grazie) e più piccolo, senza rientro.

In pratica questa operazione è molto semplice. Innanzitutto è necessario modificare il proprio modello al fine di introdurre gli elementi che permetteranno di distinguere il testo dal post scriptum. Per esempio, all’interno del ciclo ARTICLES principale, la modifica sarà:

<div class="texte">#TEXTE</div>
<div class="ps">#PS</div>

È necessario aggiornare la pagina (perché abbiamo modificato l’HTML...). La visualizzazione del browser è sempre la stessa: normale, i nostri nuovi stili non sono oggetto di alcuna regola nel foglio di stile e sono ignorati dal browser. Rimediamo:

.texte p.spip {
    font-family: "Times New Roman", serif;
    text-indent: 50px;
}
.ps p.spip {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 90%;
}

La grande novità qui non è nelle proprietà grafiche ma nel modo in cui le si applica al codice HTML. Infatti, ".texte p.spip" significa: "questa regola si applica a tutti i tag <p class="spip"> contenuti in un tag che ha un attributo class uguale a "texte"". Si potrebbe restringere un po’ questa regola specificando che il tag parent deve essere anche un tag <div> (l’inizio della regola deve quindi scriversi "div.texte p.spip"); ma poiché noi dominiamo la struttura dei nostri modelli, non è utile rendere il foglio di stile molto restrittivo.

Controlliamo sempre che il foglio di stile dia sempre il risultato voluto: i paragrafi del corpo del testo sono rientrati, quelli del post scriptum sono di dimensione più piccola e non rientrati. Per verificare che le regole si applicano ad ogni paragrafo <p class="spip"> e non al <div class="..."> che lo ingloba, ci si può divertire a definire un riquadro nero:

.texte p.spip {
    border: 1px solid black;
}

Notiamo che ogni paragrafo del corpo del testo (ma non del post scriptum) è circondato da un riquadro nero. Se avevamo scritto semplicemente ".texte" invece di ".texte p.spip", il riquadro nero (uno solo) avrebbe racchiuso il testo per intero e non ogni singolo paragrafo. Approfittiamone per far notare la comparsa della proprietà border...

Nota: questo trucco, che consiste nel tracciare un quadro di colore per sapere a quale elemento si applica precisamente una regola, può essere molto utile quando il proprio foglio di stile diventa sempre più complesso. Non esitare a utilizzarlo se si inizia a perdere l’orientamento...

Questo metodo è molto potente e si generalizza proficuamente al fine di strutturare la propria impaginazione.