Convert html element to paged-media responsive book using nehan.js.
JavaScript CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
responsivook.css
responsivook.js
responsivook.scss

README.md

Summary

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.

Install

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>

Usage

// ".post-content" is query selector.
document.addEventListener("DOMContentLoaded", function(event){
  Responsivook.start(".post-content", {
    flow:"tb-rl" // "tb-rl", "tb-lr", "lr-tb"
  });
});

Options

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:"&laquo; NEXT",
    rightLabel:"PREV &raquo;",

    // left/right button colors.
    // available values:['sea', 'dark-blue', 'red', 'rouge', 'dark', 'orange', 'sunflower', 'concrete']
    leftColor:"dark-blue",
    rightColor:"red"
  });
});

License

MIT.