great news: CSS Region spec change

9 views
Skip to first unread message

Johannes Wilm

unread,
Apr 20, 2013, 6:33:11 PM4/20/13
to booktype-dev
Hey,
once more the specification of CSS Regions has been changed. http://dev.w3.org/csswg/css-regions/

This time there are some good news for us: There is a new event that is triggered whenever there are too few or too many regions. Until now we checked when the contents changed.

This change should mean we don't have to check if new pages ar eneeded all the time AND when we use remote fonts, it should automatically trigger creating new pages (or removing them) if a new font means that we need more/fewer pages.

Up until now we had to disable remote fonts, aong other thigns because of this issue.

--
Johannes Wilm
BookJS Developer


skype: johanneswilm

Tim Bo

unread,
Apr 22, 2013, 3:50:07 AM4/22/13
to booktype-dev
Has anything else changed??
A layout that was working on Wednesday last week has broken: the centered images are now all stuck on the left. I am using the same CSS as previously. The older version with an older book.js is still centering but there are other issues that were broken there!
best,
Tim


2013/4/21 Johannes Wilm <johann...@sourcefabric.org>

--
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

unread,
Apr 22, 2013, 6:21:19 AM4/22/13
to bookty...@googlegroups.com
Hey Tim,

these are only changes to te specification of how CSS Regions SHOULD work. The next step is then for the Adobe people to actually program this. then they send it in to Apple and Google for review. Eventually itwill be included in Google Chrome.

As for the issue you are having -- is there any way you can share your sources with me/us so that I can take a look at how you centered things and why it dosn't work now?

Tim Bo

unread,
Apr 22, 2013, 9:37:53 AM4/22/13
to booktype-dev
I presumed that there could not have been any real changes, unless Chrome somehow immediately reacted.  Standard slow things down, which is probably a good thing in this case!

What I am doing in book.html to get one nonfloated and one floated image:

<div class="imagewrapper"><img class="image" src="static/Freeman-etudes-18.gif" alt="" width="400"><p><em>Autobiographical Statement (John Cage, 1990)</em></p>
</div>
<div class="imagewrapper-topfloat"><span><span><img class="image" src="static/Faerie__s_Aire_and_Death_Waltz1.jpg" alt="" width="300"><p><em> Faerie's Aire and Death Waltz by John Stump</em></p></span></span>
</div>

With this is bookconfig.js:
paginationConfig = {
...
        'topfloatSelector': '.imagewrapper-topfloat',
...

and in book.css:

.imagewrapper-topfloat, .imagewrapper {
  page-break-inside: avoid;
  text-align: center;
  margin:0 auto;
  display: block;
}
 .imagewrapper-topfloat p, .imagewrapper p  {
  margin-bottom:5mm;
  page-break-inside:avoid;
  text-align:center;
  font-style: italic;
  word-wrap:break-word;
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
  display:block;
  text-indent: 0 !important;
  font-size:11px;
}

 
There are probably lots of things stylistically wrong with this technique! But this should be enough to see how it is not working properly, or it is working in another. The image floats, but it is left justified. The text is centered within a box that seems to be left justified, but the text caption is clealy not left justified.

I can add some actual full files if that makes sense.

Best,

Tim


2013/4/22 Johannes Wilm <johann...@sourcefabric.org>

Tim Bo

unread,
Apr 22, 2013, 9:44:42 AM4/22/13
to booktype-dev
And here is a PDF of the bad layout, with some text added to pad out the images.


2013/4/22 Tim Bo <tim...@gmail.com>
example_noncentered.pdf

Johannes Wilm

unread,
Apr 22, 2013, 9:45:10 AM4/22/13
to bookty...@googlegroups.com
Hey Tim,

yes, send me the files some way. I can sign an NDA if you want me to.

Some info that may help you:

-- It is not the imagewrapper-topfloat that is being floated, it is the first span inside of it.
-- It is floated into an element that will live inside of div.pagination-topfloats. If you make elements inside of div.pagination-topfloats center, it should work.
Reply all
Reply to author
Forward
0 new messages