내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
교보문고 뷰어가 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을 넣으면 됩니다.
'Tip&Tech' 카테고리의 다른 글
| Sigil Add Cover 기능 제대로 활용해보자! (0) | 2016.02.03 |
|---|---|
| Sigil로 EPUB 3 고정 레이아웃(Fixed-layout) 만드는 방법 (3) | 2016.01.29 |
| 정규표현식 - 1시간짜리 작업을 1분에 끝내기 (11) | 2016.01.21 |
| Calibre의 유용한 새 기능 - 모든 데이터 내보내기 (0) | 2015.12.22 |
| CSS의 상속 (0) | 2015.03.19 |