Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 08-17-2010, 01:27 AM   #16
capidamonte
Not who you think I am...
capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!
 
capidamonte's Avatar
 
Posts: 346
Karma: 5337
Join Date: Jan 2010
Location: Honolulu
Device: Sony PRS-350
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.
capidamonte is offline   Reply With Quote
Old 08-17-2010, 01:40 AM   #17
capidamonte
Not who you think I am...
capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!
 
capidamonte's Avatar
 
Posts: 346
Karma: 5337
Join Date: Jan 2010
Location: Honolulu
Device: Sony PRS-350
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.
capidamonte is offline   Reply With Quote
Old 08-17-2010, 03:48 AM   #18
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,480
Karma: 13517271
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
Not my choice, bro

Quote:
Originally Posted by JSWolf View Post
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
Hitch is offline   Reply With Quote
Old 08-17-2010, 06:37 AM   #19
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
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).
charleski is offline   Reply With Quote
Old 08-17-2010, 02:50 PM   #20
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,480
Karma: 13517271
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
You guys are great...

Quote:
Originally Posted by charleski View Post
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

Last edited by Hitch; 08-17-2010 at 03:03 PM. Reason: Update on Cap's procedure
Hitch is offline   Reply With Quote
Old 08-17-2010, 04:52 PM   #21
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,480
Karma: 13517271
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
Oooops....

Quote:
Originally Posted by charleski View Post
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
Hitch is offline   Reply With Quote
Old 08-17-2010, 05:31 PM   #22
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
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.
charleski is offline   Reply With Quote
Old 08-17-2010, 06:40 PM   #23
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,480
Karma: 13517271
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
Quote:
Originally Posted by charleski View Post
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
Hitch is offline   Reply With Quote
Old 08-18-2010, 04:46 AM   #24
capidamonte
Not who you think I am...
capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!
 
capidamonte's Avatar
 
Posts: 346
Karma: 5337
Join Date: Jan 2010
Location: Honolulu
Device: Sony PRS-350
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.

Last edited by capidamonte; 08-18-2010 at 05:00 AM.
capidamonte is offline   Reply With Quote
Old 08-19-2010, 01:56 AM   #25
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,480
Karma: 13517271
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
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
Hitch is offline   Reply With Quote
Old 08-19-2010, 02:09 AM   #26
capidamonte
Not who you think I am...
capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!
 
capidamonte's Avatar
 
Posts: 346
Karma: 5337
Join Date: Jan 2010
Location: Honolulu
Device: Sony PRS-350
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.
capidamonte is offline   Reply With Quote
Old 08-23-2010, 12:51 PM   #27
ldespain
Member
ldespain began at the beginning.
 
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
ldespain is offline   Reply With Quote
Old 08-23-2010, 06:25 PM   #28
capidamonte
Not who you think I am...
capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!
 
capidamonte's Avatar
 
Posts: 346
Karma: 5337
Join Date: Jan 2010
Location: Honolulu
Device: Sony PRS-350
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.
capidamonte is offline   Reply With Quote
Old 09-15-2010, 08:25 AM   #29
reuben
Member
reuben began at the beginning.
 
reuben's Avatar
 
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
Attached Files
File Type: epub figuretable.epub (66.5 KB, 86 views)

Last edited by reuben; 09-15-2010 at 08:28 AM.
reuben is offline   Reply With Quote
Old 09-15-2010, 10:17 PM   #30
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
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.
charleski is offline   Reply With Quote
Reply

Tags
css, epub, format, table emulation

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 11:16 AM.


MobileRead.com is a privately owned, operated and funded community.