Is it possible to make CSS-added text searchable by a browser?
Posted
by
Andrew Stacey
on Pro Webmasters
See other posts from Pro Webmasters
or by Andrew Stacey
Published on 2012-11-07T10:34:56Z
Indexed on
2012/11/07
11:21 UTC
Read the original article
Hit count: 292
I run a website that uses CSS pseudo classes to insert text here and there. One of them inserts the value of a CSS counter (whereupon it would require considerable re-engineering of the system to do this without CSS text injection). The specific CSS rule is:
.num_defn .theorem_label:after {
content: " " counter(definition, decimal);
counter-increment: definition;
}
and this converts "Definition" to "Definition 1" (say).
However, the injected text is not searchable by the browser. It doesn't see the 1
: if I search for "Definition 1" then it doesn't find it, and if I search for "Definition. Whatever the definition text was" then the browser happily highlights the line except for the inserted 1
. So if you imagine the bold text as the highlighting, it would look like:
Definition 1 . Whatever the definition text was
This is not ideal! People like to refer to definitions by their number and to say "Look at Definition 1 on the page XYZ" (and in contexts where hyperlinks are not available - strange, I know, but it does happen).
Thus:
- Is there any way that I, on the server end, can designate the injected text as "searchable"?
- If not, is there a simple way at the browser end that this can be enabled?
© Pro Webmasters or respective owner