margin: 0 auto;

[gardefjord]

Hi all! I'm trying to set a

margin: 0 auto;

on some text. Want to get the same effect as you do in a web browser, horizontally centering.
Can't seem to make it work, I've tried it in iBooks and ADE.

[Jellby]

You need two things at least:

1. A fixed (or maximum) width for the block, otherwise the block takes the full page width and "auto" means "0", unless it is a table.

2. Support from the reader. As far as I know, ADE does not support "auto" (I don't know about iBooks), so you'll most likely not see the effect.

[troymc]

I've been beating my head against the wall on this too.

Any suggestions on how to center a block of left-justified text on todays crop of ereaders?



Troy

[gardefjord]

Originally Posted by Jellby

You need two things at least:

1. A fixed (or maximum) width for the block, otherwise the block takes the full page width and "auto" means "0", unless it is a table.

2. Support from the reader. As far as I know, ADE does not support "auto" (I don't know about iBooks), so you'll most likely not see the effect.

1. Sure, this works but the ePub format doesn't support 0 auto.

2. Perhaps we can find a work around that readers do support?

[Jellby]

Originally Posted by gardefjord

1. Sure, this works but the ePub format doesn't support 0 auto.

The ePUB specification explicitly allows the "auto" value for margins, so it supports it. The bad news, is that it also explicitly allows it to be replaced with "0":

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

2. Perhaps we can find a work around that readers do support?

If you set the width of the element as a percentage of page width, you can set the margins to half the remaining percentage. If the centered bit is 40%, you set left and right margins to 30%, so that 30+40+30=100.

Or maybe setting "display: inline" and wrapping it into a <div> with "text-align: center".

For a table, which has a width that by default adapts to its contents, I'm not sure what would work...

You can always write polite emails (but many) to Adobe and Apple

[hkdorama]

margin: 0 auto;
display: table;

This would work in iBooks. It would not work in ADE or Sony Reader.

[JSWolf]

Originally Posted by troymc

I've been beating my head against the wall on this too.

Any suggestions on how to center a block of left-justified text on todays crop of ereaders?



Troy

Why not just center it?

[troymc]

Originally Posted by JSWolf

Why not just center it?

It's poetry - I was trying to mimic the author's original layout.

For now I do just have it centered. I'm just picky enough to want to do it "right".

And honestly it shouldn't be this difficult.


Troy

[Jellby]

For poetry, while "centering the block" would be the best way, I set it with a larger left margin (2em, when the normal indent is 1em).

If at some point you get a reader that supports "auto", you can just change the margins to "auto". Or, you can set "auto" margins right now, and 2em padding. A reader that does support "auto" shows it properly centered, while a reader that doesn't will show the "second best" option

[JSWolf]

Originally Posted by Jellby

For poetry, while "centering the block" would be the best way, I set it with a larger left margin (2em, when the normal indent is 1em).

If at some point you get a reader that supports "auto", you can just change the margins to "auto". Or, you can set "auto" margins right now, and 2em padding. A reader that does support "auto" shows it properly centered, while a reader that doesn't will show the "second best" option

And using em for margins is just wrong. It means when you up the font size, you also make the margins wider. Use pt or px for the margins.

[Jellby]

Originally Posted by JSWolf

And using em for margins is just wrong. It means when you up the font size, you also make the margins wider. Use pt or px for the margins.

Except when you want the margins to grow with the font size. In this particular case, I do; just as I want the first line indent to be proportional to font size, I also want the margin/indents in poetry to be.

If fact, ideally I'd like to define something more complex that depends on the font size, page size, orientation, etc. and has some maximum and minimum values (for instance: 20% of page width, but not less than 2em, and not more than 1.5cm). This is currently not possible, it might be with CSS3, though; as a compromise I prefer to use ems in this case, but I only gave it as an example.

By the way, using px is just as wrong, as it is dependent on the device resolution, and sometimes it's not even defined (what is a pixel when converting to PDF with prince?).

[JSWolf]

This is not about PDF. This is about ePub. So converting ePub to PDF is irrelevant.

Personally, I'd just find it really annoying to have the margins change with the text size. I would either have to fix it myself or just not read the book and also maybe put you in the thread about poorly made eBooks.

[Jellby]

Originally Posted by JSWolf

This is not about PDF. This is about ePub. So converting ePub to PDF is irrelevant.

But still ePUBs are read in devices with a variety of resolutions. Your call to margins using absolute units is valid and sensible, but that means using pt, cm, mm, in... pixels are a device-dependent unit and should not be used if you want absolute units.

Personally, I'd just find it really annoying to have the margins change with the text size. I would either have to fix it myself or just not read the book and also maybe put you in the thread about poorly made eBooks.

Fair enough, I try to create my books so that they are easy to modify . Note, however, that I was not referring to page margins, but relative margins and indents of different pieces of text, like poetry or blockquotes.

[EricDP]

Originally Posted by troymc

It's poetry - I was trying to mimic the author's original layout.

My workaround is to create a centered block, and then inside that create an inline-block that is left aligned.

Problem: inline-blocks can't wrap pages (because they are treated as a single element).
Solution: create a separate block for each verse - hopefully your verses aren't too long.

New Problem: Using the above solution, each verse will now be centered relative to its own line lengths, not relative to the entire poem.
Solution: create a custom negative margin for each verse (except the widest, of course) to align the left edges of all the verses. If you specify this margin in "em" instead of "%" it will stay fairly close to aligned at different font sizes/different screen widths.

It's not perfect, but it's the best I can come up with given the current limitations.

If you want some sample code, I can post it later when I get home.

[troymc]

Originally Posted by EricDP

My workaround is to create a centered block, and then inside that create an inline-block that is left aligned.

Problem: inline-blocks can't wrap pages (because they are treated as a single element).
Solution: create a separate block for each verse - hopefully your verses aren't too long.

New Problem: Using the above solution, each verse will now be centered relative to its own line lengths, not relative to the entire poem.
Solution: create a custom negative margin for each verse (except the widest, of course) to align the left edges of all the verses. If you specify this margin in "em" instead of "%" it will stay fairly close to aligned at different font sizes/different screen widths.

It's not perfect, but it's the best I can come up with given the current limitations.

If you want some sample code, I can post it later when I get home.

I would definitely like to see a sample of that.

Have you tried that on any ADE based ereader? I didn't think inline-block was supported in epubs. And how did you center the outside block without auto margins?


Troy