Comments on: Select text in web page

Question: Select text in web page

yclipse — Wed, 11 Jan 2006 20:15:46 -0800

What is it about some web sites that makes it very difficult to select and copy text?

An example of this behavior is here.

I have inspected the source of some of these sites, and most seem to use the DIV tag. But what about it leads the system to select the entirety of a block, or certain parts of a block, rather than the text selected by the mouse?

By: camcgee

camcgee — Wed, 11 Jan 2006 20:19:46 -0800

Using Firefox 1.5 on XP I'm not having any problem selecting or copying the text--what browser/OS are you talking about?

By: juiceCake

juiceCake — Wed, 11 Jan 2006 20:21:58 -0800

I can select any thing I want on that page, from a single letter, to double-clicking a word, to clicking and dragging over any type (Firefox.)

However, sometimes, divs can be positioned over each other or overlap, not to mention hidden, which can affect selection at times. Or so I've found in the past.

By: Firas

Firas — Wed, 11 Jan 2006 20:23:39 -0800

It acts weirdly in IE, which probably has to do with the fact that most of the elements are positioned using CSS and their appearance on the page is not in order of their appearance in the markup.

So: file this one under IE brokenness.

By: spilon

spilon — Wed, 11 Jan 2006 20:25:42 -0800

Selects fine for me in Safari, FWIW.

By: tiamat

tiamat — Wed, 11 Jan 2006 20:39:15 -0800

Also using Firefox, also works fine for me. I don't know if anyone has told you this yet yclipse, but internet explorer doesn't do a lot of the things a web browser is supposed to do, like obey standards. For that matter, it also does a lot of things its not supposed to do, like install software on your system without asking, and yes, prevent you from right-clicking or highlighting text.

By: AlisonM

AlisonM — Wed, 11 Jan 2006 20:39:40 -0800

I am also able to select fine (Firefox 1.0.2, Win XP), but I see what you mean, I think - are you trying to select from the blank white area to the left of the column? (Like, are you starting your click & drag in that blank white area?)

Maybe you're having trouble because of that. Try starting at the bottom of the paragraph/end of the line you want to end with, or start it JUST AT the first letter you want to select, seems to help for me.

By: twiggy

twiggy — Wed, 11 Jan 2006 20:40:56 -0800

1) See Firas's post.

2) Understand why the whole "layout with tables is evil, use CSS for everything!" argument may not always be a great one.

3) profit?

(firas is correct as to why selecting behaves annoyingly in IE... firefox does not have this same craptacular behavior, but I still use IE because I'm a web developer in my spare time, and it's what I must use, since it's what my audience will be using)..

By: charmston

charmston — Wed, 11 Jan 2006 20:42:32 -0800

I have run into problems with text selection in IE when the element is positioned (either absolute, relative, or fixed; as long as position is defined) and the line-height is declared as well. Firas is right, it's just another IE problem.

By: holloway

holloway — Wed, 11 Jan 2006 22:24:18 -0800

Yeah, Juicecake is most correct. The html order vs screen order isn't really the issue here* -- IE just gets confused with overlapping DIVs in that it doesn't know which layer you're trying to select by dragging the mouse. The symptoms are that IE will select large areas rather than the few lines you were intending to select.

Specifically it's overlapping divs that are placed using absolute positioning or floats with negative margins. Eg, an absolute positioned div that's overlapping with another div that's just in the flow of the page won't cause a problem.

For a 3 column layout I usually absolute position my left and right columns, then leave the middle column in flow and use padding to place it further down the page. It's a bit of a hack but it's very cross-browser compatible.

By: holloway

holloway — Wed, 11 Jan 2006 22:25:15 -0800

* natch, forgot to say that in everything I've seen that's the case, but I'd love to see some examples if I'm wrong

By: polyglot

polyglot — Wed, 11 Jan 2006 22:53:29 -0800

yclipse, chalk it up to IE brokenness. IE seems most broken with respect to CSS. On preview, holloway beats me to it and I shall delete my inferior explanation.

twiggy: "my audience only uses IE" is a bad assumption. 55% of visits to my site last month were Moz/FF, 40% IE, 5% Safari/Opera. Admittedly that is partially due to some technical content and relatively web-savvy readers, but nevertheless. That's not to say you shouldn't be mindful of IE bugs in your page design but I certainly would not design for it as the primary client.

By: Civil_Disobedient

Civil_Disobedient — Thu, 12 Jan 2006 04:46:15 -0800

FYI, you can specify blocks that are not copyable in javascript.

For instance:



<input onfocus="this.blur();" value="Can't touch this" />

By: clarissajoy

clarissajoy — Thu, 12 Jan 2006 08:23:56 -0800

I've run into this problem before. It's a bug in IE6, where any text inside a div that is styled with position:absolute can not be selected. It doesn't appear to affect any other browsers, or other versions of IE.

By: holloway

holloway — Thu, 12 Jan 2006 14:34:46 -0800

clarissajoy: That's not right (it's too broad a statement). There's no problem with position:absolute -- using that works and text can still be selected.
What causes the issue is overlapping DIVs.