views:

243

answers:

4

Is it possible to highlight text in an HTML document using without wrapping it with <span> or any other tag for that matter?

For example, in the HTML code <p>The quick fox</p> I would like to highlight quick but without adding a DOM element around it. Adding a DOM element to a parent element is fine.

Thanks!

+7  A: 

No, it is not possible.

You can't tell the browser to render a piece of text differently without inherently changing the DOM, regardless of whether you do it statically or dynamically (with Javascript, for example, as a post processing step).

Mike Atlas
You don't need to change the DOM if your changing pixels in a transparent canvas overlay.
Eli Grey
How would you get the absolute position of a piece of text without changing the DOM?
Mike Atlas
Add the <span> element to the DOM, find out its position, then delete it and normalize().
bosh
What if they resize the browser window?
Mike Atlas
Naturally you will need to recompute on resizes.
bosh
Technically my answer is still correct - you did wrap it with tags, but then you removed them after... Do you have a public demonstration/link? I'd like to see it in action.
Mike Atlas
A: 

It's not possible.

If you just want no tags in the original source code, it might be possible by adding tags later using Javascript magic. You could do something like

<p highlight="quick">The quick fox</p>

and write a JQuery/Prototype/plain JS function to highlight it on the fly, but what for and why? If you elaborate a bit, someone may come up with an idea.

Pekka
A: 

The only way to do this than I can imagine would be to use the <canvas> element, and render absolutely everything by hand.

August Lilleaas
+1  A: 

It is possible if you use an absolutely positioned element with a transparent repeating background image or a transparent background color (using rgba or hsla) and position it over the selected area.

Another way to do it would be to have an absolutely positioned canvas element without a background that takes up the whole browser viewport and draw a transparent rectangle over the selection.

Eli Grey
How would you get the absolute position of a piece of text without changing the DOM?
Mike Atlas
Add the <span> element to the DOM, find out its position, then delete it and normalize().
bosh