Lauftext in Anwendungen — was es ist, wie man ihn erstellt und konfiguriert

Was ist Lauftext?

Lauftext ist ein UI-Effekt, bei dem sich Text horizontal innerhalb eines festen Bereichs bewegt und zyklisch scrollt, damit der Benutzer den gesamten Inhalt lesen kann, der nicht in den Container passt. Im Gegensatz zu ellipsize, das einen Teil des Textes verbirgt, zeigt marquee den gesamten Text, jedoch in Bewegung.

Der Begriff marquee etablierte sich dank des HTML-Tags <marquee>, das in frühen Versionen der Browser Netscape und Internet Explorer hinzugefügt wurde. Das Tag ermöglichte das Erstellen von scrollendem Text ohne JavaScript oder CSS, war aber nie Teil des HTML-Standards. Moderne Browser unterstützen es weiterhin aus Kompatibilitätsgründen, aber seine Verwendung wird nicht empfohlen.

In der mobilen Entwicklung löst Marquee das Problem langer Beschriftungen in kompakten Containern: Titellisten in einem Player, Währungsticker, Nachrichtenticker auf TV-Bildschirmen. Aufgrund der Animation belastet es jedoch die Barrierefreiheit und kann Benutzer stören — daher wird es selektiv eingesetzt.

Laut einer Studie der Nielsen Norman Group (2023) reduziert bewegter Text die Lesegeschwindigkeit um 15–20 % und erhöht die kognitive Belastung. Verwenden Sie Marquee nur, wenn statisches Kürzen (ellipsize) wirklich inakzeptabel ist.

Lauftext unter Android via TextView

Unter Android wird Marquee über den integrierten TextView-Mechanismus durch das Attribut android:ellipsize="marquee" implementiert. Dies ist der einzige ellipsize-Modus, der Text nicht kürzt, sondern dessen Scrollen animiert.

Um Marquee zu aktivieren, müssen drei Bedingungen erfüllt sein: singleLine="true" (oder maxLines="1"), ellipsize="marquee" und setSelected(true) im Code. Ohne Aufruf von setSelected() startet die Animation nicht.

<!-- XML layout -->
<TextView
    android:id="@+id/marquee_text"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever" />

// Kotlin: activate marquee
textView.setSelected(true)
textView.isSingleLine = true

Das Attribut marqueeRepeatLimit bestimmt die Anzahl der Animationswiederholungen: marquee_forever (unendlich) oder eine bestimmte Zahl. Der Standardwert ist marquee_forever. Wenn der Text kürzer als die Containerbreite ist, startet die Animation nicht — TextView zeigt statischen Text an.

Eine wichtige Eigenschaft: setSelected(true) funktioniert nur, wenn der TextView fokussiert oder im ausgewählten Modus ist. In RecyclerView kann dies Probleme verursachen — die Animation startet nur für ein Element. Lösung: Erstellen Sie einen benutzerdefinierten MarqueeTextView, der isFocused() überschreibt und immer true zurückgibt.

Ab Android 9 (API 28) hat Google das Marquee-Verhalten verbessert — die Animation wurde flüssiger und friert beim Scrollen einer Liste nicht ein. Auf älteren Geräten kann Marquee jedoch ruckeln, insbesondere bei hohen Pixeldichten.

Implementierung von scrolling text unter iOS

iOS hat kein integriertes Äquivalent zu android:ellipsize="marquee". Marquee wird manuell mit Core Animation oder SwiftUI-Animation implementiert. Der gängigste Ansatz ist die Animation von layer.position in Kombination mit einem Clipping-Container.

In UIKit wird Marquee aus drei Elementen aufgebaut: einem UILabel-Container mit clipsToBounds = true, dem Text selbst und einer CABasicAnimation zum Verschieben des Textes auf der X-Achse mit unendlicher Wiederholung und autoreverses = false, sodass die Zeile in eine Richtung scrollt und zurückspringt.

func startMarquee(for label: UILabel) {
    label.clipsToBounds = true
    label.numberOfLines = 1

    let textWidth = (label.text as? NSString)?
        .size(withAttributes: [.font: label.font as any]).width ?? 0

    guard textWidth > label.bounds.width else { return }

    let animation = CABasicAnimation(keyPath: "position.x")
    animation.fromValue = label.layer.position.x + label.bounds.width / 2
    animation.toValue = label.layer.position.x - textWidth - label.bounds.width / 2
    animation.duration = CFTimeInterval(textWidth / 60)
    animation.repeatCount = .infinity
    animation.autoreverses = false
    label.layer.add(animation, forKey: "marquee")
}

Die Berechnung von duration = textWidth / 60 ergibt eine Geschwindigkeit von etwa 60 Pixeln pro Sekunde — ein angenehmes Lesetempo. Wenn die Geschwindigkeit 120 px/s übersteigt, wird der Text unlesbar. Unter 30 px/s wirkt die Animation träge. Passen Sie die Geschwindigkeit an Ihr spezifisches Szenario an.

In SwiftUI wird Marquee einfacher implementiert — über den offset()-Modifikator mit wiederholbarer Animation und .animation(.linear(duration:).repeatForever(autoreverses: false)). SwiftUI verwaltet den Animationslebenszyklus automatisch, benötigt jedoch GeometryReader zur Bestimmung der Textbreite.

CSS-Animation statt des marquee-Tags

Im Web ist das veraltete <marquee>-Tag nicht empfohlen, obwohl Browser es weiterhin unterstützen. Die moderne Implementierung von Marquee ist CSS-Animation mit Keyframes und transform: translateX.

Vorteile des CSS-Ansatzes: vollständige Kontrolle über Geschwindigkeit, Pause und Animationskurve, Unterstützung von prefers-reduced-motion für Barrierefreiheit und das Fehlen eines semantisch inkorrekten Tags.

.marquee {
    overflow: hidden;
    white-space: nowrap;
    width: 300px;
}
.marquee-content {
    display: inline-block;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Pause on hover */
.marquee-content:hover {
    animation-play-state: paused;
}

Der entscheidende Trick: display: inline-block beim Inhalt stellt sicher, dass die Elementbreite der Textbreite entspricht, und translateX(-100%) verschiebt ihn genau um diese Breite nach links. Wenn der Inhalt display: block ist, entspricht translateX(-100%) der Containerbreite, nicht der Textbreite, und die Animation bricht.

Für Barrierefreiheit fügen Sie @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } } hinzu — Benutzer mit vestibulären Störungen sehen statischen Text mit Scrollmöglichkeit.

Wann verwenden und wann vermeiden

Marquee ist gerechtfertigt in Szenarien, in denen der Benutzer den Container nicht selbst erweitern kann und der vollständige Text entscheidend ist: der aktuelle Titel in einem Player auf dem gesperrten Bildschirm, ein Nachrichtenticker auf einem TV-Panel oder ein Marquee in einer Mitfahr-App (Bestellstatus).

Marquee sollte in Tabellen, Listen, Formularen und Dialogen nicht verwendet werden — überall dort, wo der Benutzer aktiv mit der Oberfläche interagiert. Animation lenkt vom Ziel ab, erhöht die Element-Suchzeit und erzeugt Unbehagen. Laut WebAIM (2024) berichtet 1 von 3 Benutzern mit vestibulären Störungen über Unbehagen beim Betrachten von animiertem Text.

Eine Faustregel: Wenn der Text gekürzt oder in die nächste Zeile umgebrochen werden kann — tun Sie es. Marquee ist das letzte Mittel, keine universelle Lösung für lange Beschriftungen.

Barrierefreiheit: Animation und reduced motion

Marquee ist aus Sicht der Barrierefreiheit eine der problematischsten UI-Animationen. Bewegter Text kann bei Menschen mit vestibulären Störungen Schwindel, Übelkeit und Desorientierung verursachen. Gemäß WCAG 2.2 muss jede Animation, die länger als 5 Sekunden dauert, einen Pausen- oder Deaktivierungsmechanismus haben.

Unter iOS verwenden Sie die Eigenschaft UIAccessibility.isReduceMotionEnabled, um die Systemeinstellung zu überprüfen. Wenn reduceMotion aktiviert ist — starten Sie die Animation nicht, zeigen Sie statischen Text mit ellipsize.

Unter Android überprüfen Sie die Systemanimation über Settings.Global.ANIMATOR_DURATION_SCALE. Wenn die globale Animation deaktiviert ist (duration scale = 0), sollte Marquee nicht aktiviert werden.

Im Web verwenden Sie die Medienfunktion prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } }. Dies ist eine standardmäßige CSS-Funktion, die von allen modernen Browsern unterstützt wird. Überprüfen Sie in DevTools: Aktivieren Sie die Emulation von prefers-reduced-motion und stellen Sie sicher, dass die Animation deaktiviert wird.