Digital Signage Running Texts with SMIL and more

NYC TimeSquare with a lot of Digital Signage Running Texts
Digital Signage Running Texts
Bildquelle: Jbuechler, 2003-05-13 NYC TimesSquare, CC BY-SA 3.0

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:

Disadvantages:

Running Text with Canvas

Advantages:

Disadvantages:

Running Texts with SVG/SMIL

Advantages:

Disadvantages:

Running texts with outdated HTML-Element Marquee

Advantages

Disadvantages

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 hardware, we list all links to the running texts with RSS in the following:

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 or comments, please do not hesitate to contact me.


Gravatar Nikolaos Sagiadinos
Author: Niko Sagiadinos
Specialized on Digital Signage Software
Visit me on: LinkedIn and Xing

Contact form

We have attracted your interest? You want a consulting?
Simply contact us.

Our contact data

SmilControl GmbH
Niederaue 1a
D-30419 Hanover

Germany

☎ +49 (0) 511 - 96 499 560

Local court Hanover
HRA 221981
VAT-Id: DE 281 780 194

Authorized to represent:
Nikolaos Sagiadinos