Şu anki yaklaşımımla yapılabileceğinden emin değilim. Bir HTML belgesinin içeriğini mevcut görünümün boyutu olan sayfalara sığdırmaya çalışıyorum. Şu anda bu belgenin tüm öğelerini yineleyerek ve üst ofsetinin geçerli sayfanın sınırında olup olmadığını kontrol ederek bunu yapıyorum. Bu ofset, yeni bir sayfanın başlangıcı olur ve sayfa sınırı bu ofsete ayarlanır. artı viewport'un yüksekliği.HTML'yi sayfalara ayırın, uzun paragrafları bölünmüş
Karşılaştığım sorun, sık sık görüntünün kendisinden daha büyük olan bir öğenin (örneğin paragraf) olacağıdır, bu nedenle algoritma bu öğeyi yeni bir sayfanın başlangıcına yerleştirse bile, İçeriği taşacak. Bu öğeleri, ilk dilim sayfanın kalan kısmını işgal edecek şekilde bölmek için bir yol bulmaya çalışıyorum.
Bu, daha fazla zorluklar sunar. Bir paragrafın metnin ne kadarının bir sayfanın geri kalanına sığmayacağını belirlemenin bir yolunu bulsam bile ve bunun kendi başına oldukça zor olduğu kanıtlanmış olsa bile, DOM'un problemini bölme işleminden hemen sonra derhal güncellenmeme problemim olurdu. Bir sonraki sayfanın hesaplamasını bertaraf edecek ya da en azından algoritmayı daha da zorlaştıracak özyinelemeyi kırmaya zorlayacak paragraf.
Paragrafın, ilk dilim sayfadaki kalan alanı kaplayacak şekilde nasıl bölüneceği konusunda herhangi bir öneride bulunabilirsiniz. Bu şimdiye kadar benim kodudur:
DÜZENLEME:Bu sadece orada hiçbir kesinlikle yerleştirilmiş veya öğeleri süzülüyor edildiği çok basit HTML üzerinde çalışacak dikkati çekiyor. Bu benim durumumda sorun değil.
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();
});
Bir naif yaklaşım, paragraftaki 1/2 kelimenin boyutunu hesaplamak ve eğer uygunsa, eğer büyük paragrafı ikiye bölerse, tekrar bölme yapıp yapmadığına bakın. –
Evet, aslında benim ilk yaklaşımım buydu. Sorun, bunun, bir sonraki sayfada, metnin normal akışını değiştirecek birkaç paragraf parçası bırakabileceğidir. Ayrıca, işlev döndürene kadar DOM güncelleştirilemediğinden, sayfadaki 1/2 sözcüklerin özyineyi bozmadan kontrol edilip edilmediğini kontrol etmenin bir yolu yoktur. – JayPea
Tek bir paragraf sayfanın tamamından büyükse, açıkça paragraflar bölünecektir. Yinelemeye gelince, normal olarak özyineleme her halükarda problemin yanlış cevabıdır. –