Creator CSS margin attribute misbehaves

[EaglePt]

I'm a website developer, who's now trying to convert a PDF book to Kindle .mobi

The CSS margin attribute with em values has some nasty rendering effects.

margin-left/right: break Lists and spans!

margin-top and margin-bottom -- I don't see a linear relationship between the css em value and the rendering screen spacing!

What's a CSS coder to do?

Is there a CSS validation chart for mobi-reader?

Thanks, Peter

[Jellby]

Note that, strictly, mobipocket does not support CSS. At most, the converter can translate the input CSS into something that mobipocket supports...

[EaglePt]

For instance
---css ---
span {margin:0} /* watch out for strange interpetations */
.italics_fs { font-style: italic } /* This works */

---html----
<p>This is a test <span class="itatics_fs">to see what</span> happens.</p>

is mobi-equivalent to

<p>This is a test <i>to see what</i><br /> happens.</p>


-----------------
And defining

h1 {
font-size: 2.25em;
margin: 1.12em 0;
}

Does effect the font-size and margin for

<h1>This is a test</h1>


Also multiple class names for a element don't seem to be supported


I just don't know what the crazy rules are...



Your mobi dev doc (http://www.mobipocket.com/dev/articl...TagRef_OEB.htm) is not 100% accurate.

For instance, its says <div class="quoted-material">...</div>
is not supported -- but IT WORKS on my Kindle 2.

I'm a newbie here -- is there a pointer to the html/css quirks experiential lore?

[Jellby]

Originally Posted by EaglePt

For instance, its says <div class="quoted-material">...</div>
is not supported -- but IT WORKS on my Kindle 2.

One thing is what the mobi format supports, another thing is what the converter (mobipocket creator, calibre, whatever) can understand and translate to something supported by the mobi format. I'm 90% percent sure the above case is the latter, while the document I linked is concerned with the former.

For instance, the mobi format does not support top and bottom margins, it only has the concept of top margin, which is actually expressed as "height". A converter would read whatever margin you specify, converts the top margin to "height" and applies the bottom margin to the "height" of the next element. As far as I know, right margin is not supported at all, and left margin can only be translated as <blockquote>, and it cannot be changed. The "width" mobi property is actually equivalent to CSS "text-indent".

Your problem with "ems" could be related to the fact that the mobi format allows only integers to be used with "em" units.

[EaglePt]

Thanks, that explanation was very helpful.