CODEWITHSUNDEEP
htmlimagefindtitle
Ricardo stands with Ukraine
Ricardo stands with Ukraine

Reputation: 4822

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

Have HTML pages with many sections and each section has a section title displayed as an image (to use nice font). The problem is that even if I specify an 'alt' and 'title' text on each image/title the Ctrl+F browser functionality does not find the text. Thought two possible solutions but not very happy about them

  1. Use embed fonts. Problem: Can not find the font required by client to use and not sure about copyrights.

  2. Have the text in the image in DIV near the image but hidden from user view. Problem: Can search engines consider this keyword stuffing? Will browser find text if display:none

Does anybody has a better solution? Thanks Riga

Upvotes: 10

Views: 7038

Answers (6)

Kirk Elliott
Kirk Elliott

Reputation: 133

Looks like times have changed, I came here looking for the API to style the search results lol enter image description here

Upvotes: 0

VoteyDisciple
VoteyDisciple

Reputation: 37803

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.

Upvotes: 2

Daniel Engmann
Daniel Engmann

Reputation: 2850

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".

Upvotes: 1

Russell Dias
Russell Dias

Reputation: 73292

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.

Upvotes: 5

gruntled
gruntled

Reputation: 2694

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.

Upvotes: 2

Pekka
Pekka

Reputation: 449435

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.

Upvotes: 0

Related Questions