SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Replacement - Whats your Technique ?

    Hey all,

    Kind of as title states - Whats your technique to implement image replacement over text and have you found some techniques more beneficial than others....?

    Looking forward to hearing lots of different thoughts on this matter...


    Benisjamin

  2. #2
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used to use sIFR... now I use Google Web Fonts. Cheers.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    I probably did not word the original question properly, so Ill try again - Im currently going through a video series off lynda.com called "css for designers", and I know the series was compiled in 2007 so its probably a little out of date with how certain things are achieved now, but one way they style headers alot is through "image replacement" and by that I mean, for example take a standard <h2>, attach a background url to it but then shunt the actual <h2> header "offleft" by -9999px so your just left with the background image - Is this a good practise and do budding designers still use this technique or is there now a different way to achieve the same result ?

    Any comments to clarify this matter would be greatly appreciative.

    Benisjamin

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Location
    Montgomery, Alabama
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by benisjamin View Post
    Hi again,

    I probably did not word the original question properly, so Ill try again - Im currently going through a video series off lynda.com called "css for designers", and I know the series was compiled in 2007 so its probably a little out of date with how certain things are achieved now, but one way they style headers alot is through "image replacement" and by that I mean, for example take a standard <h2>, attach a background url to it but then shunt the actual <h2> header "offleft" by -9999px so your just left with the background image - Is this a good practise and do budding designers still use this technique or is there now a different way to achieve the same result ?

    Any comments to clarify this matter would be greatly appreciative.

    Benisjamin
    Nosebleed! Don't use those terms! I'll get brain damage
    Just kidding..
    Anyway, about this kind of website designing. Frankly speaking, I don't get some of your terms. I was using dreamweaver so I don't know that. But i know a site that teaches techniques about designing. Maybe they can help you.
    Last edited by DaveMaxwell; Mar 28, 2011 at 05:53. Reason: removed fake sig..

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I believe this is good practice as far as SEO goes as it is still outputs it in the source code as a normal heading.

    The down side of doing it this way is that it's a static image, so not very helpful for dynamically built menus and headings as the average user won't know how to or have the means to replace the image if they want the text changing.

    I use this method on logos and company names, parts of the design that i know won't change.

    For dynamic text you need to use a dynamic replacement tool such as sIFR.

    I hope that helps!

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,080
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Yup I still use that with the text-indent. Although I use -999em instead of -9999px. Just personal preference I suppose; both work.

    Take care that when you do this for submit buttons you also need to add text-transform: capitalize to the rule, otherwise it doesn't work in IE7.
    Weird solution, I know.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    A massive negative text-indent for image replacement is a miserable /FAIL/ at accessibility that pretty much misses the POINT of using an image replacement in the first place! That point being that there's text for the user to use when images are disabled -- and many users will turn off images but leave CSS on, or use a browser that does so automatically (like some handhelds).

    This is why I use a variation of gilder-levin, which requires an extra empty element (like a span) as a hook (at least until generated content is real word deployable) to which you apply your image, which is then absolute positioned OVER the text hiding it.

    <h1>Some text<span></span></h1>

    Code:
    h1 {
      position:relative;
      width:320px;
      padding:11px 0;
      font:bold 24px/26px arial,helvetica,sans-serif;
    }
    
    h1 span {
      position:absolute;
      top:0;
      left:0;
      width:320px;
      height:48px;
      background:url(images/h1Logo.png) 0 0 no-repeat;
    }
    I place the span after because at one point or another FF started screwing up the default position of APO's... and having it after also means some other techniques like inline-block corners can be applied.

    There are issues with said approach; it doesn't work with transparencies for example as the text underneat will show through -- but as a rule I don't use alpha .png's since they tend to be fat bloated train wrecks that are painful to work with in the first place... it also breaks for the people using the idiotic 1990's style text-resize that used to be the nyetscape default; where the text zoom would incorrectly resize px elements. Thankfully that's now only an optional setting in FF, so the handful of people using that broken zoom I really could give a flying fig about.

    Besides, that 'zoom text only' setting breaks 99% of the internet ANYWAYS -- just another reason people who actually care about accessibility or worse need it do not use gecko based browsers in the first place.

    Pretty much the best test for a image replacement is to leave CSS on and turn images off -- if the page cannot pass that simple test, yer doing it all wrong.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    A massive negative text-indent for image replacement is a miserable /FAIL/ at accessibility that pretty much misses the POINT of using an image replacement in the first place! That point being that there's text for the user to use when images are disabled -- and many users will turn off images but leave CSS on, or use a browser that does so automatically (like some handhelds).
    This needs to be repeated as often as necessary til this technique (negative text-indent) dies. I've only used negative text-indent in a moment of desperation and was never happy with the results.

    Pretty much the best test for a image replacement is to leave CSS on and turn images off -- if the page cannot pass that simple test, yer doing it all wrong.
    Amen.

    This test is why there are places where we can't use Gilder-Levin though: icons and such things (too small to show all the text), and where we have to decide whether to overflow: hidden the element to stop text from popping out from behind the image upon text-enlarge... which fails CSS-on, images-off + text-enlarge (for logos, I've just been letting the text pop out, but this may cause confusion in some visitors so it's not optimal).

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    This test is why there are places where we can't use Gilder-Levin though: icons and such things (too small to show all the text)
    Which is why I'm NOT a fan of "just icons" in the first place -- I prefer text since how the *** am I supposed to know what that tiny little picture even means.

    THOUGH -- if you are using ICONS instead of text, wouldn't those suddenly be CONTENT? IF they're content, that's when you use a IMG tag with ALT text, and maybe TITLE on the anchor around it. (AND NOT ON THE IMG SINCE THAT MAKES NO SENSE!!!)

    Image replacement is for when it's a presentational affectation replacing text -- if there's no text in the image being used as a replacement, it's not a replacement element, it's CONTENT.

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Which is why I'm NOT a fan of "just icons" in the first place -- I prefer text since how the *** am I supposed to know what that tiny little picture even means.
    Yeah, I remember my mom asking "what's the little flag in the water mean again?" right when the engine was about to explode/catch fire. Smarter cars actually say "ENG. TEMP" on them.

    THOUGH -- if you are using ICONS instead of text, wouldn't those suddenly be CONTENT? IF they're content, that's when you use a IMG tag with ALT text, and maybe TITLE on the anchor around it. (AND NOT ON THE IMG SINCE THAT MAKES NO SENSE!!!)
    Unfortunately, due to browsers being retards, this dies too. The images have dimensions, and when they don't appear, some browsers will retain those dimensions and then try to fit the alt text inside (instead of letting it spill out).

    One neat trick I did with titles was
    Code:
    a[title]:focus:after { 
      content: " " attr(title);
    }
    a[title]:focus:hover:after {
      content: "";
    }
    because one thing I hate about title is how it requires a mouse. Screw that. Of course, if you've got titles on your icons, it's because, as stated above, people aren't being told in the plain text what the hell the goofy things mean.

    Image replacement is for when it's a presentational affectation replacing text -- if there's no text in the image being used as a replacement, it's not a replacement element, it's CONTENT.
    Frankly, if you're not building an application with actual buttons, I believe instead of icons there should be text links. Which the boss then insists gets turned into a goofy cutesy icon. Which is why icons are, indeed, replacing content (whether I agree with cute little images replacing the content or not, that is what they are doing).

    Icons also have the "added benefit" of making the clickable area smaller than they would have if you had just kept link text, making them that much more difficult for people to use.

  11. #11
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm a copycat. I see something that works and copy it. In this case I use whatever SitePoint is using for their logo (Gilder/Levin?)
    Saul

  12. #12
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I've used negative text-indents for some years now. Accessibility is a good argument, sacrificing semantics for accessibility seems fine. I wouldn't agree that negative text-indents completely miss the point. Bots are able to see the text either way but yes, accessibility is sacrificed in place of semantics when using negative text-indents. Good point deathshadow60 I'll take it to heart next project – I really do hate presentational mark-up so much so apart of me wants to keep using negative text indents.
    The only code I hate more than my own is everyone else's.

  13. #13
    SitePoint Enthusiast rainner's Avatar
    Join Date
    Apr 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use a mix of CSS and PHP to create dynamic PNG images for my headers on the fly, in the background using a TTF font file. Sounds crazy, but it's pretty straight forward, you use the PHP file as an image file and it will process and output the image data for you.

    I wrote a tutorial on this a while ago and have the source for use/download.

    Demo: PHP Image Creation

    Source: TrueType Font PNG Image with PHP. ( work )

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rainner View Post
    I use a mix of CSS and PHP to create dynamic PNG images for my headers on the fly
    Hopefully you have it set up to somehow cache those results so if a image fitting that text already exists it just links the file instead of wasting server resources (and hordes of RAM) rebuilding it on every request?

    I've been playing with making a auto-thumbnail script that puts the thumbs in an image directory -- with a .htaccess to route 404's to a php in same... If the thumbnail already exists, it just gets sent. If it does not, the 404 PHP handler loads, it looks for the same file without the _thumb suffix and if it exists it creates it and sends it... otherwise it does the 404.

    That type of handling could really make your routine a bit more... robust.

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Good point deathshadow60 I'll take it to heart next project – I really do hate presentational mark-up so much so apart of me wants to keep using negative text indents.
    I hate it too - but 'empty' unclassed elements don't bother me as much as say... wrapping div with classes on them, presentational tags/attributes (as in elements that only have presentational use like CENTER, ALIGN, etc), or presentational classnames like "red" or "bigtext" -- barf.

    In that way a empty semantically neutral tag like SPAN or DIV? Really not that offensive to me... I don't even mind it with B or I if it's empty.

    Thankfully when/if CSS3 becomes real world deployable it will let us stop adding empty spans to do this, since we can just use generated content instead. Just say :after and no more extra empty sandbag tag.

    Though I won't consider a property real world usable until I can call it in FF and Webkit without the prefixes... since by definition the prefixes mean "unstable", "for testing" and "not for use on deployment sites"

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Bots are able to see the text either way but yes, accessibility is sacrificed in place of semantics when using negative text-indents.
    Yeah bots, fine, whatever, but the problem with neg text indent is... HUMANS. As Crusty already mentioned, we devs can't assume someone with images off also have CSS off. Nor can we assume they've got a screen reader (neg text indent is as accessible to screen readers as to bots). That's why you don't want to use it: it fails images-off, CSS-on.

    And, agreed with Crusty that semantics matter little when elements are empty. User agents are pretty good at ignoring empty elements.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •