내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
오랜만에 팁 하나 올립니다^^
전자책 편집 하면서 독자들이 신경쓰지 않을것 같은 페이지는
가독성만 보장 되면 편집은 신경을 많이 쓰지 않습니다.
그래서 이런 스타일이 나오면 그냥 상단에 가운데 정렬 정도로 편집을 했어요.
독자들이 신경쓸 것 같지 않고,
이 페이지는 1초도 안보고 넘길테니 전달하려는 내용만 확실히 전달 되면 편집 스타일은 중요하지 않다고 생각한 것이지요.
그런데 이런 부분에 신경을 쓰는 편집자가 생각보다 많더라구요.
이런건 어떻게 해야 하냐고 여러번 문의를 받았는데 그때 마다 '간단히 처리하세요' 정도로 알려드렸어요.
종이책과 비교하며 보지 않는 이상
페이지 위쪽에 나와도 어색하지 않아요.
페이지 위에 놓는게 싫다면 빈줄<p><br/></p> 5개 정도 추가하면 되지요.
이정도만 해도 별 문제 없다고 생각을 합니다.
하지만 질문이 많이 들어온다는건 그만큼 신경쓰는 분들이 많다는 뜻이라
'간단히 처리하세요' 정도로는 부족한게 아닐까 생각이 들더라구요.
얼마 전에도 비슷한 문의가 들어와서 이번엔 제대로 스타일을 잡아봤습니다.
이런 스타일은 중요한 포인트가 있어요.
어떤 경우라도 글자가 다음 페이지로 넘어가서는 안된다.
물론, 글자 크기를 엄청나게 키워서 한 페이지에 글자가 모두 담길 수 없다면 다음 페이지로 넘어갈거예요.
뷰어 높이가 아주 좁아서 한번에 2줄만 표시된다고 해도 다음페이지로 넘어가겠지요.
이런 특수한 경우가 아니라면 다음 페이지로 넘어가지 않아야 되요.
이런 스타일은 쉬워 보이지만 생각보다 까다롭습니다.
CSS를 잘 모르는 사람들은 vertical-align을 쓰면 된다고 생각해요.
vertical-align으로도 가능하지만, 그냥 되지는 않아요.
vertical-align로 직접 편집해 보세요.
팁을 드리자면 table 관련 스타일을 함께 적용해야 합니다.
저는 box-orient라는 속성을 사용했어요.
이 속성은 문제가 하나 있습니다. 표준 CSS 속성이 아니에요.
하지만, 국내 유통사 뷰어는 대부분 이 속성을 지원합니다.
box-orient는 수평 혹은 수직으로 레이어를 관리할 수 있도록 하는 속성이에요.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient
box-pack이라는 속성과 함께 사용하면 글상자 안의 도다른 글상자나 block 속성의 태그를 좌우, 혹은 상하로 정렬할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack
그런데 세로 속성을 줄 때 문제가 생겨요.
글상자에 테두리를 그리고 높이 100%(height : 100%)을 하면, 페이지가 가득 찰 것 같은데 텍스트가 있는 부분 까지만 테두리가 생기지요.
이 문제를 해결하려면 vh라는 단위를 써야되요.
vh는 현재 디스플레이 크기에 따른 비율이에요.
현재 디스플레이 해상도의 높이가 100vh지요.
그래서 width : 100vh; 하면 화면 가득 테두리가 그려집니다.
하지만, 이 역시 문제가 있어요.
리디북스는 100vh가 여백을 제외하고 현재 화면 높이에 맞게 그려지는데 교보뷰어는 100vh로 할 경우 여백까지 포함해 버리지요. 현재 화면 크기가 100이고, 뷰어 기본 여백이 5라면 교보 뷰어는 105가 되는거예요. 그래서 100vh로 놓으면 교보 뷰어에서는 일부 내용이 다음페이지로 넘어갑니다.
이 문제는 간단한 트릭으로 해결할 수 있어요.
100vh가 아닌 80vh 정도로 놓으면 되요. 80vh ~ 85vh 정도면 문제 없을거예요.
그래서 이런 스타일이 나옵니다.
<body>
<div class="box_license">
<div class="box_bottom">
<p>화면 하단에 놓일 내용</p>
</div>
</div>
</body>
.box_license {
height : 80vh;
display: box;
box-orient: vertical;
box-pack: end;
box-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: end;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: end;
-moz-box-align: center;
}
높이의 80%만 적용되서 화면 아래가 살짝 뜨긴 해요.
그래도 빈 줄을 10개씩 넣어가며 화면 아래에 맞추는 것 보다는 깔끔하게 처리될거예요.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| !important - 리디북스 PC 뷰어에서 div-margin 안먹는 문제 (0) | 2020.03.18 |
|---|---|
| [CSS 스타일 샘플] 큰 괄호 사이 글자 (1) | 2020.01.29 |
| 모르는 사람이 의외로 많은 CSS 문법 (2) (0) | 2017.09.06 |
| 모르는 사람이 의외로 많은 CSS 문법 (1) (0) | 2017.08.24 |
| 1.2.7.5 CSS 템플릿 활용하기 - 목록 스타일 편집 (0) | 2015.03.11 |