5 replies to this topic

[pasten]

Example(Click)

The concept behind this article came a few days ago when I was chatting in the shoutbox here. I was thinking about whether we could include fonts (.ttf) on server and with the help of some frameworks we could display text in browser. Unfortunately, after much chatting and pleasing google (it just didn't show any mercy that day), I finally understood its not possible.

I actually wanted headings (h1, h2... you get it?) in a webpage to use a nice font which I have. The problem is visitors won't have that font installed in thier system. The second idea was to convert those headings to gif. The alt attribute to the image in case of text browser or browser disabling images would not look good (it's a heading right?). So, what I found at last was a technique using css. I am explaining that in detail here so you save time luring google to throw you the best

Ok, I assume you know basic css. The idea behind this is to display the image (created using unknown fonts) in the place of text. In addition, you want the text to be present behind the image so that it becomes visible only if the image fails to download or the user disabled images shown in his browser. The trick is, I placed an empty span inside a heading. I relatively positioned the heading so child p elements can be absolutely positioned relative to it. I assigned a background image to the span and absolutely positioned it in front of the text in the heading element. I sized the span and the heading to accomodate exact size of the background image. The end product is that the background image of the span covers the text in the heading, and if the image fails to download, the styled css text is shown in the heading. Now!!! Is there any better way?

So, Here's the HTML and yes it is legal w3c:

Quote

<h1 id="h1" >Heading to display when image fails<span></span></h1>

and here goes the css:

Quote

#h1 { position:relative; width:250px; height:70px; overflow:hidden; }

#h1 span { position:absolute; width:250px; height:70px; left:0; top:0; background:url("heading1.jpg") no-repeat; }
/* Simple! Isn't it? */

Just remember the width and height should be same for both, replace those numbers with yours. And for the validity of code, I only processed in my brain while writing, please post any mistakes if any. I would put the end result if you want and if I too get the time.

Attached Files

•  1.jpg   15.26K   2 downloads
•  Using_image_fonts_in_webpage.html   1.42K   3 downloads

Edited by pasten, 21 September 2008 - 11:53 AM.

[kudmus]

Interesting! I never knew alt text can be styled. Can you please explain you code more for the benefit of people like me who are a bit lost. Which part of the code makes the background image appear instead of the text itself.

[pasten]

Ok I will do that. First your question:

Quote

Which part of the code makes the background image appear instead of the text itself?

Ans: <span> part of the code with image makes the background image appear instead of the text itself.

Basically here you are not styling alt text ! Actually you are not defining alt at all. because the image text is set as background using css. And hence it doesn't require alt tag and thus you are not violating xhml standards.

You see that second line in css code:

Quote

#h1 span { position:absolute; width:250px; height:70px; left:0; top:0; background:url("heading1.jpg") no-repeat; }

The image is assigned to span element, that is it stays as background for span. And also observe that it is inside h1 element, so by making the background size equal to h1 you are overlapping the text heading. Now always the image appears to the visitor. The text behind it sits tightly behind the image. And in the case if the image doen't download as when the user has disabled viewing of images then the styled text will be shown. I think you understood now.

I will post a working example shortly.

Update:
I brought you the example(Click) as promised. (Don't blame me for that font, that was the only one I could find in my trash box). Just see the source code it has both css and html. I have given explanation in that itself, because you wont like bits of pieces of code here

Now the instructions for what you can see in the page:

1) First view with images enabled in your browser.
2) Now disable images, If you are using Internet explorer go to Tools > Internet options... > Advanced. Here uncheck Show pictures. If you are using Opera there should a show pictures button, just click it to disable. In Firefox you can disable in Options, I dont know exactly, just check it.
Now what do you see? Ans: Text headings.

Important Points to be noted:

The text can be styled using h1 selector. I didnt do, so as not to confuse you. When you are using this technique and when you zoom in, the text behind wont come out (as required). Dont use transparent gifs as the text would be seen. You can use this method for paragraphs (<p> tags) or whatever you choose. Dont just use it for just headings, you can try for navigation buttons.
Talking about accessibility. It is friendly, but in the case when using for real images alt tag is best. As screen readers will clearly tell the alt tags content and describing the image.
Now all that remains is to make best use of ..it.

Help! Can anybody tell me having slow internet connection that whether text is shown first while image is downloading? I think it should as the span is inside h1.

That explains everything. Any more doubts...

Edited by pasten, 21 September 2008 - 11:54 AM.

[BuffaloHelp]

How would this go well with valid CSS? And what if you were to use with AdSense or AdWord? Would it hinder SEO? How would this effect Google search?

I tried to use a similar tactic few months ago and CSS validating caught my little trick (but mine was not as concise as yours). And somewhere in Google help page there was a mentioning of not trying to fool the search engine with clear text, false heading, etc etc.

Would you address these issues if you can?

Thanks.

[pasten]

Quote

How would this go well with valid CSS?

There is no problem with css code. Its perfect, I validated it.

Quote

And what if you were to use with AdSense or AdWord? Would it hinder SEO?

I didn't understand what you wanted to say. What content of adsense or adword you want to use and how?

Quote

How would this effect Google search?

It would probably not effect google search. It depends on how the technique is used. I think google sees the structure to index and the structure contains the text.

Quote

And somewhere in Google help page there was a mentioning of not trying to fool the search engine with clear text, false heading, etc etc.

Ok, then I need to research about it. But the code, in strictest sense is not trying to fool it. What do you think?

Thanks for bringing forth those important issues.

Update:
I just verified that even XHTML is perfectly valid and that to in strict doctype.

Edited by nitish, 29 July 2008 - 04:23 PM.

[jlhaslip]

Another, similar, technique is explained here.