EPUB3 본문 스크롤로 보기 + 고정 레이아웃 글자크기 변경
교보문고 뷰어가 EPUB 3를 지원합니다.
기능은 오래 전부터 들어 있었는데 UI가 제대로 정리되지 않아 사용을 하지 못했지요.
그런데 이번에 EPUB 3를 공식 지원하는 업데이트가 있었습니다.
그리고 베스트 1위 자리에서 내려올 생각을 하지 않는 '미움받을 용기'를 EPUB 3로 만들어 판매를 하고 있습니다.
이 책을 보다가 본문을 스크롤로 보는 방식에 관심이 생겼습니다.
웹소설은 모두 스크롤로 보는데 장르 단행본은 페이지 넘김으로 봐야하잖아요.
웹소설에 익숙한 독자라면 단행본도 스크롤로 보고싶지 않을까 하는 생각이 들었어요.
(EPUB3 본문 스크롤 글자크기변경)사랑 안 되나요(sample).epub'미움받을 용기'에서 본문을 스크롤로 읽는 방식은 마음에 들었는데
고정레이아웃이라 글자 크기를 조절할 수 없는 부분이 아쉬웠습니다.
그래서 본문을 스크롤로 읽지만, 고정레이아웃에서 글자 크기를 변경할 수 있는 샘플을 만들어 봤습니다.
쉽게 사용할 수 있도록 최대한 간단히 만든거라 샘플 파일 보고 조금만 연습하면 이해할 수 있을거예요.
(참... sigil로 작업을 하다보니 opf:role 속성을 수정하지 않았습니다. 그래서 검증을 하면 opf 오류가 보일거예요. 기능상의 이상은 없습니다.)
◇ 샘플 파일 설명
1. EPUB 3 고정 레이아웃 제작에 대한 부분은 따로 설명하지 않습니다. 이 부분은 EPUB 3 설명할 때 자세히 다루겠습니다.
2. 고정레이아웃에서 본문을 화면 스크롤로 보기
- 화면 스크롤은 CSS에서 지원이 됩니다. 간단히 화면 스크롤을 적용할 수 있습니다.
- 이 CSS가 제대로 작동을 하려면 EPUB 3 고정 레이아웃으로 제작되야 합니다.
- 고정 레이아웃에서 화면 스크롤 CSS
div.txt_scroll {
overflow-y:scrole;
overflow-x:hidden;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
width:720px;
height:1098px;
}
- 화면 스크롤 적용 방법
<div class="txt_scroll">
<p>여자는 자신을 돌아봤다.</p>
<p><br/></p>
<p>'나'라는 가장 직시하고 싶지 않은 자신을 봐 버린 여자. 사랑은 안되고 섹스는 되는 쉬운 여자라는 걸 오늘 또 한 번 깨닫게 되었다.</p>
<p>회사 안에서 몇 번 마주쳤지만 그는 자신을 알아보지 못했고 자신 또한 그와 자신이 대학 동기였다는 것을 알리고 싶지 않았다.</p>
<p>두 달 전 대학 동기들 모임 안내를 받고 망설였다.</p>
<p>해외 지사에 있다가 얼마 전에 돌아온 그가 동창 모임에 얼굴을 내밀 것이라고는 생각하지 못한 여자는 오늘 무슨 일이 있어도 남자와 얽히고 싶지 않아 조심했다.</p>
<p>어떻게 된 걸까?</p>
...
</div>
3. 글자 크기 변경 스크립트
- 고정 레이아웃은 글자크기를 조절할 수 없습니다. PDF처럼 화면을 확대/축소해서 글자를 키웁니다.
- 그러다보니 폰에서는 글자가 너무 작은데 태블릿에서는 글자가 너무 크게 보이는 등의 문제가 생깁니다.
- 스크롤 방식의 텍스트 도서라면 고정레이아웃이어도 글자 크기를 변경할 수 있습니다. 화면이 틀어지지 않아요.
- 글자 크기 조절 스크립트
function fontResize(font_size) {
if (document.body.style.fontSize == "") {
document.body.style.fontSize = "100%";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (font_size) + "%";
}
* 인터넷에 공개된 스크립트를 약간 수정했습니다.
- 스크립트 적용 방법
<body>
<div class="chap_title">
<h3>1. 어떻게 된 걸까?</h3>
<div class="button_up" onclick="fontResize(20)" role="button">
<p>A</p>
</div>
<div class="button_down" onclick="fontResize(-20)" role="button">
<p>A</p>
</div>
</div>
<div class="txt_scroll">
<p>여자는 자신을 돌아봤다.</p>
<p><br/></p>
<p>'나'라는 가장 직시하고 싶지 않은 자신을 봐 버린 여자. 사랑은 안되고 섹스는 되는 쉬운 여자라는 걸 오늘 또 한 번 깨닫게 되었다.</p>
...
</div>
</body>
- 스크립트를 js파일로 연결하거나 <script> 영역에 삽입합니다.
- 텍스트 크기 조절 버튼을 <div...>여기</div>에 넣습니다. 이미지여도 좋고, 텍스트여도 좋습니다. 저는 텍스트를 추가하느라 <p> 태그를 사용했는데 <img../> 태그를 사용하면 이미지를 넣을 수 있습니다. (p 태그에 있는 A를 스타일로 글자크기를 축소버튼 15px, 확대버튼 35px로 주어 확대/축서 버튼을 구분합니다.)
- onclick="fontResize(20)"은 글자 크기를 20%씩 키웁니다. 10%씩 키우고 싶다면 20 대신 10을 넣으면 됩니다.
- onclick="fontResize(-20)"은 글자 크기를 20%씩 줄입니다. -10%씩 키우고 싶다면 20 대신 10을 넣으면 됩니다.