side by side graphics and captions without table

[Isleofgough]

Thank you for the help in the past.
I would like to create a css for side by side graphics and captions that avoids using a table. Since the output is pdf and epub, I have found tables somewhat problematic (for the epub).
I have img styles set that work well, but I am not sure how to handle the captions so that they line up correctly and do not split to the next page from the the figures in the pdf output.
What should I add to my code, please?

Here is the code and desired output:
img
{
mc-thumbnail-max-height: auto;
width: auto;
max-width: 100%;
}


img.left45
{
width: 45%;
text-align: left;
float: left;
margin-right: 15px;
max-width: 100%;
}

img.right45
{
width: 45%;
text-align: right;
float: right;
clear: none;
max-width: 100%;
margin-left: .1 in;
}

p
{
frame-break-before: avoid;
margin-bottom: 14px;
font-family: Calibri;
font-size: 11pt;
widows: 2;
orphans: 3;
line-height: 14pt;
margin-top: 0;
}
p.image
{

}

p.imgclear
{
clear: both;
}

[SteveS]

Have you tried using <figcaption>?

Code: Select all

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

[Isleofgough]

unfortunately, the <figcaption> text </figcaption> did not work for side by side graphics. The text ends up scrunched vertically between the two graphics.

[Psider]

In theory you could create a div class set to display as inline-block and wrap each figure in that div class. Not sure how it would turn out in your targets though.

div.fig { display: inline-block;}

<div class="fig">
...figure 1 code...
</div>
...repeat for figure 2...

[atomdocs]

I agree you can probably do this with divs. I did something similar that has a gallery feel to it. I used Flare's Responsive Layout gadget:

side-by-side.png

This is in PDF. Not tested anything like this in epub. But maybe this could be adapted to what you need.

[Psider]

Mm, Tom Yum Goong! My favourite soup!

[ChoccieMuffin]

I also saw a really interesting presentation on "flexbox" from Matthew Ellison at MadWorld last year. Unfortunately I couldn't find a webinar on the topic, but you might find Responsive is a useful approach to take.

https://www.madcapsoftware.com/webinars ... cap-flare/

[Isleofgough]

Thank you everyone for the suggestions. I ended up using a one row two column table for the pdf. Nothing worked well for epub output, so I created a simpler layout for that and added conditions for pdf and epub targets. Unfortunately, there are a lot of issues with epub/Kindle outputs from Flare as it currently exists, so I will have to do a lot of editing with Calibre/Sigil/Jutoh to make the epub meet standards that look good and can be uploaded to Kindle Store.

[Isleofgough]

I found that using <figure> </figure> gives me ePub errors. Do you know what is wrong with the code:
<p class="imgclear">
<figure>
<img src="../../Resources/Images/Image1.jpg" class="right45" />
<figcaption><span class="Red">Step 1</span>: Description of Step 1.</figcaption>
</figure>
</p>

epub checker:

INFO Validating using EPUB version 3.0.1 rules. (https://github.com/w3c/epubcheck)
ERROR PKG-007 /mimetype Mimetype file should only contain the string 'application/epub+zip' and should not be compressed.
ERROR RSC-005 /OPS/FirstFile.xhtml (line 74, col 21) Error while parsing file: element "figure" not allowed here; expected the element end-tag, text or element "a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "command", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "link", "map", "mark", "meta", "meter", "ns1:switch", "ns2:math", "ns3:svg", "object", "output", "progress", "q", "ruby", "s", "samp", "script", "select", "small", "span", "strong", "sub", "sup", "textarea", "time", "u", "var", "video" or "wbr" (with xmlns:ns1="http://www.idpf.org/2007/ops" xmlns:ns2="http://www.w3.org/1998/Math/MathML" xmlns:ns3="http://www.w3.org/2000/svg")

[Psider]

I think figure can't be inside p tags?

At least the spec for p says it can contain "phrasing content" and figure doesn't appear in the phrasing content section of this page...
https://developer.mozilla.org/en-US/doc ... ng_content

[Isleofgough]

Thank you so much! The stacking of <figure> within a paragraph was the problem. I ended up abandoning the plan to have side by side figures and instead am just using test on one side and a figure on the other. It is not as elegant but is much easier to achieve consistency between the pdf and ebook outputs. With the change you suggested (moving <figure> and <figcaption> out of their paragraph nested position, the only epub errors I am getting relate to the mimetype compression and the dumping of unused styles in the epub by Flare. All user errors appear to be fixed!