Tutorial

Install

<link rel="stylesheet" href="/path/to/nehan.css">
<script type="text/javascript" src="/path/to/nehan.js"></script>

Getting Started

var target = document.querySelector("#result");

new Nehan.Document()
  .setStyles({
    "body":{
      flow:"lr-tb", // or "tb-rl"
      fontSize:16,
      width:640, // page width
      height:480 // page height
    },
    "p.line":{
      margin:{after:"1em"} // use 'logical' property!!
    }
  })
  .setContent([
    "<p class='line'>hello, nehan.js!!</p>"
  ].join("\n"))
  .render({
    // called for each page output.
    onPage: function(page, ctx){
      console.log("onPage:%o", page);
      // append generated page
      target.appendChild(page.element);
    },
    onComplete: function(time, ctx){
      // parsing complete, now you can get outline(toc) element.
      var outline = ctx.createOutlineElement({
        onClickLink:function(toc, evt){
          console.log("click %o", toc);
        }
      });
      console.log("finished! %fmsec", time);
    }
  });

About Styling

Selector of nehan.js is something different from standard one.

Because nehan.js is LOGICAL layout engine, you must use LOGICAL property in various situations.

For example, you must use margin-start instead of margin-left for horizontal left margin.

For more information about logical property, see CSS Writing Modes Module Level3 - Abstract box dimemsions.

Global Style

You can set global style by Nehan.setStyle.

Nehan.setStyle("h1", {
  "font-size":"3em"
});

Functional Css Value

In nehan.js, all css values are parsed in js layer, so you can define functional css value like this.

doc.setStyle(".example2", {
  "background-color":function(ctx){
     if(ctx.getChildIndex() % 2 === 0){
       return "blue";
     } else {
       return "red";
     }
  }
});

Type of ctx is SelectorContext.

Selector Callback

Using onload property, you can change markup dynamically before parsing.

doc.setStyle(".time", {
  onload:function(context){
     var markup = context.getMarkup();
     var now = new Date().toDateString();

     // dynamically rewrite markup content.
     markup.setContent([
       "<p>You have visited this page at <time>" + now + "</time></p>",
       markup.getContent()
     ].join(""));
  }
});

DOM Generation Callback

By using oncreate property, you can hook just after the target selector is converted into DOM.

doc.setStyle("p", {
  oncreate:function(context){
    // console.log("abstract logical tree:%o", context.box);
    $(context.dom).click(function(){
       alert("click p!");
    });
  }
});

Type of ctx is DomCreateContext.