control div box, page breaks and margins?

[Lancelot]

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!

[RbnJrg]

Originally Posted by Lancelot

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?

[Tex2002ans]

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:

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:

 <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:



Here are images of it in action:



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: https://www.mobileread.com/forums/sho...25&postcount=9

[mrmikel]

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.

[Tex2002ans]

Originally Posted by mrmikel

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.

Originally Posted by mrmikel

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.