SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question outlining characters in css

    I am preparing the header text layout and was just wondering if anyone knows a way to outline characters without using a graphic image?

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by peterb View Post
    I am preparing the header text layout and was just wondering if anyone knows a way to outline characters without using a graphic image?
    If you don't mind it not working in IE8, go with text-shadow.

  3. #3
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that's pretty cool. Thanks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    And if you do need it to work in IE (which doesn't even work in IE9, grrr) you could try some JS (although I think IE users don't deserve it!):

    http://www.fetchak.com/ie-css3/
    http://www.impressivewebs.com/css3-t...rnet-explorer/
    http://kilianvalkhof.com/2008/javasc...e-with-jquery/

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Just to add – with regards to the question of "whether you need it to work in IE", you need to consider whether the text is readably without the shadow/outline.

    If you've got white text on a white background, but you use text-shadow to give it an outline and make the letters visible then you definitely need to put something in place for IE-users (whether you go for a scripted solution or a different stylesheet that puts the text in a different colour).

    On the other hand, if you've got sufficient contrast between the text and the background that it will be visible without the text-shadow then it just comes down to aesthetics – how much do you care about IE users seeing the page exactly as you intended it? Or can they make do with the letters plain and unadorned? That's up to you.

  6. #6
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I tested it using Greek as well and it works nicely using arial. Microsoft should just throw away their IE program.
    Thanks everyone.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Or simply...
    Use text shadow for non IE, and include a conditional comment setting the text color to a readable version. No JS needed.
    This is not future proof tho :/

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Or simply...
    Use text shadow for non IE, and include a conditional comment setting the text color to a readable version. No JS needed.
    This is not future proof tho :/
    Is that not pretty much exactly what I said?

    If we knew at what point IE would support text-shadow then you could make it future-proof, by including a max version in the conditional comments, but if we're relying on guesswork then that might go wrong ... it would be safer to leave it as all versions of IE until we get a version of IE that supports it, then try to remember every site where you've used conditional comments in that way and go back and edit the conditional comments to have a max version.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stevie D View Post
    [font=verdana]including a max version in the conditional comments ...
    It probably doesn't matter, as CCs will not be supported beyond IE9 (or is it 8?), and IE10 is supposed to support text shadow.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    St. Francisville, LA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ya'll how about "text-stroke"

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bmorgan1959 View Post
    how about "text-stroke"
    It's not much use outside of Webkit just yet, but certainly another one to look forward to.


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
  •