Marquee for TYPO3

Scrolling text and ticker bands need no extension, because CSS does it in 20 lines

Everyone knows the marquee from the early days of the web: text scrolling across the page from right to left. The HTML <marquee> tag has been deprecated for years, but the effect is still in demand. News tickers, notice banners (“Scheduled maintenance on Saturday”) and event announcements use scrolling text to grab attention. A marquee extension for TYPO3 is published neither in the TER nor on Packagist, so what it provides cannot be verified. Gosign recommends a pure CSS solution instead, one that needs no extension, no JavaScript and no update cycle.

The difference is fundamental: every extension is an additional dependency that has to be carried along with every TYPO3 upgrade. The CSS alternative is a single CSS animation (20 lines) on a regular text content element. Performance, accessibility and maintenance effort all clearly favor the CSS approach.

Typical use cases are maintenance notices, promotional banners and sports scores

The most common scenario is the notice banner on corporate websites: “Our office is closed from December 24 to January 2” or “Register now: webinar on March 15”. The scrolling text draws attention without being a popup. Editors maintain the text in the TYPO3 backend and switch the banner on or off with a start and end date.

The second scenario is news tickers on news portals and intranet home pages. The latest three to five headlines run as a ticker along the top of the page, and each headline links to the full story. The speed is set so that the text stays readable (recommended: 30 to 50 pixels per second).

The third scenario is sports scores on club websites. On match day, a ticker shows the current results of all the club’s teams. The data comes from a TYPO3 table or an external feed and is displayed as scrolling text. Combined with automatic updates via AJAX every 60 seconds, the ticker becomes a real-time information channel without the complexity of a full live ticker extension.

Technically, the CSS alternative needs no content element

There is no public version of the marquee extension in the TER or on Packagist, so its structure cannot be verified. The CSS alternative, by contrast, needs no content element of its own, no Fluid template and no JavaScript: speed, pause on hover and the endless loop are all part of the CSS animation.

The CSS alternative works like this: a regular text content element gets a CSS class (for example “marquee”), and the CSS animation @keyframes scroll moves the text from right to left. The animation loops endlessly, pauses on hover (via :hover) and respects the operating system’s prefers-reduced-motion setting, which matters for accessibility. The complete code:

.marquee { overflow: hidden; white-space: nowrap; }
.marquee span { display: inline-block; animation: scroll 20s linear infinite; }
.marquee:hover span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee span { animation: none; } }
@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

Common problems are accessibility, mobile display and SEO relevance

Problem one: accessibility. Moving content is a problem for people with cognitive impairments or epilepsy. WCAG 2.1 requires that animations can be paused, stopped or hidden. The CSS solution pauses on hover and automatically respects the prefers-reduced-motion setting; it still needs a stop button, though.

Problem two: mobile display. On smartphones, the space available for scrolling text is minimal. A ticker that reads well on desktop rushes past so fast on a phone that nobody can follow it. The fix: on mobile devices, replace the ticker with a static banner that shows the most important message without animation.

Problem three: SEO relevance. Search engines do index scrolling text, but the UX signals (short dwell time on the ticker, no clicks) can drag down the perceived quality of the page. Ticker content should always be available as regular page content as well, never exclusively in the ticker.

A fourth problem: accessibility compliance for public bodies. EN 301 549, the European accessibility standard behind the EU Web Accessibility Directive and a key reference for the European Accessibility Act (implemented in Germany as the BFSG), requires that moving content can be paused and stopped. A marquee without a stop button or pause mechanism violates WCAG 2.2.2 (Pause, Stop, Hide). The CSS solution with prefers-reduced-motion and a :hover pause meets this requirement partially; full conformance needs an explicit pause button. (UK: The European Accessibility Act is not UK law, although it covers UK companies selling into the EU; UK public sector websites fall under the Public Sector Bodies Accessibility Regulations 2018.)

For current TYPO3 versions, the extension is redundant

There is no public version of the marquee extension that supports TYPO3 v12 or v13. Since the CSS alternative takes 15 minutes to implement and creates no extension dependency, Gosign recommends switching at every migration. Editors use a regular text content element with a special CSS class defined in the sitepackage. That is maintenance-free, fast and, with a pause button added, accessible.

For projects that want to rotate several messages through the ticker, an extended CSS animation that runs through multiple text blocks in sequence is enough. Alternatively, a minimal JavaScript (under 20 lines) can load the texts from a JSON source and control the animation. Both are architecturally cleaner than a dedicated extension for a single visual effect. At Gosign, we use the CSS approach in every project that needs a ticker or scrolling text.