Embedded SMIL

You have Embedded SMIL attributes, you are now ready to export to ePub. You will now need to crack open your ePub and do some editing.

Edit the xhtml files, removing the code marked with red.

“CharOverride-1” style=”position:absolute;top:4320px;left:3387.55px;letter-spacing:-0.78px;”>and </span><span id=”_idTextSpan106” class=”CharOverride-1” style=”position:absolute;top:4320px;left:3802.27px;letter-spacing:0.05px;”>thee.</span></p>

</div>

</div>

<div id=”_idContainer001”>

<img class=”_idGenObjectAttribute-1 _idGenObjectAttribute-2” src=”image/3.png” alt=”” />

</div>

<div id=”_idContainer002” class=”Basic-Graphics-Frame”>

<div id=”_idHTMLPageItem000”>

<object>

<div id=”f001” style=”position: absolute; top:0px;left:0px;height:12px;width:11px”></div>

<div id=”f002” style=”position: absolute; top:29px;left:0px;height:12px;width:199px”></div>

<div id=”f003” style=”position: absolute; top:43px;left:0px;height:12px;width:207px”></div>

<div id=”f004” style=”position: absolute; top:58px;left:0px;height:12px;width:192px”></div>

<div id=”f005” style=”position: absolute; top:72px;left:0px;height:12px;width:193px”></div>

<div id=”f006” style=”position: absolute; top:86px;left:0px;height:12px;width:220px”></div>

<div id=”f007” style=”position: absolute; top:101px;left:0px;height:12px;width:235px”></div>

<div id=”f008” style=”position: absolute; top:115px;left:0px;height:12px;width:192px”></div>

<div id=”f009” style=”position: absolute; top:130px;left:0px;height:12px;width:205px”></div>

<div id=”f010” style=”position: absolute; top:144px;left:0px;height:12px;width:222px”></div>

<div id=”f011” style=”position: absolute; top:158px;left:0px;height:12px;width:179px”></div>

<div id=”f012” style=”position: absolute; top:173px;left:0px;height:12px;width:205px”></div>

<div id=”f013” style=”position: absolute; top:187px;left:0px;height:12px;width:218px”></div>

<div id=”f014” style=”position: absolute; top:202px;left:0px;height:12px;width:181px”></div>

<div id=”f015” style=”position: absolute; top:216px;left:0px;height:12px;width:216px”></div>


</object>

</div>

</div>

</body>

</html>


Add some styling to the read aloud. Open the CSS file and add the following to the end of the file.

.-epub-overlay-active {

   border: 1px solid red;

}

.-epub-media-overlay-active {

   border: 1px solid red;

}


You will now need to edit the content.opf file.

<meta property="media:active-class">-epub-overlay-active</meta><!-- edit -->

</metadata>

<manifest>

<item id="SMIL-1" href="SMIL-1.xhtml" media-type="application/xhtml+xml" media-overlay="sspread0" properties="scripted"/>

<item id="sspread0" href="spread0.xhtml.smil" media-type="application/smil+xml"/><!-- edit -->

<item id="mspread0" href="media/spread0.mp3" media-type="audio/mpeg"/><!-- edit -->


You will need to edit the blue content to suit your needs.