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 12-15-2011, 12:01 PM   #1
uavalos
Junior Member
uavalos began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Dec 2011
Device: none
Centering objects in Adobe Digital Editions?

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:

Code:
<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?
uavalos is offline   Reply With Quote
Old 12-15-2011, 12:37 PM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by uavalos View Post
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.
Jellby is offline   Reply With Quote
Old 12-15-2011, 02:50 PM   #3
uavalos
Junior Member
uavalos began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Dec 2011
Device: none
Darn it, so you're saying that I have to apply "text-align: center" to everything that I want centered?
uavalos is offline   Reply With Quote
Old 12-15-2011, 02:57 PM   #4
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Yes. That is the only way.
Toxaris is offline   Reply With Quote
Old 12-15-2011, 03:20 PM   #5
uavalos
Junior Member
uavalos began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Dec 2011
Device: none
I just tried that on IMGs and TABLEs and it does not work. To be clear, in the CSS, I added:

Code:
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.
uavalos is offline   Reply With Quote
Old 12-15-2011, 03:36 PM   #6
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,691
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by uavalos View Post
I just tried that on IMGs and TABLEs and it does not work. To be clear, in the CSS, I added:

Code:
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
Code:
hr { display: block; margin-left: 25%;width:50%; }
theducks is offline   Reply With Quote
Old 12-15-2011, 04:48 PM   #7
uavalos
Junior Member
uavalos began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Dec 2011
Device: none
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 is offline   Reply With Quote
Old 12-15-2011, 04:51 PM   #8
uavalos
Junior Member
uavalos began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Dec 2011
Device: none
<beginRant> Why can't ADE use a modern renderer? </endRant>
uavalos is offline   Reply With Quote
Old 12-16-2011, 02:23 AM   #9
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
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.
Toxaris is offline   Reply With Quote
Old 12-16-2011, 04:13 AM   #10
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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.

Last edited by Jellby; 12-16-2011 at 04:16 AM.
Jellby is offline   Reply With Quote
Old 12-16-2011, 09:38 AM   #11
uavalos
Junior Member
uavalos began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Dec 2011
Device: none
@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.
uavalos is offline   Reply With Quote
Old 12-16-2011, 10:00 AM   #12
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,468
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
@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.
DiapDealer is offline   Reply With Quote
Old 12-16-2011, 11:13 AM   #13
uavalos
Junior Member
uavalos began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Dec 2011
Device: none
@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.
uavalos is offline   Reply With Quote
Old 12-16-2011, 12:32 PM   #14
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by uavalos View Post
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.

Quote:
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.

Quote:
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.

Last edited by Jellby; 12-16-2011 at 12:36 PM.
Jellby is offline   Reply With Quote
Old 12-16-2011, 01:09 PM   #15
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Compared to iBooks, ADE is a bliss and very predictable. With iBooks each version will render the results different and something else is broken.
Toxaris is offline   Reply With Quote
Reply

Tags
ade, adobe digital editions, centering

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Downloading Adobe Ebook pdf files crashes Adobe Digital Editions .... Zevs Sony Reader 2 09-17-2010 12:25 PM
New verions of Adobe Digital Editions - Digital Editions 1.7.2 kennyc ePub 0 02-12-2010 06:21 AM
Classic Adobe Digital Editions 1.7.2 jrb028 Barnes & Noble NOOK 1 02-03-2010 10:22 AM
Adobe has new hope for e-books with Adobe Digital Editions Alexander Turcic News 82 01-05-2010 07:14 PM
Adobe Digital Editions raiderkilo Reading and Management 3 11-13-2009 02:07 AM


All times are GMT -4. The time now is 04:44 AM.


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