Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
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: 929
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
Old 03-17-2011, 06:50 AM   #2
GeoffC
Chocolate Grasshopper ...
GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.GeoffC ought to be getting tired of karma fortunes by now.
 
GeoffC's Avatar
 
Posts: 26,896
Karma: 16968764
Join Date: Mar 2008
Location: Scotland
Device: Cybook Gen3 , Pocketbook 302 (Black) , Nexus 10: wife has PW


Welcome to Mobileread - assuredly an expert will drop in shortly ....
GeoffC is offline   Reply With Quote
Old 03-17-2011, 06:58 AM   #3
bfollowell
Fanatic
bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.bfollowell ought to be getting tired of karma fortunes by now.
 
Posts: 510
Karma: 1152752
Join Date: Aug 2010
Location: Evansville, IN, USA
Device: Amazon Kindle 3 Wi-Fi & B&N Nook Tablet & B&N Nook HD+
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

Last edited by bfollowell; 03-17-2011 at 11:26 AM.
bfollowell is offline   Reply With Quote
Old 03-17-2011, 07:41 AM   #4
GeneS
eBook Enthusiast
GeneS will become famous soon enoughGeneS will become famous soon enoughGeneS will become famous soon enoughGeneS will become famous soon enoughGeneS will become famous soon enoughGeneS will become famous soon enoughGeneS will become famous soon enough
 
GeneS's Avatar
 
Posts: 118
Karma: 726
Join Date: Dec 2007
Location: US
Device: Sony PRS-350, Astak PocketPro, iPhone, Asus eee Pad Transformer
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.)
GeneS is offline   Reply With Quote
Old 03-17-2011, 08:52 AM   #5
DMSmillie
Enquiring Mind
DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'
 
DMSmillie's Avatar
 
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
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.
DMSmillie is offline   Reply With Quote
Old 03-21-2011, 03:53 PM   #6
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: 929
Karma: 15752887
Join Date: Mar 2011
Location: Norway
Device: Ipad, kindle paperwhite
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.
Attached Thumbnails
Click image for larger version

Name:	1.png
Views:	116
Size:	201.3 KB
ID:	68757   Click image for larger version

Name:	2.png
Views:	106
Size:	178.5 KB
ID:	68758   Click image for larger version

Name:	3.png
Views:	105
Size:	162.3 KB
ID:	68759   Click image for larger version

Name:	4.png
Views:	99
Size:	138.7 KB
ID:	68760   Click image for larger version

Name:	5.png
Views:	108
Size:	145.6 KB
ID:	68761  
Iznogood is offline   Reply With Quote
Old 03-21-2011, 04:22 PM   #7
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 35,983
Karma: 17083916
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
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.
JSWolf is online now   Reply With Quote
Old 03-22-2011, 05:22 AM   #8
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,906
Karma: 4269879
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by norway1456 View Post
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:

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

Code:
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.
Jellby is offline   Reply With Quote
Old 03-22-2011, 08:42 PM   #9
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,498
Karma: 4597184
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Try adding a "display: block;" to your CSS. That should help it float.

Dale
DaleDe is offline   Reply With Quote
Old 03-02-2012, 12:05 AM   #10
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: 929
Karma: 15752887
Join Date: Mar 2011
Location: Norway
Device: Ipad, kindle paperwhite
Thread theme revisited

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:
Code:
<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:
Code:
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:
Code:
.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
Code:
.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
Code:
.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
Attached Files
File Type: zip Centering div.zip (1.3 KB, 42 views)

Last edited by Iznogood; 03-02-2012 at 01:51 PM.
Iznogood is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Help: pdf to epub conversion in Calibre splits paragraphs leday Calibre 13 09-15-2013 02:10 PM
PDF - ePub paragraphs are merged together strnad Conversion 4 03-01-2011 08:57 AM
space between paragraphs gatorman Sigil 3 01-07-2011 10:17 AM
Getting extra Paragraphs MacEvansCB Calibre 5 12-19-2010 02:46 PM


All times are GMT -4. The time now is 10:01 AM.


MobileRead.com is a privately owned, operated and funded community.