08-16-2010, 03:28 PM | #1 |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Table emulation CSS, or...?
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 |
08-16-2010, 03:50 PM | #2 | |
Well trained by Cats
Posts: 30,365
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
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 |
|
Advert | |
|
08-16-2010, 04:02 PM | #3 |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
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 |
08-16-2010, 04:22 PM | #4 |
Sigil Developer
Posts: 8,094
Karma: 5450184
Join Date: Nov 2009
Device: many
|
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 |
08-16-2010, 04:35 PM | #5 |
Groupie
Posts: 185
Karma: 1004070
Join Date: Jul 2010
Location: Italy
Device: Kindle for Android, Google Play Books
|
You might use <DL> with images in <DT> and titles <DD>.
|
Advert | |
|
08-16-2010, 04:58 PM | #6 | |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
08-16-2010, 04:59 PM | #7 |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
08-16-2010, 05:37 PM | #8 |
Not who you think I am...
Posts: 374
Karma: 30283
Join Date: Jan 2010
Location: Honolulu
Device: PocketBook 360 -- Ivory
|
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. |
08-16-2010, 05:46 PM | #9 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
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. |
08-16-2010, 06:20 PM | #10 | |||
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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: Quote:
Quote:
Hitch |
|||
08-16-2010, 06:41 PM | #11 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
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. Last edited by charleski; 08-16-2010 at 07:02 PM. |
08-16-2010, 06:41 PM | #12 | |
Well trained by Cats
Posts: 30,365
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
Code:
<h3 id="heading_id_5" title="Christmas at Grandma's House"> </h3> |
|
08-16-2010, 06:49 PM | #13 | |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
@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 |
|
08-16-2010, 09:53 PM | #14 |
Resident Curmudgeon
Posts: 75,851
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
08-17-2010, 01:14 AM | #15 |
Not who you think I am...
Posts: 374
Karma: 30283
Join Date: Jan 2010
Location: Honolulu
Device: PocketBook 360 -- Ivory
|
Okay, here's an example...
Code:
<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> Code:
/*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; } 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.) Last edited by capidamonte; 08-17-2010 at 01:16 AM. |
Tags |
css, epub, format, table emulation |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
CSS to emulate table, or...? | Hitch | ePub | 8 | 06-04-2011 08:35 PM |
CSS for auto Table of Contents | MaryBon | Calibre | 1 | 09-21-2010 06:17 AM |
Anyone know how to convert a pdf table into a table in Word or HTML? | BasilC | Workshop | 7 | 06-25-2010 01:02 AM |
Forget coffee table books-- how about a kitchen table book? | ardeegee | Lounge | 10 | 12-02-2009 12:00 PM |
Trouble w/Windows Calibre in Emulation on Mac | Neil | Calibre | 3 | 09-17-2009 09:58 AM |