Guida al CSS per EPUB – Struttura della pagina

Nella puntata precedente ci siamo dedicati a una presentazione generale del CSS, imparando inoltre come aggiungere un foglio di stile alla nostra pagina. Prima di cominciare a scrivere il foglio di stile, e aggiungere al nostro testo una serie di formattazioni belle, strane o di cattivo gusto, dovremo però assicurarci che la nostra pagina sia pronta a farsi formattare, senza opporre resistenza, il che no è sempre così automatico. Vediamo dunque una struttura ottimale per le pagine dei nostri EPUB. Lo schema di base di un file HTML dovrebbe ormai esserci familiare: <html>

<head>

<title></title>



</head>

<body>

</body>

</html>

Questo è il minimo indispensabile, lo scheletro su cui tutto il resto sarà costruito: <html> è il tag che racchiude tutta la pagina. <head> racchiude quella parte di pagina che, normalmente, non è visualizzata, ma che contiene una serie di regole, da utilizzare per la visualizzazione: è qui che inseriremo il CSS ed è qui che, in una normale pagina web, troveremo anche il JavaScript (in genere, ma non necessariamente: esistono almeno due scuole di pensiero, a riguardo, ma non è questo lo spazio per discuterne). <title> contiene il titolo della pagina, che sarà visualizzato sul bordo alto del browser; siccome stiamo parlando di uno EPUB e il suo contenuto non sarà visualizzato in un browser, possiamo anche lasciare vuoto questo spazio, ma non lo possiamo eliminare. <body> contiene tutto ciò che sarà visualizzato sullo schermo: il testo, le foto, i video, eccetera. Qui dovremmo inserire soltanto il contenuto, senza mischiarlo con stile (CSS) e funzionamento (JavaScript). Essendo HTML, questo spazio sarà brulicante di tag e i tag potranno essere modificati da CSS e JavaScript in qualsiasi modo vorremo, ma l’importante è che il codice per modificare i tag sia lasciato fuori dal body, ben separato dal contenuto. Se li mischiate, siete delle brutte persone, oppure avete trascorso gli ultimi quindici anni ibernati in un qualche laboratorio segreto. Dopo questo rapido ripasso dello scheletro di una pagina, dovrebbe essere chiaro che la parte da strutturare a dovere, per poterla poi modificare col CSS, è quella contenuto nel tag <body>: qui finirà tutto il contenuto del nostro EPUB e qui dovremo lavorare, per renderlo adatto ad accogliere il CSS. In una normale pagina web, dovremmo preoccuparci del layout dei vari elementi, del numero di colonne da utilizzare nella pagina e così via; nel microcosmo di uno EPUB, invece, molti di questi problemi non si pongono e possiamo concentrarci sullo stretto indispensabile. O meglio, in teoria potremmo anche cercare di utilizzare in uno EPUB tutte le regole di layout che magari abbiamo imparato per i siti web, ma ci sono buone probabilità che i risultati non saranno quelli che ci aspettavamo. Manteniamoci dunque sull'essenziale, cioè una pagina che presenta un titolo nella parte alta, ossia il titolo del capitolo, e poi una muraglia di testo, ossia il contenuto del capitolo: è lo schema seguito da quasi tutti i libri, dopotutto, ed è un ottimo schema, se vogliamo che il nostro e-book sia leggibile decentemente anche sullo schermo di un piccolo smartphone. Una buona e semplice struttura potrebbe essere questa: <body>

<div class=”capitolo”>



        <div class=”titolo”>

            <h2>Titolo del capitolo</h2>

        </div>

        <div class=”corpo”>

        </div>

    </div>

</body>

Il tag <div>, che qui vediamo utilizzato, è un tag che, di per sé, non possiede un preciso valore semantico, nello HTML, ma è solitamente usato per dividere in blocchi il contenuto di una pagina. In un futuro prossimo, quando saranno rimasti in circolazione soltanto browser che supportano lo HTML5, questa funzione del tag div sarà svolta da tag speciali, che lo HTML5 ha introdotto proprio per questo scopo, e <div> diventerà molto meno frequente nelle pagine web. Siccome però noi ci occupiamo di EPUB, tutto ciò non ci tocca e possiamo continuare a usare il tag div per strutturare i nostri capitoli, indipendentemente dai nuovi tag dello HTML5. A ogni tag può essere assegnato un attributo class, che ci servirà a rendere più precise le regole CSS da applicare alla pagina: invece di applicare genericamente una regola a tutti i tag dello stesso tipo (tutti i tag <a>, ad esempio), possiamo usare l’attributo class per applicare una regola a tutti i tag di uno stesso tipo, che possiedono un determinato class (ad esempio, class=”testo”), oppure a tag di tipo diverso, purché possiedano lo stesso class. Lo vedremo meglio più avanti, parlando delle regole CSS: per il momento, possiamo vedere che ci sono tre tag div, ognuno dei quali ha un attributo class differente, e grazie a questo attributo possiamo applicare loro stili differenti. <div class=”capitolo”> è il tag più ampio, che racchiude l’intero contenuto della pagina: per questo suo ruolo, possiamo utilizzarlo nel CSS per assegnare regole di base, che saranno applicate a tutto il contenuto della pagina. Per esempio, possiamo utilizzare questo tag per impostare una immagine di sfondo, oppure la larghezza dei margini della pagina, o ancora il tipo di font, e così via. Al suo interno, troviamo poi altri due tag, che separano i due blocchi di base per ogni capitolo, ossia il titolo e il testo: entrambi sono all'interno della pagina, per questo li abbiamo inseriti all'interno del tag più generale, ma entrambi hanno un ruolo paritario, per questo li abbiamo mantenuti uno accanto all'altro. <div class=”titolo”> è quindi la parte in cui inseriremo il titolo del nostro capitolo. Nel foglio di stile CSS potremo utilizzare questa combinazione tag + class, per assegnare uno stile particolare al titolo e distinguerlo dal resto del testo, oppure per racchiudere il titolo in una cornice, o applicare qualsiasi altro tipo di decorazione noi vogliamo. <div class=”corpo”>, infine, racchiude il grosso del nostro capitolo, ossia il testo, dal primo all'ultimo paragrafo. I vari paragrafi al suo interno, poi, saranno racchiusi in altrettanti tag <p>, uno per paragrafo, e a questi tag <p> potremo assegnare attributi class, ad esempio per distinguere il primo paragrafo dagli altri. In una struttura del tipo
<div class=”corpo”>



    <p class=”primo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

</div>

abbiamo definite due classi differenti per i nostri paragrafi: un attributo class=”primo”, che identifica il primo paragrafo del capitolo, e un attributo class=”paragrafo”, che identifica tutti gli altri paragrafi del capitolo. In questo modo, nel foglio di stile CSS potremo assegnare uno stile particolare al primo paragrafo, ad esempio ingrandendo la prima lettera, a simulare un manoscritto miniato del medioevo, mentre tutti i successivi paragrafi utilizzeranno uno stile comune e uniforme. Se abbiamo bisogno di utilizzare uno stile particolare su una porzione molto ridotta di testo, ad esempio una riga o anche solo una parola all'interno di un paragrafo, dovremo racchiudere quella porzione di testo in un tag <span class=”nome”></span> (al posto di “nome”, ovviamente, inseriremo il nome che preferiamo, purché non sia già stato usato in altri class): in questo modo, nel foglio di stile potremo creare uno stile apposito, da applicare al testo che utilizza quell'attributo class. Adesso che abbiamo strutturato a dovere la nostra pagina, possiamo cominciare a scrivere qualche regola in CSS: è ciò che faremo nella prossima puntata.