View Single Post
Old 06-01-2023, 06:42 PM   #53
graycyn
Wizard
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 1,591
Karma: 11722446
Join Date: Aug 2010
Location: NE Oregon
Device: Kobo Sage, Pocketbook Era, Kobo Forma, Kindle Oasis 2
Quote:
Originally Posted by JSWolf View Post
I've tested <figure> with a class (with and without display: block and it did not work.

Can you show me a <figure> that works with ADE 2.0.1? It has to have a class and do something that would only display correctly if it's working.
Are you doing your test with a valid epub3?

I was under the impression that you neither believe much in epub3 nor make them. If you are trying to test an HTML5 element in an epub2, I'm not sure it would work! So don't do that!

Grab any purchase or freebie you have that is epub3 (I know you know how to strip DRM.), make a copy. Open it in Sigil or Calibre editor. Add a <figure> somewhere, between paragraphs, appropriately styled, and an image, or some text within and maybe some margins. Do the same with a <div> and style identically. Probably best to put your added CSS tail end of whatever the publisher has done.

They should look identical when opened in ADE 2.0.1.


Code:
<figure class="your class">
<p>Some text here</p>
<img src="add source here"/>
<figcaption>More text here</figcaption>
</figure>

<div class="your class">
<p>Some text here</p>
<img src="add source here"/>
<p class="caption">More text here</p>
</div>

CSS:

Code:
figure, figcaption {display: block;}
You should be able to see both the <figure> and the <div> display as a block elements.

Otherwise, I don't think I have anything that is public domain handy right now, I could make something, but I don't have a lot of spare time today. My time on the computer is limited, my spine can't take tons of sitting, my eyes can't take tons of computer display.

I know you understand CSS, so you ought to be able to figure this one out.
graycyn is offline   Reply With Quote