1. Startseite
2. Magazin
3. Anleitungen
4. Digital Signage Lauftexte mit SMIL

Digital Signage Lauftexte mit SMIL

In den letzten beiden Beiträgen über HTML- und CSS Laufschriften welche Ihre Inhalte aus RSS-Feeds bekommen, lernten Sie zwei moderne HTML5-Techniken kennen. Allerdings existieren noch weitere Alternativen, von denen wir zwei vorstellen werden. Eine davon basiert auf SVG und SMIL. Da unsere Digital Signage-Produkte die Sprache SMIL intensiv nutzen, halten wir es für eine Frage der Ehre einen Lauftext auch damit umzusetzen.

Ausführliche Informationen zu SMIL finden Sie in dem Beitrag Was ist SMIL. SVG wird in dem Artikel Kanäle mit SVG erklärt.

Einfacher Lauftext mit SVG und SMIL

Im Vergleich zu den bis jetzt vorgestellten Konzepten, ist ein SVG/SMIL-Lauftext eher einfach umzusetzen.

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

Wir erstellen ein SVG innerhalb der body-Tags mit einem SVG-Text-Tag am linken Rand und 20 Pixel von oben. In dem Stylesheet für das Text-Tag setzen wir wie gehabt, eine 30px Arial Schrift ein.

Innerhalb des SVG-Text-Tags setzen wir ein SMIL-Animations-Tag. Das sorgt dafür, daß das Elternelement animiert wird. Attributname=“x“ bestimmt, dass der Text horizontal gescrollt wird. Analog dazu wäre y vertikales Scrolling.

From steht auf 100%. D.h. der Text fängt nach dem rechten Rand an und scrollt bis er vollständig im linken Rand raus läuft (to=“-100%“). Um die Animation endlos laufen zu lassen muss das Attribut repeatCount den Wert undefiniert (indefinite), also quasi unendlich erhalten.

Browserunterstützung von SMIL

Es gibt dabei einen Nachteil: Das Verfahren funktioniert nicht mit den Browsern von Microsoft (IE und Edge). Diese unterstützen zwar SVG, aber keine SMIL-Animationen (Stand Mai 2018). Solange Sie keinen MS-Browser für Digital Signage Lauftexte nutzen müssen, kann diese Technik eine akzeptable perfomante Alternative sein.

Das Animate-Tag kann auch interessant werden, wenn Sie einen SMIL-kompatiblen Medienplayer einsetzen. Aber das wird Gegenstand eines späteren Beitrages. Wenn Sie keinen MS-Browser nutzen, klicken Sie auf die Datei svg_animations_1.html und sie sehen einen Lorem-Ipsum -Lauftext.

SVG/SMIL mit RSS

Um das SVG mit Inhalten aus einem RSS-Feeds zu versorgen, können wir fast komplett die Javascriptfunktionen aus dem Artikel CSS Laufschrift nutzen. Die einzige Änderung betrifft konzeptbedingt die Ausgabefunktion 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"/>';
}

Wir befüllen jetzt das SVG-Textelement mit dem RSS-Text und dem animate-Tag. Das muss in der Funktion geschehen, ansonsten wird ein eventuell bereits im text-tag befindliches animate überschrieben. Außerdem können wir so die ermittelte Laufgeschwindigkeit setzen. Die Datei svg_animations_rss.html zeigt Ihnen, einen kompatiblen Browser vorausgesetzt, den bekannten RSS-Feed als Lauftext.

Lauftexte mit Marquee

Der Vollständigkeit halber wollen wir Ihnen eine Technik aus dem Pleistozän des Web nicht vorenthalten. Die Älteren von uns erinnern sich bestimmt noch an das in den 90er und Anfang der 2000er Jahren besonders beliebte Marquee-Tag des IE. In der Zeit nutzte gefühlt das halbe Web, dieses aufgrund seiner Ruckeligkeit und Inkompatibilität zum HTML-Standard umstrittene Tag. Allerdings ist es nach wie vor am einfachsten damit einen Lauftext umzusetzen. Sie brauchen lediglich ein:

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

, um zumindest im Chromium/Chrome einen sogar ansehnlichen scrollenden Lauftext zu bekommen. In der Datei marquee_rss.html finden Sie die Variante mit RSS-Inhalten.

Warum Sie besser kein Marquee nehmen sollten

Obwohl Marquee offenbar die simpelste Methode ist einen Digital Signage Lauftexte zu erstellen, sollten Sie es besser nicht tun. Zum Einen läuft er nur auf dem Chromium/Chrome flüssig. Unter Firefox und selbst im Edge ruckelt es schlimmer als in den 90ern.

Des Weiteren gilt Marquee offiziell als veraltet und das W3C rät ausdrücklich dazu CSS3 Animationen als Ersatz zu verwenden. Obwohl Marquee mit vielen Browsern noch funktioniert, kann es jederzeit bei einem Update entfernt werden.

Wo war das Problem mit Marquee?

Auch wenn das keine Relevanz für Digital Signage besitzt, werden sich vielleicht einige die Frage stellen, warum ein so beliebtes einfach zu handhabendes Tag nicht in den Standard übernommen wurde.

Falsche Semantik

Die Antwort liegt in der Trennung zwischen Design und Inhalt, der sich modernes HTML verschrieben hat. HTML-Code soll dabei die semantische Struktur des Inhalts darstellen. Z.B. unterschiedliche Überschriften, Navigation, Fließtexte, Absätze usw.

Die Präsentation und das Design z.B. Schrift, Schriftgröße, Abstände, Animationen usw. gehören in das CSS. Dadurch lassen sich Webseiten effizienter konzeptionieren, layouten und pflegen. Die Aufgabenbereiche sind durch die Trennung klarer.

Spezialisten wie Autoren und Designer können parallel ihre Aufgaben erledigen, ohne sich in die Quere zu kommen. Um ein Webseitendesign zu ändern oder unterschiedliche Ausgabegeräte zu bedienen, braucht im Optimalfall nur noch das CSS bearbeitet zu werden.

Kollateralschäden des Browserkrieges

Marquee wurzelt, wie font, blink, center und andere inzwischen verschwundene Tags, in der Zeit des ersten Browserkrieges zwischen Netscape und Microsoft. Dort wurden Tags nur aufgrund des Marketings und zur Abhebung vom Mitbewerb programmiert. Als reines Präsentationselement sollte eine Funktionalität wie Marquee nicht im HTML-Bereich existieren.

Es gab übrigens in der Vergangenheit Bestrebungen Marquee semantisch korrekt als CSS3-Modul wieder einzuführen, und viele Nachrichtenseiten berichteten vor einigen Jahren von einer Wiederauferstehung. Allerdings wurden die Arbeiten daran 2014 eingestellt.

Zusammenfassende Vergleiche

Wir haben jetzt vier unterschiedliche Techniken kennengelernt, um Digital Signage Lauftexte für Bildschirme umzusetzen. Lassen Sie uns im folgenden die jeweiligen Vor- und Nachteile zusammenfassen.

Lauftexte mit CSS3-Animationen

Vorteile:

• beliebig lange Texte möglich
• abgesehen von der Funktionalität Feeds zu parsen (falls nötig), ist keine Javascriptprogrammierung notwendig

Nachteile:

• Aufwändiges Testen, um die ruckelfreieste Variante zu finden
• Die Technik dahinter ist schwieriger zu verstehen
• Schrifteffekte wie z.B. Glühen oder Schatten sind abhängig vom eingesetzten Browser.

Lauftext mit Canvas

Vorteile:

• Ergibt oft den flüssigsten Lauftext. Auf einem XMP-3350 mit einem besonders langsamen Prozessor haben wir 2012 nur mit dieser Technik einen präsentierbaren Lauftext erzeugen können
• Durch Programmierung können zahllose Schrifteffekte hinzugefügt werden

Nachteile:

• Limits für die Pixelbreite, die nur durch komplexe Programmierungen zu umgehen sind
• bei manchen 4.0 und 4.4 Androiden ruckelt es mehr als CSS3-Animationen
• am meisten Programmierarbeit erforderlich

Lauftext mit SVG/SMIL

Vorteile:

• beliebig lange Texte möglich
• abgesehen von der Funktionalität Feeds zu parsen, ist keine Javascriptprogrammierung notwendig
• einfache Implementation

Nachteile:

• Nicht jeder Browser implementiert SMIL-Animate, was in dem Fall den Einsatz von Javascript erzwingt
• Texteffekte nur im Rahmen der SVG-Unterstützung des Browsers

Lauftexte mit mit dem veralteten HTML-Tag Marquee

Vorteile

• beliebig lange Texte möglich
• besonders einfache Implementation

Nachteile

• kein Standard und kann jederzeit vom Browserhersteller bei einem Update abgeschaltet werden
• läuft aktuell (2018) nur auf Chrome/Chromium akzeptabel
• aus heutiger Sicht fehlkonzeptioniert

Fazit für Digital Signage Lauftexte

Wir haben positive Erfahrungen mit der Canvas Technik aus der HTML Laufschrift bei Linux- und Windows-basierender Digital Signage Hardware gemacht.

Unter ARM-Hardware mit Android 4 und 5 sind CSS3-Animationen oder SVG/SMIL nicht selten die laufruhigste Alternative.

Letztendlich müssen Sie für Ihre Hardware-Softwarekombination durch Ausprobieren herausfinden, welche Variante für Ihr Setup am besten funktioniert. Wir hoffen Ihnen mit dieser Artikelserie ein wenig bei der Entscheidungsfindung geholfen zu haben.

Zum einfachen Vergleich auf Ihrer Digital Signage Hardware listen wir im folgenden nochmal alle Links zu den Lauftexte mit RSS auf:

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

Mit diesem Beitrag schließen wir unseren Workshop über Digital Signage Lauftexte erstmal ab. Wir hoffen, dass Ihnen die Lektüre gefallen und auch weitergeholfen hat.

Wenn Sie Fragen oder Anmerkungen haben wie sie Ihre Werbemonitore, Stelen und digitale Schaukästen mit Laufschriften ausstatten, können Sie mich natürlich auch gerne kontaktieren.

Autor: Niko Sagiadinos
Open Source Entwickler & Co-Founder SmilControl – Digital Signage

Besuchen Sie mich auf: GitHub, LinkedIn oder Xing