SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Formatting image alt tags

    Is there a way to format image alt tags (e.g., insert line breaks, bolding a word, etc.)?

    Thanks for your help!
    Joanne Glasspoole
    www.glasspoole.com

  2. #2
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, alt text should only be a short description of what the image is.

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Long since dead, but in need of updating/correction/clarification, just for the record.

    In the case of image links, alt tags will use whatever css is set for the <a> tag as well as responding to whatever specifications are set using pseudo-classes.

    Alternatively, CSS text style declarations can be set for all (or some) occurances of the <img> tag. This means that all img alt tags will appear using the font, font-size, etc... that has been set in the img {…} declaration block.

    Line-breaks cannot be used within the alt tag text.

    Of course, the alt tags will only be visible if the images are not found or are switched off.

    --

    If you are referring to the tooltips, then it is the Title attribute that should be used, not alt tags (though a few browsers will use the alt tag text for tooltips if no title attribute is present).

    Browser title/tool-tips cannot be formatted in any way*, though you could fake them with DHTML if you really needed formatted tooltips.
    (* That being said, I'm 99.9% certain that I once visited a music download site a few months back that had multi-line tooltips. I checked their title attributes to see how they'd done it, but have since lost the link and the note I made for myself.)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    SitePoint Addict Caryn's Avatar
    Join Date
    Aug 2002
    Location
    Sydney, Australia
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've found that you can do multiline alt tags and make them display multilined as well. See the rectangular ads at: http://www.echonews.com/local_businesses/index.html

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think what you've done there is not strictly a multi-line alt description.

    What is happening is that the long alt description is simply being forced onto several lines by the limitations of the td cell width.
    Text within a table cell will not extend beyond the limits of that cell. This also goes for alt text of any image that appears within that cell.
    You have used line breaks in the alt text in order to 'offer' the browser a good place to break the line in order tfor the text to appear more 'set', but the line breaks in your code are not being followed per se.

    Without the table cells limiting the width of the alt text your multi-line alt text would still appear on a single line.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    SitePoint Addict Caryn's Avatar
    Join Date
    Aug 2002
    Location
    Sydney, Australia
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Bill Posters,

    Are you sure about this? I haven't seen any indicator that the cell width dictates the width of the alt tag.

    Do you have an example somewhere?

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Go to this page and hover the mouse:

    http://www.deviantart.com/?tier=wallpaper

    The "title" attribute for the <a> tag is preformatted text, so if you break the title it will also break when the "tooltip" appears.

    For example:
    Code:
    <a href="index.html" title="Enter....
    To the front...
    of the website...
    and be AMAZED">Index</a>
    This will give the multiline title.

    --Vinnie

  8. #8
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by vgarcia
    This will give the multiline title.
    Only in IE, in Moz and Op it will still be single line.

  9. #9
    ********* Genius Mike's Avatar
    Join Date
    Apr 2001
    Location
    Canada
    Posts
    5,458
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    SPF member WaveLan knows how to get a multiline ALT tag.
    Mike
    It's not who I am underneath, but what I do that defines me.

  10. #10
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    &-#010;
    
    (Delete the -)
    Inserts a line break, but I havent tested it very extensively in browsers other than IE.

    I cant remember the code for a tab at the moment, but I believe &-#009; (Delete the -) or somewhere around there.
    Wavelan

  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Caryn
    Hi Bill Posters,

    Are you sure about this? I haven't seen any indicator that the cell width dictates the width of the alt tag.

    Do you have an example somewhere?
    I did a quick test using the code on the page you linked to and found that the cell width was decisive as to how wide the alt text would be.

    Depending on the browser long alt text will either wrap or be clipped. Some browsers will even clip the alt text at the boundaries of the image which it represents.
    Clipping and forced text wrapping are implimented for a good reason. If alt descriptions weren't handled this way then a page with many unshown images could end up with many overlapping and confusing alt descriptions which could make them unreadable.

    It's not declared as any part of a formal standard (afaik) but is presumably a common sense method that browser developers have come to during the development of their product.

    --

    Originally posted by Wavelan
    Code:
    &-#010;
    
    (Delete the -)
    Not in IE5+, Moz or Opera5+ (all Mac)

    I don't *think* such methods work as the alt and title attribute are not handled in exactly the same way as html text and therefore cannot be reliably manipulated in the same way.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •