About the nehan2-min.js's Nehan.LayoutMapper.start(opt)

GoogleCodeExporter commented 8 years ago

Hi,

What are the nehan2-min.js: Nehan.LayoutMapper.start(opt)'s parameters?
Can I change parameters like in Layout like this?
var layout = new Nehan.Layout({
  direction:"vertical",
  width: 300,
  height: 200,
  fontSize: 16,
  charImgRoot:"/img/char",
  nextLineOffsetRate: 1.8,
  nextCharSpacingRate: 0.1
});

and does the lp-font-color-FF0000 only change the punctuation marks's color?

Thanks!

Original issue reported on code.google.com by ayr...@gmail.com on 14 Mar 2011 at 3:21

GoogleCodeExporter commented 8 years ago

LayoutMapper has following option.

Nehan.LayoutMapper.start({
  convBR:true, // change BR tag to \n
  linkColor:"0000FF" // describe link color for spacial characters.
});

If you use LayoutMapper, you need to descirbe each layout size in html tag 
class(lp-font-size-xx, lp-width-xx, lp-height-xx .. etc).

>and does the lp-font-color-FF0000 only change the punctuation marks's color?

Yes.

As nehan use images for special characters(like punctuation marks),
we need to define colors for them in special option in addtion to css 
definition.

If you want to define detailed layout parser, I recommend 
Nehan.PageProvider(see example "simple-reader.html").

Original comment by lambda.w...@gmail.com on 14 Mar 2011 at 4:48

GoogleCodeExporter commented 8 years ago

Thanks for the reply,
Is there a way that simple reader does not display the NEXT and PREV buttons, 
but show all the text instead?
Actually I want to adjust the "nextLineOffsetRate" parameter to make the spaces 
between text blocks larger, and without the NEXT PREV buttons.
I am not sure if the "nextLineOffsetRate" is the new "lineHeightRate" or not?
Thanks again for your kindly reply.

Original comment by ayr...@gmail.com on 14 Mar 2011 at 5:39

GoogleCodeExporter commented 8 years ago

Nehan is parser that provides "one page" laout for given layout parameters.
And now, there is no special class and example for all page provider, 
but it is easy to create.

I hope following code helps you.

var text = "あいうえおかきくけこ"; // the text you want to convert.

var layoutOpt = {
  width:300,
  height:200,
  fontSize:16,
  nextLineOffsetRate: 1.8, // modify this if you want larger space for next line.
  charImgRoot:"/img/char"
};

var pageProvider = new Nehan.PageProvider(layoutOpt, text);

var pages = [];
var pageNo = 0;

while(pageProvider.hasNextPage()){
 var output = pageProvider.outputPage(pageNo);
 var percent = output.percent; // current percent rate.
 var htmlPage = output.html; // layout html.
 pages.push(htmlPage);
 pageNo++;
}

// now all pages are in pages array.

Original comment by lambda.w...@gmail.com on 14 Mar 2011 at 6:06

GoogleCodeExporter commented 8 years ago

Thanks for the example!
Actually I want to adjust the height between text blocks (as I marked in the 
attached picture). Sorry if I expressed myself wrong. :p
I think LayoutMapper is more easier for my purpose, it works fine except the 
space between text blocks is a little small.
here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://nehan.googlecode.com/hg/nehan2-min.js"></script>

        <script type="text/javascript">
            $(
                function(){
                    Nehan.LayoutMapper.start();
                }   
            );
        </script>

    </head>
    <body>
        <div>
            <pre class="lp-vertical lp-height-300 lp-width-400">
                あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。あいうえおかきくけこ，あいうえおかきくけこ。
            </pre>
        </div>
    </body>

</html>

Thanks!

Original comment by ayr...@gmail.com on 14 Mar 2011 at 7:16

Attachments:

Screen-shot-2011-03-14-at-3.06.24-PM.jpg

GoogleCodeExporter commented 8 years ago

OK, it's easy.

All pages nehan creates have same class "nehan-page".

So add style in your css like this.

.nehan-page{
 margin-bottom:2em;
}

Original comment by lambda.w...@gmail.com on 14 Mar 2011 at 7:31

GoogleCodeExporter commented 8 years ago

Thank you!!!
It works!

Original comment by ayr...@gmail.com on 14 Mar 2011 at 7:50

amarikp / nehan

About the nehan2-min.js's Nehan.LayoutMapper.start(opt) #5