View Single Post
Old 03-17-2011, 06:45 AM   #1
Iznogood
Guru
Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.Iznogood ought to be getting tired of karma fortunes by now.
 
Iznogood's Avatar
 
Posts: 932
Karma: 15752887
Join Date: Mar 2011
Location: Norway
Device: Ipad, kindle paperwhite
ePub and floatig paragraphs

I have been trying for some time now to find a good way to let a paragraph float right, but have not found a good way to do that yet. I have read innumerous totorials on how to float images, but have never found one about floating a paragraph with text. I therefore ask the Forum for help in this matter.

In my publication, I have a letter that is supposed to look something like this:
Oslo,
14. mai 2009
Dear friend,
bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla blabla bla bla
bla bla bla
Sincearly,
BlaBlaBla

The text in the heading (Oslo, 14. mai 2009) should have text-indent:left, but I would very much like it to stand on the right side of the "page" on the reading device. The same with the name of the writer.

I have tried using the following html code:
<p class="all_left" style="float:right;">Oslo,<br/>14. mai 2009</p>
<p class="first" style="clear:both;">Dear Friend</p>
<p>bla bla bla (...)</p>
<p>Sincearly,</p>
<p class="all_right">BlaBlaBla</p>

These are the relevant classes from the stylesheet I am using
p{
margin-top:0em;
margin-bottom:0em;
margin-left:0em;
margin-right:0em;
text-indent:2em;
}
p.first{
margin-top:0em;
margin-bottom:0em;
margin-left:0em;
margin-right:0em;
text-indent:0em;
}
.all_right{
font-size:inherit;
font-weight:inherit;
font-style:inherit;
text-align:right;
text-indent:0em;
margin-left:0em;
margin-right:0em;
}
.all_left{
font-size:inherit;
font-weight:inherit;
font-style:inherit;
text-align:left;
text-indent:0em;
margin-left:0em;
margin-right:0em;
}

Note that the first line after the floating paragraph has style="clear:both;" to make sure that it appears below and not on the side of the floating paragraph.

In Sigil, Calibre and on my iPad (with iBooks) this works great, but in e.g. Stanza, the floating paragraph just disappear and leave a big gap where it should have been.

Is it the reading devices that does noe implement the full epub standard, or is it the viewer in Sigil and Calibre that is too tolerant about things that are not supported in the epub standard?

The only way I have been able to do this in Stanza is by putting the heading inside a table, and put that table again inside another table (with width=100%) and let it float right, but I do not want to do that, because it is not good HTML coding. Any ideas on how to do this in such a way that it works on all platforms would be much appreciated.

Last edited by Iznogood; 03-17-2011 at 06:48 AM.
Iznogood is offline   Reply With Quote