View Full Version : Float Question (ADE)


Tex2002ans
04-15-2013, 03:27 PM
I am currently working on a book which has formula numbers down the right hand side of the page.

In ADE, it seems to drop the formula number down a line, instead of floating to the right edge of the same line. (Sigil looks as I expected).

I was wondering if anyone out there has run into this same problem, and what sort of code they used to fix the situation.

Currently, I am using this code:

<p class="center margintop">Formula Formula Formula <span class="floatright">(##)</span></p>

Where the relevant CSS:

.center {
text-indent: 0;
text-align: center;
}

.margintop {
margin-top: 1em;
}

span.floatright {
float: right;
}


I have attached four things to this post:


image of the original book
the way my EPUB currently looks in ADE (marked with arrows)
the way it looks in Sigil (marked with arrows)
WIP EPUB

GrannyGrump
04-16-2013, 01:50 AM
I know everybody scowls and tries to avoid them, but have you considered using two-column tables for these? Without borders, if so desired, but maybe using a "dotted" bottom border on the cells could substiture for the dot-leaders in the original book.

Ok, silly answer. Just brain-storming.

Tex2002ans
04-16-2013, 03:06 AM
I know everybody scowls and tries to avoid them, but have you considered using two-column tables for these?

Meh, the thought has passed through my mind, but float is the way to handle this (as you can see it looks beautiful in Sigil!), now with the help of MobileRead, I just have to figure out how to beat ADE into submission! :rofl:

This is maybe the 8th book I have run into with this dilemma.

I can't be the only one who has run into this same problem when converting to EPUBs/MOBIs.

Ok, silly answer. Just brain-storming.

No answer is a silly answer! (ok ok that was a lie :rofl:)

GrannyGrump
04-16-2013, 03:44 AM
No answer is a silly answer!
/snicker/


I hope you find a solution, I will absolutely steal it!

mzmm
04-16-2013, 06:04 AM
ha, i just ran into this problem in a book i'm working on literally 10 minutes ago. in the past i've broken up the numbers and the corresponding text into 2 elements, and then added the floated element above the non-floated element in the html. seems to work across readers, but if someone had a saner solution i'd be grateful for it.

here's what i'm using now to float a number inline with a block of text:

<p style="float:right;">(##)</p>

<p>here's some text with a number floated to the right of it</p>

Agama
04-16-2013, 07:26 AM
Here's an ePub showing both float left and right.
I use spans in the paragraph but they are both defined before the text of the paragraph, (otherwise they don't float properly.) Works with my Sony reader which is ADE based. (I think this is really the same as mzmm's solution, but I prefer using span.)

.cen { text-align:center }
.fll { float:left }
.flr { float:right }

<p class="cen"><span class="fll">1</span><span class="flr">1</span>Text</p>

Tex2002ans
04-16-2013, 06:29 PM
I hope you find a solution, I will absolutely steal it!

Impossible to "steal" something which is intangible!! Are we not all here to make better ebooks?

But feel free to copy/emulate what we learn here in this topic!

Also, feel free to also take a look at any of the 100+ books I have worked on over the past year (almost all Non-Fiction Economics books) and give comments/tips/suggestions. It will be much appreciated.

I also must begin compiling all these tips/tricks I have absorbed from the forums into one ultimate resource. Sometimes these goodies just disappear into the abyss... never to be seen again!

ha, i just ran into this problem in a book i'm working on literally 10 minutes ago.

Oh? Which book?

here's what i'm using now to float a number inline with a block of text:

<p style="float:right;">(##)</p>

<p>here's some text with a number floated to the right of it</p>

Thanks, but I was aiming more for the "one line" solution.. although this looks to be viable as well.

Here's an ePub showing both float left and right.
I use spans in the paragraph but they are both defined before the text of the paragraph, (otherwise they don't float properly.) Works with my Sony reader which is ADE based. (I think this is really the same as mzmm's solution, but I prefer using span.)

I spent a few minutes on Agama's test EPUB, and I believe I have figured out what the problem is:

This code works fine in ADE (as Agama's EPUB shows) (See Image 1):

<p class="cen"><span class="fll">(1)</span> <span class="flr">(1)</span> A lot more text than normal Text</p>

This code does not work fine in ADE (See Image 2):

<p class="cen"><span class="fll">(1)</span>A lot more text than normal Text <span class="flr">(1)</span></p>

I even tried this (no space), but it was also dropped down a line:

<p class="cen"><span class="fll">(1)</span>A lot more text than normal Text<span class="flr">(1)</span></p>

Quite frustrating... I wanted the formula number to still be on the right side if the floating failed.... now it seems as if I will have to move them all to the beginning of the formula to appease the ADE gods.

GrannyGrump
04-17-2013, 12:37 AM
For another way to set it up with two separate paragraphs, check out Toxaris' suggestion in this thread: http://www.mobileread.com/forums/showthread.php?t=208541
If you adjust the width, it allows two paragraphs side-by-side.

Tex2002ans
04-17-2013, 01:33 AM
Gremlins at work?....

I hate those gremlins... and your edit, isn't that solution exactly what I just wrote in my post? :rofl:

For another way to set it up with two separate paragraphs, check out Toxaris' suggestion in this thread: http://www.mobileread.com/forums/showthread.php?t=208541
If you adjust the width, it allows two paragraphs side-by-side.

Thank you, could be something else to put in my back pocket.

Hmmmm... trying to get text boxes eh? This is some CSS I stripped out of a book I purchased/read, and now I use it all the time in my own EPUBs if I ever need to recreate a box (see attached image for how it looks):

div.textbox {
background-color:#D1D3D4;
border-bottom: 3px double;
border-top: 3px double;
border-left: 3px double;
border-right: 3px double;
padding: 1em;
line-height: 1.7em;
text-align: center;
}

I think it looks quite good on eink as well. Of course, you could cut out the grey background for your own purposes, and just stick with the nice box.

GrannyGrump
04-17-2013, 02:10 AM
isn't that solution exactly what I just wrote in my post?
Yup. I realized that 10 minutes later. Moral, don't try to post from work while you are answering phones. Confusion reigns. And when you are easily confused to begin with, it is a lose-lose situation. :o

I like the text box, I will be trying that out soon. Thank you.

Tex2002ans
04-17-2013, 02:53 AM
Yup. I realized that 10 minutes later. Moral, don't try to post from work while you are answering phones. Confusion reigns. And when you are easily confused to begin with, it is a lose-lose situation. :o

Do they know you are doing this at work? Unacceptable! (I take forum breaks all the time at work as well.)

I like the text box, I will be trying that out soon. Thank you.

Great. I am so glad when I run into something cool in EPUBs that I read, because I can then just go take a look at the CSS and begin using it in my own.

I also love/hate when the publishers have those huge CSS files that they stick in the EPUB.... lots of classes to mess around with in there to figure out what they do.

Agama
04-17-2013, 03:29 AM
This code works fine in ADE

<p class="cen"><span class="fll">(1)</span><span class="flr">(1)</span>A lot more text than normal Text</p>

If this code works then why can't you use it?

or, since you only want the right float:

<p class="cen"><span class="flr">(1)</span>A lot more text than normal Text</p>

I would also use .flr { float:right; padding-left:2em } to ensure that the float is separated from the main text.

Tex2002ans
04-17-2013, 04:01 AM
If this code works then why can't you use it?

I was just clarifying the sections in red in my "don't work" examples. (Compared with the code that DOES work from your EPUB test).

I would also use .flr { float:right; padding-left:2em } to ensure that the float is separated from the main text.

Fantastic, I will definitely have to do more testing in the coming days with padding/margins and see if I can get something that satisfies me.

Thank you.

mzmm
04-18-2013, 06:23 AM
Impossible to "steal" something which is intangible!! Are we not all here to make better ebooks?

But feel free to copy/emulate what we learn here in this topic!

+1


Thanks, but I was aiming more for the "one line" solution.. although this looks to be viable as well.

Oh? Which book?

it's 1000+ page biannual income-tax guide book, would post some samples but it's copyrighted.

although floating numbers inline hadn't occurred to me, think i still personally prefer separating them into discreet blocks. because there are so many back-references in the book i was working on, i end up with things like

<p class="paragraph_number"><a id="ref300"/><span class="bold underline">300</span></p>

good to hear that you found a solution though!

Tex2002ans
04-18-2013, 01:33 PM
it's 1000+ page biannual income-tax guide book, would post some samples but it's copyrighted.

1000+ pages... brutal. Hopefully you are working right from the source though? That makes things a million times easier.

My job involves mostly working from the dreaded PDF scans. Whenever I get to work right from the original InDesign files/Word Documents it is like music to my eyes.

This EPUB of "The Economics of Inflation: A Study of Currency Depreciation in Post-War Germany" by Constantino Bresciani-Turroni was 464 pages of pure....... "fun".

I am telling you, the Typesetter/Publisher in 1937/1968 decided, "let us pick the WORST POSSIBLE everything to make Tex2002ans's conversion hell". :rofl:

Hopefully my sacrifice is worth it though, I do this conversion once, and create a nearly 100% accurate conversion of the text. This EPUB/XHTML version will then be released for free online, for anyone to read/search/copy/paste/influence/learn from in the far future. :)

good to hear that you found a solution though!

Thank you, hopefully others can use this as well.

Over the coming days, I will have to test this + the two line solution, and have to see how all of these look on the Kindle versions as well, and/or how gracefully it fails (if float is not available).

I will be sure to report any updates here.

Notjohn
08-02-2013, 11:51 AM
div.textbox {
background-color:#D1D3D4;
border-bottom: 3px double;
border-top: 3px double;
border-left: 3px double;
border-right: 3px double;
padding: 1em;
line-height: 1.7em;
text-align: center;
}

I think it looks quite good on eink as well. Of course, you could cut out the grey background for your own purposes, and just stick with the nice box.

What does "double" accomplish here, a double line with each line 3 pixels wide?

Thanks for this!

theducks
08-02-2013, 12:06 PM
What does "double" accomplish here, a double line with each line 3 pixels wide?

Thanks for this!

double is one of the possible line styles (there are others :D )

RbnJrg
08-02-2013, 01:25 PM
Just now I read your post. I don't know if you've already solved your problem but if you're still looking for a solution, this is mine:

1. In your .css stylesheet, write the following:


.container {
display: block;
margin: 1.5em 0;
text-indent: 0;
text-align: center;
}

.formula {
font-family: serif; /* feel free to change this property */
font-size: 1.2em; /* feel free to change this size */
font-weight: normal; /* use bold here if you wish */
font-style: italic; /* use normal here if you wish */
padding: 0.25em 0.5em;
background: #FFFFBF; /* change the color if you wish */
}

.number {
float: right;
font-family: serif; /* feel free to change this property */
font-size: 1.2em; /* feel free to change this size */
font-weight: bold; /* use normal here if you wish */
padding: 0 16px 0px 10px;
margin: 0 0 0 -0.2em;
}

p {
font-family: sans-serif; /* feel free to change this property */
font-size: 1em;
margin: 0;
text-align: justify;
text-indent: 0;
}

p + p {
text-indent: 1em;
}


2. In your .html file, write the following:


<p>...Some text here ... </p>

<p class="container"><span class="number">(1)</span><span class="formula">C = π r˛</span></p>

<p>...Some text here ... </p>


Of course, your formulas will be different :)

VERY IMPORTANT: The class "number" MUST BE FIRST than class "formula". That is the key in order that the number and the formula are in a same line.

Below you can see a screenshot of my ADE and the respective epub.

Regards
Rubén

Tex2002ans
08-02-2013, 06:23 PM
What does "double" accomplish here, a double line with each line 3 pixels wide?

Thanks for this!

No problem. The different border types can be found here:

http://www.w3schools.com/cssref/pr_border-style.asp

There is also border-width:

http://www.w3schools.com/cssref/pr_border-width.asp

And here is a nice test where you can test the different types:

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-width



Just now I read your post. I don't know if you've already solved your problem but if you're still looking for a solution, this is mine:

Thank you! Yes, it was solved by Agama in this topic by placing the floating number to the left of the actual formula, then floating right (just as you have).

I was planning on updating this topic the next time I took a look at that EPUB (I think my employer has it as one of the upcoming projects). I put it on hold to fix this bug, and haven't touched it since.

eping
08-02-2013, 10:34 PM
When will Adobe fix this stupid bug? and many other silly ugly bugs?