Possiamo usare JavaScript per risolvere il problema del clear sulle pullquote.
Le pullquote sono citazioni di blocco flottate. Data la natura del floating CSS, gli elementi che seguono si disporranno intorno alla citazione.
Il problema sorge quando ad esempio il testo che segue la citazione ha un'altezza inferiore al testo della citazione stessa. In questo caso possiamo usare JavaScript per ripristinare il flusso del documento trasformando la pullquote in una normale citazione di blocco.
'use strict';
const clearPullQuotes = selector => {
let quotes = document.querySelectorAll(selector);
Array.prototype.forEach.call(quotes, quote => {
let next = quote.nextElementSibling;
let quoteHeight = quote.offsetHeight;
let nextHeight = next.offsetHeight;
if(nextHeight < quoteHeight) {
quote.classList.add('fullquote');
}
});
};
document.addEventListener('DOMContentLoaded', () => {
clearPullQuotes('.pullquote');
});