03-17-2011, 06:45 AM | #1 |
Guru
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 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. |
03-17-2011, 06:50 AM | #2 |
Chocolate Grasshopper ...
Posts: 27,600
Karma: 20821184
Join Date: Mar 2008
Location: Scotland
Device: Muse HD , Cybook Gen3 , Pocketbook 302 (Black) , Nexus 10: wife has PW
|
Welcome to Mobileread - assuredly an expert will drop in shortly .... |
Advert | |
|
03-17-2011, 06:58 AM | #3 |
Fanatic
Posts: 541
Karma: 1152752
Join Date: Aug 2010
Location: Evansville, IN, USA
Device: Samsung Galaxy Tab 4 Nook & Samsung Galaxy Tab S 10.5
|
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. |
03-17-2011, 07:41 AM | #4 |
eBook Enthusiast
Posts: 120
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.)
|
03-17-2011, 08:52 AM | #5 |
Enquiring Mind
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. |
Advert | |
|
03-21-2011, 03:53 PM | #6 |
Guru
Posts: 932
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. |
03-21-2011, 04:22 PM | #7 |
Resident Curmudgeon
Posts: 73,645
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
03-22-2011, 05:22 AM | #8 | |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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> Code:
div.toright { text-align: right; } div.toright * { text-align: left; } p#block_1 { width: 20em; } |
|
03-22-2011, 08:42 PM | #9 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Try adding a "display: block;" to your CSS. That should help it float.
Dale |
03-02-2012, 12:05 AM | #10 |
Guru
Posts: 932
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> 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; } 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; } 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; } 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; } 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 Last edited by Iznogood; 03-02-2012 at 01:51 PM. |
Thread Tools | Search this Thread |
|
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 |