Convert html element to responsive book viewer using nehan.js.
Supports vertical writing-mode(vertical-lr, vertical-rl, horizontal-tb).
Available on IE+10, Firefox3.5+, Chrome4+, Safari6+ etc.
See DEMO.
Note that nehan.js
and nehan.css
are not included in this repository.
So get them from nehan.js.
<!-- stylesheet -->
<link rel="stylesheet" href="/path/to/nehan.css">
<link rel="stylesheet" href="/path/to/responsivook.css">
<!-- scripts -->
<script src="/path/to/nehan.js"></script>
<script src="/path/to/responsivook.js"></script>
// ".post-content" is query selector.
document.addEventListener("DOMContentLoaded", function(event){
Responsivook.start(".post-content", {
flow:"tb-rl" // "tb-rl", "tb-lr", "lr-tb"
});
});
You can set various option via second argument of Responsivook.start
.
document.addEventListener("DOMContentLoaded", function(event){
Responsivook.start(".post-content", {
// writing-mode for paged-media, default value is "tb-rl".
// available values:["tb-rl", "tb-lr", "lr-tb"]
flow:"tb-rl",
// layouting theme, default value is "book".
// available values:["book", "dangumi"]
theme:"book",
// html preprocessor for each rendering target. not defined by default.
onHtml:function(html){
return html;
},
// font-size, font-family, width, height of pages.
// if not defined, each properties are automatically defined(recommended).
fontFamily:"'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HiraMinProN-W3','IPA明朝','IPA Mincho', 'Meiryo','メイリオ','MS 明朝','MS Mincho', monospace",
fontSize:16,
height:400,
// viewer local styles. nothing defined by default.
// About styling values, see nehan.js document.
styles:{
".paragraph":{
margin:{after:"1em"}
}
},
// left/right button label. not defined by default.
leftLabel:"« NEXT",
rightLabel:"PREV »",
// left/right button colors.
// available values:['sea', 'dark-blue', 'red', 'rouge', 'dark', 'orange', 'sunflower', 'concrete']
leftColor:"dark-blue",
rightColor:"red"
});
});
MIT.