Beh, non sono nemmeno sicuro se questo può essere fatto con il mio approccio attuale. Sto cercando di adattare il contenuto di un documento HTML a pagine della dimensione della finestra corrente. In questo momento sto facendo questo iterando attraverso tutti gli elementi del documento e controllando se il loro offset superiore è all'interno del limite della pagina corrente, ogni volta che non lo è, questo offset diventa l'inizio di una nuova pagina e il limite della pagina è impostato su questo offset più l'altezza del viewport.Dividere HTML nelle pagine, dividere i paragrafi lunghi
Il problema che sto affrontando è che spesso ci sarà un elemento (un paragrafo, per esempio) la cui altezza è maggiore della vista stessa, quindi anche se l'algoritmo colloca questo elemento all'inizio di una nuova pagina, il suo contenuto traboccherà. Sto cercando di trovare un modo per dividere tali elementi in modo che la prima sezione occupi la parte rimanente della pagina.
Ciò presenta ulteriori difficoltà. Anche se riuscissi a trovare un modo per determinare quanto del testo di un paragrafo si adatta ancora al resto di una pagina, e questo di per sé ha dimostrato di essere abbastanza difficile, avrei ancora il problema del DOM che non aggiorna immediatamente dopo aver diviso il paragrafo, che potrebbe rovinare il calcolo della pagina successiva o almeno costringermi a interrompere la ricorsione che complicherebbe ulteriormente l'algoritmo.
Eventuali suggerimenti su come suddividere un paragrafo in modo che il primo segmento occupi lo spazio rimanente sulla pagina sono i benvenuti. Questo è il mio codice finora:
EDIT:Vale la pena notare che questo funziona solo su molto semplice HTML su cui non ci sono posizionato in modo assoluto o elementi galleggiare. Questo non è un problema nel mio caso.
var elementIndex = -1;
var pages = 1;
var pageBoundary = 0;
var pageBreaks = [];
function calculatePages() {
//first page boundary is window height
pageBoundary = $(window).height();
//do calculations
iterateElements($("body"));
//print results
console.log(pageBreaks);
}
function iterateElements(parent) {
$.each($(parent).children(), function(i, e) {
//increase current element index
elementIndex = elementIndex + 1;
//get element's top offset
var offsetTop = $(e).offset().top;
//get the last position that the element occupies
var elementSpan = offsetTop + $(e).outerHeight();
if ($(e).children().length == 0) { //only leaf nodes will be set as page breaks
//element's start position is outside page boundary
if (offsetTop >= pageBoundary) {
//mark page start with red in order to visualize
$(e).attr("style", "border-top: 1px solid red");
//increase page count
pages = pages + 1;
//new page starts at element's top, next page boundary
//is element's starting position plus the viewport's height
pageBoundary = offsetTop + $(window).height();
//store index of page break
pageBreaks.push(elementIndex);
}
//element's start position is inside current page, but contents overflow
else if (elementSpan >= pageBoundary) {
//NO IDEA WHAT TO DO HERE
//NEED A WAY TO SPLIT LARGE ELEMENTS
}
}
iterateElements(e);
});
}
$(function() {
calculatePages();
});
Un approccio ingenuo sarebbe quello di calcolare la dimensione di 1/2 parole dal paragrafo e vedere se ciò si adatta, in caso dividere il grande paragrafo in due, altrimenti dividere nuovamente. –
Sì, quello era il mio approccio iniziale in realtà. Il problema è che questo potrebbe lasciare diversi frammenti di paragrafo nella pagina successiva, il che altererebbe il normale flusso del testo. Inoltre, poiché il DOM non viene aggiornato finché la funzione non ritorna, sembra che non ci sia modo di verificare se 1/2 parole si adattano alla pagina senza interrompere la ricorsione. – JayPea
Se un singolo paragrafo è più grande di un'intera pagina, ovviamente i paragrafi verranno divisi. Per quanto riguarda la ricorsione, normalmente la ricorsione è la risposta sbagliata al problema in ogni caso. –