3

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?

vgru
  • 49,838
  • 16
  • 120
  • 201

3 Answers3

7

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.

Oleg
  • 24,465
  • 8
  • 61
  • 91
  • 2
    Thanks! This is a great answer. I've seen that site mentioning the 16-bit limit, and then stumbled upon [this thread](http://stackoverflow.com/q/8565821/69809) which mentioned a rather large max value for z-index in Chrome. – vgru Oct 01 '12 at 10:25
0

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.

Jamie Paterson
  • 426
  • 3
  • 10
  • Sorry, I don't understand, what does "there is no minimum text indent" mean? – vgru Oct 01 '12 at 11:30
  • You asked for "minimum allowed negative value for the text-indent". You could indent by -1px or -9999px but there is no minimum. If however you use something like -1px or -10px etc (low numbers) you would only really be using it to style which is not what it is meant for. It is only supposed to be used for scrolling text off the screen for visual purposes but allows screen readers and the like to still read it in line with the document flow regardless of it being off the screen. Hope this helps. – Jamie Paterson Oct 04 '12 at 15:19
  • But, I still don't understand what you mean by "there is no minimum". In computing, there is always a limit when working with numeric values. Have you read [@ov's answer](http://stackoverflow.com/a/12669802/69809)? There is clearly a minimum of `-2^26` in Google Chrome, which fails for values which I used initially. – vgru Oct 04 '12 at 15:35
  • What are you trying to acheive then? are you needing this for something useful on the web. Your example returns -67,108,864 / Why would this ever be required. If you need to scroll off the screen just use -999999px - this should be safe enough for the forseable future. – Jamie Paterson Oct 08 '12 at 08:36
0

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.

charlscross
  • 1