Why negative CSS text-indent doesn't always work

Negative text indentation is used in CSS to create the effect of some text hanging out of a block. For example:

#box h1 {
  text-indent: -1em;
}

In this case, some versions of Internet Explorer will crop the text on the left (or right, depending on the writing direction). Is this a bug? Though many web developers think so, this is a typical case of lack of details in the CSS specifications, not of a bug per se. In fact, CSS specifications don't take this particular case into account. They only say that the text-indent property accepts negative values, but nothing more. How negative text indentation must be handled is up to every single browser.

Currently, many browsers have accepted the convention of showing the given text hanging out of its block and this is exactly the final effect that web developers want to achieve. On the contrary, we can't say that not showing the text or cropping it is actually a bug, but rather a different interpretation of the specifications which, as said earlier, don't say much about this particular case.

Leave a Reply

Note: Only a member of this blog may post a comment.