15 replies [Last post]
n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 38 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

I am working on a page that has <h1> - <h5> tags. From what I have gathered from a previous post, using sequential headers can help search engines dig deeper into your site. Is this correct?

My <h1> tag font-size is 64px large, and looks far from smooth along the edges of the text. So my solution is, "visibility: hidden;" Then, I can use a text graphic as a background for my <h1> text. If I disable the style sheet, my original <h1> appears in the markup, which is good. So that means a search engine will find my <h1> tag, right? With the style sheet enabled, I have my desired look.

Is this a method I should be able to use sitewide? Does anyone have any suggestions or opinions on drawbacks to this method, or a different way I can make large text look more smooth?

Thanks,

Nate

This is my big chance . . . yep, I blew it . . .

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

replacing large &lt;h1&gt; text for images

Image replacement is the best way, but instead of visibility:hidden; consider this:

{ text-indent: -9999em; }

That's what I use, AFAIK it's a better way Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 38 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

replacing large &lt;h1&gt; text for images

THP,

Thank you for the suggestion. I tried using { text-indent: -9999em; } instead of { visability: hidden; } and nothing happens, perhaps becuase I have margins?

This is my big chance . . . yep, I blew it . . .

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

replacing large &lt;h1&gt; text for images

It should work; I've used it successfully on this page:

http://www.geocities.com/magicboy2000uk/csscreator/warcraft/

to replace the <h1> tag with the logo.

Very odd :?

Verschwindende wrote:
  • CSS doesn't make pies

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

replacing large &lt;h1&gt; text for images

Aha!

I've tried a few of these methods and never really been happy with any of them. Most don't work well with CSS on and images off and the -999em ones have been known to peek in on big screens (ok very big screens but still).

Try this one: http://wellstyled.com/css-replace-text-by-image.html
Or this one from Stu: http://www.cssplay.co.uk/menu/ir.html

They both use similar methods but will work with CSS on or off and Images on or off plus text readers will read them etc etc.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

replacing large &lt;h1&gt; text for images

Just a quickie, here. I understand search engines absolutely refuse to "see" anything in visibility:hidden and display:none because of too many cute developers trying to hide keywords and whatnot between the "tags".

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 38 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

replacing large &lt;h1&gt; text for images

HellsBells,

Great links, thank you, I have bookmarked them. So do text readers read pages obeying the order of a page's styles?

Example 2 states that "the text will be visible, if the image (for any reason) cannot be displayed."*

*I would have been concerned with the text being hidden if images were blocked with my original method.

This is my big chance . . . yep, I blew it . . .

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 38 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

replacing large &lt;h1&gt; text for images

Lorraine wrote:
Just a quickie, here. I understand search engines absolutely refuse to "see" anything in visibility:hidden and display:none because of too many cute developers trying to hide keywords and whatnot between the "tags".

Well then { visibility: hidden; } is completely out of the question.

This is my big chance . . . yep, I blew it . . .

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

replacing large &lt;h1&gt; text for images

Lorraine's the expert on this - not me - but far as I understand it a text reader will read your page as if it is unstyled.

If you have the nav at the bottom of the page it will read the rest of the page and get to the nav when it appears in the code (if you see what I mean) unless you've included a skip link to the navigation for them to bypass all the content.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 9 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

replacing large &lt;h1&gt; text for images

Quote:
So do text readers read pages obeying the order of a page's styles?

Not really - there's a precise answer for you!
Screen-readers will go through the xHTML in the order it appears in the document. They tend to strip the CSS styles and render unstylised as HellsBells said - except the modern ones still do not "see" anything that is styled visibility:hidden or display:none.

In case of interest here are the results of some tests.
some early tests http://css-discuss.incutio.com/?page=ScreenreaderVisibility
and more recent ones http://www.access-matters.com/screen-reader-test-results/

You should be OK as long as the text exists either behind an image or w..a..y off-screen. One way of getting around huge monitors is to absolutely position text above the top of the viewport.

Remember this is text that is not meant to be visible to the naked eye - there is no real need to make it resizable in IE provided it is reasonably legible when images are turned off. It will resize in FF, anyway, so test text-size increases to see how far you can go before the text peeks out from behind the image - you could use Stu's example as an initial test. Opera is your friend here: it just resizes the image in line with the text.

If placing the text off-screen, v. large negative pixel widths/heights are more reliable than ems, because you are manipulating a pixel-based display.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 38 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

replacing large &lt;h1&gt; text for images

Lorraine, thanks for the low-down. I figured it was too good to be true.

Lorraine wrote:
except the modern ones still do not "see" anything that is styled visibility:hidden or display:none.

I think I'll give making the text display behind an image a try, incase for whatever reasons images cannot be displayed.

Great replies Smile

Nate

This is my big chance . . . yep, I blew it . . .

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 24 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

replacing large &lt;h1&gt; text for images

img replacement is a fussy beast... none of them are fool proof re: accessability, but my preference has always been the ol' text-indent: -9999px;

I think the only downfall to that one was if the user had images off (or something minor)... then you wouldn't get any text either. I mainly like the idea that screen readers and search engines still have access to the text link/header.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

replacing large &lt;h1&gt; text for images

gleddy wrote:
I think the only downfall to that one was if the user had images off (or something minor)... then you wouldn't get any text either. I mainly like the idea that screen readers and search engines still have access to the text link/header.

But honestly, how many people turn images off?

I like this way as it doesn't hide the text, it moves it, so it seems accessible (screenreaders still get the text, and it's viewable in the source code).

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

replacing large &lt;h1&gt; text for images

There are image replacement techniques robust enough to work with images off. There are links to just about every version imaginable at http://css-discuss.incutio.com/?page=ImageReplacement.

I prefer using display:block on an image rendered before the text in a restricted height, overflow:hidden element. No image, no display:block so the text is what shows up. No CSS, no image so the text is what shows up. Check out Anatoly's link and Ryznar's link on the above page.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 38 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

replacing large &lt;h1&gt; text for images

THP wrote:
But honestly, how many people turn images off?

I am not disagreeing with you, but there are people like my mother out there, who have internet security that is more like a prison if you ask me. Unknowingly, I've had my images blocked, because of the image name / size or whatever. Now I am more cautious how I name and size assets, yet I still do not know the thinking of such programs.

Just experimenting, I changed { font-size: 64px; } to { font-size: -64px; }. This seemed to return the <h1> to its default size. Then I tried changing { font-size: 64px; } to { font-size: 0px; } and it is gone. Even when I increase the font size in FF, it remains at 0px. Only tested in IE and FF for PC.

Shucks, rechecked IE, and the font is barely visible set at 0px, I guess need to recheck my glasses. Shock If the background is a solid color, the color of the <h1> could be set to the same as the background.

Chris..S, thanks for that link, I found a lot of other useful info there as well. You are right, there are many ways to skin the cat this time.

This is my big chance . . . yep, I blew it . . .

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 24 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

replacing large &lt;h1&gt; text for images

Quote:

But honestly, how many people turn images off?

yup. I agree with you on that one TPH, that is why I was mentioning that this is the best method as that is the only drawback to this method and from a purist standpoint, that is the drawback.

Otherwise it covers everything re: accessability and SEO requirements.