Centering an ornament between paragraphs

[JSWolf]

Originally Posted by Psymon

Oops, sorry! I did mean iBooks -- I keep forgetting that there's other ebook apps for the iPad (which I tried out ages ago, but trashed).

What's the emoticon for "D'oh"?

works well.

[odedta]

Originally Posted by Psymon

I already did -- see above! First I posted my solution which DOES work just fine in iBooks, but then I was told to do it a different way because apparently I shouldn't do it the way I did...

...so now I don't know what to do. :/

Here is your solution:

PHP Code:

<p class="horizontal_center">
  <img src="../Images/elephants.jpg" alt="Elephants" class="image"/>
</p> 


.horizontal_center {
  width: 100%;
  text-align: center;
}
.image
{
  width:60%;
  display:inline-block;
}

You can play with the .image width as you like.

[Jellby]

Originally Posted by Psymon

And what about the aforementioned tables, then? Wrap all those in a "text-align: center" div, too, basically?

No, because tables are a different beast (unlike text and images, which are "inline content"). If you wrap a table in a "text-align: center" div, you will probably just get the text centered inside each cell. For tables I'm afraid you need auto margins to work (it's usually not that bad when your table is pushed to the left instead of centered), or specify a fixed width and matching margins like this:

width: 68%;
margin-left: 16%;
margin-right: 16%;

(16+68+16 = 100)

[theducks]

Originally Posted by Psymon

I already did -- see above! First I posted my solution which DOES work just fine in iBooks, but then I was told to do it a different way because apparently I shouldn't do it the way I did...

...so now I don't know what to do. :/

You appear to be looking for a Single, perfect solution
Sorry, No such beast .

Unlike the standards maintained by the NIST, the ones for EPUB are Jello. Then the device/program designers make more changes


Compromise? (My stuff is for just my own use, so it is tuned for MY 5-6" e-Ink devices)

Ignore the edge cases (Full/minimum Zoom, Tiny/Huge screen...)?

(Brand) Optimized Versions? (One sizes does not fit all)

[Psymon]

I spent the whole morning (so far) re-doing my ornaments (in various sizes) this way (as you offered up here, odedta, as I've quoted below), testing it out on my computer in ADE and Sony Reader Library, and while it seemed to work fine in those, when I finally got around to transferring my epub over to the iPad and looked at it in iBooks, everything is TOTALLY outta wack -- the ornaments are all the wrong sizes. It seems that what's happening is that (to use your example, below) the image size of 60% is ignored, and instead they all go to the 100% defined in the paragraph style -- either that or it's just ignoring both and inserting the image as large as it can or something (but that would be weird).

Bummer, I really thought that I (i.e. you) had licked this problem.

Originally Posted by odedta

Here is your solution:

PHP Code:

<p class="horizontal_center">
  <img src="../Images/elephants.jpg" alt="Elephants" class="image"/>
</p> 


.horizontal_center {
  width: 100%;
  text-align: center;
}
.image
{
  width:60%;
  display:inline-block;
}

You can play with the .image width as you like.

[RbnJrg]

Originally Posted by Psymon

I spent the whole morning (so far) re-doing my ornaments (in various sizes) this way (as you offered up here, odedta, as I've quoted below), testing it out on my computer in ADE and Sony Reader Library, and while it seemed to work fine in those, when I finally got around to transferring my epub over to the iPad and looked at it in iBooks, everything is TOTALLY outta wack -- the ornaments are all the wrong sizes. It seems that what's happening is that (to use your example, below) the image size of 60% is ignored, and instead they all go to the 100% defined in the paragraph style -- either that or it's just ignoring both and inserting the image as large as it can or something (but that would be weird).

Bummer, I really thought that I (i.e. you) had licked this problem.

Since my english is very bad and I can't understand very well what is the desired output by you, could you post a image about what you want to get (the "perfect result" for you, maybe a scanned of a printed page or a screenshot of your Sigil where you see the things well)?

[JSWolf]

Originally Posted by Psymon

I spent the whole morning (so far) re-doing my ornaments (in various sizes) this way (as you offered up here, odedta, as I've quoted below), testing it out on my computer in ADE and Sony Reader Library, and while it seemed to work fine in those, when I finally got around to transferring my epub over to the iPad and looked at it in iBooks, everything is TOTALLY outta wack -- the ornaments are all the wrong sizes. It seems that what's happening is that (to use your example, below) the image size of 60% is ignored, and instead they all go to the 100% defined in the paragraph style -- either that or it's just ignoring both and inserting the image as large as it can or something (but that would be weird).

Bummer, I really thought that I (i.e. you) had licked this problem.

Thing is, in a lot of cases, you have to code specifically for iBooks. You'd be best off dumping iBooks and trying Marvin and maybe Bluefire. iBooks is just too off-the-mark to expect it to work without having to make changes.

[Psymon]

Okay, I seem to have solved some of my problems! But not one last one. :/ The book I'm working on is Thoreau's "Walden", by the way -- lots of weird table 'n' stuff in there, I'll tell ya. I've included the following screenshots here to illustrate the problem(s) I've been having with regard to these stupid ornaments...

"ornament-black.jpg" - the ornament I'm using (I've got a brown version of this for under the chapter headings, but it's the same image, size, etc.);

"screenshot - header.jpg" - screenshot of the chapter headings, where the ornament displays just fine;

"screenshot - paragraph.jpg" - screenshot of the ornament as a section break, where I finally managed to get it to display correctly (before I couldn't seem to get the top/bottom margins equal, but now I have); and

"screenshot - poem.jpg" - screenshot showing the problem that I'm still struggling with.

I've tested this all out in iBooks (on the iPad) and in ADE and Sony Reader Library (and Sigil) on my PC, and the chapter headings and the section breaks all look perfect! But I just can't seem to get that smaller/smallest version of the ornament to have equal top/bottom margins. I'm sure that I could if I used the same code to have it centered like I did with the section break, but because the poem(s) is/are smaller in size, I don't want it centered in the page -- that would look weird. I found that by having the image be 111px (or so) and about 6em over seems to look/work just fine for all the poems in the book, so that's what I've been trying to do...

...but I just can't get those stupid top/bottom margins to be equal.

Here's the code that I finally figured out to use to get the section breaks to actually work/look okay (the code for the chapter headings is similar). In my HTML I have...

<p class="ornimdpar"><img alt="[section break]" class="ornimd" src="../Images/ornament-black.jpg" /></p>

...and my CSS for that is...

.ornimdpar {
	width: 38%;
	margin-left:31%;
	text-align: center;
}

.ornimd {
	width:100%;
	margin-top:0.38em;
	margin-bottom:0.38em;
	display:inline-block;
}

As for the stupid poem problem, well, geez, I've tried SO many different things (none of which seem to do the trick), but my latest attempt is/was to have this in my HTML...

<p class="poembreak"><img alt="[verse break]" src="../Images/ornament-black.jpg" /></p>

...and this for the CSS...

p.poembreak {
	font-size: 76%;
	margin-left:111px;
	width:111px;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 138%;
	text-align: left;
}

I know I don't really need a font size specified when it's just an image -- but hey, I've been trying EVERYTHING! I just can't understand why I can't seem to get the top/bottom margins the same for the break in the poems, specifically (the larger ornamental breaks in the main text turn out just fine). :/

[Psymon]

Originally Posted by JSWolf

Thing is, in a lot of cases, you have to code specifically for iBooks. You'd be best off dumping iBooks and trying Marvin and maybe Bluefire. iBooks is just too off-the-mark to expect it to work without having to make changes.

Well, I can't really tell other people what app to use -- and even I tried out other ebook apps on my iPad, and ended up not liking them and basically just use iBooks, myself.

The problems I've been having with this dumb ornament are really incredible, though -- it's hard to believe that to just insert a simple image as an ornament in-between a couple of paragraphs and have it come out okay would be SO problematic! Makes me long for the days when things were just HTML, before CSS even existed, and all you had to do was put

<p align="center">

...and TA-DA!

[JSWolf]

Originally Posted by Psymon

Well, I can't really tell other people what app to use -- and even I tried out other ebook apps on my iPad, and ended up not liking them and basically just use iBooks, myself.

The problems I've been having with this dumb ornament are really incredible, though -- it's hard to believe that to just insert a simple image as an ornament in-between a couple of paragraphs and have it come out okay would be SO problematic! Makes me long for the days when things were just HTML, before CSS even existed, and all you had to do was put

<p align="center">

...and TA-DA!

But you're making it harder then it needs to be. I've not seen a section break ornament with such restrictions. In every case I've seen, it's just the graphic at the size it is centered with some space above and below.

As for iBooks, sometimes you do have to make a version of the eBook just for iBooks and one for everything else. This is the way it is because iBooks is not standard in a lot of instances. Just ask Hitch if you want to see someone rant at iBooks and it's issues. Oh and don't forget, the 1st gen iPad with the older iBooks can work differently then the current version iBooks for all the other iPads. So you might want to get a 1st Gen iPad to also test on.

[Hitch]

Originally Posted by Psymon

I spent the whole morning (so far) re-doing my ornaments (in various sizes) this way (as you offered up here, odedta, as I've quoted below), testing it out on my computer in ADE and Sony Reader Library, and while it seemed to work fine in those, when I finally got around to transferring my epub over to the iPad and looked at it in iBooks, everything is TOTALLY outta wack -- the ornaments are all the wrong sizes. It seems that what's happening is that (to use your example, below) the image size of 60% is ignored, and instead they all go to the 100% defined in the paragraph style -- either that or it's just ignoring both and inserting the image as large as it can or something (but that would be weird).

Bummer, I really thought that I (i.e. you) had licked this problem.

Oedata misspoke/mistyped, I believe.

I think he meant to tell you to make the image 100% of the p, and then size the p (div) accordingly. That's what we do with divs. We often wrap a p around an image and then wrap that in a div, depending upon circumstances.

And, n.b.: what Wolfie told you is right: solutions that work on later iBooks won't work on first-gens (like the "oh, it's solved" problem of floating images at the top of a page having text run through them--cost me a client). Apple never bothered to fix it for first-gen iPads, along with a host of other issues. Also, when it comes to almost any added "flourishes," e.g., everything from dropcaps to incipits to you-name-it, you likely shall have to make a different book for iBooks versus other readers, because there is so much "workaround" crap you have to do.

Hitch

[RbnJrg]

Originally Posted by Psymon

Well, I can't really tell other people what app to use -- and even I tried out other ebook apps on my iPad, and ended up not liking them and basically just use iBooks, myself.

The problems I've been having with this dumb ornament are really incredible, though -- it's hard to believe that to just insert a simple image as an ornament in-between a couple of paragraphs and have it come out okay would be SO problematic! Makes me long for the days when things were just HTML, before CSS even existed, and all you had to do was put

<p align="center">

...and TA-DA!

I think your issues are due to you are ignoring that the size of margins are linked with fonts size. When you, for example, set a font-size of 3em and then, for the same style, you are asigning a margin-bottom of 1em, that 1em is an "em" of the size of 3em of a normal size But look at the epub I attach; here you can see how I centered dividers and fleurons. It works under ADE and it should works also under iPad; here you can see two screenshoots:



Regarding the divider in the poetry section, take in count that I assigned to the ".poetry" <div> a width of 40%. Of course, you can assign any width you wish. Also that <div> is not centered since it has a margin-left of 10% (of course, you can set here a margin-left in "ems" if you want). But in order that the dividers here are centered, you must set -for dividers- a margin-left according to their width. In this case, since I assigned a width of 30% to the ".poetry_divider" class, its margin-left must be equal to 35% (35% * 2 + 30% = 100%). Of course, you can change the values I used for margins top and bottom.

Regards
Rubén

[Psymon]

Thanks for the replies, everybody -- lots of food for thought! I have a busy day ahead of me away from home, so forgive me if I just quickly respond to something Rubén said...

Originally Posted by RbnJrg

Regarding the divider in the poetry section, take in count that I assigned to the ".poetry" <div> a width of 40%. Of course, you can assign any width you wish. Also that <div> is not centered since it has a margin-left of 10% (of course, you can set here a margin-left in "ems" if you want). But in order that the dividers here are centered, you must set -for dividers- a margin-left according to their width. In this case, since I assigned a width of 30% to the ".poetry_divider" class, its margin-left must be equal to 35% (35% * 2 + 30% = 100%). Of course, you can change the values I used for margins top and bottom.

That's an interesting idea, I'll have to think about that -- i.e. making each poem (as a whole) have a smaller width -- although I did try doing something like that just with the paragraph for the ornament (alone) and still couldn't seem to get the top/bottom margins equal.

I do have to wonder, though, how practical that might be, re portrait vs. landscape orientation? Like, in your landscape screenshots, a margin of 40% would probably be okay, but in portrait many (if not most) of the lines would wrap -- and that would look funny, since people wouldn't understand why they were typoset (so to speak) like that. And in any case, if one is in portrait or landscape, then obviously the width of the screen changes, and then how the ornament is "centered" would change, too, and it might look funny where it ends up in one or the other (or both!).

But that's certainly a thought! I have to run off today, but I'll play with that idea (tomorrow or whenever) and see if perhaps it does work out okay.

Thanks, Rubén (and everyone)!

[Psymon]

Okay! To heck with the stupid graphical ornament for the breaks in the poems. It's really weird that I was able to get the ornament in the section breaks in the main text to center vertically okay, but not in the poems, but at this point I give up, and decided to go with what one of the print editions of this book uses, which is a row of three asterisks. This looked nice, and served the purpose, but naturally one might think that there would still be the issue of the top/bottom margins of that row of asterisks not looking equal, because asterisks are inherently "superscript"-like characters, of course.

So all I did was make them subscript asterisks (and adjusted my CSS for <sub> accordingly!

I know y'all will say that this is pretty wonky, but it WORKS! Looks virtually perfect in ADE, Sony Reader Library and on the iPad in iBooks. Here's the code that I ended up using in my HTML for that row of asterisks...

<p class="poem">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<sub>*</sub>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<sub>*</sub>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<sub>*</sub></p>

The "poem" class for the paragraph is the same as what I used for the rest of the poem lines, of course (each line is a separate paragraph -- my font size for that/those is 76%). And here's the CSS that I used for <sub> (it's the only place I used subscript at all in the entire book, so I can get away with this)...

sub {
    font-size: 100%;
	line-height: 100%;
	vertical-align : -38%;
}

I'll attach a screenshot of how it looks in iBooks (I did it portrait because in the two places in the book I needed this, in landscape both places inadvertently come at a page break, so you don't see the equidistant top/bottom margins). As I said, it would appear -- literally! -- to come out pretty much perfectly in everything I've tested it on, so I'm happy now!

Anybody see any issues with doing it this way (as wonky as it is)?

[odedta]

Originally Posted by Hitch

I think he meant to tell you to make the image 100% of the p, and then size the p (div) accordingly. That's what we do with divs. We often wrap a p around an image and then wrap that in a div, depending upon circumstances.

Actually, he can use 60% as well and the image is still aligned to center on iBooks, I tested my code before I posted it and it works on iBooks :/

I'm not sure about iPad 1 iBooks version though. (iOS 5.1.1)