Wikipedia has lots of content, but some of it is unreadable on smartphones because of their small screens. For years our software has had hidden content incompatible with mobile displays. This approach always bugged us because we want user-generated content to be visible. At last, we found a way to address the issue: TemplateStyles, a technology for editors to format content for mobile presentation.
What was out there before TemplateStyles?
Brad Jorsch: Historically, there have been two ways to style content on a MediaWiki site such as Wikipedia: use inline CSS everywhere, or add it to site-global files like MediaWiki:Common.css. The first is problematic because it means you have to repeat those styles every time you want to use them on different pages or even within the same page. The first is also an issue because some features, like the ability to specify styles for different screen sizes, aren’t available to inline styles. The second is problematic because only wiki administrators can edit these site-global files, and the CSS could quickly grow to huge sizes if every special case were added there.
What problem does TemplateStyles solve?
Brad: What we wanted is a way for non-administrator contributors to be able to create reusable stylesheets that can be included in articles only as needed, with the ability to specify styles for different-sized devices. Since it makes most sense to use this in conjunction with MediaWiki’s existing wikitext templating, we called it TemplateStyles. It was one of those ideas that was hanging around for a while, waiting for someone to have the time to pick it up.
In early 2016, User:Coren picked up the idea as a volunteer project. Coren created an initial prototype of the software, but several security issues were identified that future development would need to resolve. Coren, unfortunately, didn’t have the time to take it further. The Wikimedia Foundation’s Reading Infrastructure team later picked it up to finish the project. During the first half of 2017 Brad Jorsch wrote a standards-based CSS parser and sanitizer library for PHP to resolve the security issues, and wrote a new version of the TemplateStyles extension with the cooperation of Gergő Tisza to use it.
Gergő Tisza: This was the biggest part of the work. Not only did it solve the problem of safe user-generated CSS for Wikimedia, it also solved it for everyone running a PHP website of any kind. I think it’s one-of-its-kind—there are some other CSS parsers written in PHP, but none meant to deal with untrusted input.
Who will use TemplateStyles?
Brad: The main audience is the editors of MediaWiki sites, more specifically those who create templates that need styling. It could also find good use for wikis’ main pages and portals.
Chris Koerner: As Brad mentioned folks who maintain meta templates—like those regarding page issues ({{Article for deletion}}, {{Hoax}}, etc.), navigation aids, and in-article data displays like climate data or ratings—could benefit from using TemplateStyles to improve the accessibility of their work on multiple devices. There’s a lot of possibility across wikis where templates are used.
What has been the response so far?
Chris: User:Nirmos, the Swedish Wikipedian who we’ve worked with, was impressed with the Performance team’s willingness to monitor performance as they worked. They have also filed tasks and been happy with the team (Brad and Gergő in particular) and their responsiveness. Nirmos has been implementing TemplateStyles on the Swedish Wikipedia, which from an adoption perspective is great!
How does TemplateStyles help readers and template writers?
Brad: Template writers and design-inclined individuals will be able to style templates more easily, and will be able to design templates that look good on both desktop and mobile devices. Additionally, copying some templates (like the English Wikipedia’s message box templates) to other wikis can become easier, since those doing the import won’t have to find the right pieces of MediaWiki:Common.css to manually copy.
Readers should benefit as template writers take advantage of the ability to make styles better adapt to different devices.
Gergő: I also want to point out that this will improve template maintainability. MediaWiki:*.css changes are hard to test because they are loaded as external stylesheets, are cached, and are not integrated with the normal page rendering process. TemplateStyle styles are included in the page, and rendered via the normal mechanism, making the standard editing toolchain (such as TemplateSandbox) work. Also, there is no easy way for the wikitext editor to support inline styles. CSS pages can have a dedicated editor which helps editors with syntax highlight, validation, typeahead etc.
- What’s next?
Brad: Right now it’s deployed to mediawiki.org, wikitech.wikimedia.org, and the Swedish Wikipedia. Next is to get it deployed to more wikis.
Chris/Adam: Are you good at writing CSS that works on both laptops and smartphones? Would you like to help make Wikipedia articles easier to read on smartphones with TemplateStyles? Submit a task in Phabricator, the Wikimedia task tracking software, with a request to have TemplateStyles enabled.
- Anything else you’d like to add?
Adam Baso: TemplateStyles helps to fix the layout problem of complex information on smartphones. But we still have a challenge with heavyweight HTML, which is taxing on mobile device hardware (processor, RAM, etc.). Even if the layout looks good, the HTML may be overkill. In the future we’d like to figure out how to use TemplateStyles to reduce the HTML markup actually sent to mobile devices or at least minimize the hardware impact on mobile devices. For devices with an even smaller footprint, like smart watches and embedded devices, technology that can automatically change the HTML to accommodate the constrained hardware and expected format will be essential.
———
Brad Jorsch, Senior Software Engineer, MediaWiki Platform
Adam Baso, Director, Reading Engineering
Chris Koerner, Community Liaison
Gergő Tisza, Senior Software Engineer, Reading Infrastructure
Wikimedia Foundation
