Keep the following best practices on presentation in mind when developing your book.
To prevent text from being clipped by the bounds of the content area, insert soft hyphens into long words and especially into linked text and headings. Soft hyphens are described in detail in the Text section of the HTML 4.01 Specification.
Page breaks are supported in flowing books. if you include page breaks to mark a chapter break, use page-break-after to create a break at the end of a chapter, not page-break-before to insert the break at the beginning of the chapter. This modification improves performance with the table of contents.
To indicate that a page break should come before or after an element, set up a style in CSS using the page-break-before or page-break-after properties. Accepted values for these properties include:
auto: Insert a page break before or after the element as necessary
always: Insert a page break before or after the element
Below is an example of a CSS style to add a page break before all text styled as a heading 1:
h1{page-break-before:always;}Custom text colors are supported when the reader selects dark themes. To have Apple Books display custom text colors with dark themes, use class="ibooks-dark-theme-use-custom-text-color". Make sure that any text customization adheres to accessibility guidelines. See Accessibility for information.
The following example shows how to support custom text colors with dark themes.
<html> <head> <style> :root { color-scheme: light dark } @media (prefers-color-scheme: dark) { p { color: white; } code { color: oldlace; } code.comment { color: aquamarine; } code.keywork { color: darkorchid; } code.text { color: gray; } code.variable { color: deepskyblue; } } @media (prefers-color-scheme: light) { p { color: black; } code { color: darkslategray; } code.comment { color: green; } code.keywork { color: magenta; } code.text { color: gray; } code.variable { color: dimgray; } } </style> </head> <body> <!-- Other content --> <div id="content" class="main"> <h3>Main Content Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <!-- The following DIV uses custom text colors with dark themes. --> <div id="code-sample-1" class="ibooks-dark-theme-use-custom-text-color"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <code> <code class="comment">// Source Code Comment Line </code> <br/> <code class="keyword">function</code> <code class="variable">function-name</code>() { <code class="keyword">return</code> <code class="variable">variable-name"</code> ; } </code> </div> </div> </body></html>When a reader selects a dark theme, child elements in the container inherit the designated colors.
If you do not specify class="ibooks-dark-theme-use-custom-text-color", Apple Books uses white text when a reader selects a dark theme.