pagination-topfloat usage to float images automagically

[Tim Bo]

Hi dev people,

  seeing as I cannot seem to find anything out there in "user land" I will resort to harassing you all.

In T&D we have images in an imagewrapper class. So we have

<div class="imagewrapper"><img src="static/cake.png" alt="" width="600" height="225">
<p>The recipe as supplied</p></div>

We would like them to float, which works with:
<div class="imagewrapper pagination-topfloat"><img src="static/cake.png" alt="" width="600" height="225">
<p>The recipe as supplied</p></div>

as well as

<span class="pagination-topfloat">
<div class="imagewrapper"><img src="static/cake.png" alt="" width="600" height="225">
<p>The recipe as supplied</p></div>
</span>

(although I later saw thatI should have added two layers of <span> around the <div> for correctness)

What I would actually like to do is simply have
<div class="imagewrapper-topfloat"><img src="static/cake.png" alt="" width="600" height="225">
<p>The recipe as supplied</p></div>

which has certain definitions in the definition of imagewrapper extended to do topfloats. Is there some copy and paste CSS I could add to our definition of imagewrapper to get this?

The current definition in book.css is:

.imagewrapper {
  page-break-inside:avoid;
  text-align:center;
  margin:0 auto;
}

and my naive appraoch wants this to work:
.imagewrapper-topfloat {
  page-break-inside:avoid;
  text-align:center;
  margin:0 auto;

  magic: pagination-topfloat;

}

Any suggestions on the magic?  :->

Cheers,

Tim

[Johannes Wilm]

Hey Tim,

congratulation! I believe you are the first person besides myself who is using my top floats implementation!

Unfortunately, there is no CSS to make things float like that. Instead it's some rather complex javascript that does it that will be difficult to cut out and replicate.

But you can choose what the CSS selector for top floats should be. 

So if you use this config option, it should work:

paginationConfig = {

    ...,

    'topfloatSelector': '.imagewrapper-topfloat',

}

Let us know how it goes!

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

--

Johannes Wilm

BookJS Developer

johann...@sourcefabric.org

www.sourcefabric.org

US: +1 520 399 8880

skype: johanneswilm

[Johannes Wilm]

Btw, I don't think you get around having at least one if not two extra SPAN or DIV elements inside the container you want to float in many cases. This is a restriction that has to do with how CSS Regions work and something we cannot currently avoid, I am afraid.