Mantieni il ritmo verticale con CSS e jQuery

Contenuto

• Tipo di layout
• Ritmo verticale
• Condurre il ritmo
• Trattare con le immagini
• Migliorare il jQuery
• Conclusione

• Conoscenza necessaria: CSS, jQuery di base
• Richiede: jQuery, CSS, HTML
• Tempo del progetto: 30 minuti
• Scarica i file sorgente

Supponendo che si progetta dal contenuto fuori, la prima decisione per effettuare il tuo design ha essere correlato al tipo. Anche da non scegliendo un carattere tipografico hai fatto qualcosa che influisce sul tuo sito. Il tipo è fondamentale per la stampa e il web design ed è complesso; ci sono molti termini, pratiche, regole e tecniche accumulati che servono al suo buon uso. Questo articolo si occupa di una tecnica per la gestione di un aspetto del tipo, che è stato difficile da fare online ma è di routine nella stampa: mantenere un ritmo verticale costante, che a sua volta ci consente di ottenere un layout professionale.

Tipo di layout

In stampa, per qualsiasi elemento con una notevole quantità di testo, è probabile che il fondamento del design sia una griglia di riferimento. Viene utilizzato per dare struttura alla pagina e guida il flusso verticale dei contenuti. Quasi tutto è posizionato rispetto a quella griglia di base. Non preoccuparti se non riconosci i termini, nessuno ha familiarità con le linee di base o le griglie di base; li conosci già. Ripensa a scuola, quando indubbiamente scrivevi su carta a righe, mentre scrivevi mettevi ordinatamente la parte inferiore delle tue lettere su ciascuna delle righe del foglio. La linea di base e la griglia di base in azione. La linea di base è una linea immaginaria su cui si allinea la parte inferiore delle lettere.Se guardi questo articolo ora, "vedrai" una linea di base, anche se in realtà non c'è una linea. Il tuo cervello ne mette uno lì per te, è per questo che puoi leggere le frasi. Le righe su carta a righe? Sono una griglia di riferimento. Dritto in modo che le tue frasi siano dritte e impostate a intervalli regolari in modo che il tuo testo abbia un ritmo verticale regolare.

Ritmo verticale

Il ritmo verticale determina dove si trova il testo della pagina. È un componente che influenza la nostra capacità di scansionare e leggere blocchi di testo e aiuta a informare le nostre risposte emotive. Quando il testo ha un forte ritmo verticale e una buona spaziatura, lo sentiamo professionale, ponderato, autorevole e comodo da leggere. Quando il testo ha un ritmo e una spaziatura scadenti, riteniamo che sia meno considerato, meno professionale e spesso più difficile da leggere. Il ritmo verticale è una parte dell'usabilità e una parte dell'estetica.

Condurre il ritmo

Purtroppo il web è ancora il cugino povero della stampa in termini di capacità di mettere in atto alcune pratiche fondamentali in materia di caratteri. Sul Web non possiamo utilizzare una griglia di base nello stesso modo in cui fa un progettista di stampe (o un bambino a scuola): non possiamo allineare la linea di base del testo alla griglia di base di un documento. I CSS non hanno il concetto di una griglia di base. Quindi, il nostro testo non si troverà esattamente sulle linee di una griglia di riferimento. Invece, sarà centrato verticalmente nello spazio tra le linee. È il meglio che il Web può fare.

Facciamo pratica con un documento di esempio. In primo luogo, imposteremo il ritmo creando una griglia della linea di base visibile. Per fare ciò useremo un'immagine di sfondo ripetuta per disegnare linee orizzontali regolari distanti 22 px:

1. html {background: #fff url (baseline_22.png); }

Evviva, abbiamo la nostra carta a righe!

Noterai che nulla è allineato. Per allineare tutto, vogliamo che il bordo inferiore di tutti gli elementi colpisca una di quelle linee. Il modo più semplice per farlo è assicurarsi che tutti gli elementi occupino un'altezza verticale (inclusi i margini) che sia un multiplo di 22. Ecco alcuni CSS che fanno proprio questo. Sto usando l'unità REM, ma fornisco un fallback EM per i browser che non capiscono REM. Includo anche l'equivalente dell'unità PX nei commenti. Se non hai ancora compreso REM / EM, potresti semplicemente utilizzare i valori px, sono tutti equivalenti:

1. html {/ * dimensione carattere: 16 px, altezza riga: 22 px * /
2. carattere: 100% / 1,375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. sfondo: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top e bottom sono entrambi 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. margine: 1.375rem 0; }
8. h1 {/ * la dimensione del carattere è 32 px, l'altezza della riga è 44 px * /
9. / * em fallback * / font-size: 2em;
10. dimensione del carattere: 2rem; line-height: 1.375; }
11. h2 {/ * font-size è 26px, l'altezza della riga è 44px * /
12. / * em fallback * / font-size: 1.75em;
13. dimensione del carattere: 1.75rem; line-height: 1,5714285714; }
14. h3, h4, h5, h6 {/ * font-size è 22px, line-height è 22px * /
15. / * em fallback * / font-size: 1.375em;
16. dimensione del carattere: 1.375rem; line-height: 1; }
17. p, ul, blockquote {/ * il margine inferiore è 22px, l'altezza della riga è ereditata da html (22px) * /
18. / * em fallback * / margin-top: 0; margine inferiore: 1.375em;
19. margin-top: 0; margine inferiore: 1.375rem; }

Diamo un'occhiata a ciò che ci offre. Notate come tutto il testo si allinea bene? Non si trova sulla linea di fondo, ma ha un ritmo verticale prevedibile. È carino e ordinato.

Trattare con le immagini

Le immagini rendono le cose più complicate. Dai un'occhiata a cosa succede al nostro ritmo quando ne includiamo alcuni. Lo interrompono come un salto in un record: il tempo è giusto ma il tempo è sbagliato. L'allineamento viene spostato. È perché è improbabile che le immagini abbiano un'altezza multipla della linea di base, quindi il bordo inferiore non si allinea con la nostra griglia della linea di base.

Per risolvere il problema, tutto ciò che dobbiamo fare è aggiungere un margine a ciascuna immagine, allineando la parte inferiore del margine con la nostra griglia. Che è abbastanza semplice da automatizzare con un po 'di JavaScript. Ecco il nostro piano di base:

1. Calcola l'altezza di ciascuna immagine.
2. Guarda quante volte il valore della linea di base si divide nello spazio verticale attualmente occupato dall'immagine e ottieni il resto.
3. Sottrai il resto dalla linea di base per dare l'offset che dobbiamo applicare sull'immagine.
4. Applica l'offset come margine alla parte inferiore dell'immagine.

La parte inferiore dello spazio verticale dell'immagine sarebbe ora allineata correttamente con la griglia della linea di base. Ecco una funzione di base in jQuery che fa questo:

1. $ (finestra) .bind (’load’, function () {
2. $ ("img"). each (function () {
3. / * variabili * /
4. var this_img = $ (this);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * fai i calcoli * /
8. var remainder = parseFloat (img_height% baseline);
9. / * quanto dobbiamo aggiungere? * /
10. var offset = parseFloat (baseline-remainder);
11. / * applica il margine all'immagine * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Perché il window.bind linea? Perché dobbiamo aspettare che le immagini vengano caricate prima di poter ottenere in modo affidabile le loro dimensioni. Ecco un esempio con questo codice di base in esecuzione.

Migliorare il jQuery

Il mondo è raramente semplice, e così risulta qui: abbiamo a che fare con alcuni dettagli di implementazione. Cosa c'è di sbagliato nella funzione che abbiamo? In abbondanza:

• Produce risultati sgradevoli con immagini che sono in linea anziché flottate o bloccate.
• Sembra buggato su alcune immagini, in particolare quelle nei contenitori.
• Non si occupa di layout liquidi.
• Non è molto riutilizzabile.

Non vogliamo applicare questo comportamento alle immagini che sono in linea, come la faccina sorridente nell'esempio. Le immagini in linea sono allineate in modo che il bordo inferiore si trovi sulla stessa linea di base del testo (non la griglia della linea di base). Ciò significa che l'immagine è sfalsata verticalmente. Né CSS né JS ci danno un modo per scoprire dove si trova la linea di base per un elemento di testo, quindi non conosciamo l'offset. Dobbiamo ignorare le immagini in linea e applicare la nostra correzione solo alle immagini impostate su blocco di visualizzazione (fortunatamente, qualsiasi immagine flottata viene automaticamente impostata per visualizzare il blocco).

Se un'immagine si trova in un contenitore, il margine applicato all'immagine potrebbe essere nascosto a causa delle impostazioni di overflow sul contenitore. Inoltre, potremmo non volere il margine sull'immagine, ma sull'elemento contenitore. Nell'esempio, preferiremmo avere margini sulla casella bianca piuttosto che sull'immagine all'interno della casella, in modo da evitare di ottenere strani spazi vuoti che appaiono nella casella.

La funzione viene eseguita solo una volta, ma su un design liquido le immagini cambiano altezza quando il browser viene ridimensionato (prova a ridimensionare l'esempio a qualcosa di abbastanza stretto per vederlo). Il ridimensionamento interrompe di nuovo il ritmo. Abbiamo bisogno che la funzione venga eseguita dopo che il browser è stato ridimensionato e dopo il caricamento della pagina. I layout liquidi introducono anche altri problemi; le immagini possono essere alte frazioni di pixel, ad esempio 132,34 px. Ciò a sua volta può causare risultati imprevisti, anche se applichiamo un margine frazionario (se sei interessato, ecco perché: trac.webkit.org/wiki/LayoutUnit). Quindi, avremo bisogno di massaggiare l'immagine su un'intera altezza di pixel per evitare bug di layout causati da pixel frazionari.

Infine, dovremmo renderlo una funzione più riutilizzabile. Infatti, vista la complessità di una soluzione pratica rispetto alla soluzione teorica, dovremmo realizzare un plug-in che possa essere riutilizzato in altri progetti.

Nell'ultimo esempio troverai il codice che realizza tutto questo. Il plug-in JavaScript è fortemente commentato in modo da poterlo seguire. È possibile utilizzare il plug-in chiamandolo come segue:

1. $ (finestra) .bind (’load’, function () {
2. $ ("img"). baselineAlign ();
3. });

Oppure puoi dire al plug-in di applicare il margine a un contenitore denominato, se ne esiste uno come genitore dell'immagine:

1. $ (finestra) .bind (’load’, function () {
2. $ ("img"). baselineAlign ({container: ’. popup’});
3. });

Conclusione

Mantenere un buon ritmo verticale è una pratica di progettazione sottile ma efficace utilizzata regolarmente nella stampa. Ora conosci i principi di base, hai una conoscenza pratica delle linee di base e della griglia di base e conosci alcuni dei limiti del layout del testo CSS rispetto alla stampa. Sai anche come aggirare queste limitazioni, comporre i tuoi documenti secondo il ritmo verticale che preferisci e hai uno strumento per aiutarti a gestire il contenuto di immagini dirompenti.

Man mano che i CSS maturano, continuiamo a ottenere più funzionalità in linea con i nostri cugini di stampa, quindi una buona comprensione del tipo diventerà più importante per la creazione di siti Web di qualità. Se desideri saperne di più sul tipo in generale, ti consiglio vivamente www.thinkingwithtype.com (e di acquistare il libro per accompagnarlo). Se stai cercando articoli CSS sul trattamento del tipo, ci sono numerosi articoli sia qui che altrove sul Web. Consiglio anche di aggiornarti sulle ultime novità di Mark Boulton ed Elliot Jay Stocks, che parlano entrambi spesso del tipo in relazione al web design in particolare.

Divertiti!