2021-05-26 mozilla, webcompat

During my work on Web Compatibility at Mozilla, I see many things that break in exciting ways. Sometimes, it’s obvious stuff like flexbox compat issues¹, but sometimes, the breakages are a bit surprising. Today, the star of the show is a single CSS instruction:

text-indent: -9999px

When we talk about web compatibility issues, most people think about an elite subset of “well-known” breakages or massive layout issues. They rarely think about innocent-looking things like text-indent. And to be fair, most of the time, neither do we browser people.

This large negative text-indent appears to be a hack, frequently used to “move away” labels next to icons, probably to hide them from view but keep them in the markup for screen readers and similar user agents. Please don’t do that, there are better alternatives for screenreaders. Even though having a negative indentation seems like a good solution, the unfortunate reality is that text-indent has some weird cross-browser quirks. Two examples that I stumbled across in the last month:

• Some disagreement between browsers around using relative units in text-indent inside form elements.
• A weird issue in Blink where it ignored text-indent on anonymous flex items.

… and there are a lot more.

text-indent does extend the size of an element, but not in a fixed direction, but depending on the direction of text flow. Here’s a quick example:

<style>
  #text-indent-demo p {
    text-indent: 100px;
  }
</style>
<section id="text-indent-demo">
  <p style="direction: ltr;">one</p>
  <p style="direction: rtl;">two</p>
  <p style="direction: ltr; writing-mode: vertical-lr;">three</p>
  <p style="direction: rtl; writing-mode: vertical-lr;">five</p>
</section>

As you can see, we have the same text-indent: 100px;, but in four different directions depending on the text direction and writing mode. This makes perfect sense if you think about it, but developers can get caught off-guard here, especially if working on a site that later gets translated. Or, well, if browsers misbehave.

On an Israeli site I recently looked at, a large negative text-indent caused the site to be extended to the right, which caused some viewport issues in Firefox for Android because we try to fit everything into your view. Another example is a report about a Romanian news site, where clicking on the social links left a dotted border all across the screen because they extended their buttons 9999px to the left without overflow: hidden’ing it. In Chrome, this particular case is not noticeable because Chrome does not show focus borders the same way Firefox does, but the issue is still there. There are more examples of things going wrong in unexpected ways, but you get the gist.

While I am only talking about text-indent here, mainly because the text direction dependency adds an interesting twist, note that all methods of “moving something out of the screen to make it invisible” have similar issues. Even if you move things really far away, they still exist inside the document, and they can have unexpected side effects.

So… please don’t. The web is broken enough already. :)