Using locally available and embedded fonts
When defining a textformat style, you can specify the font to be used using the font node. You may specify one or more font names separated by commas. Similar to HTML, the first locally available (system) font in this comma separated list will be used.
You may also specify a url attribute for the font node to dynamically load an embedded font. The framework will automatically load the embedded font from this url and makes it available for all text rendered on screen. Make sure the value of the font node corresponds with the class name the font is embedded under. You will need to have the embedfonts node of the textformat style set to true.
Please note! If you have embedfonts set to true but no url attribute specified the framework will assume that the font is embedded and available in your application.
SMXML
<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/smxml.dtd">
<composer>
<style>
<textformat style="leftTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>0</embedfonts>
<font>Helvetica, Arial, Verdana</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0xffffff</selectedcolor>
<selectioncolor>0xff0000</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
<textformat style="rightTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>1</embedfonts>
<font url="http://samplemath.com/smxml/font/testfont.swf">testfont</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0xffffff</selectedcolor>
<selectioncolor>0xff0000</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<textblock x="20" y="20" width="250" height="-30" textformat="leftTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
<textblock x="320" y="20" width="250" height="-30" textformat="rightTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
</composer>
<composer>
<style>
<textformat style="leftTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>0</embedfonts>
<font>Helvetica, Arial, Verdana</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0xffffff</selectedcolor>
<selectioncolor>0xff0000</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
<textformat style="rightTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>1</embedfonts>
<font url="http://samplemath.com/smxml/font/testfont.swf">testfont</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0xffffff</selectedcolor>
<selectioncolor>0xff0000</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<textblock x="20" y="20" width="250" height="-30" textformat="leftTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
<textblock x="320" y="20" width="250" height="-30" textformat="rightTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
</composer>
OUTPUT
Setting selection color
SMAF supports setting the color of selected text as well as the background color of the selection thanks to an awesome class by hellokeita from Brazil. You may control the selected text's color by setting the selectedcolor and the selection's background color by updating the selectioncolor nodes.
SMXML
<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/smxml.dtd">
<composer>
<style>
<textformat style="leftTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>0</embedfonts>
<font>Helvetica, Arial, Verdana</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
<textformat style="rightTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>0</embedfonts>
<font>Helvetica, Arial, Verdana</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0x00ffff</selectedcolor>
<selectioncolor>0x555555</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<textblock x="20" y="20" width="250" height="-30" textformat="leftTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
<textblock x="320" y="20" width="250" height="-30" textformat="rightTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
</composer>
<composer>
<style>
<textformat style="leftTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>0</embedfonts>
<font>Helvetica, Arial, Verdana</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
<textformat style="rightTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>0</embedfonts>
<font>Helvetica, Arial, Verdana</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0x00ffff</selectedcolor>
<selectioncolor>0x555555</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<textblock x="20" y="20" width="250" height="-30" textformat="leftTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
<textblock x="320" y="20" width="250" height="-30" textformat="rightTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
</composer>
OUTPUT
Autosizing text
You may explicitly specify the text dimensions in which case overflowing text will scroll in the textblock. Alternatively you may set the autosize node value to true which will make the textblock render on the screen in its full length, even if it exceeds specified dimensions.
SMXML
<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/smxml.dtd">
<composer>
<style>
<textformat style="leftTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>0</embedfonts>
<font>Helvetica, Arial, Verdana</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0xffffff</selectedcolor>
<selectioncolor>0xff0000</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
<textformat style="rightTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>1</embedfonts>
<font url="http://samplemath.com/smxml/font/testfont.swf">testfont</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0xffffff</selectedcolor>
<selectioncolor>0xff0000</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<textblock x="20" y="20" width="250" height="-30" textformat="leftTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
<textblock x="320" y="20" width="250" height="-30" textformat="rightTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
</composer>
<composer>
<style>
<textformat style="leftTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>0</embedfonts>
<font>Helvetica, Arial, Verdana</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0xffffff</selectedcolor>
<selectioncolor>0xff0000</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
<textformat style="rightTextFormat">
<align>left</align>
<autosize>0</autosize>
<color>0x000000</color>
<embedfonts>1</embedfonts>
<font url="http://samplemath.com/smxml/font/testfont.swf">testfont</font>
<leading>0</leading>
<letterspacing>0</letterspacing>
<selectable>1</selectable>
<selectedcolor>0xffffff</selectedcolor>
<selectioncolor>0xff0000</selectioncolor>
<size>13</size>
<wordwrap>1</wordwrap>
</textformat>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<textblock x="20" y="20" width="250" height="-30" textformat="leftTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
<textblock x="320" y="20" width="250" height="-30" textformat="rightTextFormat"><![CDATA[Vivamus consequat consectetur dignissim. Cras rhoncus orci quis nibh sagittis lobortis. Maecenas velit arcu, vestibulum in tristique sed, lacinia non lorem. Donec iaculis ultricies feugiat. Sed sollicitudin consectetur dolor, ut facilisis sapien pharetra ut. Etiam sit amet massa a eros fermentum luctus. Fusce vitae consequat ligula. Nullam eu elit lorem, ut hendrerit dui. Nam convallis lorem at sapien egestas tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]></textblock>
</composer>
There are no comments on this page. [Add comment]