View Full Version : ePub and floatig paragraphs


Iznogood
03-17-2011, 06:45 AM
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.

GeoffC
03-17-2011, 06:50 AM
:hatsoff:

Welcome to Mobileread - assuredly an expert will drop in shortly .... :2thumbsup

bfollowell
03-17-2011, 06:58 AM
I love reading other peoples questions and learning from them, as well as trying to help when I can. I've never heard of "floating" paragraphs so I'll have to go look that up and see if I can figure out exactly what you're referring to there.

As far as what you're trying to do, I've seen it done where the lines you want on the right side where setup as left aligned with a wide left margin, usually a percentage. There's really no way to do it that way and get it all the way to the right though. You can get it close but no cigar. And when you factor in different readers, different screen sizes, never know what size text the reader will be using, etc. Close is all you can get doing it that way.

I'll research floating paragraphs and see what I can find out. You may've let me to a new technique, assuming we can get something to work with it.

Good luck and post back here if you find some way to this on your own or from somewhere else.

- Byron

GeneS
03-17-2011, 07:41 AM
The fault may be in Stanza and not in your coding. I recall reading in another thread that Stanza does not fully implement html and/or css standards (someone please correct me if my statement is incorrect.)

DMSmillie
03-17-2011, 08:52 AM
As far as I can tell, what you want isn't really float:right, since that is intended to enable something else to sit alongside the "virtual box" containing the paragraph, and if necessary wrap around it, and that clearly isn't what you intend. What you really want is for those two lines of text to have a substantially larger left margin than the text which follows.

I'd suggest something along the lines of placing those two lines inside a DIV which has something like a 60% left margin, or just setting that margin on the paragraphs themselves.

The way you're coding the floating paragraphs at the moment, they probably are technically "floating", but you're also specifying they should have zero left and right margins, and cancelling the float immediately after them, so the resulting appearance is identical to not having the float in the first place.

Iznogood
03-21-2011, 03:53 PM
Hi again

Thanks for wishing me welcome to the forum and quick answers. I have been away in the weekend, and has just started reading your answers and experimenting a bit more.

I too have seen the solution about giving the text you want to stand left-aligned on the right side of hte screen a large left-margin, see examples attached. Examples are a page from "The Plague Court Murders" by John Dickson Carr, in an edition from The Langtail Press and sold via Amazon in kindle-format. This book has an issue similar to mine, but the publisher has used the left-margin-solution, and I find that it doesn't look very professionally. The same page are given with different font sizes set by the reading device, not by CSS in the code. Attachments are from ipads kindle-emulator.

The backside of the left-margin-solution is that at small font-sizes the paragraphs above appears as if they are centered (see attachment 1). As the font-size increases, the text extends rightwards, and at one particular font-size it looks about right (attachment 2). If you increase font-size even more, a line break is inevitable (attachment 3 and 4).

@bfollowell: if I understand you correctly, this is what you ment by "There's really no way to do it that way and get it all the way to the right though. You can get it close but no cigar"?

What I want is a paragraph where the text are left-aligned, but the paragraph is "locked" on the extreme right side of the screen and expands leftwards when increasing font size.

I have tried everything I can come up with to achive this, from a div where the text is right-aligned containing another div where the text in leftaligned containing my paragraphs to a div floating to the right, but has not succeded in anything better that the idea of a right floating <p> or a <div>.

DMSmillie, I see the point about me setting 0 left and right margins, but I have also tried setting
margin-left:auto
margin-right:0em;
without getting the paragraph more over to the right with that. Is it technically possible to "stick" something with text-align:left to the right side of the screen or browser, and make it expand leftwards? How do the rest of you move elements to the right? The easiest would be to right-align the paragraphs, but before I do that I would very much like to try to find a solution to setting the left-aligned text on the right side of the screen.

JSWolf
03-21-2011, 04:22 PM
When you test your ePub, use ADE. If it works, then it's good to go. If it doesn't work in Stanza then it's Stanza that is at fault. Stanza is buggy so don't take that something doesn't work as expected with Stanza. Also, iBooks is the same way, don't use it test bed. iBooks also is a problem as well. If you have an iPad, get Bluefire Reader since it uses ADE code and your ePub that works in ADE on your desktop or laptop will work in Bluefire.

Jellby
03-22-2011, 05:22 AM
I have tried everything I can come up with to achive this, from a div where the text is right-aligned containing another div where the text in leftaligned containing my paragraphs to a div floating to the right, but has not succeded in anything better that the idea of a right floating <p> or a <div>.

The problem, I believe, is that block elements don't have a width that adapts to their contents, but use the whole width available. If you add a border to your <div>s and <p>s you'd see what I mean.

You can try assigning a fixed width to your "floating" block (preferably in relative units, such as em). Then you need something else to move it to the right; normal "text-align" does not work because it's for alignment inside the element, not for placement of the element in the page. The proper way would be "margin-left: auto; margin-right: 0", but reading systems are allowed to treat "auto" just like "0", and ADE does, so it might not work either. I guess using a dummy container block with text-align could work:

<div class="toright">
<p id="block_1">This block is left-aligned,<br/>
but "floated" to the right margin.</p>
</div>

with:

div.toright { text-align: right; }
div.toright * { text-align: left; }
p#block_1 { width: 20em; }

The width of p#block_1 should be adjusted to the width of its longest line, and every such block appears in the text should have its own name and width.

DaleDe
03-22-2011, 08:42 PM
Try adding a "display: block;" to your CSS. That should help it float.

Dale

Iznogood
03-02-2012, 12:05 AM
Sorry for reviving an old thread. The reason for doing it is that I have been revisiting this problem, and been playing around a little. I'm posting this back here as a reference for myself, and maybe for others who are working on the same problem.

Short summary of the problem: to move a div (containing text) around on the screen, eg. center it or letting it float right or left.

Goal: being able to e.g. center a block of e.g. left-justified text

Example for illustration purposes:

<div class="outer">
<div class="inner">
<div class="all_left">This is the first line, which is a long one</div>
<div class="all_center">This second line is shorter</div>
<div class="all_right">This line is shortest</div>
</div>
<p class="margin_top">This is paragraph 1. It follows directly after the inner div and need to be cleared to take its rightful place in the document flow.</p>
</div>
<p>This is paragraph 2. It follows directly after the outer div. It should be unaffected by whatever is inside the outer div.</p>


CSS to discribe the classes used:

body{
background-color:green;
}
.all_right{
text-align:right !important;
}
.all_left{
text-align:left !important;
}
.all_center{
text-align:center !important;
}
.margin_top{
margin-top:2em;
}
p{
text-indent:1em !important;
margin-top:0;
margin-bottom:0;
text-align:justify;
}


I have found at least three ways of doing this:

1. Using float:

.outer{
width:100%;
background-color:blue;
}
.inner{
float:right;
background-color:red;
}
.inner + *{
/*Clearing whatever comes after the floating div*/
clear:both;
}

Pros: clean code, easy to read. The outer div is not necessary
Cons: the floating element needs to be cleared. Some CSS properties are ignored, e.g. the margin-top of the first paragraph. Text can only float left or right. Impossible to center the inner block.

2. Alignment of an inline-block

.outer{
width:100%;
background-color:blue;
text-align:right;
}
.inner{
background-color:red;
display:inline-block;
}

Pros: block can be aligned left, right or centered, depending on the text-align-property
Cons: inner and outer div needed, more messy code. Rendering machine needs to support display- and text-align-property

3. Adjusting margins of table

.outer{
width:100%;
background-color:blue;
}
.inner{
background-color:red;
display:table;
margin-left:auto;
margin-right:0;
}

Pros: Outer div not needed. Clean code. Inner block can be centered by setting both margin-left and margin-right to auto.
Cons: Rendering engine must support display-property.

Question: is the last "method" semantically correct? I.e, does display:table mean that I'm saying that the inner block is a table (not semantically correct) or am I stating that is should just be presented as if it were a table? I am guessing the last, and that it is "valid" semantically as well as technically.

Full example attached in zip-file