CSS3-Lauftexte (Teil 1)

Newsticker als horizontale Lauftexte, im Fernsehen auch Kriechtexte genannt, sind im Digital Signage-Alltag häufig nachgefragte Funktionalitäten. Sie werden auf einem Bildschirm mit Multizonen-Setup oftmals am unteren Rand eingeblendet. In diesem Artikel werden wir die technische Grundlagen für CSS3-Lauftexte ohne Javascript-Animationen anhand eines einfachen Beispieles erklären. Im nächsten Teil befüllen wir den Lauftext mit Inhalten aus einem RSS.

Vorwort zur Artikelserie über Lauftexte

Bild CSS3-Lauftexte
Ein klassischer Lauftext Bildquelle: Herbert Weber, Hildesheim, Kreuzgang san paolo fuori le mura 3, cropped, CC BY-SA 3.0

Mit diesem Beitrag beginnt eine mehrteiliger Workshop, um unterschiedliche Techniken für horizontale Lauftexte vorzustellen. Wir werden Ihnen auch detailliert erklären, wie Sie mit Javascript einen beliebigen RSS-Feed laden, Informationen extrahieren und damit die Inhalte ihrer Lauftexte automatisch aktuell halten können. Zum Schluss werden wir die vorgestellten Techniken mit Vor-und Nachteilen vergleichen.
Dieser Workshop wird die nächsten Wochen fortgesetzt. Sie benötigen zu deren Verständnis zwar kein tiefer gehendes Programmiererwissen, sollten aber über grundlegende Kenntnisse in HTML, CSS und Javascript verfügen.

Was bedeutet CSS Level 3?

CSS (Cascading Style Sheets) stellen eine Design- und Formatierungssprache für Webseiten dar. Damit lassen sich zentrale Formatvorlagen erstellen, um die Gestaltung von den Inhalten zu trennen. CSS Level 3 ist der Nachfolger des aktuellen Standards Level 2. Obwohl seit 2000 daran entwickelt wird, ist Level 3 noch nicht vollständig verabschiedet und es existieren nur für einige Bereiche Empfehlungen. Trotz dessen unterstützen aktuelle Browser bereits heute (April 2018) viele CSS3 Module. Das lässt sich auf die rasante Entwicklung im Mobilbereich zurückführen, die immer wieder neue Funktionalitäten einfordert.

CSS3 bringt neben Modularisierung, Namespaces, Grafikfilter und Media Queries, die in diesem Tutorial relevante Transformationen für Animationen mit der @keyframes-Regel. Für Digital Signage Anwendungen bietet CSS3 viele Vorteile. Z.B. lassen sich nun Animationen für Webseiten und Widgets umsetzen, ohne eine zusätzliche Programmiersprache wie Javascript zu bemühen. Durch Media Queries ist es außerdem leichter geworden Webseiten oder HTML-Templates für verschiedene Ausgabegeräte mit unterschiedlichen Auflösungen oder Orientierungen gleichzeitig zu erstellen.

Vorbereitungen

Aber lassen Sie uns zunächst die Struktur der Webseite aufbauen, um die Basis für CSS3-Lauftexte zu legen.

<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>

Im body-Bereich verschachteln wir zwei divs. Das div mit der id=“ticker“ beschreibt den zu animierenden Bereich. Der Übersichtlichkeit halber, setzen wir das den Ticker umgebenden Wrapper-div auf eine Breite von 500 Pixel mit einem 1 Pixel-Rand. Überlanger Text wird dank overflow:hidden nach 500px nicht mehr angezeigt. Der Tickerinhalt wird aus einem 30px großem Arial Font mit dem „Lorem ipsum dolor sit amet, consetetur“-Text bestehen.

Ein padding: 5px 0 sorgt dafür, dass oberhalb und unterhalb des Textes 5 Pixel Abstand zum Rand bestehen. Das Positionseigenschaft wird auf relativ eingestellt, um die animierten Transformationen relativ zum Elternelement steuern zu können. Damit im Ticker-div auf keinen Fall der Text umgebrochen wird, muss die Eigenschaft white-space auf nowrap stehen.
Klicken Sie auf css3_animations_1.html, um das Ergebnis zu sehen.

Was sind keyframes?

Keyframes (Schlüsselbilder) beschreiben eine Animationstechnik, die ursprünglich aus Zeichentrickfilmen stammt. Dort geben Schlüsselbilder, manchmal auch Wegpunkte genannt, den Bewegungsablauf grob vor und werden im weiteren Arbeitsverlauf durch Zwischenbilder vervollständigt. In CSS können Animationssequenzen ebenfalls durch Wegpunkte festgelegt werden. Das können Positions- bzw. Größenangaben oder gar Farbwerte sein. Um einen klassischen horizontalen Lauftext zu erstellen, benötigen wir allerdings nur Positionsänderungen.

Animation mit der Keyframe-Regel

Eine CSS-Animation basiert auf @keyframe-Regeln. Früher musste sogenannte Browserpräfixe wie -moz- -webkit- oder -ie- genutzt werden. Inzwischen (April 2018) unterstützen alle aktuellen Browser Keyframes standardmäßig. Fügen wir also unter dem Style #ticker folgendes hinzu.

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

Mit @keyframes wird die Regel namens moveTicker eingeleitet. Hier werden zwei Schlüsselbilder eingefügt. Der erste Zustand (from) und der letzte Zustand (to). Im ersten Keyframe wird der der x-Wert des Text mithilfe von translate3d auf 100% geschoben. D.h. er beginnt jetzt für uns unsichtbar auf der rechten Seite des Wrapper-divs. Eine Erklärung warum wir ausgerechnet translate3d benutzen steht weiter unten. Das letzte Schlüsselbild soll der x-Wert auf -100% left stehen. D.h. der Text befindet sich wiederum unsichtbar komplett auf der linken Seite des Wrapper-divs.
Um die Animation zu aktivieren muss im Stylesheet des Tickers noch ein

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

eingesetzt werden.
Wenn die Animation (moveTicker) jetzt startet scrollt der Text innerhalb von 10s mit gleichbleibender Geschwindigkeit (linear) bis zur linken Seite des Wrapper-divs. Sobald der letzte Buchstabe aus dem Bild gelaufen ist (-100%) beginnt die Animation von vorne (infinite). Klicken Sie auf css3_animations_2.html für eine Demonstration.

Technische Entscheidungen für CSS3-Lauftexte

Vielleicht werden sich jetzt einige die Frage stellen, warum wir transform mit obendrein translate3d benutzen. CSS3-Lauftexte würden nämlich sowohl mit:

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

als auch mit

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

funktionieren.
Alle drei Varianten sind vollkommen korrekt, können sich aber unterschiedlich in der Performance auswirken. Die schlechte Nachricht ist: Sie müssen selber herausfinden welche Keyframe-Variante sich für Sie am besten eignet. Lange Zeit galten Transformationen generell als performanter zu Positionsänderungen mit left/top.
Allerdings trifft das inzwischen nicht mehr grundsätzlich zu. Hier wurde festgestellt, dass unter bestimmten Voraussetzungen left/top doch mehr Effizienz bietet. Letztendlich hilft nur ausprobieren. In dem Demobeispiel unseres nächsten Blogbeitrages werden wir sehen, dass es sogar sinnvoll sein kann left und transform für CSS3-Lauftexte zu kombinieren.

Der 3D-Beschleunigungs-Trick

Die von uns gewählte Variante mit translate3d zwingt den Browser bzw. die Webview dazu die sogenannte GPU-Beschleunigung für WebGL zu aktivieren. WebGL ist die standardisierte 3D-Schnittstelle für Webbrowser. Das bedeutet, dass die Berechnungen nicht auf der CPU, sondern auf dem Grafikprozessor erfolgen. Natürlich nur sofern auch ein entsprechendes Gerät mit funktionierenden Treibern integriert ist. GPU-Beschleunigung führt im Idealfall zu einem weicheren Scrolling mit weniger Systemlast. Leider ist dies nicht garantiert, von Hardware zu Hardware unterschiedlich und die Software muss auch mitspielen. Z.B. unterstützt die WebView eines Android bis Version 4.x gar keine 3D-Beschleunigung, selbst wenn der Chip dazu in der Lage wäre. WebGL-Beschleunigung gibt es erst ab Android 5 standardmäßig. Mit diesem Skript können Sie testen, ob für ihre Digital Signage Hardware-Softwarekombination translate3d oder translateX performanter ist.
Einen kleinen Nachteil gibt es allerdings: translate3d versteht auf seiner z-Achse keine Prozentwerte. Das ist für unsere Lauftextanwendung glücklicherweise irrelevant, da wir nur die x-Achse bewegen wollen. Somit muss der letzten Wert auf 0px stehen.

Eine relativierende Anmerkung

Generell sollte alle aktuellen PC-Webbrowser CSS3-Animationen in Hardware beschleunigen. Die Unterschiede sind bei Chromium 65 auf Linux zumindest marginal. Wir haben uns dieses Themas trotzdem so ausführlich angenommen, weil auf Digital Signage Medienplayern nicht immer die aktuellsten Betriebssysteme eingesetzt werden. Viele günstige Medienabspieler werden mit älteren Android Versionen ausgeliefert. Einem Player Rk3288-Chip werden sie auch 2018 vermutlich mit maximal Android 5.1.1 erwerben können. Auch die verwendete Webview kann sich unterscheiden. Insofern ist es mit dem hier vermittelten Hintergrundwissen durchaus sinnvoll sich die Zeit zu nehmen und auszuprobieren, welche Variante am effizientesten für Sie arbeitet. Aus unserer Erfahrung wissen wir wie sensibel Kunden auf zu ruckelige Laufschriften reagieren.

Wie geht es weiter?

In dem zweiten Teil dieses Workshops, werden wir CSS3-Animationen mit einem RSS-Feed kombinieren und eine echte Digital Signage Anwendung für CSS3-Lauftexte erzeugen.
Wenn Sie Fragen oder Anmerkungen haben, können Sie uns gerne kontaktieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.