Question

I am attempting to complete a browser plugin that will analyze text and mark it in some fashion.

Basically,
let’s say your browsing and you see this come across this text somewhere in your page.

<p>and then Tom Cruise, devoured the planet.</p>

The plugin is scanning the text and will find “Tom Cruise.” Once moused over spit AJAX at my server and return a HTML page to be will be displayed in a tool tip.

I originally marked it like so

<p>and then <span class="ajax subtleShadow">Tom Cruise</span>, devoured the planet.</p>

Though i am discovering that this can go wrong, if the webpage has strange span css or if its nested in a span with strange things like borders.

My solution was to INVENT a new html tags. like so…

<p>and then <fhwdgads class="ajax subtleShadow">Tom Cruise</fhwdgads>, devoured the planet.</p>

Though a quick search lead me to the conclusion that “the internet” would come after me with pitchforks should I do so.

Is there another way to mark inline text creation of custom tags?

EDIT : Link to a view of the broken button in the nested spans.

Answer 1

There’s really no guarantee that <fhwdgads> is never recognized as a tag with some special semantics or formatting. It might be improbable if you use a very messy tag name, but would you, really? People tend to use mnemonic names when they invent tags, and then there’s a real chance of clashing with tags in some current or future spec or browser.

Moreover, some old versions of IE ignore unrecognized tags completely, e.g. do not let you style them. This can be avoided using document.createElement() once for each tag name, though.

Using span or div is as such safe in practice. There is no reason to think that browsers have some fancy formatting for them by default. Just as we don’t stop using h1 even though it is theoretically possible that it will make the content pink and blinking. It’s impossible to be foolproof if you expect browser vendors to be totally crazy.

Using classes is a different matter, though only in the sense that other style sheets play with the same class names as you. You might need to work in an environment where other author style sheets interfere with yours. But this just calls for caution; it does not make a span or div element with a class the wrong tool.