Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

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.

About

Convert html element to paged-media responsive book using nehan.js.

Resources

You can’t perform that action at this time.