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 09-20-2013, 10:31 AM   #1
Lancelot
Enthusiast
Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!Lancelot , Klaatu Barada Niktu!
 
Posts: 28
Karma: 5010
Join Date: Apr 2011
Device: none
control div box, page breaks and margins?

Hi All,
I searched the web and can't seem to find any answer on this...maybe i'm looking for the wrong thing...but I'm using div.box in CSS with a background color to contain a sidebar text. The issue is text is reflowing and creates "unpleasant" visual with text align to top or bottom of the box. If there a way to add margin where the box is breaking? So at least text looks center?


Thanks!
Lancelot is offline   Reply With Quote
Old 09-20-2013, 01:53 PM   #2
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 472
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Lancelot View Post
Hi All,
I searched the web and can't seem to find any answer on this...maybe i'm looking for the wrong thing...but I'm using div.box in CSS with a background color to contain a sidebar text. The issue is text is reflowing and creates "unpleasant" visual with text align to top or bottom of the box. If there a way to add margin where the box is breaking? So at least text looks center?


Thanks!
Could you post an image of the box and the text with the issue you mention?

Last edited by RbnJrg; 09-21-2013 at 09:57 AM.
RbnJrg is offline   Reply With Quote
 
Advertisement
Old 09-20-2013, 11:08 PM   #3
Tex2002ans
Fanatic
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 530
Karma: 562971
Join Date: Jul 2012
Device: Nook
I second what RbnJrg said. Pictures would really help solidify exactly what you are trying to fix. Code samples are also great additions when wanting help! (Feel free to substitute in bogus text if there are copyright issues).

Also, keep in mind "degrading gracefully" if floating boxes do not work on the device (think old Kindle), and also keep in mind devices which users read on can be quite small (think cellphone).

Here is a CSS floatbox that I used in one EPUB:

Code:
span.floatright, span.floatleft {
	font-size: 75%;
	font-weight: bold;
	padding-bottom: 15px;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 0px;
	width: 25%;
	float: right;
	text-indent: 0;
}
Here is sample code:

Code:
 <p><span class="floatleft">Under perfectly stationary conditions the stock of non-permanent resources would be identical with the stock of produced means of production.</span> As has already been remarked, most non-permanent resources owe their existence to the fact that they make investment possible without a temporary reduction in the income stream. All or nearly all the man-made equipment is non-permanent, and the greater part, although by no means all, of the non-permanent resources existing at any moment consists of man-made equipment. This brings us back to the relation of my definition of capital as the “stock of non-permanent resources” to the traditional one of the “produced means of production”.</p>
Here is an image of the original page:

Click image for larger version

Name:	OriginalSidebar.png
Views:	45
Size:	67.9 KB
ID:	111685

Here are images of it in action:

Click image for larger version

Name:	SigilSidebar.png
Views:	51
Size:	59.8 KB
ID:	111687 Click image for larger version

Name:	ADESidebar.png
Views:	54
Size:	68.9 KB
ID:	111688 Click image for larger version

Name:	KindleDegradationSidebar.png
Views:	55
Size:	26.5 KB
ID:	111686

I have attached the actual WIP EPUB if anyone wants to take a look at it.

Edit: Also, this might look nice combined with the textbox code I used here: http://www.mobileread.com/forums/sho...25&postcount=9

Last edited by Tex2002ans; 09-20-2013 at 11:32 PM.
Tex2002ans is offline   Reply With Quote
Old 09-21-2013, 08:10 AM   #4
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
The textbox code works well in the Sony Library at small and medium text sizes, but runs off the edge of the page in large text size.

But for me, it is good enough, in most cases.
mrmikel is offline   Reply With Quote
Old 09-21-2013, 05:38 PM   #5
Tex2002ans
Fanatic
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 530
Karma: 562971
Join Date: Jul 2012
Device: Nook
Quote:
Originally Posted by mrmikel View Post
The textbox code works well in the Sony Library at small and medium text sizes, but runs off the edge of the page in large text size.
Thank you for testing and letting me know.

There is a certain point where you just cannot shove a HUGE word in "25%" width.

It is a balance between making it match the look of the original source, or getting all the information in there displayed. Usually information in floating boxes are not THAT important.

In the case of that "falling back" on Kindle, it worked out great. It matched the look of some of his earlier books, where the bold words were at the beginning of the paragraphs.

There is also this code I stumbled upon a while back, but haven't had the chance to test:

http://www.natashafondren.com/writin...ndle-format-8/

Although for me, it seems to be quite unmaintainable code.

Quote:
Originally Posted by mrmikel View Post
But for me, it is good enough, in most cases.
Indeed, which is why I settled on that code.

If anyone else has any other floating box examples they use, feel free to post! Then we can all start using it to make our EPUBs better.
Tex2002ans 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
Calibre breaks image/div margins dasboeh ePub 9 12-21-2012 02:15 PM
PRS-T1 PRS-T1 - Changing page margins prevents 'touch' page turning Berzelius Sony Reader 2 08-24-2012 05:02 AM
Paragraph breaks when removing margins Canorka Conversion 3 03-30-2012 03:00 AM
epub to mobi h1 page breaks not starting on new page wannabee Conversion 4 08-02-2011 01:46 AM
Adding page breaks in Calibre breaks ePubcheck validation bookraft Conversion 16 03-01-2011 02:23 PM


All times are GMT -4. The time now is 02:24 PM.


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