Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Editor

Notices

Reply
 
Thread Tools Search this Thread
Old 11-08-2019, 06:46 PM   #1
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
Comic-book type image frames setup

I have a series of comic book type pictures, andd I want to arrange some of them side-by-side. They aren't exactly polished; they're individual frames (not compiled into big pages) and they don't all have the same dimensions. I'd like to avoid editing the images themselves, if possible.

I would like to set them into rows, and within each row, size them so that they're all the same height. But I want that height to be flexible, and for the pictures to be as big as they could be, given the scene width. Here's some code for example: https://codepen.io/Azdaema/pen/ExxRwOR

What I thought I knew was that a) epub3 supports javascript, but epub2 does not, and b) calibre doesn't support epub3. Is this correct?

Can anyone tell me how to put javascript into an epub? Or how to produce a similar effect with just css and html?

(I was also playing around with various flexbox setups, but they didn't work in the calibre "file preview" screen. That might be something else I'd like to include, so there could be more frames per line on larger viewers. This part isn't my main priority right now, but if you happen to know anything about that, that would be helpful too.)
Azdaema is offline   Reply With Quote
Old 11-08-2019, 08:56 PM   #2
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 35,644
Karma: 12746655
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
epub 3, including javascript works fine in calibre as does flex box (make sure you are running calibre 4+)

But note that if you include javascript in your book it wont be useable in many places and wont be convertible either. Instead use CSS. What you want to do is perfectly possible with flexbox.
kovidgoyal is offline   Reply With Quote
Old 11-08-2019, 11:11 PM   #3
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
Quote:
Originally Posted by kovidgoyal View Post
But note that if you include javascript in your book it wont be useable in many places and wont be convertible either. Instead use CSS. What you want to do is perfectly possible with flexbox.
How would you do make-them-all-the-height-of-the-minimum-one with flexbox?
Azdaema is offline   Reply With Quote
Old 11-08-2019, 11:15 PM   #4
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 35,644
Karma: 12746655
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
flexbox has an option to make all items stretch to take up available height. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
kovidgoyal is offline   Reply With Quote
Old 11-09-2019, 03:07 AM   #5
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
If anyone can actually show me code for a use of flexbox that would do that, I'd love to see it, but I've been playing with flexbox for the past two days and I haven't gotten it going that yet.
Azdaema is offline   Reply With Quote
Old 11-10-2019, 05:57 PM   #6
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
To anyone else who's having this problem in the future, the solution I'm using that so far is working reasonably well is using the svg tag. Here's an example of a pane of my frames:

Code:
<div id="h70">
 <svg width="100%" height="100%" viewBox="0 0 800 550">
   <g>
    <image x="0" height="300" width="400" xlink:href="images/part2frame14.png" preserveAspectRatio="xMinYMax slice"/>
    <image x="410" height="300" width="400" xlink:href="images/part2frame15.png" preserveAspectRatio="xMidYMax slice"/>
    </g>
  
  <g transform="translate(0 310) scale(0.8)">
    <image x="0" height="300" width="370" xlink:href="images/part2frame16.png" preserveAspectRatio="xMidYMax slice"/>
    <image x="380" height="300" width="340" xlink:href="images/part2frame17.png" preserveAspectRatio="xMidYMid slice"/>
    <image x="730" height="300" width="290" xlink:href="images/part2frame18.png" preserveAspectRatio="xMaxYMid slice"/>
   </g>
</svg>
</div>
The hight of an SVG in the context of being responsive to screen size is tricky. The id="h70" is

Code:
#h70 {
  height: 70vw;
}
It's not quick and automatic, and you have to set the frames individually, but you have a large degree of creative control and that's nice. You can alter the size so they match, you can crop them, and so on.
Azdaema is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Is there a way to ADD A NEW BOOK via dropbox after syncing is setup? arooni Android Devices 1 12-09-2017 09:49 PM
Validation error after changing image type kongjie ePub 2 05-05-2017 08:29 PM
Aura Book sync setup canpolat Kobo Reader 2 12-19-2013 05:04 PM
Free Book Nov. 16 Only! Modern Comic Book by Austin Cunningham AustinCunningham Self-Promotions by Authors and Publishers 2 11-16-2012 04:54 PM


All times are GMT -4. The time now is 12:10 PM.


MobileRead.com is a privately owned, operated and funded community.