text-indent minimum negative value

Question

What is the minimum allowed negative value for the text-indent property?

I was using a bizarrely huge value in my site (something like text-indent: -99999999px), and it stopped working with the last Google Chrome update. IE still works fine, but I may need to remove a couple of 9's from there to make it work with Chrome again.

Disclaimer: yes, this value is a bit too paranoid, I used it for fun and copmletely forgot about it until the text popped out on the screen today. But the usually suggested text-indent: -9999px might easily fail at some point in (not so) distant future?

Answer 1

A safe value is probably -32768px, however this is not part of spec but rather an observation of a (possibly outdated) implementation-specific legacy restriction.

Before CSS property values can be applied to elements at render-time, those declarations have to be parsed into something more operable and abstract than, effectively, a string. I mean, you can type almost anything as a property value:

.a {text-indent: -999px;}
.b {text-indent: -99999999px;}
.c {text-indent: medium potato;}

The first example would, fingers crossed, get parsed correctly; the last one is invalid and would be ignored (since a medium potato is not currently part of w3c CSS spec); but the middle one would be quirky should it overflow (not "fit" in memory as allocated by the browser). I've put together a fiddle and these are the text-indent values at which the browsers "choked" and defaulted to zero:

#On OSX 10.8 Lion 64bit:
Safari 6       -2^31
Chrome 22      -2^26  #your original -99999999px would have failed here
Firefox 14     -2^70
Opera 12       -2^70

#On Win Server 2008 64bit:
Firefox 13     -2^70
Chrome 21      -2^70
IE 9           -2^70

This got me curious, I'll run more tests on another box tomorrow. Results above updated, nothing too excited. You can also run your own test using this fiddle - the first item that remains visible would show the value applied that got ignored. I'm assuming the values would vary depending on the browser/OS used as well as possibly hardware.

I remember first seeing a practical reference of such a limitation in an article on styling faux columns^ that suggested a conservative constraint to be that of a 16-bit signed integer (from -32768 to +32767) - which would apply to not only text indents but other length values. I'm not aware of how consistent this value is across different browsers and their versions, nor how applicable it would be to fractions or values expressed in different units.

Answer 2

There is no Minimum text indent - I have used just a couple of pixels before but that is bad practice to use for layout/design, ensure it scrolls off the screen when viewing on say Plasma sized layouts 99999px - is more than enough - use margins paddings and positions if you still want to see the text and are using for styling.

Answer 3

I have issues in ipad safari using a number of 99999em, fixed for me setting it to 9999em. So maybe there is not limit, but should be one for avoid this mistakes.