The EPUB format is based on consistent formats and file types (called Core Media Types) like HTML, CSS, JPEG, and PNG, which allows every reading system (device, app, etc.) to open an EPUB file and display its content more easily. However, there are times when a content creator (you!) wants to include some files in their EPUB that are not in one of those standard formats, or wants to include content that may not be supported in all reading systems (like MathML and JavaScript). For these instances, the EPUB spec includes a few different methods for allowing you to include non-standard resources in your EPUB file while still ensuring that it is valid. This is done with fallbacks — methods for telling the reading system what do to if it is unable to use the non-standard resource you included.
These fallbacks fall into three different categories:
As mentioned above, all of the files used in your EPUB have to be in a Core Media Type format. If your EPUB includes resources of other types, you must always define a "fallback" item that is a Core Media Type. Or, if the fallback you define is not a Core Media Type, then it must define a fallback, and the chain of fallbacks must end in an item that is a Core Media Type.
For EPUB 2 files, the Core Media Types are listed here.
For EPUB 3, they are listed here.
As an example, let's say your EPUB includes an XPGT for styling. Since XPGT is not a core media type, you will need to specify a CSS file as the fallback (assuming you want to keep it in — in most cases XPGT is useless and not recommended). This is done in your OPF file, and it should look like this:
<manifest> ... <item id="xpgt_styles" href="styles.xpgt" media-type="application/vnd.adobe-page-template+xml" fallback="css_styles"/> <item id="css_styles" href="styles.css" media-type="text/css"/> ... </manifest>
Note the fallback="css_styles". There is an item with the ID "css_styles", so reading systems can use that item as a fallback for the XPGT file. This markup is the same in both EPUB 2 and EPUB 3.
HTML and CSS include some standard fallback methods, and these can be used in some circumstances in EPUB. The most common example of an intrinsic fallback is in <video> and <audio> elements (see the Handbook entry). In the example below, the fallback is the image and the text:
<video id="video01" src="audiovideo/myvideo.mp4" controls="controls" poster="images/myvideo.png"> <img src="images/myvideo.png" alt="An important video" /> <p>There is video content at this location that is not currently supported on your device. Please visit our website, <a href="http://www.example.com">www.example.com</a>, to watch the videos on your computer.</p> </video>
Note that the EPUB 3 specification states that the intrinsic fallback must point to a Core Media Type, and that "flow content" (text, etc.) is not considered a Core Media Type. This means that you cannot just have text in the fallback area. Also, note that it would be acceptable to nest multiple <video> elements inside each other, all pointing to different video formats, as long as the fallback in the last element points to a Core Media Type.
Some reading systems may not support these fallbacks, so be sure to test your EPUB in FlightDeck and look at the Retailer Acceptance Grid to verify that your file will be accepted by all of your target retailers.
Embedded Fonts (see the Handbook entry) have a fallback method that is built into the CSS spec. This is done by specifying fonts in order of priority in the font-family property set on an element. For example, in the CSS code below the p.title is applying the embedded "Crimson Text" font first, then falling back to the reading system's default serif font. This allows the reading system to easily apply a font regardless of whether it supports the embedded font.
@font-face {
font-family: "Crimson Text";
src: url('fonts/CrimsonText-Roman.otf');
font-weight: normal;
font-style: normal;
}
....
p.title {
font-family: "Crimson Text", serif;
font-size: 3.5em;
margin-top: 20%;
font-weight: bold;
text-align: center;
text-indent: 0;
}
EPUB also includes a method for specifying fallbacks for different kinds of content inside HTML files called Content Switching. Content Switching allows you to include fallbacks for special content like MathML, JavaScript, and SVG that can help your file be read in older reading systems or in systems that have unique support for non-standard markup. This functionality is present in both EPUB 2 and EPUB 3, but the only retailer that currently supports it is Kobo. There is also some discussion in the EPUB working group about potentially removing epub:switch from the spec, so it would probably be best to find another fallback method instead.
The examples below are all coded as they would appear in EPUB 3. In EPUB 2, you would use the "opf" prefix in place of the "epub" prefix (i.e., <opf:switch id="mathmlSwitch"> in the example below).
Here is an example of Content Switching from the EPUB 3 specification:
<epub:switch id="mathmlSwitch">
<epub:case required-namespace="http://www.w3.org/1998/Math/MathML">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mn>2</mn>
<mo> ⁡<!--INVISIBLE TIMES--></mo>
<mi>x</mi>
</mrow>
<mrow>
<mo>+</mo>
<mi>y</mi>
<mo>-</mo>
<mi>z</mi>
</mrow>
</math>
</epub:case>
<epub:default>
<p>2x + y - z</p>
</epub:default>
</epub:switch>
In this example, the switch is used to give the preferred content to be used for the equation (the MathML in the <epub:case> element), and the fallback method that should be used if MathML is not supported (in the <epub:default> element).
Whenever you add epub:switch to a document, you must also include the properties="switch" attribute to that HTML document's manifest item in the OPF file. In this case, since we are also using MathML in this HTML document, we need to also include the mathml value in that attribute.
<manifest> ... <item id="chap01" href="chap01.xhtml" media-type="application/xhtml+xml" properties="switch mathml"/> ... </manifest>
Because of the lack of support for the epub:switch element in older reading systems, Kobo suggests wrapping everything except the default content in HTML comment tags, like this:
<!--<epub:switch id="mathmlSwitch">
<epub:case required-namespace="http://www.w3.org/1998/Math/MathML">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mn>2</mn>
<mo> ⁡<!--INVISIBLE TIMES--></mo>
<mi>x</mi>
</mrow>
<mrow>
<mo>+</mo>
<mi>y</mi>
<mo>-</mo>
<mi>z</mi>
</mrow>
</math>
</epub:case>
<epub:default>-->
<p>2x + y - z</p>
<!-- </epub:default>
</epub:switch>-->