ansaurus

Question

How to find text in images with the browser control+F

Answer 1

A:

Hmm... I was going to recommend Cufon as an alternative to using generated images, but it's not perfect: Searching works in Firefox but not too well (bad positioning and no highlighting).

Still way better than images as headlines.

Pekka 2010-06-11 13:16:55

Answer 2

+2 A:

To accomplish this I have used the typeface.js Javascript library

You can generate custom fonts for this library using this generator

These sites also have examples and usage instructions.

gruntled 2010-06-11 13:21:02

Tried Ctrl+F and did not find the text

Riga 2010-06-11 14:43:17

I'm looking at some of their examples and they aren't searchable. but I am using this on a website where searching works fine. I'll see if there is a specific flag for it.

gruntled 2010-06-11 15:06:18

what version of the typeface library are you using?

gruntled 2010-06-11 15:10:47

I did something wrong, Ctrl+F works on typeface website so yes text is searchable!

Riga 2010-06-11 15:58:31

Answer 3

+4 A:

Why not try out the Google Font Directory

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Russell Dias 2010-06-11 13:23:04

The font required by my client is not in the set provided by Google. My client is not sure about the copyrightTried with FFox 3.6 and all the fonts look the same.

Riga 2010-06-11 14:44:42

Answer 4

+1 A:

Generally the best approach to image replacement is to do so exclusively within the stylesheet.

The HTML should still look like:

<h2 id="fantastic-section-of-awesomeness"><span>This is an Ordinary Heading</span></h2>

Your CSS can then do:

h2#fantastic-section-of-awesomeness {
    background: ...; /* The replacement image */
}
h2 span {
    text-indent: -100000px;
}

Note that the text is not actually hidden. Some screen readers interpret display: none; incorrectly (even when given in a media="screen" stylesheet). Instead, we simply shift it far off the left side of the screen where it can't realistically be seen.

I have not specifically tested this for Ctrl+F, but the fact that the text is still technically visible should allow the browser to find it.

It will not be able to highlight the image as a match, however, which may still lead to confusion. There's no real way around that without using an @font-face.

VoteyDisciple 2010-06-11 13:23:49

Answer 5

A:

You could also use the z-index on elements:

<html>
    <body>
        ...
        <div>
            <div style="position:absolute; z-index: 1">My Section Header</div>
            <div style="position:absolute; z-index: 2"><img src="test.png"/></div>
        </div>
        ...
    </body>
</html>

The image is in front of the text so that the user sees only the image but can find the section when he searches for "My Section Header".

Daniel Engmann 2010-06-11 13:27:41

ansaurus

tags:

views:

answers:

How to find text in images with the browser control+F

related questions