Centering objects in Adobe Digital Editions?

[uavalos]

Not really sure where to post this.

Basically, i use Sigil to create EPUBs. However, I've noticed that the usual centering doesn't work in ADE. And by "usual" I mean by the way it's usually done in web development---to center something, style it with margin-left:auto and margin-right:auto. Assuming the width has been explicitly defined, this technique centers DIVs, Ps, IMGs, TABLEs, ... basically anything. It also works in every major browser, even the buggy IE 6 if I recall correctly!

However, this technique apparently does not work in ADE. I'm running the latest version for windows, which is presumably 1.7.2.

I've noticed that to center IMGs, some vendors wrap it in a paragraph P that's centered vertically:

<p style="text-align:center;"><img /></p>

However, in my book, I don't have the luxury of going back to the mss. and wrapping things I want centered in an extra paragraph.

So are there any workarounds? How do you center objects in ADE?

[Jellby]

Originally Posted by uavalos

How do you center objects in ADE?

With "text-align: center".

Unfortunately, ADE is following the specification. The spec says that reader agents may treat "auto" values in margin as if they were zero, i.e., they are not required to support "auto". We would all like ADE to do otherwise, but Adobe chose differently

This is a corollary of Murphy's law: if something can be "not supported", some reader will "not support" it.

[uavalos]

Darn it, so you're saying that I have to apply "text-align: center" to everything that I want centered?

[Toxaris]

Yes. That is the only way.

[uavalos]

I just tried that on IMGs and TABLEs and it does not work. To be clear, in the CSS, I added:

img {
text-align: center;
}
table {
text-align: center;
}

However, that does not work even when the IMGs and TABLEs are explicitly given a width. And by that, I'm using more CSS to give them widths.

[theducks]

Originally Posted by uavalos

I just tried that on IMGs and TABLEs and it does not work. To be clear, in the CSS, I added:

img {
text-align: center;
}
table {
text-align: center;
}

However, that does not work even when the IMGs and TABLEs are explicitly given a width. And by that, I'm using more CSS to give them widths.

I believe you have to explicitly set the Left Margin. Just like you do with a fractional HR

hr { display: block; margin-left: 25%;width:50%; }

[uavalos]

Oh right, why didn't I think of that? :-)

It's a good idea on images since using pixels or EMs for image widths breaks ADE---when the image is wider than the screen.

However, it doesn't seem to be working for tables. I tried setting width:30% to a table that's a child of a DIV that takes up the whole screen. The table is not 30% of that DIV. No other widths in the table are set

[uavalos]

<beginRant> Why can't ADE use a modern renderer? </endRant>

[Toxaris]

It is not about a modern or non-modern renderer. It is about following the specifications.

However, a table can be centered, as well as an image. Setting the text-align: center on the img tag itself will not help. You will have to put the image in a <p> or <div> tag with the text-align: center setting.
The same principle also works for the table, but you need <div> then, the <p> will not work. I think I remember that is correct for tables, but I cannot test now.

[Jellby]

For images, and for anything else, you have to use "text-align: center" in the containing element.

But tables are different, as they have no native width, but adapt their width to their contents... I believe tables do not obey text-align (but the text inside the table cells does). The way to center a table would be with "margin: 0 auto;", but since "auto" is not supported, the only way is assigning a fixed relative width to a table, and then dividing the rest between right and left margins:

table { /* 60%+20%+20% = 100% */
width: 60%;
margin-left: 20%;
margin-right: 20%;
}

Or, my preferred solution, just use "auto" and bear with the rendering being sub-optimal in ADE, at least it will be nicely coded and work properly in any reader with better support (present or future).

By the way, when you want a centered image, you'll often want something like:

<div class="illustration">
<img src="..." alt="" />
</div>

div.illustration {
margin: 1em 0;
text-align: center;
}
div.illustration img {
max-width: 100%;
max-height: 100%;
}

So having to use "text-align: center" is no real cluttering.

[uavalos]

@jellby -- as stated above, setting a table width as a percent gives unexpected results.

@toxaris-- i'm coming from a web developer background. Are you sure ADE is modern? It doesn't support :before or :after for crying out loud. In many ways, it's just as bad as IE6.

Just tried two tables one wrapped in a DIV and the other in a P. Neither centered horizontally. Will double-check my code and report back if I get it to work.

But for now I'm giving up. I think I can live with tables with a fixed left margin or correctly centered everywhere else.

However, for images, setting a width as a percent and margin-left also as a percent is an excellent idea I'll be using.

[DiapDealer]

@toxaris-- i'm coming from a web developer background. Are you sure ADE is modern? It doesn't support :before or :after for crying out loud. In many ways, it's just as bad as IE6.

ADE is not a browser. It's an ePub renderer. And as such, it has a whole different subset of specs to adhere to (or should be adhering to). ADE (or any ePub rendering engine) is not meant to render everything in the same manner that a modern browser does... it's meant to render in accordance with their (Adobe's) interpretation of the current ePub specifications.

[uavalos]

@toxaris --- iBooks uses webkit as a rendering engine. It gives really good and predictable results. Other ePub readers also use browser as their underlying browsing engines.

Speaking of specs, according to the official EPUB specs, version 2 in many cases just picks up the official CSS2 specs! In fact, for margin-left: auto applied to DIVs and tables, the official specs say that it should behave just like a browser.

Here read it for yourself:

http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm

That document tells us that for margin-left the EPUB specs follow CCS2 section 8.3. Those specs tell us that for DIVs and tables (block-level, non-replaced elements in normal flow), margin-left:auto, and margin-right:auto should center the object horizontally:

http://www.w3.org/TR/CSS2/visudet.ht...hs_and_margins

So there you go. ADE sucks. The only reason I'm using it is because of the DRM.

[Jellby]

Originally Posted by uavalos

iBooks uses webkit as a rendering engine. It gives really good and predictable results. Other ePub readers also use browser as their underlying browsing engines.

I haven't seen iBooks, but from what I've read, it's anything but predictable. As others have said, ePUB is mostly XHTML+CSS, but it's not the same.

Speaking of specs, according to the official EPUB specs, version 2 in many cases just picks up the official CSS2 specs! In fact, for margin-left: auto applied to DIVs and tables, the official specs say that it should behave just like a browser.

Here read it for yourself:

http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm

Yeah, and read the note below the table in section 3.3:

[1] Reading Systems may set the value of any margin property whose specified value is auto to 0.

So there you go. ADE sucks. The only reason I'm using it is because of the DRM.

ADE has many bugs, but this particular issue is not a bug, although it's an annoyance and we all wish it would be different.

If you want to complain, start complaining about the lack of support for small-caps. Those are in the spec and they have no "alternative display". Or about Unicode bidi (or right-to-left writing). Or about their treatment of oeb-page-head, which is worse than what a pure browser would do.

[Toxaris]

Compared to iBooks, ADE is a bliss and very predictable. With iBooks each version will render the results different and something else is broken.