Antw.: [Treesaver.js] Re: help! How Does TreeSaver Paginate text?

[kessle...@gmail.com]

Maybe just a typo nur it should be class="pagebreak". Besides that it is ok.

Gesendet mit meinem HTC

----- Reply message -----
Von: "Dave Bricker" <inn...@gmail.com>
An: <trees...@googlegroups.com>
Betreff: [Treesaver.js] Re: help! How Does TreeSaver Paginate text?
Datum: Mi., Jul. 17, 2013 16:37


I have made great progress and have things mostly working the way I want.

One thing I want to do is to show a book spread where a chapter starts on a
right-hand page in 2-col view but the empty column disappears if the window
is narrow and only one column is visible.

First part of that problem is that the .columnbreak class does not seem to
work. If I start an article with <p class=".columnbreak></p> I get no
result. What am I missing? Is there some simple way to implement that? The
wiki mentions the class but not what to attach it to. From there, I think I
can find a way to show or hide that column depending on screen size but my
improvised solutions for .columnbreak are not working consistently across
browsers.

Thanks,

Dave

On Monday, June 3, 2013 3:21:16 PM UTC-4, Dave Bricker wrote:
>
> I'm working on a book layout that uses classic margins. I want the layout
> to be responsive and I've played with one and two-column grid classes. The
> pages of the book should be restricted so they don't exceed a certain
> maximum height but if I set a fixed height, the layout isn't vertically
> responsive. If I set the book to use a % of page height, I can't control
> the proportions.
>
> If I set a max-height css selector, everything disappears.
>
> I have played with padding and margins and heights, and I've gotten myself
> tangled up.
>
> I also want the user to be able to choose from a small menu of fonts,
> change the type size, change from left to full-justification, and choose a
> leading (tight, medium, loose).
>
> What I want to learn is how TreeSaver "thinks." I find a lot of inline
> styles apparently written by the script. I have gone through the
> walkthrough but I just can't get the columns to behave the way I want. I
> would really appreciate some assistance with this. I am at the tail end of
> a huge eBook project and my one achilles heel is learning how to manage the
> way TS handles the pagination. Once I can "get" the logic and understand
> what TS can't do, I'll be free to design within its abilities. It's a
> wonderful platform based on what I've seen so far.
>
> Many thanks,
>
> Dave Bricker
>

--
You received this message because you are subscribed to the Google Groups "Treesaver" group.
To unsubscribe from this group and stop receiving emails from it, send an email to treesaverjs...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Dave Bricker]

I was looking here: https://github.com/Treesaver/treesaver/wiki/Content-Format

[Mark Kessler]

Sorry, my last message was sent from mobile. The correct syntax is 

<p class="columnbreak"></p>

this should force the paragraph to start on a new column. And you write that does not work? What happens instead?

[Dave Bricker]

Absolutely nothing. I tried it exactly as you write it. No column break. Any idea how this works internally or how I might come up with a workaround using a 1x1px PNG file stretched to fill the column height?

Another question: is there a way to force TreeSaver to repaginate/reflow the text? I'm working on a settings panel where it's possible to change fonts/sizes/line-height, etc. and it works but the new settings only flow correctly after a page refresh.

Thanks for all the responses. I'm getting close to finished with my web book and any shortcuts, fixes, or workarounds are massively appreciated.

Dave

[Mark Kessler]

Let me see if I understand correctly what you want to do: you have a 2 column layout but on the first page of the article the left column should be empty? If the page is narrow, you want to switch to a 1 column layout?

If I understand it correctly, you could solve this with providing the proper grids. For instance:

<div class="grid page-1 wide">

  <div class="column"></div>

</div>

<div class="grid no-page-1 wide">

  <div class="column"></div>

  <div class="column col-2"></div>

</div>

<div class="grid narrow">

  <div class="column"></div>

</div>

This would create a one column grid on wide pages where you can position the single column on the right by css. The "page-1" directive allows this grid only to be used on the first page of an article. The "no-page-1" directive forces a 2 column layout on the other pages. For narrow pages, a 1 column layout is forced. Of course you will need the proper CSS to style this. No "columnbreak" needed.

Does this help?

About the font size problem: Because the size of the text and everything changes, the page will have to be redrawn. This should also be doable through some customized JS calls. I hacked deep enough into the framework so that I think I would be able to do that. Note that when you change the font size, the line height should also be changed because all height calculations in Treesaver are based on the lineheight.

Greetings,

Mark

--

[Dave Bricker]

Clever solution. Thanks. I'll try it.

You're correct about the font-size/line-height issue. I was hoping you might know what JS call to make to force the redraw but I'll find it. Interestingly, I also find that if you start with a 2-col layout and minimize the screen to a 1-col display, TreeSaver refreshes. But if you drag the window back out again, it doesn't redraw after the second screen size change. Same issue, I need to figure out how to make a redraw() function.

Best,

Dave

[Mark Kessler]

I'll also look into it on monday if I can spare some time.

[Dave Bricker]

So to summarize:

We  need  to  change  the  font-size  and  the  line-height  of  our  article  pages  based on a user preference panel.

We  find  that  TS,  'treesaver-0.10.0.js'  to  which  we  have  a  full  version  working,  reads  the  CSS  parameters  like  line  height,  font-size  from  the  css  set  and  manipulates  the  integral  inline  styling  like  the  margin-top,  margin-bottom,  heights  for  'paragraphs'  and  columns  accordingly.

So  when  we  are  trying  to  set  the  explicit  settings  for  font-size  or  line-height  through  our  custom  settings  panel  using javascript,  the  new  parameters  are  not  being  implemented  in  the  TS  'treesaver-0.10.0.js'  Even  if  the  external  settings  work  for  line-heights  and  the  font-sizes,  the  internal  manipulation  of  TS  for  corresponding  changes  in  margins  and  other  related  parameters  remains  unchanged. Hence  we  are  facing  cut-offs  and  repeat  texts  in  some  pages  of  the  chapters.

I think that if we can find a way to force treesaver to reload/reflow the text into columns, we can fix the cuttoffs and bleedovers by adjusting line-height to work with each given font-size. If you resize the window, treesaver reflows the text. If there's a way to tap into that same function call when settings change (or when the settings panel closes), I think we can solve that problem.

Any ideas? It sounds so simple and straightforward—and the screenSizeChange event is already calling it. If I can crack this last problem, I think I can finish up something pretty revolutionary.

Many, many thanks.

Happy to buy some consulting hours if that produces the desired result.

[Mark Kessler]

Hi Dave,

unfortunately I have not much time right now to dive deep into this topic but I did some research.

Basically what you have to do to re-layout the page is to call the method "Chrome.layoutPages(0)" (search for "Chrome.prototype.layoutPages"). This actually does the work of re-layouting a page and the pages before and after the current page.

The problem is that this method is not exposed, meaning it can not be called externally. So you will have to expose it programmatically in some way.

I hope this piece of information can help you.

Greetings,

Mark

[Dave Bricker]

Thanks for answreing. I'll let you know how it goes.

Many thanks,

Dave

[Andrea Campi]

I don't think Chrome.layoutPages() (with or without the 0) will help him.

First of all, there is some logic to bail out immediately if "nothing" has changed--and since Treesaver doesn't really expect the line height to change, that won't be recognized as a change.

Besides, pretty much everything keeps a reference to the "canonical" line height. Look at the constructors for Block, Grid etc--unless you reload those, you won't get very far.

Unfortunately I don't have an alternative that would work… It might be there, but nothing comes to mind.

BTW even if you do find a way, I have a hunch that it be just as slow as a full reload; and probably just as "jarring" for the user.

[Dave Bricker]

TS listens for a screen resize event so I thought a script that resized the window 1 px and then back might be a way to trick it into refreshing. But that only works for non-popup windows. So I'm wondering if the same effect could be obtained by resizing the .chrome or .viewer or .grid div? I'm giving up on line height changes but I'm hoping I can still have a font selection option.

Dave