Table emulation CSS, or...?

[Hitch]

Hi, Gang:

I'm hoping that Ducky or one of the other CSS wonks/wonkettes will help me out here.

I usually do "other books by this author" pages in my epubs as a feature with embedded links to webpages, Amazon pages, what-have-you. Normally, this works fine with a blurb and some css float for the images (book cover thumbs). However, I'm doing a kid's book, and the author has 90-some-odd "other books." I'm accustomed to not using tables as Kindle doesn't support them (and I produce both epub and mobis for my clients' use). I use KindleGen to convert the epubs I create in Sigil (sorta) into mobis. Okay, enough background.

In creating this page, I've just been using header tags for the category names (Flip Books, Board books, whatever) and then within p tags, floating the image left and putting the book title textually immediately after the image. This isn't working worth a crap. It looks fine in EPubReader, but on an iPad it renders in a dreaded left-to-right stairstep stagger. I presume I could fix this by wrapping (eeek!) div tags around each book listing, but I was wondering if there was a better way? It looks a bit funky as it is, because each thumb isn't precisely the same size as all the others (author-provided, please don't beat me), so the text isn't all precisely in the same place, if you see what I mean. Given that the epubs will be viewed on various devices, I'm leery of absolute positioning (but willing to learn if I'm wrong about it).

@Ducky, anybody: any suggestions as to how I could best format this, using CSS that hasn't been deprecated, to look halfway decent and NOT stair-step down? I can't pop the code in as I'm on my laptop at the moment, but my guy with the iPad sent me some screenshots and it ain't pretty. If the guy had a suitable webpage, I'd just screenshoot the thing, put it in as an image and call it a day, but he doesn't.

Thoughts? TIA,

Hitch

[theducks]

Originally Posted by Hitch

Hi, Gang:

I'm hoping that Ducky or one of the other CSS wonks/wonkettes will help me out here.

I usually do "other books by this author" pages in my epubs as a feature with embedded links to webpages, Amazon pages, what-have-you. Normally, this works fine with a blurb and some css float for the images (book cover thumbs). However, I'm doing a kid's book, and the author has 90-some-odd "other books." I'm accustomed to not using tables as Kindle doesn't support them (and I produce both epub and mobis for my clients' use). I use KindleGen to convert the epubs I create in Sigil (sorta) into mobis. Okay, enough background.

In creating this page, I've just been using header tags for the category names (Flip Books, Board books, whatever) and then within p tags, floating the image left and putting the book title textually immediately after the image. This isn't working worth a crap. It looks fine in EPubReader, but on an iPad it renders in a dreaded left-to-right stairstep stagger. I presume I could fix this by wrapping (eeek!) div tags around each book listing, but I was wondering if there was a better way? It looks a bit funky as it is, because each thumb isn't precisely the same size as all the others (author-provided, please don't beat me), so the text isn't all precisely in the same place, if you see what I mean. Given that the epubs will be viewed on various devices, I'm leery of absolute positioning (but willing to learn if I'm wrong about it).

@Ducky, anybody: any suggestions as to how I could best format this, using CSS that hasn't been deprecated, to look halfway decent and NOT stair-step down? I can't pop the code in as I'm on my laptop at the moment, but my guy with the iPad sent me some screenshots and it ain't pretty. If the guy had a suitable webpage, I'd just screenshoot the thing, put it in as an image and call it a day, but he doesn't.

Thoughts? TIA,

Hitch

Wonk?
Wankers, maybe

I am a novice when it comes to complex EPUB stuff.

What I do is "borrow" from stuff that looks good.
That said
Make a very small (say 10 books) "catalog" with Calibre.
Now open that with Sigil for ideas

Warning: I did not do a "small catalog". Sigil took 12.49 minuts to open an 11M (1050 book) catalog

[Hitch]

Ducky:

Ummm...I'd have to know in advance that the ebooks for the Calibre library had the type of faux-table formatting I'm seeking. That seems a bit time-sucking since most won't. I'm kinda hoping somebody will come along and point me in the correct direction (OR, if anybody has an epub with this type of formatting that they'd share, I'd happily look at it and seek enlightenment there).

But thanks anyway!! (You don't mind me calling you Ducky, do you? Speak up if you do).

Hitch

[KevinH]

Hi,

I don't think there is a working CSS solution (although you can come close using "float left, float right, etc), it never seems to work on most ereaders.

My solution when I am faced with this is to simply create an image (jpeg or png) of how I want the table to look and then use that in place of the table. This converts to all platforms and works well.

I have used svg generated images as well and they work in epubs (although I am not sure if Kindles support svg images). You can include the text in the table as an html comment (on set the display on the block to none) so that search engines in the ebook readers can still find text in the "table" which is now an image.

If you need elements of the table to be links, you can assign regions of the image to act as hyperlinks ie. an image map (at least in html you can).

Hope this helps,

KevinH

[amoroso]

You might use <DL> with images in <DT> and titles <DD>.

[Hitch]

Originally Posted by KevinH

Hi,

I don't think there is a working CSS solution (although you can come close using "float left, float right, etc), it never seems to work on most ereaders.

My solution when I am faced with this is to simply create an image (jpeg or png) of how I want the table to look and then use that in place of the table. This converts to all platforms and works well.

I have used svg generated images as well and they work in epubs (although I am not sure if Kindles support svg images). You can include the text in the table as an html comment (on set the display on the block to none) so that search engines in the ebook readers can still find text in the "table" which is now an image.

If you need elements of the table to be links, you can assign regions of the image to act as hyperlinks ie. an image map (at least in html you can).

Hope this helps,

KevinH

Hi, Kevin:

As he has 90+ books, I think trying to do a table as an image would be tricky; the best I could do would be to put, say 10 books per "page" (image) and do it that way, but frankly the idea of image-mapping 90 of those suckers to create clickable live links makes my head hurt. I, too, normally just make images of tables, but this one is a little too long and convoluted, I think.

Thanks!

Hitch

[Hitch]

Originally Posted by amoroso

You might use <DL> with images in <DT> and titles <DD>.

It's not a bad idea, if I get desperate enough, I might give it a shot. Does anyone know if this works in Epubcheck 1.05?

Hitch

[capidamonte]

Use a list. UL or OL, doesn't matter.

Define a class for the UL/OL. Define the layout etc, for the LI elements within that class; also for IMGs and Ps. One of the things you can do is to stop the display of "dot" or the "numeral" in CSS.

I use this technique for making navbars, but it should work really well for a set of pics and descriptive text.

[charleski]

The real issue here is why float isn't working on the iPad. Since you want to have something that will easily convert to mobi you'll need to keep things pretty simple, and certainly avoid SVG.

Post a full example of the code that's not working, as without that we're bumbling in the dark here.

[Hitch]

Originally Posted by charleski

The real issue here is why float isn't working on the iPad. Since you want to have something that will easily convert to mobi you'll need to keep things pretty simple, and certainly avoid SVG.

Post a full example of the code that's not working, as without that we're bumbling in the dark here.

Okey-dokey. Well, this should be fun. Here's the best image I have of what's happening with the page, attached (I didn't take it). You can see the "stair-stepping" problem.

Just FYI, I really struggle with CSS because I have zero three-dimensional visualization skills. And yes, before anyone says it, I know that using the break tags between the images is BAD, but after trying a bunch of padding, margins, float here, float there, etc., I finally gave up and did it this way. I know it's lame, but I'm frustrated. The "list" looks fine in EPubReader but whacks out on the iPad; I suspect it's because...you know what, I don't know what I think anymore. Maybe it's so simple I just can't see it.

Here's an example of the code:

<h2 id="heading_id_3">Picture Books (in Alphabetical Order):</h2>

<div>
<br />
</div>

<h3 id="heading_id_4"><img class="book" alt="" src="../Images/howdoiloveyou_spanish.gif" />Come Te Amo? (Spanish)</h3>

<div>
<br />
</div>

<div>
<br />
</div>

<h3 id="heading_id_5"><img class="book" alt="" src="../Images/christmasgrandmas.jpg" />Christmas at Grandma's House<br /></h3>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<h3 id="heading_id_6"><img class="book" alt="" src="../Images/easterourhouse.jpg" />Easter at Our House<br /></h3>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<h3 id="heading_id_7"><img class="book" alt="" src="../Images/fortheloveofourearth.gif" />For the Love of Our Earth<br /></h3>

Sorry for all the breaks in the code, but if you don't see it as it really is, we can't fix it. This is the CSS for the image:

img.book {
float:left;
padding:5px 10px 20px 0px}

I don't know how to make this simpler, I really don't. I am open to any and all suggestions...although I'm not sure I understand, Cap, how making this into a list will help me. OH--and I do want the headers, please, so the nine bazillion titles show up in the TOC, thanks.

Hitch

[charleski]

Ah... The screenshot makes it clear what's happening, I thought you were getting some other problem.

Ok, what's happening is that each successive image is floating relative to the previous one. Try adding clear:left to the css for your h3 style.

[Edit]If you want to get the book titles lining up nicely, you'll really need to separate the images and titles into separate blocks. That's easy to do though. Open the replace dialog and do a regex search with the following:
Find: <h3 (.+)><img class="book"(.+)/>(.+)</h3>
Replace: <div class="clear"><div class="book"><img\2/></div><h3 \1>\3</h3></div>
You'll then be able to align the titles separately from the images by altering the css for h3. Note that this moves the float styling to the div, so the css will need to be div.book{...}. It also wraps the image and title in a new div which has the clear class [.clear {clear: both}] so that each image/title block is aligned independently.

[theducks]

Originally Posted by Hitch

Here's an example of the code:
OH--and I do want the headers, please, so the nine bazillion titles show up in the TOC, thanks.

Hitch

If you don't really need the words to show next to the picture, but only a link, TOC entry

<h3 id="heading_id_5" title="Christmas at Grandma's House"> </h3>

(and maybe, set a no margin class on the div)

[Hitch]

Originally Posted by charleski

Ah... The screenshot makes it clear what's happening, I thought you were getting some other problem.

Ok, what's happening is that each successive image is floating relative to the previous one. Try adding clear:left to the css for your h3 style.

@Charleski: THANK YOU. I will. Of COURSE. I'd brain-wiped the clear attribute because of the problems I had with it in the br tags, if you all remember how that screwed me up in the 1.05-validation a month or so back...

@Ducky: I use the title attribute all the time for TOC entries, primarily for illustrations, thanks. Sadly, I do need the text to show up.

So: no other suggestions for solving my "waaah, it doesn't look pretty like a table" problem? I guess I should simply be grateful that Charleski solved my floaty problem. I wish Amazon would support bloody tables so I could use them. And I'll interrogate CAP and see what he's thinking about those lists...I'm always open to learnin' me new stuff.

Thank you all,

Hitch

[JSWolf]

I hate to say this, but I will... do it as a table in ePub since it will work and well, screw the Kindle since it won't work.

[capidamonte]

Okay, here's an example...

<ul class="ImageGrid">
	<li>
		<a href="http://www.authorwebpage.com/Book_1.html">
			<img alt="Title of Book 1" src="images/book1.png" />
		</a>
		<br />
		Book 1 Caption
	</li>
	<li>
		<a href="http://www.authorwebpage.com/Book_2.html">
			<img alt="Title of Book 2" src="images/book2.png" />
		</a>
		<br />
		Book 2 Caption
	</li>
	<li>
		<a href="http://www.authorwebpage.com/Book_3.html">
			<img alt="Title of Book 3" src="images/book3.png" />
		</a>
		<br />
		Book 3 Caption
	</li>
</ul>

... with the following CSS:

/*horizontal list of images*/
ul.ImageGrid {
list-style-type:none;
float:none;
text-align: center;
margin:0;
padding:0;
border:0px solid;
}

ul.ImageGrid li {
display:inline;
}

Adjust the margin and padding as it suits you.

Each such <ul> will produce what is effectively a "row" of images with a caption. Add as many "cells" as you need by adding additional <li> elements.

I think it should work -- but I haven't tested it yet in this application, just my navigation links, where it works properly (but without captions.)