I am using images to display text in non standard fonts and I am wondering if there is a way to still be able to select the text in the image. I am thinking about putting clear text in front of the image, but I hear that really effects SEO. I have the alt text set correct. Any Ideas?

4 answers

3
points

if you have a look at http://www.bclm.co.uk/ you will notice that the topmost navigation is all images, but in Safari and Firefox, dragging the mouse over the images will enable copying the text that is hidden by the images.

You should be able to achieve what you want if you use a decent image replacement technique.

for that site I used:

<a href="where.htm" id="herelink" title="We are here: Tipton Road, Dudley, West Midlands, DY1 4SQ Click for Maps"><span>&nbsp;</span>We are here, Click for Maps</a>

with:

a#herelink{position:relative;height:131px;width:140px;}
a#herelink span{position:absolute;width:100%;height:100%;background:url('images/we_are_here.jpg') no-repeat top right;}

which just positions the image over the text.

A variant of that technique might help you?

If you really want to make text easily selectable, you'll probably have to avoid non-standard fonts...

Answered over 6 years ago by Tony Crockford
  • This is the technique I use if the font license doesn't allow embedding. Doug over 6 years ago
Jordan 469
0
points

You can try creating an image map from the image, and making the text portion of the image the only "clickable" area. For more information on image maps click here.

Answered over 6 years ago by Jordan
0
points

I want to be able to select the text for the purposes of copying/pasting. I don't think an image map can do that.

Answered over 6 years ago by Collin Anderson
Mottie 1134
0
points

Why not use @font-face to show the non-standard font you are using instead of using images?

Paul Irish posted a very nice article on bulletproof @font-face syntax and it even works for IE. In fact, you can download an entire @font-face "kit" (includes fonts and CSS) from Font Squirrel.

Answered over 6 years ago by Mottie
  • This is the best approach, but you have to be careful that your font license allows it. Beware that not all fonts at the awesome Font Squirrel are licensed for @font-face! Doug over 6 years ago