Web safe text

Content
1

I am aware of the web safe text thing but what about creating a jpeg out of the text you want and adding it to your site??

Is that ok?

2

Search engines can’t read it, users can’t select it, images can fail to be downloaded, more HTTP requests ( = slower load time), text in the image won’t always look the same as actual text (due to people’s computers rendering fonts differently)… there are probably more drawbacks. The only thing this should really be done for is the odd logo. Some people do it with headings.

A workaround for this issue was attempted with sIFR. It has drawbacks of its own. CSS3 allows for whatever font you want to be used and there is support in latter versions of Firefox and Webkit (maybe Opera too, not sure). But there are licensing issues and sometimes you get an ugly change from the default font to the custom font.

In short: only do it if you really really have to, and don’t do it too much.

3

So what would be the best way to implement a design like this

799×417 18.8 KB

This is just a rough idea of something I was planning for a home page…

Thanks

4

You could always have a heading element (like H2) with the text inside it, set the image version of the text as a background image and then offset the text using a negative text-indent value. That way you’ll have the naturally indexable text available for search engines and people with CSS disabled, granted it’s not a perfect solution but unless your visitors have both CSS and images turned off, you should be fine. :slight_smile:

5

Quite confused now as I was told by another guy that the image will show up in different browsers…

Is it just that google won’t pick it up that’s the problem?

And what you’re saying to fix this is to use that image as a background image and use H2 tags so that google can search it??

Sorry, you have to dumb things down for me :slight_smile:

6

Basically… add an H2 element where the image was like so:

<h2>Lee Hughes</h2>

Add the CSS (and configure it) like so:

h2 {background-image: url{"/images/lee.jpeg"; text-indent: -500px; width: 350px; height: 90px; overflow: hidden;}

Then you’ll have a text heading (which search engines can read) that shows your image in the background (with the text pushed off the screen) :slight_smile:

7

wicked…

Thanks for your help :slight_smile:

Is it possible to add film adventure and photography to the h2 tag as well so I have more keywords in?

8

Do those keywords have links associated with them? If so you could probably add each item separately as H3’s below the H2 (using the same style effect).

If you are having the thing as one huge image then sure you can add the additional stuff in, though I would add a dash ( - ) to separate it from the top title. :slight_smile:

9

Yeah, I wil be adding 3 clickable photos under the words… :slight_smile:

Thanks

10

With those three clickable photo’s you could do the following…

Add an unordered list with each keyword:

<h2>Lee Hughes</h2>
<ul>
<li id="film"><a href="#" title="Film Maker">Film Maker</a></li>
<li id="photo"><a href="#" title="Photographer">Photographer</a></li>
<li id="adventure"><a href="#" title="Adventurer">Adventurer</a></li>
</ul>

Add the CSS as follows:

h2, li a {text-indent: -500px; overflow: hidden; position: absolute;}
h2 {background-image: url("/images/lee.jpeg"); width: 350px; height: 90px; top: 50px; left: 50px;}
#film a {background-image: url("/images/film.jpeg"); width: 150px; height: 90px; top: 50px; left: 50px;}
#photo a {background-image: url("/images/photo.jpeg"); width: 150px; height: 90px; top: 50px; left: 50px;}
#adventure a {background-image: url("/images/adventure.jpeg"); width: 150px; height: 90px; top: 50px; left: 50px;}

And you just set the width and height for each image and set the exact position you want for each item individually using top and left.

Therefore you will have a list of clickable links (with the background images) and the heading… all positioned and sized absolutely where you need them. :slight_smile:

11

Wow…

Much respect and thanks :slight_smile:

12

No worries, glad the code is useful :slight_smile:

PS: I noticed a bug (which I’ve fixed) in the CSS so you’ll probably need to re-copy it to make use of it (without it going wonky) - I’m half asleep, lol

13

And BTW, it’s “Adventurer”. :wink:

14

Raffles, I can’t see the error you are getting, the ID names aren’t the same (granted) but they work :confused: