Centered but left align?

[mtrahan]

Dear ePub gurus,

I have a problem that I hope can be simply fixed. I'm working on a book — designed for print in InDesign — where there is a small poem at the end of a chapter, and that poem is in the center of the page but left aligned. You will understand better with an image (from the PDF output):



My question is: how to replicate something like this in the ePub version? So far, I'm just using left and right margins and aligning the text to the left, but it isn't an ideal solution... Exactly, current CSS for this poem is:

p.poem {
font-weight: normal;
font-style: normal;
font-size: 1em;
text-decoration: none;
font-variant: normal;
text-indent: 0em;
text-align: left;
margin: 0em 4.5em 0em 4.5em;
}

Any suggestions to make it look more like the original? I'm no CSS guru but I can't seem to find a better solution. Any help will be greatly appreciated.

Thanks in advance,

Michael

[Toxaris]

You could of course use a table with three columns and left-align the middle column. I don't always recommend tables, but in this case...

[dwig]

Originally Posted by mtrahan

...My question is: how to replicate something like this in the ePub version?...

With all of the variables in terms of display width, both absolute pixels and number of characters, it will be tricky, if not impossible.

You can come close by making the poem one <p>, using <br /> to start new lines, and then wrap it in a <blockquote>. By applying a CSS style to the <blockquote> to set a left margin will get you close to a centered poem. You can also use a <div> instead of <blockquote> but that will fail if the ePub is converted to classic MOBI, at least with either KindleGen2 or calibre, as block level margins aren't supported and neither convert the <div> to a <blockquote>. <blockquote> will work adequately with either conversion but results in only the reader's default indent (~2em). KindleGen2 will do a decent job of replicating the ePub's behavior in ADE in the KF8 partition when either <blockquote> or <div> is used.

[mmat1]

Originally Posted by Toxaris

You could of course use a table with three columns and left-align the middle column. I don't always recommend tables, but in this case...

How do you exactly center the centercolumn ?

[mtrahan]

Originally Posted by mmat1

How do you exactly center the centercolumn ?

3 columns, 33% width each I guess—unless there is a better way. Actually, I did this to solve a very similar problem last week and this morning it seems I didn't think of doing it again...

I think I will use that solution; I was just wondering if there was a very simple way I just couldn't see.

Thank you, Toxaris and dwig!

[mmat1]

Originally Posted by mtrahan

3 columns, 33% width each I guess.

Yes this will center the 2nd column, but it will not center the text within (the longest line of the text to be accurate). Maybe 33% is too small for the longest line, then it will wrap (consider that the user may increase the font-size). Or it's a short line, then your text will be somewhat displaced to the left.

I would like to find a solution for me as well. By now i would still prefer your original solution with a paragraph which has a decent left margin.

I guess each solution has it's downside.

[DaleDe]

Well columns do not have to have equal width. You could have 3 columns with 20% 60% 20%.

[Jellby]

It's easy, if you assign an explicit width to the block, then just add "margin-left: auto; margin-right: auto". That would be in an ideal world, but ADE just sets auto=0, which is allowed by the spec.

[HarryT]

I've done this in the past with a centred, fixed-width, single-column table. It works well as long as there's no danger of the text occupying more than one page on the reader.

[mmat1]

Originally Posted by Jellby

It's easy, if you assign an explicit width to the block, then just add "margin-left: auto; margin-right: auto". That would be in an ideal world, but ADE just sets auto=0, which is allowed by the spec.

It would be that easy, but any of my mobile devices sets auto to zero as well. The same is with a single column table.

[Jellby]

If you set the width to a percent, you can set the margins to the appropriate percent value too.

[HarryT]

Here's an example out of my "Sherlock Holmes Omnibus" which I'm using to display a newspaper advertisement in a centred table:

<DIV align=center>
<TABLE border=1>
<TBODY>
<TR>
<TD width="80%" align=center>HOWARD GARRIDEB
<BR id=KeepBr>Constructor of Agricultural Machinery
<BR id=KeepBr>Binders, reapers' steam and hand plows, drills, harrows,
<BR id=KeepBr>farmers' carts, buckboards, and all other appliances.
<BR id=KeepBr>Estimates for Artesian Wells.
<BR id=KeepBr>Apply Grosvenor Buildings, Aston.
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

In this case, the text within the table is centred, but change the "<TD width="80%" align=center>" to "<TD width="80%" align=left">" and you have what you want.

[Billi]

In principle yes, but strictly speaking, no. The longest line of the poem will only be centered if its length matches exactly the table width of 80% or whatever the value. And as this also depends on the font choices of the reader I, personally, would go for the lazy variant and only set a left margin that is wide enough to make a distinction and shows that there comes something special (like a poem for instance).

[HarryT]

True - that's a good point! A simple "<blockquote>" may be all that's needed here.

[Jellby]

Your code may work with mobi, HarryT, but in ePub, the table would not be centered (or not necessarily). If you had an <img> instead of <table>, yes, but tables are a different beast and tend to fail in every possible way, and not only because of buggy readers.

(Besides, all "id" are the same, which is forbidden.)