smilText Examples: BasicText Module

Note: IE cannot read smilText tags inside the html file

Example 1: Hello World!

view smilText code

Example 2: Example 1 with duration = 10s

view smilText code

Example 3: Example 2 with a line break

view smilText code

Example 4: Example 3 with TEV and CLEAR tags

view smilText code

Example 5: Example 4 without explicit duration

view smilText code

Example 6: Example 5 with explicit duration = 3s

view smilText code

Example 7: smilText tag inside the html file

view smilText code

Example 8: Example 7 with textWrapOption = wrap

view smilText code

smilText Examples: TextStyling Module

Example 9: Hello World in DIV, P and SPAN elements

view smilText code

Example 10: Example 9 with textBackgroundColor attribute

view smilText code

Example 11: Example 9 with textColor attribute

view smilText code

Example 12: Example 9 with textStyle and textWeight attributes

view smilText code

Example 13: Example 9 with textFontSize and textFontFamily attributes

view smilText code

Example 14: Example 9 with textWritingMode and textAlign attributes

Note: textWritingMode will be available in CSS3. So far only IE supports 'tb-rl' and 'lr-tb'

view smilText code

Example 15: textDirection attribute

view smilText code

Example 16: textMode = replace

view smilText code

Example 17: textPlace attribute

Note: I still do not know how to do it.

Example 18: textStyle and textStyling elements (+ some timing to make it fun).

view smilText code

Example 19: Testing xml:space. smilText code inside html.

Note: IE doesn't keep whitespaces correctly (Problem reported in some foruns). Finally, for xml:space=preserve and textWrapOption=wrap I've used a CSS style property called whiteSpace='pre-wrap' and it is not supported by IE.

view smilText code

view smilText code

smilText Examples: TextMotion Module

Example 20: textMode = crawl

view smilText code

Example 21: textMode = scroll

view smilText code

Example 22: textMode = jump

Note: TODO

view smilText code

Example 23: textRate attribute

Note: IE seems to present a problem while using different textRates. I did not find out the reason yet.

Crawl mode

view smilText code
view smilText code
view smilText code

Scroll mode

view smilText code
view smilText code
view smilText code

Jump mode

Note: TODO

Example 24: textConceal attribute

Note: TODO