JavaScript와 CSS를 사용하여 EPub 독자를 위한 2차원 페이지 매김 HTML 문서를 구현하는 방법은 무엇입니까?

EPub 리더용 2차원 페이지 매김 HTML 문서

문제:

WebKit에서 HTML 문서를 표시하는 방법 책처럼 읽을 수 있도록 화면 크기에 전체 텍스트 줄을 포함하는 "페이지"에 브라우저를 설치하시겠습니까?

해결책:

JavaScript 및 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;

이 솔루션에는 본문 요소의 크기를 설정하고 "WebkitColumnCount"를 사용하여 열 기반 레이아웃을 활성화하여 원하는 열 수로 여러 페이지를 만드는 방법이 포함됩니다.

본문의 전체 높이를 계산하여 원하는 페이지 높이로 나누어 페이지 수를 결정합니다. 그런 다음 본문에는 페이지 수를 곱한 특정 너비(원하는 페이지 너비로 결정됨)와 페이지 높이와 동일한 높이가 지정됩니다. 마지막으로 열 개수는 동일한 페이지 수로 설정됩니다.

이 접근 방식을 사용하면 화면 경계 내에서 텍스트 줄이 잘리지 않고 콘텐츠가 화면 크기의 덩어리로 분할됩니다. 또한 단일 HTML 문서 내에서 여러 페이지를 원활하게 생성할 수 있어 WebKit 기반 브라우저에 책과 같은 페이지 매김 경험을 제공합니다.

위 내용은 JavaScript와 CSS를 사용하여 EPub 독자를 위한 2차원 페이지 매김 HTML 문서를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!