Apple Books supports both right-to-left and left-to-right text direction, defined with the dir
attribute on the <package>
element, as described in the EPUB 3 standard: dir attribute.
Apple Books also supports both vertical and horizontal text directions using the CSS 3 Writing Modes as outlined in the EPUB 3 standard. Text direction (horizontal and vertical) is defined by the CSS writing-mode
property. The writing-mode
must be set on the <body>
or <html>
element instead of setting it on a descendent element. Supported values include: horizontal-tb
(horizontal top-to-bottom), vertical-rl
(vertical right-to-left), and vertical-lr
(vertical left-to-right). Each content document can support a single writing-mode
value. If you want both horizontal and vertical text in your book, then each text direction must be split into separate content documents.
html {
-epub-writing-mode: vertical-rl;
}
Important: If you want to use a Japanese font that is available in macOS or iOS, it is strongly recommended that you use Hiragino Kaku ProN and Hiragino Mincho ProN as both are pre-installed for the reader. YuGothic, YuMincho, and Hiragino Maru Gothic ProN require the reader to download the font from the Apple Books Font menu before the font is available for use.
For information on scrolling with vertical text, such as Japanese and Chinese, see Scrolling in Flowing Books.
Note: Tatechuyoko must be created using the CSS property -webkit-text-combine
, not the CSS property writing-mode
. See the Tatechuyoko section, below.
If the table of contents in the Apple Books menu needs to be rendered vertically as opposed to horizontally, the text direction must be specified for the table of contents in the navigation document.
In vertical text, it is sometimes preferable to include a short run of horizontal numbers or Latin text known as Tatechuyoko. To create Tatechuyoko, you must use the CSS property, -webkit-text-combine
. For example:
In the CSS:
.number {
-webkit-text-combine: horizontal;
}
In the HTML of the page:
<span class="number">50</span>