side by side graphics and captions without table
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
side by side graphics and captions without table
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;
}
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;
}
You do not have the required permissions to view the files attached to this post.
-
- Senior Propellus Maximus
- Posts: 2089
- Joined: Tue Mar 07, 2006 5:06 pm
- Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
- Contact:
Re: side by side graphics and captions without table
Have you tried using <figcaption>?
Code: Select all
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Re: side by side graphics and captions without table
unfortunately, the <figcaption> text </figcaption> did not work for side by side graphics. The text ends up scrunched vertically between the two graphics.
Re: side by side graphics and captions without table
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...
div.fig { display: inline-block;}
<div class="fig">
...figure 1 code...
</div>
...repeat for figure 2...
-
- Sr. Propeller Head
- Posts: 308
- Joined: Tue Jun 18, 2013 3:00 am
- Location: Eastern Seaboard, Thailand
- Contact:
Re: side by side graphics and captions without table
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:
This is in PDF. Not tested anything like this in epub. But maybe this could be adapted to what you need.
This is in PDF. Not tested anything like this in epub. But maybe this could be adapted to what you need.
You do not have the required permissions to view the files attached to this post.
Tom
Flare 2022, Capture 7
Flare 2022, Capture 7
Re: side by side graphics and captions without table
Mm, Tom Yum Goong! My favourite soup!
-
- Senior Propellus Maximus
- Posts: 2632
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: side by side graphics and captions without table
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/
https://www.madcapsoftware.com/webinars ... cap-flare/
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Re: side by side graphics and captions without table
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.
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Re: side by side graphics and captions without table
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")
<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")
Re: side by side graphics and captions without table
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
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
-
- Propeller Head
- Posts: 91
- Joined: Sat Dec 08, 2012 9:05 am
- Location: Seattle WA
Re: side by side graphics and captions without table
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!