Bagaimana untuk Melaksanakan Dokumen HTML Penomboran Dua Dimensi untuk Pembaca EPub Menggunakan JavaScript dan CSS?

Dokumen HTML Penomboran Dua Dimensi untuk Pembaca EPub

Masalah:

Cara untuk memaparkan dokumen HTML dalam WebKit penyemak imbas dalam "halaman" yang bersaiz skrin dan mengandungi baris teks yang lengkap, supaya ia boleh dibaca seperti buku?

Penyelesaian:

Menggunakan JavaScript dan CSS:

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

Penyelesaian ini melibatkan penetapan dimensi elemen badan dan mendayakan reka letak berasaskan lajur menggunakan "WebkitColumnCount" untuk mencipta berbilang halaman dengan bilangan lajur yang dikehendaki.

Dengan mengira jumlah ketinggian badan dan membahagikannya dengan ketinggian halaman yang dikehendaki, bilangan halaman ditentukan. Kemudian, badan diberi lebar tertentu (ditentukan oleh lebar halaman yang dikehendaki) didarab dengan bilangan halaman, dan ketinggian sama dengan ketinggian halaman. Akhir sekali, kiraan lajur ditetapkan kepada bilangan halaman yang sama.

Pendekatan ini memastikan kandungan dibahagikan kepada ketulan bersaiz skrin, tanpa baris teks terputus dalam sempadan skrin. Ia juga membolehkan berbilang halaman dibuat dengan lancar dalam satu dokumen HTML, memberikan pengalaman penomboran seperti buku untuk penyemak imbas berasaskan WebKit.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Dokumen HTML Penomboran Dua Dimensi untuk Pembaca EPub Menggunakan JavaScript dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!