Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Kindle Formats

Notices

Reply
 
Thread Tools Search this Thread
Old 10-01-2010, 12:27 PM   #1
EaglePt
Junior Member
EaglePt began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Sep 2010
Device: kindle
Question CSS margin attribute misbehaves

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
EaglePt is offline   Reply With Quote
Old 10-01-2010, 01:53 PM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,308
Karma: 4898871
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Note that, strictly, mobipocket does not support CSS. At most, the converter can translate the input CSS into something that mobipocket supports...
Jellby is offline   Reply With Quote
 
Advertisement
Old 10-01-2010, 04:17 PM   #3
EaglePt
Junior Member
EaglePt began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Sep 2010
Device: kindle
but mobipocket creator DOES interpret some CSS

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?
EaglePt is offline   Reply With Quote
Old 10-02-2010, 06:05 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,308
Karma: 4898871
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by EaglePt View Post
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.
Jellby is offline   Reply With Quote
Old 10-03-2010, 07:44 AM   #5
EaglePt
Junior Member
EaglePt began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Sep 2010
Device: kindle
Thanks, that explanation was very helpful.
EaglePt 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
Error parsing attribute name? seagull Calibre 1 01-01-2010 12:30 PM
Attribute error? jusmee Calibre 2 12-15-2009 09:22 PM
calibre ignore margin-top and margin-bottom bender Calibre 2 12-11-2009 07:58 AM
Using the width attribute crutledge Workshop 8 07-06-2009 06:10 AM
Qs about the objid attribute DanielCoffey LRF 1 06-29-2009 08:12 AM


All times are GMT -4. The time now is 08:58 PM.


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