Site Tools


eBook CSS Support

CSS KF8 KF8 iOS mobi7 iBooks kobo nook ADE
@import yes yes ?
@font-face yes yes no yes yes? yes
* yes yes no? ?
parent > child yes yes no? yes
sibling + sibling yes yes no yes tablet yes
*[epub:type] no no no yes
:after,:before yes* no no yes no no
:first-of-type yes yes no yes
background-color yes yes yes-ish* yes no
border yes yes no yes no no
border-radius yes ? yes
box-shadow yes yes yes
display yes yes yes
display: box (-webkit-box, etc.) no
display: table yes no
letter-spacing yes yes no? yes
list-style yes no no yes no no
list-style-type yes no no yes no no
max-width yes-ish no no no
max-height yes-ish
padding yes yes yes
page-break-after yes ? no yes yes no
position:absolute yes* ? no? yes
position:relative yes* yes* no? yes
text-align yes yes yes yes no
text-transform yes yes yes split no no
width yes yes yes-ish yes yes yes yes
CSS KF8 mobi7 iBooks kobo nook
CSS color values (ex. blue, red) yes yes yes
rgb() color value yes yes yes
rgba() color value yes no yes no
Units KF8 mobi7 iBooks kobo nook
vh no yes
em yes yes yes yes yes
Media Queries KF8 mobi7 iBooks kobo nook ADE
@media yes yes? yes no no
@media amzn-kf8 yes no n/a n/a n/a n/a
@media amzn-mobi no yes n/a n/a n/a n/a
@media (monochrome) no no n/a
  • KF8 site claims it does not, but internal tests prove otherwise.
References:

Device Overrides and Known Issues

Below are a list of known overrides and issues with certain styling.

Adobe Digital Editions (affects Bluefire Reader and ADE apps)

  • ADE will remove all custom styles if your CSS file has any validation errors
  • ADE will remove all custom styles if your CSS file has any media queries in it. We’ve filed this as a bug with Adobe but don’t know of a fix date.

kf8

  • <a> tags can only have text-decoration: none; set with an inline style. Creatavist does not automate this, so you cannot remove text-decoration:underline on links
  • text-rendering: optimizeLegibility; will break CSS rendering on the regular e-ink device (non-Paperwhites)

mobi7

kindlegen converts your CSS stylesheet to inline styles for mobi7, so all styles are inlined when the file is read in a kindle device.

  • When an <ol> follows an <h*> element, the first numeral picks up the styling of the heading. Creatavist solves this by including: <div class="mobi7only" style="height: 0px;"></div> between the two elements
  • mobi7 doesn’t accept css using decedents (ex. div p {})
  • <a> tags can only have text-decoration: none; set with an inline style. Creatavist does not automate this, so you cannot remove text-decoration:underline on links
  • mobi7 frowns on styling <p> tags with color. Really try to avoid it, and if you think you have to, get ready to use !important (and then some).

iBooks

  • <a> tags have overridden color styles. We provide spans with a class of a.inner inside all links to help with styling.
/* to style link colors in ibooks epub */
a .a-inner {
    color: blue;
}
  • iBooks does not support width being applied to an <img> tag itself. You should apply it to its container. See our markup patterns for specific use cases.
  • iBooks for iOS has minor issues with width: 100% being applied to the <body> element
ebook/css.txt · Last modified: 2014/04/02 13:03 by derrick

User Tools