1. Home
2. Magazine
3. Tutorials
4. Digital Signage Running Texts with SMIL

Digital Signage Running Texts with SMIL and more

In the last two articles about running texts in HTML and CSS which get their content from RSS-feeds you learned two modernen HTML5-techniques. However, there are other alternatives, and we will show you two of them. One of these is based on SVG and SMIL. Since our digital signage products make intensive use of the SMIL language, we consider it a question of honour to implement a scrolling text with it, too.

For more information about SMIL, see article What ist SMIL. The posting about Channels with SVG explains the basics of SVG.

Simple running text with SVG and SMIL

Compared to the concepts presented so far, a SVG/SMIL running text is quite easy to implement.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="80px">
	<text id="svg_ticker" x="0" y="30" style="font:30px Arial;">
		Lorem ipsum dolor sit amet, consetetur
		<animate attributeName="x" from="100%" to="-100%" dur="10s" repeatCount="indefinite"/>
	</text>
</svg>

We create an SVG inside the body tags with a SVG text tag at the left margin and 20 pixels from above. The stylesheet for the text tag gets a 30px Arial font as usual.

Within the SVG text tag we set a SMIL animation tag. This will animate the parent element. Attribute name=”x” defines that the text is scrolled horizontally. Similarly, “y” would be vertical scrolling.

“From” is set to 100%. This means, that the text starts after the right margin and scrolls out completely in the left margin (to=”-100%”). To run the animation endlessly, the repeatCount attribute must have the value indefinite.

Browser support of SMIL

There is one disadvantage: The procedure does not work with Microsoft browsers (IE and Edge). Although they support SVG, they do not support SMIL animations (as of May 2018). Unless you have to use an MS browser for digital signage scrolling texts, this technique can be an acceptable, high-performance alternative.

The animate tag can also become interesting when using a SMIL-compatible media player. But this will be the subject of a later contribution. If you are not using an MS browser, click on the file svg_animations_1.html and a Lorem-Ipsum - running text.

SVG/SMIL with RSS

In order to deliver content from an RSS feed to the SVG, we can almost fully use the Javascript functions from the CSS example. The only modification affects the output function displayTicker().

function displayTicker(ticker_text, num_headlines)
{
	document.getElementById("svg_ticker").innerHTML = ticker_text +
			'<animate attributeName="x" from="100%" to="-100%" dur="' +
			getAnimDurationInSeconds(num_headlines) +
			'" repeatCount="indefinite"/>';
}

We now fill the SVG text element with the RSS text and the animate tag. This must be done within the function, otherwise any animate already in the text tag will be overwritten. In addition, we can set the calculated running speed. The file svg_animations_rss.html shows you, assuming a compatible browser, the known RSS feed as scrolling text.

Running texts with Marquee

For the sake of completeness, we do not want to withhold a technique from the Pleistocene of the web from you. The older ones of us certainly remember the Marquee tag of IE, which was particularly popular in the 90s and early 2000s. In that time, half of the web used this due to its jerky and incompatibility to the HTML standard controversial tag. However, it is still the easiest way to implement a running text. All you need is a:

<marquee id="old_school" style="font:30px Arial">Lorem ipsum dolor sit amet, consetetur</marquee>

to get at least in Chromium/Chrome an even respectable smooth scrolling text. In the file marquee_rss.html you will find the variant with RSS contents.

Why you should not take Marquee

Although Marquee seems to be the simplest way to create a digital signage ticker, you better not. Firstly, it runs only smoothly on the chromium/chrome. With Firefox and even with Edge it stutters worse than in the 90s.

Furthermore, Marquee is officially obsolete and the W3C strongly recommends using CSS3 animations as replacement. Although Marquee still works with many browsers, it can be removed at any time during an update.

Where’s the problem with Marquee?

Even though this is not relevant for digital signage, some may wonder why such a popular, easy-to-use tag has not been included in the standard.

Wrong Semantics

The answer lies in the separation of design and content, which modern HTML is dedicated to. HTML code should represent the semantic structure of the content. E.g. different headings, navigation, continuous texts, paragraphs etc.

The presentation and the design e.g. font, font size, distances, animations etc. belongs into CSS. This makes it possible to conceptualize, layout and maintain websites more efficiently. The areas of responsibility are clearer due to the separation.

Specialists such as authors and designers can complete their tasks in parallel without getting in each other’s way. In order to change a website design or to use different output devices, all you need to do is edit the CSS.

Collateral damages of the browser war

Marquee, like font, blink, center and other tags that have disappeared in the meantime, has its roots in the first browser war between Netscape and Microsoft. There, tags were programmed only for marketing purposes and to stand out from the competition. As a pure presentation element, a functionality like Marquee should not exist in the HTML space.

There have been efforts in the past to correctly reintroduce Marquee as a CSS3 module, and many news sites reported a resurrection a few years ago. However, the work on it was. stopped in 2014.

Summary comparisons

We have now learned four different techniques to implement digital signage scrolling texts for screens. Let us summarize the respective advantages and disadvantages below.

Running texts with CSS3 animations

Advantages:

• any texts lengths are possible
• except for parsing feeds (if necessary), no Javascript programming is required

Disadvantages:

• time consuming testing to find the most jerk-free variant
• the technique used is harder to understand
• font effects such as glow or shadow are depending on the browser used.

Running Text with Canvas

Advantages:

• often produces the most smooth running text.s On an XMP-3350 with an extremely slow processor we were able to create a presentable scrolling text in 2012 only with this technology
• countless font effects can be added by programming

Disadvantages:

• There are limits for the pixel width that can only be workarounded by complex programming
• stuttered more than CSS3 animations on some some 4.0 and 4.4 androids hardware
• this concept requires the most programming work

Running Texts with SVG/SMIL

Advantages:

• any text length possible
• except for parsing feeds, no Javascript programming is required
• simple implementation

Disadvantages:

• Not every browser implements SMIL animate, which forces the use of Javascript in this case
• text effects are only possible if the browser supports

Running texts with outdated HTML-Element Marquee

Advantages

• any text lengths possible
• very simple implementation

Disadvantages

• no standard and can be switched off at any time by the browser manufacturer during an update
• currently (2018) only running on Chrome/Chromium acceptable smooth
• wrong concept from today's point of view

Conclusion for Digital Signage Running Texts

We made positive experiences using the canvas technique with Linux- and Windows-based hardware.

On ARM hardware with Android 4 and 5, CSS3 animations or SVG/SMIL are often the smoothest alternative.

Finally, you have to find out for your hardware-software combination by trying out which variant works best for your setup. We hope that this series of articles will have helped you a little in your decision making.

For easy comparison on your digital signage hardware, we list all links to the running texts with RSS in the following:

• CSS3 css3_animations_rss.html
• HTML5-Canvas canvas_animations_rss.html
• SVG/SMIL svg_animations_rss.html
• Marquee marquee_rss.html

This article is the final part of our Workshop about Digital Signage scrolling texts. We hope you enjoyed reading and that it helped.

If you have any questions, comments or wants to implement a ticker to your totem or digital showcase, please do not hesitate to contact me.

Author: Niko Sagiadinos
Open Source Developer & Co-Founder SmilControl – Digital Signage

Visit me on: GitHub or LinkedIn