Picture Titles

[brinded]

Hi, I'm trying to improve the formatting of my picture titles, but not having much luck.

Attached file shows how captions are currently appearing.

Code looks like this...

 <p class="s8"></p>

    <div style="display:inline-block;vertical-align:baseline;width:38.462%;">
      <span class="c17"><img alt="image5.png" src="../Images/image5.png" style="width:100%;" /></span>
    </div>Place de la Résistance, Brussels

    <p class="s8"></p>

    <p class="s6">An unremarkable square, its outermost border was lined with oak trees. Leaves defined the seasons which otherwise would be indistinguishable in cold, gray, wet weather that persisted throughout much of the year. Between this outer ring and the paved interior lay a stretch of sand-colored dirt and gravel. On the edge sat wrought iron and wooden benches that would quickly fill on sunny days, or when withered old men wearing caps and worn jackets would gather to play “<span class="c6">balle pelote</span>” – a game whose rules and object I never knew, but it involved rolling hard, fist-sized balls on the ground toward other stationary balls. The center of the square was unadorned – no fountain, no statue – just an expanse of concrete perfect for playing hopscotch, jumping rope, or just running wild.</p>

    <p class="s6">Some of the buildings around the square, including ours, had small businesses on the ground floor – a hairdresser, a dry cleaner, and several bars with outdoor cafés; a small grocery; and a take-way restaurant. Our favorite place was the restaurant. Whenever there was a little extra cash at home my brothers and sister and I would get 5 Francs to buy a pile of “<span class="c6">frites</span>” – what Americans call “French fries.” We peered up at the counter as the fries were handed down to us wrapped in paper. If we could scare up an extra Franc, or sometimes even if we couldn’t, the <span class="c6">frites</span> would also be drenched in mayonnaise. We’d haul the whole salty, greasy package across to the square and sit on benches, oblivious to our surroundings until the last <span class="c6">frite</span> had been consumed.</p>

    <p class="s6"></p>

    <p class="s8"></p>

    <div style="display:inline-block;vertical-align:baseline;width:38.462%;"><img alt="image6.png" src="../Images/image6.png" style="width:100%;" /></div>Justice de Paix, Brussels

    <p class="s6"></p>

    <p class="s6">An imposing redbrick <span class="c6">Justice de Paix</span> [courts of justice type building] dominated Place de la Résistance. Its enormous lead glass windows overlooked the square like the watchful eyes of a god. Other buildings...

and CSS as follows:

.s8{
	color: #000000;
	font-size: 56.2500%;
	font-style: italic;
	font-variant: normal;
	font-weight: normal;
	letter-spacing: 0.0000em;
	margin-bottom: 0.0000%;
	margin-top: 0.0000%;
	padding-left: 0.0000%;
	padding-right: 0.0000%;
	text-align: left;
	text-decoration: none;
	text-indent: 0.0000%;
	text-transform: none;
}

note that S8 is very small italics, but as the attachment shows, this is not how it appears on page.

Ideally, I'd like the captions to follow stylesheet S8, and it would be good to have a small indent before the first letter of text, too.

Any pointers?

thanks,

[DaleDe]

You have the picture inline with the text in the same paragraph. You need to get the picture into a separate paragraph by itself. Another choice would be to so a shift return (<br /> between the picture and the caption.

This, by the way, has nothing to do with Sigil. Moving it to ePub.

Dale

[brinded]

Dale,

Thanks for moving post and for response.

I'd hoped to keep text alongside photo - the same way it appears in mobi, print, and ePub as originally exported from Pages (see attached). For some reason, this problem has only arisen since opening in Sigil. Hence choice of forum.

[RbnJrg]

Originally Posted by brinded

Dale,

Thanks for moving post and for response.

I'd hoped to keep text alongside photo - the same way it appears in mobi, print, and ePub as originally exported from Pages (see attached). For some reason, this problem has only arisen since opening in Sigil. Hence choice of forum.

If you want the things like the picture you attached in your post of above, then do the following:

1. In you .html file you have:

<p class="s8"></p>

    <div style="display:inline-block;vertical-align:baseline;width:38.462%;">
      <span class="c17"><img alt="image5.png" src="../Images/image5.png" style="width:100%;" /></span>
    </div>Place de la Résistance, Brussels

    <p class="s8"></p>

You must change things a bit; instead of the previous code, use the following (very similar):

<div style="display:inline-block;vertical-align:baseline;width:38.462%;margin-right:1em">
   <span class="c17"><img alt="image5.png" src="../Images/image5.png" style="width:100%;" /></span>
</div>

<p class="s8">Place de la Résistance, Brussels</p>

Also, in your .css stylesheet, modify the .s8 style by adding the property "display: inline;". You should have:

.s8 {
        display: inline;  /* new property */
	color: #000000;
	font-size: 90%; /* also modify the font size */
	font-style: italic;
	font-variant: normal;
	font-weight: normal;
	letter-spacing: 0.0000em;
	margin-bottom: 0.0000%;
	margin-top: 0.0000%;
	padding-left: 0.0000%;
	padding-right: 0.0000%;
	text-align: left;
	text-decoration: none;
	text-indent: 0.0000%;
	text-transform: none;
}

Do the same with all the pictures in your epub. That should fix your problems

Regards
Rubén

[brinded]

thanks Rubén - very much appreciated.

I'll try that first thing tomorrow morning.

Meanwhile, still curious why ePub exported by Pages is fine, but turns into a mess when opened by Sigil?

[brinded]

Rubén,

Thanks again - your fix works!

Just one small problem: the line spacing for s8 appears to have increased, despite the fact that it's defined (in your code and mine) as zero.

I've attached the spacing I'd like, (which comes from Pages/export-->ePub), and the current spacing after editing as per your post.

(ps I still don't understand why opening in Sigil should corrupt the ePub exported from Pages).

[theducks]

Probably not part of your problem
but you have Naked Text

<div style="display:inline-block;vertical-align:baseline;width:38.462%;">
      <span class="c17"><img alt="image5.png" src="../Images/image5.png" style="width:100%;" /></span>
    </div>Place de la Résistance, Brussels

That is Text that is not wrapped in tags

[DaleDe]

Originally Posted by brinded

Dale,

Thanks for moving post and for response.

I'd hoped to keep text alongside photo - the same way it appears in mobi, print, and ePub as originally exported from Pages (see attached). For some reason, this problem has only arisen since opening in Sigil. Hence choice of forum.

Sorry, I thought the images you posted were the problem, not the solution. Sigil use a web browser style for viewing, not an ePub page oriented style. It is not a good viewer to determine exactly how things will look in a ePub reader. Download Adobe Digital Editions and use it to test your results.

Dale

[JSWolf]

Chances are that Pages uses iBooks specific code and Tidy in Sigil is trying to correct it.

Pages and Sigil are not a good match.

[Toxaris]

Originally Posted by brinded

thanks Rubén - very much appreciated.

I'll try that first thing tomorrow morning.

Meanwhile, still curious why ePub exported by Pages is fine, but turns into a mess when opened by Sigil?

I am doubting that the ePUB from Pages is fine, if it produces code you displayed. It is aimed for books to be read on iBooks and iBooks has another format. They also call it ePUB (why not iPUB?) and resembles a real ePUB, but there are differences.

[brinded]

Sorry, I thought the images you posted were the problem, not the solution. Sigil use a web browser style for viewing, not an ePub page oriented style. It is not a good viewer to determine exactly how things will look in a ePub reader. Download Adobe Digital Editions and use it to test your results.

Hi Dale,

Thanks again for response.

I don't use Sigil viewer - only using Sigil for editing. All of the screenshots are taken from iPad, which is the intended destination for my book project.

[brinded]

I am doubting that the ePUB from Pages is fine, if it produces code you displayed. It is aimed for books to be read on iBooks and iBooks has another format. They also call it ePUB (why not iPUB?) and resembles a real ePUB, but there are differences.

Toxaris, thanks for reply.

Maybe I'm going about things the wrong way? I'd really appreciate knowing a better method.

Basically, I have a manuscript in Pages that's achieved good results via PDF/CreateSpace into paperback copies. The Pages document also managed to make a decent MOBI for Kindle (via other methods). Now I'm trying to publish on iTunes, too. So, Pages/export-->ePub seemed like a good place to start. Trouble is, this method cannot deliver chapters and sections on fresh pages (it will only make new html document for one type of header, which happens to be the first type of header chosen within any given document. If you try workarounds then it leads to problems with TOC.) In short, it's very untidy and, despite hours I'll never see again, there is no way to force fit.

My aim was to take the ePub from Pages, which for the most part looks perfectly acceptable on iPad, and find an editor to split up some of the html and deal with TOC hierarchy.

So I tried Calibre, which doesn't quite do it. Then the Calibre forums led me to Sigil, and the Sigil wiki led me here – where I'm closer to completion but still in need of help!



thanks,

[brinded]

Chances are that Pages uses iBooks specific code and Tidy in Sigil is trying to correct it.

Pages and Sigil are not a good match.

JS Wolf, thanks also for your reply. What you say certainly rings true. Which leads to the question, what is a good (editor) match for Pages?

Or to rephrase, how to get from Pages to a decent iBooks/iPad-comfortable ePub?

[Hitch]

Originally Posted by brinded

JS Wolf, thanks also for your reply. What you say certainly rings true. Which leads to the question, what is a good (editor) match for Pages?

Or to rephrase, how to get from Pages to a decent iBooks/iPad-comfortable ePub?

I can't speak to your ePUB, brinded, but I can say with some assurance that the Pages-->ePUB books we see here are almost unreadable (code-wise). Every line is run together, so that in CV, it appears that the entire html document is one big paragraph, start-to-finish. Could it be manhandled into readability? Yes, of course...but it's mighty hinky behavior.

I believe that Liz (Castro) swears by something called BBEDit? You should drop by her blog (Pigs, Gourds and Wikis) and check it out. She'll set you right for Mac Products; I don't claim to have expertise in the best available Mac-head products.

HTH.
Hitch

[brinded]

Hitch,

thanks for that. In this case, the HTML and CSS layout is legible, the problems seem to arise from little additions, (like 'style="white-space:pre-wrap"'), which others have posted about on these forums. Not sure why that happens. Most likely something Apple are doing is at cause.

I had a look at BBedit, and its Google forum for ePub. Seems like people are using it in conjunction with Sigil.