Digital Signage Lauftexte mit SMIL

NYC Timesquera mit vielen Digital Signage Laufschriften
Digital Signage Lauftexte
Bildquelle: Jbuechler, 2003-05-13 NYC TimesSquare, CC BY-SA 3.0

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:

Nachteile:

Lauftext mit Canvas

Vorteile:

Nachteile:

Lauftext mit SVG/SMIL

Vorteile:

Nachteile:

Lauftexte mit mit dem veralteten HTML-Tag Marquee

Vorteile

Nachteile

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:

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.


Gravatar Nikolaos Sagiadinos
Autor: Niko Sagiadinos
Entwickler & Co-Founder SmilControl – Digital Signage
Besuchen Sie mich auf: LinkedIn, Xing oder GitHub

Kontakt

Sie haben weitere Fragen?





Unsere Kontaktdaten

SmilControl GmbH
Niederaue 1a
D-30419 Hannover

☎ +49 (0) 511 – 96 499 560

Amtsgericht Hannover
HRB 221981
USt-Id: DE 281 780 194

Vertretungsberechtigter Geschäftsführer:
Nikolaos Sagiadinos