Cell. +39 3479684755
Il Blog di Instant Websites
Testo su più colonne
La leggibilità di un testo in una pagina web dipende da più fattori tra i quali i più rilevanti sono il tipo e la dimensione del font usato e la lunghezza delle righe.
Su alcuni manuali, il numero di caratteri massimo che consente una lettura agevole è pari a 75; questo valore non deve essere interpretato in maniera stringente ma costituisce un valido riferimento.
Aprendo la pagina con gli esempi creati su questo argomento, possiamo vedere innanzitutto l’Esempio 1 nel quale un contenitore avente larghezza 100% contiene testo che risulta difficilissimo da leggere a causa della lunghezza eccessiva della riga.
Utilizzando le proprietà: column-count, column-width e column-gap è possibile suddividere su più colonne il testo in un div.
L’Esempio 2 mostra lo stesso contenitore al quale è stata applicata la proprietà column-count impostando il relativo valore a 3.
Naturalmente, tramite apposite media query sarà possibile modificare tale valore portando il testo su 2 colonne e poi su 1 sola colonna al ridursi della viewport.
Un’interessante proprietà di Flexbox
Abbiamo già parlato di Flexbox in due precedenti articoli: Introduzione a Flexbox (https://lnx.instantwebsites.it/iwblog/2019/01/introduzione-a-flexbox/) e Layout a 2 o più colonne con Flexbox (https://lnx.instantwebsites.it/iwblog/2021/05/layout-a-2-o-piu-colonne-con-flexbox/)
Vediamo ora un’interessante proprietà di Flexbox che riguarda il testo inserito in un box definito con flex.
Anche in questo caso, come negli altri articoli, è stato preparata una pagina HTML visualizzabile cliccando qui.
In quella pagina, abbiamo definito un box chiamato .contenitore e tre altri box al suo interno, identificati con la classe .box.
Quello che segue è il codice CSS:
.contenitore {
background: #FFF;
display: flex;
flex-direction: row;
column-gap: 30px;
}
.box {
width: 200px;
height: 200px;
background: #FF0;
display: flex;
justify-content: center;
}
.box p {
margin-top: auto;
}
Andando per ordine: al div.contenitore è stata assegnata la proprietà display: flex; ed i tre box al suo interno vengono disposti su una riga (flex-direction: row;) e separati da uno spazio pari a 30px (column-gap: 30px).
Il tag picture
L’introduzione del web design reattivo tramite HTML5 e CSS3 ha introdotto la possibilità di ottenere il ridimensionamento automatico di un’immagine, fino ad occupare lo spazio orizzontale disponibile e mantenendone le proporzioni, tramite la regola:
img { max-width: 100%; height: auto; }
Fino a qui, niente di nuovo; d’altronde, quella sopra esposta è una regola che compare sistematicamente nel foglio di stile base di qualsiasi sito.
Ci sono però dei casi nei quali la semplice reattività di un’immagine non si traduce in un risultato apprezzabile dal punto di vista pratico.
Immaginiamo un’immagine di intestazione che, vista nella viewport di uno schermo ampio, occupa tutta la larghezza ed una certa altezza, ad es. 1920×850 pixel.
Nel momento in cui la viewport viene ridotta e l’immagine ridimensionata proporzionalmente, quest’ultima finirà con il risultare estremamente piccola e quindi inutile dal punto di vista del risultato. Eseguendo i classici “conticini” scolastici, si fa in fretta a capire: nella viewport di uno smartphone, 1920×850 diventa 480×213 pixel.
Per prevenire questo problema, una soluzione tradizionale consiste nel posizionare l’immagine non come elemento <img> bensì come sfondo del contenitore; man mano che la viewport viene ridotta, tale contenitore occupa sempre il 100% dello spazio disponibile ed una certa altezza minima mentre l’immagine di sfondo non si adatta, sicché ne verrà mostrata solo una parte.
Potete vedere un esempio di questa tecnica nella homepage del sito https://ottolina.com/ (grafica del sito by modus comunicazione visiva).
Si tratta di una tecnica funzionale ma con un possibile effetto sgradito: verrà mostrata solo una parte dell’immagine – tipicamente quella centrale – sicché si perderanno molti dettagli della stessa.
E’ indispensabile quindi scegliere un’immagine che mantenga un effetto accettabile anche in tale contesto.
Da menzionare, senza però raccomandarla, un’alternativa molto comoda ma, per così dire, estrema: rinunciare del tutto a mostrare l’immagine stessa quando la viewport scende al di sotto di una certa dimensione.
Esiste una terza possibilità che è finalizzata ad ottimizzare l’esperienza utente al prezzo di una preventiva preparazione di due o più immagini alternative: il tag picture di HTML5.