Table emulation CSS, or...? - Page 2

capidamonte · 08-17-2010, 01:27 AM

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.

capidamonte · 08-17-2010, 01:40 AM

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>

Note the collapsed structure to avoid gaps, and the margin in the LI elements to produce controlled ones. Supply your own PNGs in your own images folder.

Hitch · 08-17-2010, 03:48 AM

Quote:

Originally Posted by 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.

@JSWolf:

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

charleski · 08-17-2010, 06:37 AM

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).

Hitch · 08-17-2010, 02:50 PM

Quote:

Originally Posted by charleski

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).

Hi, Kids:

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

Hitch · 08-17-2010, 04:52 PM

Quote:

Originally Posted by charleski

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).

The regex looked like this:

Code:

Find: <h3 (.+)><img class="book"(.+)/>(.+)</h3>
Replace: <div class="clear"><div class="book"><img\2/></div><h3 \1>\3</h3></div>

Actually, that didn't go so well. The regex found the first incidence, "fixed" it, and then highlighted the entire rest of the page as the second incidence, which fortuitously I was doing one expression at a time, so was able to prevent it from nuking the entire page. What I have now looks thusly:

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>

All the text that was part of the h3 heading, in the original, (if you compare the two books still shown in the code above, How Do I Love You and Christmas at Grandma's House, to the one that was altered, When I Grow Up, you'll see the difference in the before-and-after code) has vaporized, and the regex isn't recognizing individual occurrences of the expression, so I'd say something is wonky.

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

charleski · 08-17-2010, 05:31 PM

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.

Hitch · 08-17-2010, 06:40 PM

Quote:

Originally Posted by charleski

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.

Hmmmm...probably not. Will report back later....

Hitch

capidamonte · 08-18-2010, 04:46 AM

I helped Hitch a bit with this, privately. We ended up with something like the following:

Spoiler:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Book Title</title>
<style type="text/css">

.OtherBooksHeader {
clear: both;
text-align: center;
}

div.row {
clear: both;
}

div.cell {
display: inline;
width: 33%;
margin: 0 0 3%;
float: left;
}

div.cell img {
height: 102px;
display: block;
margin-right: auto;
margin-left: auto;
}

div.cell h3 {
margin-top: 1%;
margin-left: 20%;
margin-right: 20%;
font-style:italic;
text-align: center;
}

</style>
</head>

<body>
<h1 class="OtherBooksHeader">Other Titles by This Author</h1>

<h2 class="OtherBooksHeader">Picture Books (in Alphabetical Order):</h2>

<div class="row">
	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book1.gif" /></a>
	<h3>Book One Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book2.gif" /></a>
	<h3>Book Two Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book3.gif" /></a>
	<h3>Book Three Title</h3>
	</div>

</div>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book4.gif" /></a>
	<h3>Book Four Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book5.gif" /></a>
	<h3>Book Five Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book6.gif" /></a>
	<h3>Book Six Title</h3>
	</div>

</div>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book7.gif" /></a>
	<h3>Book Seven Title</h3>
	</div>

</div>

<h2 class="OtherBooksHeader">Board Books (Ages 1-3):</h2>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book8.gif" /></a>
	<h3>Book Eight Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book9.gif" /></a>
	<h3>Book Nine Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book10.gif" /></a>
	<h3>Book Ten Title</h3>
	</div>

</div>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book11.gif" /></a>
	<h3>Book Eleven Title</h3>
	</div>

</div>

<h2 class="OtherBooksHeader">Read-Along Flip Over Books:</h2>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book11.gif" /></a>
	<h3>Book Eleven Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book12.gif" /></a>
	<h3>Book Twelve Title</h3>
	</div>

</div>

</body>
</html>

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.

Hitch · 08-19-2010, 01:56 AM

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

capidamonte · 08-19-2010, 02:09 AM

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.

ldespain · 08-23-2010, 12:51 PM

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

capidamonte · 08-23-2010, 06:25 PM

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.

reuben · 09-15-2010, 08:25 AM

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

charleski · 09-15-2010, 10:17 PM

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.

08-17-2010, 01:27 AM	#16
capidamonte 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-19-2010, 01:56 AM	#25
Hitch Bookmaker & Cat Slave Posts: 11,462 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
capidamonte 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, 06:25 PM	#28
capidamonte 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.

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

08-17-2010, 06:37 AM	#19
charleski 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, 05:31 PM	#22
charleski 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-23-2010, 12:51 PM	#27
ldespain 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

09-15-2010, 10:17 PM	#30
charleski 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.

Advert

Advert