Comic-book type image frames setup

[Azdaema]

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

[kovidgoyal]

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.

[Azdaema]

Originally Posted by kovidgoyal

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?

[kovidgoyal]

flexbox has an option to make all items stretch to take up available height. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Azdaema]

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]

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:

<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

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