08-17-2010, 01:27 AM | #16 |
Not who you think I am...
Posts: 374
Karma: 30283
Join Date: Jan 2010
Location: Honolulu
Device: PocketBook 360 -- Ivory
|
Okay, the captions break it -- remove those and it works.
EDIT: the tabs and carriage returns are causing little spaces and underlines between the images. Remove the tabs and returns and they disappear. Bug. Last edited by capidamonte; 08-17-2010 at 01:36 AM. |
08-17-2010, 01:40 AM | #17 |
Not who you think I am...
Posts: 374
Karma: 30283
Join Date: Jan 2010
Location: Honolulu
Device: PocketBook 360 -- Ivory
|
Here's a file you can play with to get it how you like it:
Code:
<html> <head> <title>test<title> <style> <!-- /*horizontal list of images*/ ul.ImageGrid { list-style-type:none; float:none; text-align: center; margin:0; padding:0; border:0; } ul.ImageGrid li { display:inline; margin: 0 1em 0; } --> </style> </head> <body> <ul class="ImageGrid"> <li><a href="http://www.authorwebpage.com/Book_1.html"><img alt="Title of Book 1" src="images/book1.png" /></a></li><li><a href="http://www.authorwebpage.com/Book_2.html"><img alt="Title of Book 2" src="images/book2.png" /></a></li><li><a href="http://www.authorwebpage.com/Book_3.html"><img alt="Title of Book 3" src="images/book3.png" /></a></li> </ul> </body> </html> |
Advert | |
|
08-17-2010, 03:48 AM | #18 | |
Bookmaker & Cat Slave
Posts: 11,461
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Not my choice, bro
Quote:
I believe I've explained before--and it may have been to you--that my customers pay me to get epubs and specifically Kindle-compatible files. So, not my choice. But thanks anyway. Hitch |
|
08-17-2010, 06:37 AM | #19 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
I think you'll find it easiest to refactor the code using the regex I gave in my edit. You can then apply a style to h3 to align the titles separately (center or right would probably work best).
|
08-17-2010, 02:50 PM | #20 | |
Bookmaker & Cat Slave
Posts: 11,461
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
You guys are great...
Quote:
Well, I'll try both. @Charleski, thank you very much for your input and efforts. You too, @Cap. I'm going to save dupe copies of the epub and try both, see what happens. If I can get this page right, it'll save me a lot of brain-damage, because this client has 90 other titles, and I really, really, REALLY do not want to have to deal with this page again. (Plus he wants me to now add a link to his webpage for each title....{sigh}). Thank you all--Sigil-Savers to the rescue, as always. EDIT: @Cap, I tried your page, but without the captions,that dog don't hunt--I need the book titles. But thanks anyway!!! - Hitch Hitch Last edited by Hitch; 08-17-2010 at 03:03 PM. Reason: Update on Cap's procedure |
|
Advert | |
|
08-17-2010, 04:52 PM | #21 | |
Bookmaker & Cat Slave
Posts: 11,461
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Oooops....
Quote:
Code:
Find: <h3 (.+)><img class="book"(.+)/>(.+)</h3> Replace: <div class="clear"><div class="book"><img\2/></div><h3 \1>\3</h3></div> Code:
<h2 id="heading_id_3">Picture Books (in Alphabetical Order):</h2> <div> <br /> </div> <div class="clear"> <div class="book"><img alt="" src="../Images/whenigrowup.gif" /></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> Somewhere, something in the (.+), I suspect, has gone awry, but as I'm not a regex expert, I'm not quite sure how to go about fixing this, as I don't know exactly what Charleski thought the output was going to be. Thoughts, gang? Hitch |
|
08-17-2010, 05:31 PM | #22 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Did you tick the 'minimal matching' box? I forgot to mention that because I always have it ticked. I just tested the regex on the code and it seems to work fine using that.
|
08-17-2010, 06:40 PM | #23 |
Bookmaker & Cat Slave
Posts: 11,461
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
08-18-2010, 04:46 AM | #24 |
Not who you think I am...
Posts: 374
Karma: 30283
Join Date: Jan 2010
Location: Honolulu
Device: PocketBook 360 -- Ivory
|
I helped Hitch a bit with this, privately. We ended up with something like the following:
Spoiler:
Which is pretty flexible: you can change the number of items in each row DIV and adjust the percentage size of the contained cell DIVs to match. One nice effect is that fewer cells in a row line up properly in the column. It also resizes nicely so that it fits well on different screen sizes. The only arbitrary choice was the img height in pixels. Hitch needed the H3 tags for import into Sigil -- you can (and probably should) replace them with P tags. Thanks to charleski for the basic idea and the suggestion for {clear:both}. Hopefully someone else can make use of it, too. Last edited by capidamonte; 08-18-2010 at 05:00 AM. |
08-19-2010, 01:56 AM | #25 |
Bookmaker & Cat Slave
Posts: 11,461
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Capidamonte rocks!
Yes, and what Cap is not telling you is that he did it ALL, I did zip, zein, zilch, nada. It's positively terrific work, and looks fab. His coding--his xhtml and html--is super-clean and tight, too (I know that sounds vaguely obscene or suggestive, but it's really not supposed to).
He's also not telling you that his comment about the h3 tags is his snide way of reinforcing his lecture to me yesterday about my "abusing" the header tags to create TOC items. {sob}. He points out, correctly, that h1-h6 tags are, of course, intended to be used structurally, and not merely to create TOC items. I, on the other hand, have countered that it's not my fault that Word abducted and abused the header tags first, and that in the evolution of ebooks the tags were further abducted and misused in the creation of clickable, active links for TOC's (as they work in Word, the evil genesis). He's right, of course, but given the 900-lb. gorilla's reliance on Word (we're talkin' Amazon here) and even the Dark Empire's reliance on Epubs (Apple) that use h1-h6 tags for the TOC, I don't see another way around this, without manually creating the toc.ncx file, which, if I tried, would surely bring about the Apocalypse, or at least unleash The Horsemen. So: just something to think about, for future epub-making software: are we abusing the header tags? And, again: Cap's work on this was absolutely brill. , Cap! Hitch |
08-19-2010, 02:09 AM | #26 |
Not who you think I am...
Posts: 374
Karma: 30283
Join Date: Jan 2010
Location: Honolulu
Device: PocketBook 360 -- Ivory
|
I'm not snide, I'm snarky.
Aw, shucks. It was really charleski who had the basic idea.
And Hitch has a lot more arguments to make on the topic than just those. See, snarky. |
08-23-2010, 12:51 PM | #27 |
Member
Posts: 14
Karma: 10
Join Date: Aug 2010
Device: iPad, Nook, Kindle
|
It sounded like you got what you needed. Just wanted to add this to the conversation - I used this for something similar and it worked well:
http://www.positioniseverything.net/easyclearing.html |
08-23-2010, 06:25 PM | #28 |
Not who you think I am...
Posts: 374
Karma: 30283
Join Date: Jan 2010
Location: Honolulu
Device: PocketBook 360 -- Ivory
|
Thanks for that link. I'm now integrating that into my macro library for use with floated images in some of my book sections -- this makes them look good when displayed in browsers and ebook readers that use XHTML engines (like Calibre's).
EDIT: Actually the link at the top of that page proved even simpler: add overflow:auto or overflow:hidden to your outer div. overflow:auto was adding side-scrollbars, but :hidden did the trick. Last edited by capidamonte; 08-23-2010 at 06:42 PM. |
09-15-2010, 08:25 AM | #29 |
Member
Posts: 21
Karma: 10
Join Date: Nov 2009
Location: Philippines
Device: Sony Reader, iPad
|
Figure in Table and CSS
Hi,
I have an EPUB that has a figure on it which I formatted using table tag and CSS styles. I used images as backgrounds for the text content and it looks fine on ADE and Sony Reader. My problem is that when I view it on iPad the text contents spills out from the layout when the font size is increased. Another problem is when it's viewed on iPad's double page view the figure is cut on the left part. I've attached the EPUB for anyone who could try to do a workaround for it. Also, is it possible to do this layout using div tags? or is there any suggestions? Thanks in advance, ben Last edited by reuben; 09-15-2010 at 08:28 AM. |
09-15-2010, 10:17 PM | #30 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Interesting to see yet another bug in iBooks - you've coded font size using pixels, which means that the text size should be absolutely fixed so that it lines up properly with your background image. This works fine in a reasonably compliant reader like ADE, but obviously the dimwits at Apple have coded iBooks such that fonts can always be zoomed, even in circumstances where it's inappropriate.
The quick hack would be just to render the table out as an image. A more complex but better solution would be to combine the images and text in a block of svg code. It's not worth trying to work around the bugs in Apple's css rendering for this, since any hacks (empty spans etc) will probably just break on the next update. |
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 |