CSS3 Running Texts

Horizontal auto scrolling texts are frequently requested functionalities in everyday digital signage. They are usually displayed at the bottom of a multizone setup screen. In this article we will explain the technical basics for CSS3 running texts without Javascript animations using a simple example. In the next part we fill the scrolling text with content from a RSS feed.

Introduction to the series of articles on running texts

Bild CSS3 Running Texts
A classic running text

This article starts a multi-part workshop to introduce different techniques for horizontal scrolling texts. We will also explain in detail how to use Javascript to load any RSS feed, extract information and thus automatically keep the contents of your scrolling texts up to date. Finally, we will compare the techniques presented with advantages and disadvantages.
This workshop will be continued in the coming weeks. You don’t need to be a programmer to understand them, but you should have basic knowledge in HTML, CSS and Javascript.

What is CSS Level 3?

CSS (Cascading Style Sheets) are a design and formatting language for websites. This allows you to create central styles to separate the design from the content. CSS Level 3 is the successor to the current Level 2 standard. Although it has been developed since 2000, Level 3 has not yet been fully adopted and recommendations exist only for some areas. Despite this, current browsers already support many CSS3 modules (April 2018). This can be explained by the rapid technical progress in the mobile sector, which is constantly demanding new functionalities.

In addition to modularization, namespaces, graphic filters and media queries, CSS3 brings the relevant transformations for animations with the @keyframes rule. CSS3 offers many advantages for digital signage applications. For example, we are able now to implement websites and widgets without using an additional programming language such as Javascript. Media queries have also made it easier to create web pages or HTML templates for different output devices with different resolutions or orientations simultaneously.

Preparing

But at first let us build the structure of the website to create the base for CSS3 running texts.

<html>
	<head>
		<title>SmilControl CSS</title>
		<style>
			#wrapper
			{
				width: 500px;
				border:1px solid #ddd;
				overflow: hidden;
		        }
			#ticker
			{
				position: relative;
				font: 30px Arial;
				padding:5px 0;
				white-space:nowrap;
			}		
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="ticker">Lorem ipsum dolor sit amet, consetetur</div>
		</div>
	</body>
</html>

We nest two div’s into the body section. The div with id=“ticker“ represent the animated area. For a better overview, we set the wrapper div surrounding the ticker to a width of 500 pixels with a 1 pixel border. Overlong text displays no longer after 500px thanks to overflow:hidden. The ticker contains a 30px Arial font with the “Lorem ipsum dolor sit amet, consetetur” text.

A padding: 5px 0 ensures that there are 5 pixels distance to the border above and below the text. The position property is set to relative to control the animated transformations relative to the parent element. To ensure that the text is not wrapped in the ticker div, the white-space property must be nowrap.

Click on css3_animations_1.html to watch our first result.

What are keyframes?

Keyframes characterize an animation technique that originated in cartoons. In this genre, key images, sometimes also called waypoints, approximately define the sequence of movements and are completed by intermediate images as the work progresses. In CSS, animation sequences can also be defined by waypoints. These can be position or size information or even color values. To create a classic horizontal CSS3 running text, however, we only need position changes.

Animation with the @keyframes rule

A CSS animation is based on @keyframe rules. In the past we had to use so-called browser prefixes like -moz- -webkit- or -ie-. Meanwhile (May 2018) all current browser keyframes support keyframes by default. So let’s add the following under the #ticker style.

@keyframes moveTicker
{
	from
	{
		transform: translate3d(100%, 0%, 0px)
	}
	to
	{
		transform: translate3d(-100%, 0%, 0px);
	}
}

@keyframes introduces a rule called moveTicker. We insert two key images here. The first state (from) and the last state (to). The first keyframe moves the x-value of the text to 100% using translate3d. I.e. it now starts invisibly for us on the right side of the wrapper div. We will explain below why we use translate3d. The last key frame should be set to -100% left. This means that the text is invisibly located on the left side of the wrapper div.

To activate the animation you have to insert

#ticker
{
	...
	animation: moveTicker 10s linear infinite; 
}

into the stylesheet of the ticker
If the animation (moveTicker) starts now, the text scrolls within 10s with constant speed (linear) to the left side of the wrapper div. As soon as the last letter has run out of the image (-100%) the animation starts again (infinite). Click on css3_animations_2.html for a demonstration.

Technical choices for CSS3 running texts

Maybe some of you will wonder why we are using transform and on top of that transform3d. CSS3 running texts would work with:

@keyframes moveTicker
{
	from
	{
		left:100%;
	}
	to
	{
		left:-100%;
	}
}

and also with

@keyframes moveTicker
{
	from
	{
		transform: translateX(100%);
	}
	to
	{
		transform: translateX(-100%);
	}
}		

All three variants are completely correct, but can have different performance affects. The bad news is: you have to find out yourself which keyframe variant is best suited for your hardware. For a long time transformations were contemplated more performant performant to position changes than left/top.

However, this no longer generally applies. Here it was found that left/top offers more efficiency under certain conditions.Ultimately, only trying it out will help. In the demo example of our next blog post we will see that it can even make sense to combine left and transform for CSS3 running texts.

The 3D acceleration trick

The variant we chose with translate3d forces the browser or webview to activate the so-called GPU acceleration for WebGL. WebGL is the standardized 3D interface for web browsers. This means that the GPU performs the calculations instead of the CPU. Of course only if a corresponding device with working drivers is integrated. GPU acceleration ideally leads to softer scrolling with less system load. Unfortunately, this is not guaranteed, varies from hardware to hardware, and the software must also be compatible. For example, the WebView of an Android up to version 4.x does not support 3D acceleration at all, even if the chip would be able to do so. WebGL acceleration is only available from Android 5 by default. These script can help you to find out if translate3d or translateX is more performant for your Digital Signage Hardware/Software combination.
However, there is one small disadvantage: translate3d does not understand any percentages values on its z-axis. This is fortunately irrelevant for our scrolling text application, as we only want to move the x-axis. Thus the z-value must be 0px.

A relativizing note

All current PC web browsers should accelerate CSS3 animations in hardware generally. The differences are at least marginal with Chromium 65 on Linux. Nevertheless we have addressed this topic in such detail, because the latest operating systems are not always used on digital signage media players. Many inexpensive media players are shipped with older Android versions. You will probably be able to buy an Rk3288 player chip in 2018 with Android 5.1.1 at most. The webview used may also differ. In this respect, it makes sense to use the background knowledge provided here to take the time and find out which variant works most efficiently for you. From our experience we know how sensitive customers are to jerky tickers.

What’s next?

In the second part of these workshops we will then combine CSS3 animations with a RSS feed and create a real digital signage application with CSS3 running texts.
If you have any questions or comments, please do not hesitate to contact us.

Leave a Reply

Your email address will not be published. Required fields are marked *