SVG text with Read Aloud in iBooks

Many children's books or illustrated non-fiction titles utilize highly designed text that follows a curved path, especially for chapter headings. In the iBooks technical specification it is recommended that an SVG text path is used for such a feature. Although it is not specifically mentioned in the spec, it is perfectly possible, and very easy to use the SVG text paths in conjunction with iBooks' Read Aloud feature. Only a few minor adjustments are needed in the SVG code.

Marking up the SVG code

• Each SVG text element that is to be highlighted should be given a unique id. Depending on how the SVG has been created this may need to be implemented in different ways. For the highlighting of whole sentences you can place the ID in the <text> element. Or if you need to highlight individual words within a <text> element you can surround each word in a <tspan> tag and place the ID there.

• You then need to assign the style attribute fill= “currentColor” to each element that is to be highlighted. Fill is not a recognised CSS attribute, so this setting means that the SVG text inherits the value set in the color attribute, which obviously is. As a side note the currentColor setting can be used for a variety of other SVG attributes (see http://www.w3.org/TR/SVG/color.html).

• Then reference the ids in the correct place in the SMIL file and you're set.

Interestingly, I found that the Read Aloud highlighting also appears to work with the path itself. You could potentially use this ability to highlight or change the color of shapes on the page, which I can imagine being useful for some children's books.

Example

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
      width="250px" height="250px" viewBox="20 20 230 230">
        <path id="TextPath1" fill="none" stroke="none" 
         d="M60.456,117.962c0-34.988,28.363-63.351,63.352-63.351c34.987,0,63.353,28.363,63.353,63.351"/>
        <text>
            <textPath xlink:href="#TextPath1">
            <tspan id="word1" fill="currentColor">Read</tspan> <tspan id="word2" 
              fill="currentColor">Aloud!</tspan>
            </textPath>
        </text>
    </svg>

Things that don't work

• Putting the fill='currentColor' in a <style> tag in the head of the SVG. It appears that it needs to be defined within each highlightable element.
• This won't work on the Kobo Vox. Although it does support Read Aloud it doesn't support SVG text paths.

Further info

• Info on SVG in relation to EPUB
• EPUB guru Liz Castro's site, where you can purchase her excellent mini-guide to Read Aloud in iBooks: http://www.pigsgourdsandwikis.com/