当サイトはお使いのブラウザに対応していません。より新しいブラウザでアクセスして下さい。
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.