View Full Version : margin: 0 auto;


gardefjord
07-13-2010, 08:36 AM
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
07-13-2010, 09:19 AM
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
07-13-2010, 05:31 PM
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
07-14-2010, 04:02 AM
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
07-14-2010, 05:14 AM
1. Sure, this works but the ePub format doesn't support 0 auto.

The ePUB specification (http://www.idpf.org/doc_library/epub/OPS_2.0.1_draft.htm#Section3.3) 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
07-15-2010, 02:16 AM
margin: 0 auto;
display: table;

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

JSWolf
07-15-2010, 04:16 PM
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
07-15-2010, 07:11 PM
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
07-16-2010, 04:41 AM
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
07-16-2010, 12:11 PM
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
07-16-2010, 12:31 PM
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
07-16-2010, 12:41 PM
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
07-16-2010, 01:39 PM
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
07-16-2010, 04:34 PM
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
07-16-2010, 05:06 PM
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

EricDP
07-16-2010, 06:38 PM
Have you tried that on any ADE based ereader?

I've tried it in ADE on my laptop. That's the closest thing to a reader that I have right now.

I didn't think inline-block was supported in epubs.
Argh! Reviewing the standard, it looks like you're right. I have too much CSS/XHTML history that I need to break out of and get used to this limited set.

Anyhow, it works in ADE for now... But I will try using another display form to see if I can replicate this in a way that conforms to the standard (even though none of the readers do!!).

And how did you center the outside block without auto margins?
The outer block isn't actually centered - it's just a block of centered 'text' using 'text-align: center'. Then the inline-block becomes the only 'character' of text. An inline-block is basically a block of anything that flows 'inline' as if it were just another piece of text. I wonder if just doing 'display: inline' will work?

I will try when I get home - if it works, I'll post the new code. If not, I'll post the old (works but not standard) code.

EricDP
07-16-2010, 09:45 PM
Well, just changing it to inline didn't work, so here's the code that currently works. I'll play with it over the weekend and see if I can get it working with 'compliant' code.

Here's the CSS:

.centerblock {
text-align: center;
display: block;
text-indent: 0em;
}
.verse {
text-align: left;
display: inline-block;
text-indent: 0em;
font-size: 0.85em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.vneg090 {
margin-left: -0.90em;
}
.vnegxxx - etc for other indent amounts


And here's some text:

<p class="paragraph-center">ANNIVERSARY ODE</p>
<hr class="small" />

<div class="centerblock">
<p class="verse vneg320">Again we meet to celebrate<br />
&nbsp;&nbsp;&nbsp;&nbsp;With badge and solemn rite,<br />
Our fifty-second anniversary,<br />
&nbsp;&nbsp;&nbsp;&nbsp;In Pickwick Hall, tonight.</p>
</div>

<div class="centerblock">
<p class="verse vneg090">We all are here in perfect health,<br />
&nbsp;&nbsp;&nbsp;&nbsp;None gone from our small band:<br />
Again we see each well-known face,<br />
&nbsp;&nbsp;&nbsp;&nbsp;And press each friendly hand.</p>
</div>

<div class="centerblock">
<p class="verse vneg200">Our Pickwick, always at his post,<br />
&nbsp;&nbsp;&nbsp;&nbsp;With reverence we greet,<br />
As, spectacles on nose, he reads<br />
&nbsp;&nbsp;&nbsp;&nbsp;Our well-filled weekly sheet.</p>
</div>


And here's how it renders in ADE:

http://www.photopaynter.com/dpreview/VerseSample.gif

Those couple of verses don't appear perfectly centered, but notice I have 'vneg' on each of them because lower down there is an even wider verse. I use the widest verse as calibration (it would be 'vneg000') and everything else is negative-indented to align.

Also, before somebody says it, I know I could <span> and indent for the alternate lines rather than using repeated &nbsp; for spacing. Bad habit of mine...

EricDP
07-17-2010, 06:56 PM
OK, I think I've solved this using only standard code - I fell back to 'inline-table' instead of 'inline-block'. Somewhat comical since one of the reasons the display parameters were created was to eliminate the abuse of tables for non-tabular data. Oh well...

Here's the CSS:
.centerblock {
text-align: center;
display: block;
text-indent: 0em;
}
.tableblock {
text-align: left;
display: inline-table;
}
.verse {
text-align: left;
text-indent: 0em;
font-size: 0.85em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
td {
padding-top: 0.5em;
padding-bottom: 0.5em;
}


And here is a sample of two verses:

<div class="centerblock">
<table class="tableblock vneg1">
<tr>
<td class="verse">Again we meet to celebrate<br />
&nbsp;&nbsp;&nbsp;&nbsp;With badge and solemn rite,<br />
Our fifty-second anniversary,<br />
&nbsp;&nbsp;&nbsp;&nbsp;In Pickwick Hall, tonight.</td>
</tr>
</table>
</div>

<div class="centerblock">
<table class="tableblock vneg2">
<tr>
<td class="verse">We all are here in perfect health,<br />
&nbsp;&nbsp;&nbsp;&nbsp;None gone from our small band:<br />
Again we see each we,nn,mll-known face,<br />
&nbsp;&nbsp;&nbsp;&nbsp;And press each friendly hand.</td>
</tr>
</table>
</div>


Yes, you do need a separate div for each verse. Otherwise the verses go side-by side.

I tested this in ADE and in Sigil and it seems to render well, and it will break across pages in ADE (it won't break a single verse across a page, but the entire poem will break between verses).

Please provide feedback on how this works in different readers. Thanks!

EricDP
07-24-2010, 12:00 PM
Just wondering if anybody tried the above on different readers and if it worked properly?

troymc
07-26-2010, 04:42 PM
Just wondering if anybody tried the above on different readers and if it worked properly?

Yes. Well - somewhat. Using what you posted I have found two ways which do what I want:

1) similar to what you showed:

<div class="centerblock">
<p>
... ... ...
</p>
</div>

Where div.centerblock is "text-align: center; display: block;" and div.centerblock p is "text-align: left; display: inline-block;"

2) left-justified text in a centered blockquote


<div class="poetry">
<blockquote class="verse">
<p>The Patron of true Holineſſe,<br />
Foule Errour doth defeate:</p>

<p>Hypocriſie him to entrappe,<br />
Doth to his home entreate.</p>
</blockquote>
</div>

Where div.poetry is "text-align: center; display: block;" and blockquote.verse is " text-align: left; display: inline-block;". With inline-block the blockquote is only as wide as the included text. I found this because I wanted to put a border around the text.

Both of these appear to work fine in ADE (Sony/Nook) & webkit (Sigil/Calibre) readers. But don't ask why since I thought inline-block was not part of the spec.


Troy

EricDP
07-26-2010, 04:59 PM
Both of these appear to work fine in ADE (Sony/Nook) & webkit (Sigil/Calibre) readers. But don't ask why since I thought inline-block was not part of the spec.
Indeed, my original method (see up in this thread) was similar to yours - just an 'inline-block' paragraph inside a block div. But inline-block is not in the standard - I looked it up. It may work now, but a firmware upgrade on a reader might make it stop working. That's why I came up with the convoluted 'inline-table' method. Personally, I'd prefer to use inline-block but I'm trying to offer a standards-compliant method that will hopefully continue to work as these machines mature and become more strict about the standard.

I think inline-block works in Sigil and Calibre because they implement the full CSS spec instead of the subset that is EPUB. I've stopped using them for proofing because of that unreliability (although I still use Sigil for editing). I have no idea why it works in ADE - ADE is missing a lot of other CSS (and HTML) features, so it doesn't make sense that it would implement this one.

The standard supports the following visual display models: none, inline, block, run-in, table, inline-table, table-row-group, table-header-group, table-footer-group, table-column-group, table-row, table-column, table-cell, table-caption, inherit, oeb-page-head, and oeb-page-foot.

Reference: http://www.idpf.org/2007/ops/OPS_2.0_final_spec.html#Section3.3

EricDP
10-06-2010, 11:02 AM
Update on this: using the "vneg" method I described above works quite well on my (new) nook, except if the font is x-large or xx-large. Basically, if the font is so big that the longest line ends up touching the left edge, then the negative margins on the other lines may push them beyond the edge, so that you lose some letters.

Also, using inline-table, each verse stays together as a block and won't break over pages, so if a single verse is so large that it can't fit on a single page, the bottom will be chopped off.

As a work-around for books that have a lot of centred verse, I've considered making a 'large-type' version that is just left-aligned (since it will fill the line anyway) and a 'normal' version that centres. But I hate the idea of having more than one version of a book. It just may not be possible to have a perfect reflowable book that works in all cases, though.