EPUB Compatibility

@page

@page

The @page CSS at-rule is used to modify the page margins in Adobe’s “Legacy RMSDK” (the one managing EPUB 2 files).

Margins applied in this rule will apply to any “screen” in paged views, unlike the ones set for html or body. It could therefore be used to apply extra margins to the web view or iframe for instance.

The @page at-rule can be accessed via the CSS object model interface CSSPageRule.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@page

@supports

@supports

The @supports CSS at-rule lets authors specify declarations that depend on a browser’s support for one or more specific CSS features. This is called a feature query.

It is critical for the advancement of modern CSS that implementers try their best at supporting this rule, especially when pre-processing EPUB files before distribution. It indeed is one of the very few mechanisms allowing authors to do progressive enhancement (layout, typography, etc.), especially as it helps get around older Reading Systems which have no concept of fault tolerance, and will consequently ignore the entire stylesheet if they encounter some of those more modern properties.

The hard truth is that if authors feel this is not well-supported, they won’t use it. It will then be a lot more difficult to make progress happen.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

Kobo

To declare an EPUB as a FLEPUB (Fixed-Layout EPUB), a file named com.kobobooks.display-options.xml must be present inside the EPUB’s META-INF folder (where the container.xml resides).

The contents of this display options file seem to always be:

<?xml version="1.0" encoding="UTF-8"?> 
<display_options> 
  <platform name="*"> 
    <option name="fixed-layout">true</option> 
  </platform> 
</display_options>

As of November 2011, FLEPUB supports embedded fonts, audio, JavaScript (partially), media overlays (smil). It doesn’t support video and SVG.

Apple

To declare an EPUB 2 file as fixed-layout or interactive, a file named com.apple.ibooks.display-options.xml must be present inside the EPUB’s META-INF folder (where the container.xml resides).

<?xml version="1.0" encoding="UTF-8"?> 
<display_options> 
  <platform name="*"> 
    <option name="specified-fonts">true</option> 
    <option name="interactive">true</option> 
    <option name="fixed-layout">true</option> 
    <option name="open-to-spread">true</option> 
  </platform> 
  <platform name="iphone"> 
    <option name="orientation-lock">landscape-only</option> 
  </platform> 
</display_options>

Calibre

Calibre is using specific metadata for sorting, series and rating.

This metadata has a calibre: prefix.

<meta content="Title of the Book, The" name="calibre:title_sort" />

<meta content="Title of the Series" name="calibre:series" />

<meta content="1.0" name="calibre:series_index" />

<meta content="10.0" name="calibre:rating" />

iBooks

iBooks is using specific metadata for embedded fonts, versioning, gaiji, scroll axis, and the EPUB3 files created with iBooks Author.

This metadata has an ibooks: prefix.

Authors must add the following prefix attribute in their <package> first:

prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/"

Then, they can use the ibooks-specific metadata.

<meta property="ibooks:version">1.0.0</meta>

<meta property="ibooks:specified-fonts">true</meta>

<meta property="ibooks:respect-image-size-class">className</meta>

<meta property="ibooks:scroll-axis">vertical | horizontal | default</meta>

<meta property="ibooks:format">RMT</meta>

Kindle

Kindle is using specific metadata for the primary writing mode and Fixed Layout – for both rendition and enabling FXL-specific features.

This metadata has no prefix.

Docs: Kindle Publishing Guidelines

Further details and undocumented metadata.

<meta name="primary-writing-mode" content="horizontal-rl"/>

<meta name="fixed-layout" content="true"/>

<meta property="rendition:layout">pre-paginated</meta>

<meta name="original-resolution" content="1024x600"/>

<meta name="orientation-lock" content="landscape"/>

<meta property="rendition:orientation">landscape</meta>

<meta name="book-type" content="children"/>

<itemref idref="blank-page" properties="layout-blank"/>

<meta name="regionMagnification" content="true"/>

iBooks writing mode

__ibooks_writing_mode

Values can be the ones for the CSS property writing-mode i.e. horizontal-tb, vertical-rl, or vertical-lr.

This attribute is used to style pagination and scroll, the “page” dimensions, and vertical-alignment of some elements.

Authors’ usage of this attribute is unknown.

iBooks theme

__ibooks_internal_theme

Values can be BKWhiteStyleTheme, BKSepiaStyleTheme, BKGrayStyleTheme, or BKNightStyleTheme.

This attribute is used to apply reading modes (background-color, color and filter).

A handful of authors have been using them as a replacement to alternate stylesheets in iBooks.

iBooks font-family override

__ibooks_font_override

Value can be true.

This attribute is used to indicate DOM elements for which the font-family must be changed when the user applies a typeface.

Authors’ usage of this attribute is unknown, but it may have set expectations and/or CSS hacks which aim is getting parts of the content not impacted by this user setting.

iBooks text-align override

__ibooks_align_override

Value can be true.

This attribute is used to indicate DOM elements for which text-align must be changed when the user sets justification preferences.

Authors’ usage of this attribute is unknown, but it may have set expectations (e.g. elements with text-align: right won’t be impacted).

iBooks respect image size (gaiji)

__ibooks_respect_image_size

Value can be true.

This attribute is used to style images which class have been explicitly set in the ibooks:respect-image-size-class meta.

Authors’ usage of this attribute is indirect since they set the class name for which this attribute must be added.

Column axis

-webkit-column-axis

Value can be auto, horizontal or vertical.

This CSS property can be used on iOS/Safari to force the column axis whenever needed. It allows the Reading App to lay out columns on the x-axis (horizontal) when the document is in a vertical-* writing mode for instance, which permits a two-column spread view as expected in print – CSS multicol being automatically laid out on the y-axis in those writing modes.

This property was removed from Blink in 2014.

It is noteworthy that columns, column-width, and column-count will be ignored when using this non-standard -webkit-column-axis property, and the width and height of the root (html) element will be used to lay out columns. Moreover, box-sizing may not work as expected, and impact padding and column-gap.

You can check this demo in Safari to see the effect this CSS Property has.

Column progression

-webkit-column-progression

Value can be normal or reversed.

This CSS property can be used on iOS/Safari to force the column progression whenever needed. It allows the Reading App to reverse the column progression for LTR documents in a RTL publication, and vice versa.

This property was removed from Blink in 2014.

You can check this demo in Safari and uncomment the CSS property in :root to see the effect it has.

Adobe text layout

adobe-text-layout

Values can be optimizeSpeed and (probably) optimizeLegibility, or auto.

Although this property and (especially) its values look closely related to text-rendering – so close that authors might have been using text-rendering instead –, it isn’t exactly the same.

At the time RMSDK 9.2 was released, this CSS property allowed authors to disable the typography enhancements, including hyphenation, by forcing the older text engine. It was thus primarily used to disable hyphenation, as some devices didn’t support adobe-hyphenate – and they could not disable hyphens for headings for instance.

Source: MobileRead Forums

Overflow scrolling

-webkit-overflow-scrolling

Values can be auto or touch.

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

Some authors may have been using this CSS property to improve the scrolling of overflowing elements, especially in fixed-layout.

Docs: Safari Docs

Non-breaking space mode

-webkit-nbsp-mode

Values can be normal or space.

The -webkit-nbsp-mode CSS property specifies the behavior of non-breaking spaces within an element.

This CSS property might pop up in files generated with the built-in MacOS’ (Cocoa) HTML generator.

Please note that although it might fix an issue in some languages like English, it might also create other issues in other languages, where non-breaking space shouldn’t be treated as a normal space (e.g. punctuation in French).

Docs: Safari Docs

Text fill

-webkit-text-fill-color

The -webkit-text-fill-color property defines the foreground fill color of an element’s text content e.g. headings or links.

Authors may have used this property to force a color for text in night mode, especially when targeting iBooks.

Text stroking

-webkit-text-stroke 
-webkit-text-stroke-color 
-webkit-text-stroke-width

The -webkit-text-stroke-color property specifies a stroke color for an element’s text, the -webkit-text-stroke-width property specifies the width of the stroke drawn at the edge of each glyph of an element’s text.

This can be used to achieve text with a stroked effect, or faux bolding, although this is pretty rare.

Background color and gradients

-webkit-linear-gradient()

The -webkit-linear-gradient() function must be treated as an alias of linear-gradient().

Some authors might have been using this to force a background-color in night mode. It would consequently be used in combination with -webkit-text-fill-color so that the text color is forced as well.

Mobile Text Size Adjustment

-webkit-text-size-adjust

The -webkit-text-size-adjust property allows control over the text inflation algorithm used on some mobile devices, many mobile browsers indeed apply a text inflation algorithm to make the text larger and more readable. By using this property, authors can simply opt out or modify this behavior.

Some web authors and/or authoring software might be using this property out of habit, but it actually breaks iBooks’ font-size user setting for instance. This should not be an issue in Readium CSS.

Docs: CSS Mobile Text Size Adjustment Module Level 1

Text decoration styling

-webkit-text-decoration-line 
-webkit-text-decoration-color 
-webkit-text-decoration-style

The -webkit-text-decoration-line CSS property sets the kind of decoration that is used on text in an element, the -webkit-text-decoration-color CSS property sets the color of the decorative additions to text and the -webkit-text-decoration-style CSS property sets the style of the lines.

There are standard unprefixed properties for these but some authors may have been using the -webkit- ones only.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text_Decoration

Hyphenation

adobe-hyphenate

Values can be none, explicit, or auto.

This must be treated as an alias of hyphens (with explicit as an alias of manual).

A very large part of authors have been using this CSS property to control hyphenation. It should not be an issue as they probably at least used -webkit-hyphens and -epub-hyphens in addition to this adobe-hyphenate CSS property.

Source: MobileRead Forums

Hyphenate limit

-webkit-hyphenate-limit-before 
-webkit-hyphenate-limit-after 
-webkit-hyphenate-limit-lines

The -webkit-hyphenate-limit-before CSS property indicates the minimum number of characters in a hyphenated word before the hyphenation character, the -webkit-hyphenate-limit-after CSS property indicates the minimum number of characters in a hyphenated word after the hyphenation character, and the -webkit-hyphenate-limit-lines CSS property indicates the maximum number of successive hyphenated lines in an element.

Those properties are standardized in CSS Text Module Level 4, but -webkit-hyphenate-limit-before and -webkit-hyphenate-limit-after have been replaced with the hyphenate-limit-chars CSS property.

Docs: CSS Text Module Level 4